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 'base.css';
|
||||
@import 'switch';
|
||||
@import 'layout';
|
||||
@import 'buttons';
|
||||
@import 'table';
|
||||
@import 'bool';
|
||||
@import 'form';
|
||||
@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"
|
||||
v-text="`${modelValue.length} Einträge ausgewählt`"
|
||||
></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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,102 @@
|
|||
<template>
|
||||
<label
|
||||
class="flex relative field-switch cursor-pointer"
|
||||
:for="id"
|
||||
:class="{
|
||||
'items-center flex-row-reverse space-x-3 space-x-reverse justify-end': inline,
|
||||
'flex-col': !inline,
|
||||
[sizes[size].wrap]: true,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
v-if="label"
|
||||
class="font-semibold leading-none text-gray-400"
|
||||
:class="{
|
||||
'text-xs': size == 'sm',
|
||||
'text-sm': size === 'base',
|
||||
}"
|
||||
>{{ label }}</span
|
||||
>
|
||||
<div class="relative flex items-center inner-field mt-1" :class="`h-field-${fieldSize}`">
|
||||
<span>
|
||||
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
|
||||
<span class="relative cursor-pointer peer-focus:bg-red-500 flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
|
||||
<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>
|
||||
<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>
|
||||
<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 class="flex flex-col items-start group" :for="id" :class="sizeClass(size)">
|
||||
<f-label v-if="label" :required="false" :value="label"></f-label>
|
||||
<span class="relative flex-none flex" :class="{'pr-8': hint, [fieldHeight]: true}">
|
||||
<input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer invisible" @keypress="$emit('keypress', $event)" />
|
||||
<span
|
||||
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"
|
||||
></span>
|
||||
<span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
|
||||
<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"
|
||||
src="check"
|
||||
></ui-sprite
|
||||
></span>
|
||||
<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">
|
||||
<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"
|
||||
src="close"
|
||||
></ui-sprite
|
||||
></span>
|
||||
<var
|
||||
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]"
|
||||
></var>
|
||||
<f-hint v-if="hint" :value="hint"></f-hint>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hint: {
|
||||
default: null,
|
||||
},
|
||||
inline: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
size: {
|
||||
default: 'base',
|
||||
required: false,
|
||||
},
|
||||
id: {
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
default: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
default: false,
|
||||
},
|
||||
modelValue: {
|
||||
default: undefined,
|
||||
},
|
||||
<script setup>
|
||||
import {computed} from 'vue';
|
||||
import useFieldSize from '../../composables/useFieldSize.js';
|
||||
|
||||
const {sizeClass, fieldHeight} = useFieldSize();
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'keypress']);
|
||||
|
||||
const props = defineProps({
|
||||
hint: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
emits: ['update:modelValue', 'keypress'],
|
||||
data: function () {
|
||||
return {
|
||||
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',
|
||||
},
|
||||
},
|
||||
};
|
||||
size: {
|
||||
type: String,
|
||||
default: () => 'base',
|
||||
},
|
||||
computed: {
|
||||
v: {
|
||||
set(v) {
|
||||
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];
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
};
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue