element-plus/es/components/checkbox/src/checkbox-button.mjs.map

A Component Library for Vue 3

{"version":3,"file":"checkbox-button.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n  <label :class=\"labelKls\">\n    <input\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\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\n    <span\n      v-if=\"$slots.default || label\"\n      :class=\"ns.be('button', 'inner')\"\n      :style=\"isChecked ? activeStyle : undefined\"\n    >\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxGroupContextKey } from './constants'\nimport { useCheckbox } from './composables'\nimport { checkboxEmits, checkboxPropsDefaults } from './checkbox'\n\nimport type { CSSProperties } from 'vue'\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n  name: 'ElCheckboxButton',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n  isFocused,\n  isChecked,\n  isDisabled,\n  checkboxButtonSize,\n  model,\n  actualValue,\n  handleChange,\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 checkboxGroup = inject(checkboxGroupContextKey, undefined)\nconst ns = useNamespace('checkbox')\n\nconst activeStyle = computed<CSSProperties>(() => {\n  const fillValue = checkboxGroup?.fill?.value ?? ''\n  return {\n    backgroundColor: fillValue,\n    borderColor: fillValue,\n    color: checkboxGroup?.textColor?.value ?? '',\n    boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : undefined,\n  }\n})\n\nconst labelKls = computed(() => {\n  return [\n    ns.b('button'),\n    ns.bm('button', checkboxButtonSize.value),\n    ns.is('disabled', isDisabled.value),\n    ns.is('checked', isChecked.value),\n    ns.is('focus', isFocused.value),\n  ]\n})\n</script>\n"],"mappings":""}