Remove switch and form css
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
philipp lang
parent
19b13133a6
commit
b15b806948
|
|
@ -3,10 +3,8 @@
|
||||||
@import 'tailwindcss/utilities';
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
@import 'base.css';
|
@import 'base.css';
|
||||||
@import 'switch';
|
|
||||||
@import 'layout';
|
@import 'layout';
|
||||||
@import 'buttons';
|
@import 'buttons';
|
||||||
@import 'table';
|
@import 'table';
|
||||||
@import 'bool';
|
@import 'bool';
|
||||||
@import 'form';
|
|
||||||
@import 'editor';
|
@import 'editor';
|
||||||
|
|
|
||||||
|
|
@ -1,313 +0,0 @@
|
||||||
:root {
|
|
||||||
--h-field-sm: 23px;
|
|
||||||
--h-field-base: 35px;
|
|
||||||
--h-field-lg: 42px;
|
|
||||||
--m-field-sm: 0.2rem;
|
|
||||||
--m-field-base: 0.3rem;
|
|
||||||
--m-field-lg: 0.4rem;
|
|
||||||
}
|
|
||||||
.size-sm {
|
|
||||||
height: var(--h-field-sm);
|
|
||||||
}
|
|
||||||
.size-base {
|
|
||||||
height: var(--h-field-base);
|
|
||||||
}
|
|
||||||
.size-lg {
|
|
||||||
height: var(--h-field-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
@apply flex flex-col relative cursor-pointer;
|
|
||||||
input[type="checkbox"] {
|
|
||||||
@apply invisible absolute;
|
|
||||||
& + span {
|
|
||||||
@apply transition-colors duration-300 flex items-center;
|
|
||||||
span {
|
|
||||||
@apply border-2 border-gray-800 relative rounded cursor-pointer flex flex-none justify-center items-center;
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
@apply text-white transition-opacity duration-300;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
& + span {
|
|
||||||
a {
|
|
||||||
@apply text-primary-300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:checked + span svg {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.size-sm {
|
|
||||||
height: auto;
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
min-height: var(--h-field-sm);
|
|
||||||
span {
|
|
||||||
width: var(--h-field-sm);
|
|
||||||
height: var(--h-field-sm);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& + span + span {
|
|
||||||
min-height: var(--h-field-sm);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.size-base {
|
|
||||||
height: auto;
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
min-height: var(--h-field-base);
|
|
||||||
span {
|
|
||||||
width: var(--h-field-base);
|
|
||||||
height: var(--h-field-base);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& + span + span {
|
|
||||||
min-height: var(--h-field-base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.size-lg {
|
|
||||||
height: auto;
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
min-height: var(--h-field-lg);
|
|
||||||
span {
|
|
||||||
width: var(--h-field-lg);
|
|
||||||
height: var(--h-field-lg);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& + span + span {
|
|
||||||
min-height: var(--h-field-lg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-wrap {
|
|
||||||
@apply flex flex-col;
|
|
||||||
|
|
||||||
.field-label {
|
|
||||||
@apply font-semibold leading-none text-gray-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.real-field-wrap {
|
|
||||||
@apply relative flex-none flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-wrap {
|
|
||||||
@apply h-full items-center flex;
|
|
||||||
&:not(.info-wrap-inline) {
|
|
||||||
@apply absolute top-0 right-0;
|
|
||||||
}
|
|
||||||
&.info-wrap-inline {
|
|
||||||
@apply ml-2;
|
|
||||||
}
|
|
||||||
.info-button {
|
|
||||||
@apply text-primary-700;
|
|
||||||
}
|
|
||||||
svg.chevron {
|
|
||||||
@apply text-gray-400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="color"]), select {
|
|
||||||
@apply border-gray-600 text-gray-300 leading-none border-solid bg-gray-700 w-full appearance-none outline-none rounded-lg;
|
|
||||||
&:disabled {
|
|
||||||
@apply bg-gray-400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.switch {
|
|
||||||
input[type="checkbox"] {
|
|
||||||
@apply invisible absolute;
|
|
||||||
& + span {
|
|
||||||
@apply rounded transition-colors duration-300 relative cursor-pointer flex grow h-full;
|
|
||||||
span {
|
|
||||||
@apply absolute flex items-center justify-center;
|
|
||||||
}
|
|
||||||
var {
|
|
||||||
@apply duration-300;
|
|
||||||
transition-property: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.field-wrap-sm {
|
|
||||||
.field-label {
|
|
||||||
@apply text-xs;
|
|
||||||
}
|
|
||||||
input:not([type="checkbox"]), select, input:not([type="color"]) {
|
|
||||||
@apply size-sm text-xs px-1 border;
|
|
||||||
}
|
|
||||||
input[type="color"] {
|
|
||||||
@apply size-sm px-0;
|
|
||||||
}
|
|
||||||
select {
|
|
||||||
@apply pr-6;
|
|
||||||
}
|
|
||||||
.switch {
|
|
||||||
width: calc(var(--h-field-sm) * 2);
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
span:nth-of-type(1) {
|
|
||||||
width: calc(var(--h-field-sm) - var(--m-field-sm));
|
|
||||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
top: var(--m-field-sm);
|
|
||||||
left: var(--m-field-sm);
|
|
||||||
}
|
|
||||||
span:nth-of-type(2) {
|
|
||||||
width: calc(var(--h-field-sm) - var(--m-field-sm));
|
|
||||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
top: var(--m-field-sm);
|
|
||||||
left: calc(100% - var(--h-field-sm));
|
|
||||||
}
|
|
||||||
var {
|
|
||||||
width: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
height: calc(var(--h-field-sm) - var(--m-field-sm) * 2);
|
|
||||||
top: var(--m-field-sm);
|
|
||||||
left: var(--m-field-sm);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
@apply w-2 h-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:checked + span var {
|
|
||||||
left: calc(var(--h-field-sm) + var(--m-field-sm));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-wrap {
|
|
||||||
@apply mr-1;
|
|
||||||
.info-button {
|
|
||||||
@apply w-4 h-4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.field-wrap-base {
|
|
||||||
.field-label {
|
|
||||||
@apply text-sm;
|
|
||||||
}
|
|
||||||
input:not([type="checkbox"]):not([type="color"]), select {
|
|
||||||
@apply size-base text-sm px-2 border-2;
|
|
||||||
}
|
|
||||||
input[type="color"] {
|
|
||||||
@apply size-base px-0;
|
|
||||||
}
|
|
||||||
.switch {
|
|
||||||
width: calc(var(--h-field-base) * 2);
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
span:nth-of-type(1) {
|
|
||||||
width: calc(var(--h-field-base) - var(--m-field-base));
|
|
||||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
top: var(--m-field-base);
|
|
||||||
left: var(--m-field-base);
|
|
||||||
}
|
|
||||||
span:nth-of-type(2) {
|
|
||||||
width: calc(var(--h-field-base) - var(--m-field-base));
|
|
||||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
top: var(--m-field-base);
|
|
||||||
left: calc(100% - var(--h-field-base));
|
|
||||||
}
|
|
||||||
var {
|
|
||||||
width: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
height: calc(var(--h-field-base) - var(--m-field-base) * 2);
|
|
||||||
top: var(--m-field-base);
|
|
||||||
left: var(--m-field-base);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
@apply w-3 h-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:checked + span var {
|
|
||||||
left: calc(var(--h-field-base) + var(--m-field-base));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-wrap {
|
|
||||||
@apply mr-2;
|
|
||||||
.info-button {
|
|
||||||
@apply w-5 h-5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.field-wrap-lg {
|
|
||||||
.field-label {
|
|
||||||
@apply text-sm;
|
|
||||||
}
|
|
||||||
input:not([type="checkbox"]):not([type="color"]), select {
|
|
||||||
@apply size-lg px-3 border-2;
|
|
||||||
}
|
|
||||||
input[type="color"] {
|
|
||||||
@apply size-lg px-0;
|
|
||||||
}
|
|
||||||
.switch {
|
|
||||||
width: calc(var(--h-field-lg) * 2);
|
|
||||||
input[type="checkbox"] {
|
|
||||||
& + span {
|
|
||||||
span:nth-of-type(1) {
|
|
||||||
width: calc(var(--h-field-lg) - var(--m-field-lg));
|
|
||||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
top: var(--m-field-lg);
|
|
||||||
left: var(--m-field-lg);
|
|
||||||
}
|
|
||||||
span:nth-of-type(2) {
|
|
||||||
width: calc(var(--h-field-lg) - var(--m-field-lg));
|
|
||||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
top: var(--m-field-lg);
|
|
||||||
left: calc(100% - var(--h-field-lg));
|
|
||||||
}
|
|
||||||
var {
|
|
||||||
width: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
height: calc(var(--h-field-lg) - var(--m-field-lg) * 2);
|
|
||||||
top: var(--m-field-lg);
|
|
||||||
left: var(--m-field-lg);
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
@apply w-5 h-5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:checked + span var {
|
|
||||||
left: calc(var(--h-field-lg) + var(--m-field-lg));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info-wrap {
|
|
||||||
@apply mr-3;
|
|
||||||
.info-button {
|
|
||||||
@apply w-6 h-6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pointer-events-none {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled, selct:disabled {
|
|
||||||
@apply bg-gray-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-self-end {
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
:root {
|
|
||||||
--margin: 0.2rem;
|
|
||||||
--n-width: 37px;
|
|
||||||
--sm-width: 35px;
|
|
||||||
--sm-margin: 0.2rem;
|
|
||||||
--xs-width: 23px;
|
|
||||||
--xs-margin: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switch {
|
|
||||||
@apply bg-primary-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-switch {
|
|
||||||
input:checked + span {
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display {
|
|
||||||
width: calc(var(--n-width) * 2);
|
|
||||||
height: var(--n-width);
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
var {
|
|
||||||
width: calc(var(--n-width) - var(--margin) * 2);
|
|
||||||
height: calc(var(--n-width) - var(--margin) * 2);
|
|
||||||
top: var(--margin);
|
|
||||||
left: var(--margin);
|
|
||||||
transition: left 0.3s;
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(1) {
|
|
||||||
position: absolute;
|
|
||||||
width: calc(var(--n-width) - var(--margin));
|
|
||||||
height: calc(var(--n-width) - var(--margin) * 2);
|
|
||||||
top: var(--margin);
|
|
||||||
left: var(--margin);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(2) {
|
|
||||||
position: absolute;
|
|
||||||
width: calc(var(--n-width) - var(--margin));
|
|
||||||
height: calc(var(--n-width) - var(--margin) * 2);
|
|
||||||
top: var(--margin);
|
|
||||||
left: calc(100% - var(--n-width));
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .display var {
|
|
||||||
left: calc(var(--n-width) + var(--margin));
|
|
||||||
transition: left 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --------------------------------- small size ---------------------------------- */
|
|
||||||
.inner-field.h-field-sm {
|
|
||||||
input:checked + .display var {
|
|
||||||
left: calc(var(--sm-width) + var(--sm-margin));
|
|
||||||
}
|
|
||||||
|
|
||||||
.display {
|
|
||||||
width: calc(var(--sm-width) * 2);
|
|
||||||
height: var(--sm-width);
|
|
||||||
var {
|
|
||||||
width: calc(var(--sm-width) - var(--sm-margin) * 2);
|
|
||||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
|
||||||
top: var(--sm-margin);
|
|
||||||
left: var(--sm-margin);
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(1) {
|
|
||||||
width: calc(var(--sm-width) - var(--sm-margin));
|
|
||||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
|
||||||
top: var(--sm-margin);
|
|
||||||
left: var(--sm-margin);
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(2) {
|
|
||||||
width: calc(var(--sm-width) - var(--sm-margin));
|
|
||||||
height: calc(var(--sm-width) - var(--sm-margin) * 2);
|
|
||||||
top: var(--sm-margin);
|
|
||||||
left: calc(100% - var(--sm-width));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------------------ very small size -------------------------------- */
|
|
||||||
.inner-field.h-field-xs {
|
|
||||||
input:checked + .display var {
|
|
||||||
left: calc(var(--xs-width) + var(--xs-margin));
|
|
||||||
}
|
|
||||||
|
|
||||||
.display {
|
|
||||||
width: calc(var(--xs-width) * 2);
|
|
||||||
height: var(--xs-width);
|
|
||||||
var {
|
|
||||||
width: calc(var(--xs-width) - var(--xs-margin) * 2);
|
|
||||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
|
||||||
top: var(--xs-margin);
|
|
||||||
left: var(--xs-margin);
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(1) {
|
|
||||||
width: calc(var(--xs-width) - var(--xs-margin));
|
|
||||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
|
||||||
top: var(--xs-margin);
|
|
||||||
left: var(--xs-margin);
|
|
||||||
}
|
|
||||||
& > span:nth-of-type(2) {
|
|
||||||
width: calc(var(--xs-width) - var(--xs-margin));
|
|
||||||
height: calc(var(--xs-width) - var(--xs-margin) * 2);
|
|
||||||
top: var(--xs-margin);
|
|
||||||
left: calc(100% - var(--xs-width));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
@click="visible = !visible"
|
@click="visible = !visible"
|
||||||
v-text="`${modelValue.length} Einträge ausgewählt`"
|
v-text="`${modelValue.length} Einträge ausgewählt`"
|
||||||
></div>
|
></div>
|
||||||
<div v-show="visible" class="absolute w-[max-content] z-30 max-h-[25rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7">
|
<div v-show="visible" class="absolute w-[max-content] z-30 max-h-[25rem] overflow-auto shadow-lg bg-gray-600 border border-gray-500 rounded-lg p-2 top-7 space-y-1">
|
||||||
<div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
|
<div v-for="(option, index) in parsedOptions" :key="index" class="flex items-center space-x-2">
|
||||||
<f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
|
<f-switch :id="`${id}-${index}`" size="sm" :model-value="modelValue.includes(option.id)" :value="option.id" @update:modelValue="trigger(option, $event)"></f-switch>
|
||||||
<div class="text-sm text-gray-200" v-text="option.name"></div>
|
<div class="text-sm text-gray-200" v-text="option.name"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,130 +1,102 @@
|
||||||
<template>
|
<template>
|
||||||
<label
|
<label class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
|
||||||
class="flex relative field-switch cursor-pointer"
|
<f-label v-if="label" :required="false" :value="label"></f-label>
|
||||||
:for="id"
|
<span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
|
||||||
:class="{
|
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer invisible" @keypress="$emit('keypress', $event)" />
|
||||||
'items-center flex-row-reverse space-x-3 space-x-reverse justify-end': inline,
|
<span
|
||||||
'flex-col': !inline,
|
class="relative cursor-pointer h-full rounded peer-focus:bg-red-500 transition-all duration-300 group-[.field-base]:w-[70px] group-[.field-sm]:w-[46px] bg-gray-700 peer-checked:bg-primary-700"
|
||||||
[sizes[size].wrap]: true,
|
></span>
|
||||||
}"
|
<span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
|
||||||
>
|
<ui-sprite
|
||||||
<span
|
class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
|
||||||
v-if="label"
|
src="check"
|
||||||
class="font-semibold leading-none text-gray-400"
|
></ui-sprite
|
||||||
:class="{
|
></span>
|
||||||
'text-xs': size == 'sm',
|
<span class="absolute h-full top-0 group-[.field-base]:left-[35px] group-[.field-sm]:left-[23px] flex-none flex justify-center items-center aspect-square">
|
||||||
'text-sm': size === 'base',
|
<ui-sprite
|
||||||
}"
|
class="relative text-gray-400 flex-none text-white duration-300 group-[.field-base]:w-3 group-[.field-base]:h-3 group-[.field-sm]:w-2 group-[.field-sm]:h-2"
|
||||||
>{{ label }}</span
|
src="close"
|
||||||
>
|
></ui-sprite
|
||||||
<div class="relative flex items-center inner-field mt-1" :class="`h-field-${fieldSize}`">
|
></span>
|
||||||
<span>
|
<var
|
||||||
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
|
class="absolute transition-all duration-300 bg-gray-400 rounded group-[.field-base]:top-[3px] group-[.field-base]:left-[3px] group-[.field-sm]:top-[2px] group-[.field-sm]:left-[2px] group-[.field-base]:w-[29px] group-[.field-sm]:w-[19px] group-[.field-base]:h-[29px] group-[.field-sm]:h-[19px] group-[.field-base]:peer-checked:left-[37px] group-[.field-sm]:peer-checked:left-[25px]"
|
||||||
<span class="relative cursor-pointer peer-focus:bg-red-500 flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
|
></var>
|
||||||
<span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="check"></ui-sprite></span>
|
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||||
<span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="close"></ui-sprite></span>
|
</span>
|
||||||
<var class="absolute overlay bg-gray-400 rounded top-0"></var>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<div v-if="hint" class="ml-2 info-wrap">
|
|
||||||
<div v-tooltip="hint">
|
|
||||||
<ui-sprite src="info-button" class="info-button w-4 h-4 text-primary-700"></ui-sprite>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import {computed} from 'vue';
|
||||||
props: {
|
import useFieldSize from '../../composables/useFieldSize.js';
|
||||||
hint: {
|
|
||||||
default: null,
|
const {sizeClass, fieldHeight} = useFieldSize();
|
||||||
},
|
|
||||||
inline: {
|
const emit = defineEmits(['update:modelValue', 'keypress']);
|
||||||
default: false,
|
|
||||||
type: Boolean,
|
const props = defineProps({
|
||||||
},
|
hint: {
|
||||||
size: {
|
type: String,
|
||||||
default: 'base',
|
default: () => '',
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
id: {
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
default: undefined,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
emits: ['update:modelValue', 'keypress'],
|
size: {
|
||||||
data: function () {
|
type: String,
|
||||||
return {
|
default: () => 'base',
|
||||||
sizes: {
|
|
||||||
sm: {
|
|
||||||
wrap: 'field-wrap-sm',
|
|
||||||
field: 'size-sm',
|
|
||||||
},
|
|
||||||
base: {
|
|
||||||
wrap: 'field-wrap-base',
|
|
||||||
field: 'size-base',
|
|
||||||
},
|
|
||||||
lg: {
|
|
||||||
wrap: 'field-wrap-lg',
|
|
||||||
field: 'size-lg',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
computed: {
|
id: {
|
||||||
v: {
|
type: String,
|
||||||
set(v) {
|
required: true,
|
||||||
if (this.disabled === true) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof this.modelValue === 'boolean') {
|
|
||||||
this.$emit('update:modelValue', v);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var a = this.modelValue.filter((i) => i !== this.value);
|
|
||||||
if (v) {
|
|
||||||
a.push(this.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('update:modelValue', a);
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
if (typeof this.modelValue === 'boolean') {
|
|
||||||
return this.modelValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof this.modelValue === 'undefined') {
|
|
||||||
return this.$emit('update:modelValue', false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.modelValue.indexOf(this.value) !== -1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fieldSize() {
|
|
||||||
var sizes = ['xxs', 'xs', 'sm', 'md', 'lg'];
|
|
||||||
|
|
||||||
var sizeIndex = sizes.findIndex((s) => s === this.size);
|
|
||||||
return sizes[sizeIndex - 1];
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
name: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
validator: (v) => true,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
validator: (v) => true,
|
||||||
|
default: () => undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const v = computed({
|
||||||
|
set: (v) => {
|
||||||
|
if (props.disabled === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof props.modelValue === 'boolean') {
|
||||||
|
emit('update:modelValue', v);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var a = props.modelValue.filter((i) => i !== this.value);
|
||||||
|
if (v) {
|
||||||
|
a.push(this.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:modelValue', a);
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
if (typeof props.modelValue === 'boolean') {
|
||||||
|
return props.modelValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof props.modelValue === 'undefined') {
|
||||||
|
return emit('update:modelValue', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return props.modelValue.indexOf(props.value) !== -1;
|
||||||
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue