ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 11.7 kB
Source Map (JSON)
{"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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"}