ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-radio/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-radio/index.vue"],"sourcesContent":["<template>\r\n  <label :class=\"wrapperClasses\">\r\n    <!-- 圆点 -->\r\n    <span :class=\"contentClasses\">\r\n      <span :class=\"innerClasses\" :style=\"innerStyles\"></span>\r\n      <!-- 输入框 -->\r\n      <input\r\n        type=\"radio\"\r\n        :class=\"inputClasses\"\r\n        :name=\"data.groupName\"\r\n        :disabled=\"inputDisabled\"\r\n        @change=\"handleChange\"\r\n        @focus=\"handleFocus\"\r\n        @blur=\"handleBlur\"\r\n      />\r\n    </span>\r\n    <!-- 内容 -->\r\n    <slot>{{ label }}</slot>\r\n  </label>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  reactive,\r\n  watch,\r\n  inject,\r\n  onMounted,\r\n} from 'vue';\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/radio';\r\nimport { RadioContextKey } from '../ivue-radio-group/types/radio-group';\r\n\r\nconst prefixCls = 'ivue-radio';\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     * 选中时的值，当使用类似 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     * 指定当前选项的 value 值，组合会自动判断当前选择的项目\r\n     *\r\n     * @type {String, Number}\r\n     */\r\n    label: {\r\n      type: [String, Number],\r\n    },\r\n    /**\r\n     * 是否禁用当前项\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: 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     * name 属性\r\n     *\r\n     * @type {String}\r\n     */\r\n    name: {\r\n      type: String,\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     * 输入时是否触发表单的校验\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 IvueRadioGroup = inject(RadioContextKey, {\r\n      default: null,\r\n    });\r\n\r\n    // 输入框禁用\r\n    const inputDisabled = useDisabled();\r\n\r\n    // data\r\n\r\n    const data: any = 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\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 是否有组合\r\n      if (IvueRadioGroup.name) {\r\n        if (props.name && props.name !== IvueRadioGroup.name) {\r\n          /* eslint-disable no-console */\r\n          if (console.warn) {\r\n            console.warn('Name does not match Radio Group name.');\r\n          }\r\n        } else {\r\n          data.groupName = IvueRadioGroup.name;\r\n        }\r\n      }\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}-group--item`]: IvueRadioGroup.name,\r\n          [`${prefixCls}-wrapper--checked`]: currentValue.value,\r\n          [`${prefixCls}-wrapper--disabled`]: inputDisabled.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        },\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: any = {};\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.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    // 当前值\r\n    const currentValue = computed(() => {\r\n      // 有组合\r\n      if (IvueRadioGroup.name) {\r\n        return IvueRadioGroup.currentValue.value === props.label;\r\n      }\r\n      // 没有组合\r\n      else {\r\n        return props.modelValue === props.trueValue;\r\n      }\r\n    });\r\n\r\n    // methods\r\n\r\n    // 改变\r\n    const handleChange = (event) => {\r\n      // 禁用\r\n      if (inputDisabled.value) {\r\n        return false;\r\n      }\r\n\r\n      // 是否选中\r\n      const checked = event.target.checked;\r\n\r\n      // 设置 v-model\r\n      const value = checked ? props.trueValue : props.falseValue;\r\n\r\n      emit('update:modelValue', value);\r\n\r\n      // 组合\r\n      if (IvueRadioGroup.name) {\r\n        // 是否有当前选项值\r\n        if (props.label !== undefined) {\r\n          IvueRadioGroup.change(props.label);\r\n        }\r\n      }\r\n      // 没有组合\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    // 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    // 设置表单对应的输入框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    return {\r\n      prefixCls,\r\n\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      currentValue,\r\n\r\n      // methods\r\n      handleChange,\r\n      handleFocus,\r\n      handleBlur,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_normalizeClass","_createCommentVNode","_createElementVNode","_normalizeStyle"],"mappings":";;;;;AACe,SAAA,YAAA,IAAE,EAAA,MAAA,EAAc,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;IAC3B,KAAA,EAAWA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA;AAAA,GACX,EAAA;AAAA,IAAAC,mBAAY,gBAAE,CAAA;AAAA,IAAAC,mBAAA,MAAA,EAAA;AAAA,MACZ,KAAA,EAAwDF,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA;AAAA,KAAA,EAAA;AAAA,yBAAtB,MAAE,EAAA;AAAA,QAAA,KAAA,EAAAA,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,QACpC,KAAA,EAAYG,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,OACZ,EAQE,MAAA,CAAA,CAAA;AAAA,MAPYF,mBAAA,sBAAA,CAAA;AAAA,MAAAC,mBACN,OAAE,EAAA;AAAA,QACP,IAAM,EAAA,OAAA;AAAA,QACN,KAAA,gBAAU,CAAA,IAAA,CAAa,YAAA,CAAA;AAAA,QACvB,IAAA,EAAM,KAAA,IAAA,CAAA,SAAA;AAAA,QACN,UAAK,IAAA,CAAA,aAAA;AAAA,QACL,QAAI,EAAA,MAAA,4BAAE,KAAA,IAAA,CAAU,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,QAAA,OAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,WAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA;OAGrB,EAAW,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,OACa,CAAA,CAAA;AAAA,IAAAD,mBAAA,gBAAA,CAAA;AAAA;;;;;;;;;"}