hy-app 0.3.1 → 0.3.2

package/components/hy-radio/hy-radio.vue

@@ -16,7 +16,11 @@
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
         >
-          <slot name="icon" :iconColor="iconColor" :iconSize="addUnit(sizeType[size] ?? iconSize)">
+          <slot
+            name="icon"
+            :iconColor="iconColor"
+            :iconSize="addUnit(sizeType[size] ?? iconSize)"
+          >
             <HyIcon
               class="hy-radio__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
@@ -31,7 +35,10 @@
         >
           <slot name="label" :record="item">
             <text
-              :class="['hy-radio__text', disabled && 'hy-radio__label-wrap--disabled']"
+              :class="[
+                'hy-radio__text',
+                disabled && 'hy-radio__label-wrap--disabled',
+              ]"
               :style="{
                 color: labelColor,
                 fontSize: addUnit(sizeType[size] ?? labelSize),
@@ -48,30 +55,30 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-radio',
+  name: "hy-radio",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, reactive, ref, toRefs, watch } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IRadioEmits } from './typing'
-import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
-import { addUnit, bem, error } from '../../utils'
-import { IconConfig } from '../../config'
+import { computed, reactive, ref, watch } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IRadioEmits } from "./typing";
+import type { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
+import { addUnit, bem, error } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
  * @displayName hy-radio
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -90,9 +97,9 @@ const props = defineProps({
   fieldNames: {
     type: Object as unknown as PropType<IFieldNames>,
     default: {
-      label: 'label',
-      value: 'value',
-      checked: 'checked',
+      label: "label",
+      value: "value",
+      checked: "checked",
     },
   },
   /**
@@ -101,7 +108,7 @@ const props = defineProps({
    * */
   size: {
     type: String,
-    default: 'medium',
+    default: "medium",
   },
   /**
    * 标签的形状
@@ -109,7 +116,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'square',
+    default: "square",
   },
   /** 是否禁用 */
   disabled: {
@@ -121,12 +128,12 @@ const props = defineProps({
   /** 未选中的颜色 */
   inactiveColor: {
     type: String,
-    default: '#c8c9cc',
+    default: "#c8c9cc",
   },
   /** 图标的大小，单位px */
   iconSize: {
     type: [String, Number],
-    default: '20',
+    default: "20",
   },
   /** 图标颜色 */
   iconColor: String,
@@ -136,7 +143,7 @@ const props = defineProps({
    * */
   iconPlacement: {
     type: String,
-    default: 'left',
+    default: "left",
   },
   /** 竖向配列时，是否显示下划线 */
   borderBottom: {
@@ -158,106 +165,94 @@ const props = defineProps({
    * */
   placement: {
     type: String,
-    default: 'row',
+    default: "row",
   },
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
+    default: () => {},
   },
-})
-const {
-  modelValue,
-  columns,
-  fieldNames,
-  disabled,
-  shape,
-  size,
-  activeColor,
-  inactiveColor,
-  customStyle,
-  borderBottom,
-  placement,
-  iconColor,
-  labelDisabled,
-} = toRefs(props)
-const emit = defineEmits<IRadioEmits>()
+});
+const emit = defineEmits<IRadioEmits>();
 
-const columns_1 = ref()
+const columns_1 = ref<CheckboxColumnsVo[]>();
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
   large: 22,
-})
+});
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue) => {
-    columns_1.value = columns.value.map((item: any) => {
-      item[fieldNames.value.checked] = newValue === item[fieldNames.value.value]
-      return item
-    })
+    columns_1.value = props.columns.map((item: any) => {
+      item[props.fieldNames.checked] =
+        newValue === item[props.fieldNames.value];
+      return item;
+    });
   },
   { immediate: true },
-)
+);
 
