{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-checkbox/index.vue"],"sourcesContent":["<template>\r\n  <label :class=\"wrapperClasses\">\r\n    <!-- 方框外层 -->\r\n    <span :class=\"contentClasses\">\r\n      <!-- 方框 -->\r\n      <span :class=\"innerClasses\" :style=\"innerStyles\"></span>\r\n      <!-- input 有组合 -->\r\n      <input\r\n        v-if=\"isGroup\"\r\n        type=\"checkbox\"\r\n        :class=\"inputClasses\"\r\n        :disabled=\"inputDisabled\"\r\n        :value=\"label\"\r\n        v-model=\"data.groupModel\"\r\n        :name=\"name\"\r\n        @change=\"handleChange\"\r\n        @focus=\"handleFocus\"\r\n        @blur=\"handleBlur\"\r\n      />\r\n      <!-- input 没有组合 -->\r\n      <input\r\n        v-else\r\n        type=\"checkbox\"\r\n        :id=\"inputId\"\r\n        :class=\"inputClasses\"\r\n        :disabled=\"inputDisabled\"\r\n        :name=\"name\"\r\n        :checked=\"currentValue\"\r\n        @change=\"handleChange\"\r\n        @focus=\"handleFocus\"\r\n        @blur=\"handleBlur\"\r\n      />\r\n    </span>\r\n    <!-- 内容 -->\r\n    <span :class=\"textClasses\">\r\n      <slot>{{ label }}</slot>\r\n    </span>\r\n  </label>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent, reactive, watch, inject } from 'vue';\r\n\r\nimport { isCssColor, setTextColor } from '../../utils/helpers';\r\nimport { debugWarn } from '../../utils/error';\r\nimport { useFormItem, useFormItemInputId, useDisabled } from '../../hooks';\r\n\r\n// type\r\nimport type { Props, Data } from './types/checkbox';\r\nimport { CheckboxContextKey } from '../ivue-checkbox-group/types/checkbox-group';\r\n\r\nconst prefixCls = 'ivue-checkbox';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['update:modelValue', 'on-change'],\r\n  props: {\r\n    /**\r\n     * 只在单独使用时有效。可以使用 v-model 双向绑定数据\r\n     *\r\n     * @type {String | Number | Boolean}\r\n     */\r\n    modelValue: {\r\n      type: [String, Number, Boolean],\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否禁用当前项\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * name 属性\r\n     *\r\n     * @type {String}\r\n     */\r\n    name: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用\r\n     *\r\n     * @type {String | Number | Boolean}\r\n     */\r\n    trueValue: {\r\n      type: [String, Number, Boolean],\r\n      default: true,\r\n    },\r\n    /**\r\n     * 没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用\r\n     *\r\n     * @type {String | Number | Boolean}\r\n     */\r\n    falseValue: {\r\n      type: [String, Number, Boolean],\r\n      default: false,\r\n    },\r\n    /**\r\n     * 颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    color: {\r\n      type: String,\r\n      default: 'primary',\r\n    },\r\n    /**\r\n     * 指定当前选项的 value 值，组合会自动判断当前选择的项目\r\n     *\r\n     * @type {String, Number, Boolean}\r\n     */\r\n    label: {\r\n      type: [String, Number, Boolean],\r\n      default: '',\r\n    },\r\n    /**\r\n     * 是否显示边框\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    border: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 设置 indeterminate 状态，只负责样式控制\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    indeterminate: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 输入时是否触发表单的校验\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    validateEvent: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // 组合\r\n    const IvueCheckboxGroup = inject(CheckboxContextKey, {\r\n      default: null,\r\n    });\r\n\r\n    // 输入框禁用\r\n    const inputDisabled = useDisabled();\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * input 焦点\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      focusInner: false,\r\n      /**\r\n       * 组合名称\r\n       *\r\n       * @type {String}\r\n       */\r\n      groupName: props.name,\r\n      /**\r\n       * 组合的 v-model\r\n       *\r\n       * @type {Array}\r\n       */\r\n      groupModel: [],\r\n    });\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapperClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-wrapper`,\r\n        {\r\n          [`${prefixCls}-wrapper--checked`]: currentValue.value,\r\n          [`${prefixCls}-wrapper--disabled`]: inputDisabled.value,\r\n          [`${prefixCls}-group--item`]: isGroup.value,\r\n          [`${prefixCls}-border`]: props.border,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 内容外层\r\n    const contentClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}`,\r\n        {\r\n          [`${prefixCls}-checked`]: currentValue.value,\r\n          [`${prefixCls}-disabled`]: inputDisabled.value,\r\n          [`${prefixCls}-indeterminate`]: props.indeterminate,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 方框 class\r\n    const innerClasses = computed(() => {\r\n      const obj = {\r\n        [`${prefixCls}-focus`]: data.focusInner,\r\n      };\r\n\r\n      // 文字样式\r\n      const isTextColor: any = setTextColor(props.color);\r\n\r\n      if (isTextColor.color && !isCssColor(isTextColor.color)) {\r\n        obj[isTextColor.color] = true;\r\n      }\r\n\r\n      return [`${prefixCls}-inner`, obj];\r\n    });\r\n\r\n    // 方框 style\r\n    const innerStyles = computed(() => {\r\n      const obj: {\r\n        color?: string;\r\n      } = {};\r\n\r\n      // 文字样式\r\n      const isTextColor = setTextColor(props.color);\r\n      if (isTextColor.color && isCssColor(isTextColor.color)) {\r\n        obj.color = isTextColor.color;\r\n      }\r\n\r\n      return obj;\r\n    });\r\n\r\n    // 输入框\r\n    const inputClasses = computed(() => {\r\n      return `${prefixCls}-input`;\r\n    });\r\n\r\n    // 文字 class\r\n    const textClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-label-text`,\r\n        {\r\n          [`${prefixCls}-label-text--disabled`]: inputDisabled.value,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 当前值\r\n    const currentValue = computed(() => {\r\n      // 有组合\r\n      if (isGroup.value) {\r\n        return IvueCheckboxGroup.props.modelValue.indexOf(props.label) >= 0;\r\n      }\r\n      // 没有组合\r\n      else {\r\n        return props.modelValue === props.trueValue;\r\n      }\r\n    });\r\n\r\n    // 是否有组合\r\n    const isGroup = computed(() => {\r\n      if (IvueCheckboxGroup.name) {\r\n        return true;\r\n      }\r\n\r\n      return false;\r\n    });\r\n\r\n    // method\r\n\r\n    // 改变\r\n    const handleChange = (event: Event) => {\r\n      // 禁用\r\n      if (inputDisabled.value) {\r\n        return false;\r\n      }\r\n\r\n      // 是否选中\r\n      const checked = (event.target as HTMLInputElement).checked;\r\n\r\n      // 设置 v-model\r\n      const value = checked ? props.trueValue : props.falseValue;\r\n      emit('update:modelValue', value);\r\n\r\n      // 有组合\r\n      if (isGroup.value) {\r\n        IvueCheckboxGroup.handleChange(data.groupModel);\r\n      } else {\r\n        // 发送事件\r\n        emit('on-change', value);\r\n      }\r\n    };\r\n\r\n    // 获取焦点\r\n    const handleFocus = () => {\r\n      // input 焦点\r\n      data.focusInner = true;\r\n    };\r\n\r\n    // 失去焦点\r\n    const handleBlur = () => {\r\n      // input 焦点\r\n      data.focusInner = false;\r\n    };\r\n\r\n    // 设置表单对应的输入框id\r\n    const { formItem } = useFormItem();\r\n\r\n    // 输入框id\r\n    const { inputId } = useFormItemInputId(props, {\r\n      formItemContext: formItem,\r\n    });\r\n\r\n    // watch\r\n\r\n    // 监听 v-model\r\n    watch(\r\n      () => props.modelValue,\r\n      (value) => {\r\n        // 当前值不符合\r\n        if (!(value === props.trueValue || value === props.falseValue)) {\r\n          throw 'Value should be trueValue or falseValue.';\r\n        }\r\n\r\n        // 输入时是否触发表单的校验\r\n        if (props.validateEvent) {\r\n          formItem?.validate('change').catch((err) => debugWarn(err));\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听组合 v-model\r\n    if (IvueCheckboxGroup.props) {\r\n      watch(\r\n        () => IvueCheckboxGroup.props.modelValue,\r\n        (value: string[]) => {\r\n          data.groupModel = value || [];\r\n        },\r\n        {\r\n          // 同步监听\r\n          immediate: true,\r\n        }\r\n      );\r\n    }\r\n\r\n    return {\r\n      prefixCls,\r\n      // data\r\n      data,\r\n      inputId,\r\n      inputDisabled,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n      contentClasses,\r\n      innerClasses,\r\n      innerStyles,\r\n      inputClasses,\r\n      textClasses,\r\n      currentValue,\r\n      isGroup,\r\n\r\n      // methods\r\n      handleChange,\r\n      handleFocus,\r\n      handleBlur,\r\n      IvueCheckboxGroup,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_normalizeClass","_createCommentVNode","_createElementVNode","_normalizeStyle","_openBlock","_createElementBlock","_Fragment"],"mappings":"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"}