<template> <label class="flex flex-col relative field-switch cursor-pointer" :for="id" :class="{[`size-${outerSize}`]: true}"> <span v-if="label" class="font-semibold leading-none text-gray-400" :class="{ 'text-xs': size == 'sm', 'text-sm': size === null }">{{ label }}</span> <div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`"> <input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" /> <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}"> <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span> <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span> <var class="absolute overlay bg-gray-400 rounded top-0"></var> </span> </div> </label> </template> <script> export default { model: { prop: 'items', event: 'input' }, props: { inset: { type: Boolean, default: false }, size: { default: null, required: false }, id: { required: true }, disabled: { type: Boolean, default: false }, value: { default: false }, label: { default: false }, items: { default: undefined }, size: { default: null, type: String } }, computed: { v: { set(v) { if (this.disabled === true) { return; } if (typeof this.items === 'boolean') { this.$emit('input', v); return; } var a = this.items.filter(i => i !== this.value); if (v) { a.push(this.value); } this.$emit('input', a); }, get() { if (typeof this.items === 'boolean') { return this.items; } if (typeof this.items === 'undefined') { return this.$emit('input', false); } return this.items.indexOf(this.value) !== -1; } }, fieldSize() { var sizes = ['xxs', 'xs', 'sm', 'md', 'lg']; var sizeIndex = sizes.findIndex(s => s === this.size); return sizes[this.inset ? sizeIndex : sizeIndex - 1]; }, outerSize() { var sizes = ['xxs', 'xs', 'sm', 'md', 'lg']; var sizeIndex = sizes.findIndex(s => s === this.size); if (!this.label || this.inset) { sizeIndex--; } return sizes[sizeIndex]; } } }; </script>