@gospore/checkbox 1.0.39 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/checkbox.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":"urBAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAQ,SAAC,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KACT,EAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAIrD,CACT,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAK,MACD,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC3B,CACL,EACAD,EAAK,MACD,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEnD,CACL"}
|
|
1
|
+
{"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":"urBAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAQ,EACvBC,EAAQC,EAAAA,SAAQ,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAAA,SAAS,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAAA,SAAS,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KAClC,EAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAItD,CACR,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAAA,MACI,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC5B,CACJ,EACAD,EAAAA,MACI,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEpD,CACJ,wBA9HIQ,EAAAA,mBAsCQ,QAAA,CArCH,MAAKC,EAAAA,eAAA,iCAA+DlB,EAAA,QAAQ,EAAgBmB,EAAAA,MAAAhB,CAAA,EAAa,QAKzG,MAAOgB,EAAAA,MAAAhB,CAAA,EAAa,QAErBiB,EAAAA,mBAyBM,MAzBNC,EAyBM,CAxBFD,EAAAA,mBAuBO,OAAA,CAtBF,MAAKF,EAAAA,eAAA,sCAA4GR,EAAA,yBAAuDH,EAAA,WAQzKe,cAIEH,EAAAA,MAAAI,EAAAA,eAAA,EAAA,CAHE,MAAM,sBACL,KAAMJ,EAAAA,MAAAK,SAAA,EACP,cAAY,0CAEhBJ,EAAAA,mBAQE,QARFK,EAAAA,WAQEb,EAAA,MAPe,sCACJH,EAAe,MAAAiB,GACxB,KAAK,WACJ,MAAO1B,EAAA,MACP,SAAUA,EAAA,SACV,uBAAOO,EAAA,MAAO,IACd,0BAAUA,EAAA,MAAO,oCALTE,EAAA,KAAe,UASzBU,EAAAA,MAAAd,CAAA,EAAM,SAAjBsB,EAAAA,YAAAV,EAAAA,mBAEM,MAFNW,EAEM,CADFC,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,oBAEZb,EAAAA,mBAAsD,OAAtDc,EAAsDC,EAAAA,gBAAfhC,EAAA,KAAK,EAAA,CAAA"}
|
package/dist/checkbox.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAU,GACzBC,IAAQC,EAAU,GAClBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACnB,OAAOF,EAAgB,SAAU,YAC1BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,GACKa,IAAQD,EAAS,MAAM;AACzB,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAExC,QAAQU,GAAO;AAGX,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEdZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAChCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC1CU,EAAgB,QAAQK;AAAA,YACpBL,EAAgB;AAAA,YAChBV,EAAM;AAAA,UACT,IAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAIrD;AAAA,MACT,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC3B;AAAA,IACL,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEnD;AAAA,IACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACnB,OAAOF,EAAgB,SAAU,YAC1BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,GACKa,IAAQD,EAAS,MAAM;AACzB,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAExC,QAAQU,GAAO;AAGX,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEdZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAChCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC1CU,EAAgB,QAAQK;AAAA,YACpBL,EAAgB;AAAA,YAChBV,EAAM;AAAA,UAClC,IAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAItD;AAAA,MACR,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC5B;AAAA,IACJ,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEpD;AAAA,IACJ,mBA9HIQ,EAsCQ,SAAA;AAAA,MArCH,OAAKC,EAAA;AAAA;+BAA+DlB,EAAA,SAAQ;AAAA,QAAgBmB,EAAAhB,CAAA,EAAa;AAAA;MAKzG,OAAOgB,EAAAhB,CAAA,EAAa;AAAA;MAErBiB,EAyBM,OAzBNC,GAyBM;AAAA,QAxBFD,EAuBO,QAAA;AAAA,UAtBF,OAAKF,EAAA;AAAA;;kCAA4GR,EAAA;AAAA,kCAAuDH,EAAA;AAAA;;;UAQzKe,EAIEH,EAAAI,CAAA,GAAA;AAAA,YAHE,OAAM;AAAA,YACL,MAAMJ,EAAAK,CAAA;AAAA,YACP,eAAY;AAAA;YAEhBJ,EAQE,SARFK,EAQEb,EAAA,OAPe;AAAA,0DACJH,EAAe,QAAAiB;AAAA,YACxB,MAAK;AAAA,YACJ,OAAO1B,EAAA;AAAA,YACP,UAAUA,EAAA;AAAA,YACV,gCAAOO,EAAA,QAAO;AAAA,YACd,mCAAUA,EAAA,QAAO;AAAA;gBALTE,EAAA,KAAe;AAAA;;;MASzBU,EAAAd,CAAA,EAAM,WAAjBsB,KAAAV,EAEM,OAFNW,GAEM;AAAA,QADFC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,kBAEZb,EAAsD,QAAtDc,GAAsDC,EAAfhC,EAAA,KAAK,GAAA,CAAA;AAAA;;;"}
|
package/dist/checkbox.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","vue","checked"],"mappings":"q9BAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAQ,SAAC,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KACT,EAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAIrD,CACT,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEI,OAAAG,EAAA,MACD,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC3B,CACL,EACKD,EAAA,MACD,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEnD,CACL"}
|
|
1
|
+
{"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":"q9BAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAQ,EACvBC,EAAQC,EAAAA,SAAQ,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAAA,SAAS,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAAA,SAAS,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KAClC,EAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAItD,CACR,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAAA,MACI,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC5B,CACJ,EACAD,EAAAA,MACI,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEpD,CACJ,wBA9HIQ,EAAAA,mBAsCQ,QAAA,CArCH,MAAKC,EAAAA,eAAA,iCAA+DlB,EAAA,QAAQ,EAAgBmB,EAAAA,MAAAhB,CAAA,EAAa,QAKzG,MAAOgB,EAAAA,MAAAhB,CAAA,EAAa,QAErBiB,EAAAA,mBAyBM,MAzBNC,EAyBM,CAxBFD,EAAAA,mBAuBO,OAAA,CAtBF,MAAKF,EAAAA,eAAA,sCAA4GR,EAAA,yBAAuDH,EAAA,WAQzKe,cAIEH,EAAAA,MAAAI,EAAAA,eAAA,EAAA,CAHE,MAAM,sBACL,KAAMJ,EAAAA,MAAAK,SAAA,EACP,cAAY,0CAEhBJ,EAAAA,mBAQE,QARFK,EAAAA,WAQEb,EAAA,MAPe,sCACJH,EAAe,MAAAiB,GACxB,KAAK,WACJ,MAAO1B,EAAA,MACP,SAAUA,EAAA,SACV,uBAAOO,EAAA,MAAO,IACd,0BAAUA,EAAA,MAAO,oCALTE,EAAA,KAAe,UASzBU,EAAAA,MAAAd,CAAA,EAAM,SAAjBsB,EAAAA,YAAAV,EAAAA,mBAEM,MAFNW,EAEM,CADFC,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,oBAEZb,EAAAA,mBAAsD,OAAtDc,EAAsDC,EAAAA,gBAAfhC,EAAA,KAAK,EAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/checkbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.41",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"type": "module",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"vue": "^3.4.20"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@fortawesome/fontawesome-svg-core": "^
|
|
30
|
-
"@fortawesome/free-solid-svg-icons": "^
|
|
31
|
-
"@fortawesome/vue-fontawesome": "^3.
|
|
29
|
+
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
|
30
|
+
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
31
|
+
"@fortawesome/vue-fontawesome": "^3.1.2",
|
|
32
32
|
"lodash": "^4.17.21"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@vitejs/plugin-vue": "^
|
|
35
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
36
36
|
"unplugin-vue-macros": "^2.14.5",
|
|
37
|
-
"vite": "^
|
|
37
|
+
"vite": "^7.1.9"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "0de308b5f40ddf1a6729b77cf922ac0a26938b17"
|
|
40
40
|
}
|