{"version":3,"file":"index.mjs","sources":["../../../../src/components/Checkbox/index.vue"],"sourcesContent":["<template>\n  <div class=\"inline-block\">\n    <label class=\"grid grid-cols-[1fr,auto] items-center\">\n      <input\n        :id=\"cuid\"\n        v-model=\"isChecked\"\n        type=\"checkbox\"\n        class=\"hidden\"\n        :disabled=\"props.disabled || props.readonly\"\n      />\n      <div\n        class=\"relative mr-2 box-content h-4 w-4 flex-shrink-0 flex-grow-0 rounded border text-white transition-all duration-100\"\n        :class=\"[\n          isChecked\n            ? 'border-primary-500 bg-primary-500 '\n            : 'border-gray-300  bg-gray-100 dark:border-gray-500 dark:bg-gray-700',\n        ]\"\n      >\n        <PhCheck\n          :class=\"[isChecked ? 'opacity-1' : 'opacity-0']\"\n          size=\"14\"\n          weight=\"bold\"\n          class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform transition-all duration-100\"\n        />\n      </div>\n      <div class=\"w-full select-none\">\n        {{ title }}\n        <slot name=\"title\" />\n      </div>\n\n      <div v-if=\"description || $slots.description\"></div>\n\n      <p v-if=\"description || $slots.description\" class=\"opacity-60 text-sm\">\n        {{ description }}\n        <slot name=\"description\" />\n      </p>\n    </label>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PhCheck } from '@phosphor-icons/vue';\n\nconst props = defineProps({\n  modelValue: {\n    type: [Array, String, Number, Boolean],\n    default: false,\n  },\n  value: {\n    type: [Array, String, Number, Boolean],\n    default: true,\n  },\n  disabledValue: {\n    type: [Array, String, Number, Boolean],\n    default: false,\n  },\n  title: {\n    type: String,\n    default: undefined,\n  },\n  description: {\n    type: String,\n    default: undefined,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n});\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst cuid = '_' + Math.random().toString(36).substr(2, 9);\n\nconst isChecked = computed<boolean>({\n  get(): boolean {\n    if (Array.isArray(props.modelValue)) {\n      return props.modelValue.includes(props.value);\n    } else {\n      return props.modelValue === props.value;\n    }\n  },\n  set(value) {\n    let newModelValue = props.modelValue;\n    if (Array.isArray(newModelValue)) {\n      if (value) {\n        newModelValue.push(props.value);\n      } else {\n        newModelValue.splice(newModelValue.indexOf(props.value), 1);\n      }\n    } else {\n      if (value) {\n        newModelValue = props.value;\n      } else {\n        newModelValue = props.disabledValue;\n      }\n    }\n    emit('update:modelValue', newModelValue);\n    emit('change', newModelValue);\n  },\n});\n</script>\n"],"names":["props","__props","emit","__emit","cuid","isChecked","computed","value","newModelValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,UAAMA,IAAQC,GA8BRC,IAAOC,GAEPC,IAAO,MAAM,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,GAEnDC,IAAYC,EAAkB;AAAA,MAClC,MAAe;AACb,eAAI,MAAM,QAAQN,EAAM,UAAU,IACzBA,EAAM,WAAW,SAASA,EAAM,KAAK,IAErCA,EAAM,eAAeA,EAAM;AAAA,MAEtC;AAAA,MACA,IAAIO,GAAO;AACT,YAAIC,IAAgBR,EAAM;AACtB,QAAA,MAAM,QAAQQ,CAAa,IACzBD,IACYC,EAAA,KAAKR,EAAM,KAAK,IAE9BQ,EAAc,OAAOA,EAAc,QAAQR,EAAM,KAAK,GAAG,CAAC,IAGxDO,IACFC,IAAgBR,EAAM,QAEtBQ,IAAgBR,EAAM,eAG1BE,EAAK,qBAAqBM,CAAa,GACvCN,EAAK,UAAUM,CAAa;AAAA,MAC9B;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}