element-plus
Version:
A Component Library for Vue 3
1 lines • 2.79 kB
Source Map (JSON)
{"version":3,"file":"checkbox2.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n <component\n :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n :for=\"!hasOwnLabel && isLabeledByFormItem ? null : inputId\"\n :class=\"compKls\"\n :aria-controls=\"indeterminate ? ariaControls : null\"\n :aria-checked=\"indeterminate ? 'mixed' : undefined\"\n :aria-label=\"ariaLabel\"\n @click=\"onClickRoot\"\n >\n <span :class=\"spanKls\">\n <input\n :id=\"inputId\"\n v-model=\"model\"\n :class=\"ns.e('original')\"\n type=\"checkbox\"\n :indeterminate=\"indeterminate\"\n :name=\"name\"\n :tabindex=\"tabindex\"\n :disabled=\"isDisabled\"\n v-bind=\"inputBindings\"\n @change=\"handleChange\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n @click.stop\n />\n <span :class=\"ns.e('inner')\" />\n </span>\n <span v-if=\"hasOwnLabel\" :class=\"ns.e('label')\">\n <slot />\n <template v-if=\"!$slots.default\">{{ label }}</template>\n </span>\n </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxEmits, checkboxPropsDefaults } from './checkbox'\nimport { useCheckbox } from './composables'\n\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n name: 'ElCheckbox',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n inputId,\n isLabeledByFormItem,\n isChecked,\n isDisabled,\n isFocused,\n checkboxSize,\n hasOwnLabel,\n model,\n actualValue,\n handleChange,\n onClickRoot,\n} = useCheckbox(props, slots)\n\nconst inputBindings = computed(() => {\n if (\n props.trueValue ||\n props.falseValue ||\n props.trueLabel ||\n props.falseLabel\n ) {\n return {\n 'true-value': props.trueValue ?? props.trueLabel ?? true,\n 'false-value': props.falseValue ?? props.falseLabel ?? false,\n }\n }\n return {\n value: actualValue.value,\n }\n})\n\nconst ns = useNamespace('checkbox')\n\nconst compKls = computed(() => {\n return [\n ns.b(),\n ns.m(checkboxSize.value),\n ns.is('disabled', isDisabled.value),\n ns.is('bordered', props.border),\n ns.is('checked', isChecked.value),\n ]\n})\n\nconst spanKls = computed(() => {\n return [\n ns.e('input'),\n ns.is('disabled', isDisabled.value),\n ns.is('checked', isChecked.value),\n ns.is('indeterminate', props.indeterminate),\n ns.is('focus', isFocused.value),\n ]\n})\n</script>\n"],"mappings":""}