-const isDisabled = (disabledVal?: boolean): boolean => disabled.value || !!disabledVal
+const isDisabled = (disabledVal?: boolean): boolean =>
+  props.disabled || !!disabledVal;
 
 /**
  * @description icon颜色
  * */
 const iconColorCom = computed(() => {
   return (check: boolean) => {
-    if (disabled.value) {
+    if (props.disabled) {
       if (check) {
-        return '#c8c9cc'
+        return "#c8c9cc";
       } else {
-        return '#F5F5F5'
+        return "#F5F5F5";
       }
     } else {
-      return iconColor.value || '#ffffff'
+      return props.iconColor || "#ffffff";
     }
-  }
-})
+  };
+});
 /**
  * @description 单选框样式
  * */
 const radioStyle = computed(() => {
-  const style: CSSProperties = {}
-  if (borderBottom.value && placement.value === 'row') {
+  const style: CSSProperties = {};
+  if (props.borderBottom && props.placement === "row") {
     error(
-      '检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效',
-    )
+      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效",
+    );
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
-  if (borderBottom.value && placement.value === 'column') {
-    style.paddingBottom = '8px'
+  if (props.borderBottom && props.placement === "column") {
+    style.paddingBottom = "8px";
   }
-  return Object.assign(style, customStyle.value)
-})
+  return Object.assign(style, props.customStyle);
+});
 const bemClass = computed(() => {
-  return bem('radio-group', props, ['placement'])
-})
+  return bem("radio-group", props, ["placement"]);
+});
 
 /**
  * @description 定义icon的Class类名
  * */
 const iconClasses = computed(() => {
   return (temp: CheckboxColumnsVo): string[] => {
-    let classes: string[] = []
+    let classes: string[] = [];
     // 组件的形状
-    classes.push('hy-radio__icon-wrap--' + shape.value)
+    classes.push("hy-radio__icon-wrap--" + props.shape);
     if (isDisabled(temp?.disabled)) {
-      classes.push('hy-radio__icon-wrap--disabled')
+      classes.push("hy-radio__icon-wrap--disabled");
     }
-    if (temp[fieldNames.value.checked]) {
-      classes.push('hy-radio__icon-wrap--checked')
+    if (temp[props.fieldNames.checked]) {
+      classes.push("hy-radio__icon-wrap--checked");
       if (isDisabled(temp?.disabled)) {
-        classes.push('hy-radio__icon-wrap--disabled--checked')
+        classes.push("hy-radio__icon-wrap--disabled--checked");
       }
     }
-    return classes
-  }
-})
+    return classes;
+  };
+});
 
 /**
  * @description 定义icon的样式
@@ -265,71 +260,64 @@ const iconClasses = computed(() => {
 const iconWrapStyle = computed(() => {
   return (temp: CheckboxColumnsVo): CSSProperties => {
     // checkbox的整体样式
-    const style: CSSProperties = {}
+    const style: CSSProperties = {};
     style.backgroundColor =
-      temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
-        ? activeColor.value
+      temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
+        ? props.activeColor
         : !isDisabled(temp?.disabled)
-          ? '#ffffff'
-          : ''
+          ? "#ffffff"
+          : "";
     style.borderColor =
-      temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
-        ? activeColor.value
-        : inactiveColor.value
-    style.width = addUnit(sizeType[size.value] ?? size.value)
-    style.height = addUnit(sizeType[size.value] ?? size.value)
-    return style
-  }
-})
+      temp[props.fieldNames.checked] && !isDisabled(temp?.disabled)
+        ? props.activeColor
+        : props.inactiveColor;
+    style.width = addUnit(sizeType[props.size] ?? props.size);
+    style.height = addUnit(sizeType[props.size] ?? props.size);
+    return style;
+  };
+});
 
 /**
  * @description 点击图标
  * */
 const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation()
+  e.stopPropagation();
   if (!isDisabled(temp?.disabled)) {
-    setRadioCheckedStatus(temp)
+    setRadioCheckedStatus(temp);
   }
-}
+};
 /**
  * @description 点击整体
  * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation()
-  if (labelDisabled.value || isDisabled(temp?.disabled)) return
-  setRadioCheckedStatus(temp)
-}
+  e.stopPropagation();
+  if (props.labelDisabled || isDisabled(temp?.disabled)) return;
+  setRadioCheckedStatus(temp);
+};
 /**
  * @description 点击label
  * */
 const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
-  e.stopPropagation()
-  if (labelDisabled.value || isDisabled(temp?.disabled)) return
-  setRadioCheckedStatus(temp)
-}
+  e.stopPropagation();
+  if (props.labelDisabled || isDisabled(temp?.disabled)) return;
+  setRadioCheckedStatus(temp);
+};
 
 /**
  * @description 执行函数改变状态传给父值
  * */
 const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
   // 将本组件标记为与原来相反的状态
-  columns_1.value = columns_1.value.map((item) => {
-    if (temp[fieldNames.value.value] === item[fieldNames.value.value]) {
-      item[fieldNames.value.checked] = true
-    } else {
-      item[fieldNames.value.checked] = false
-    }
-    return item
-  })
-  emit('change', temp)
-  emit('update:modelValue', temp[fieldNames.value.value])
-  // 双向绑定
-  // if (this.usedAlone) {
-  // 	this.$emit('update:checked', this.isChecked)
-  // }
-}
+  columns_1.value = columns_1.value?.map((item) => {
+    item[props.fieldNames.checked] =
+      temp[props.fieldNames.value] === item[props.fieldNames.value];
+    return item;
+  });
+  emit("change", temp);
+  emit("update:modelValue", temp[props.fieldNames.value]);
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>