hy-app 0.3.0 → 0.3.2

package/components/hy-check-button/hy-check-button.vue

@@ -2,7 +2,7 @@
   <view class="hy-check-button">
     <template v-for="(item, i) in columns_1" :key="i">
       <HyTag
-        :text="item?.[fieldNames.label] as string | number"
+        :text="item?.[fieldNames.label] as string"
         :name="i"
         :type="type"
         :size="size"
@@ -17,27 +17,28 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-check-button',
+  name: "hy-check-button",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { toRefs, watch, ref, type PropType } from 'vue'
-import type { ICheckButtonEmits, IFieldNames } from './typing'
-import type { CheckboxColumnsVo } from './typing'
-import HyTag from '../hy-tag/hy-tag.vue'
-import { isArray } from '../../utils'
+import { toRefs, watch, ref, type PropType } from "vue";
+import type { ICheckButtonEmits, IFieldNames } from "./typing";
+import type { CheckboxColumnsVo } from "./typing";
+import HyTag from "../hy-tag/hy-tag.vue";
+import { isArray, isNumber } from "../../utils";
+import type { TagParamsVo } from "../hy-tag/typing";
 
 /**
  * 该组件内部实现以tag二次封装按钮复选框和单选框
  * @displayName hy-check-button
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -56,9 +57,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",
     },
   },
   /**
@@ -67,7 +68,7 @@ const props = defineProps({
    * */
   selectType: {
     type: String,
-    default: 'checkbox',
+    default: "checkbox",
   },
   /** 禁用 */
   disabled: {
@@ -77,12 +78,12 @@ const props = defineProps({
   /** 每行几列，每列等宽 */
   col: {
     type: String,
-    default: 'repeat(3, 1fr)',
+    default: "repeat(3, 1fr)",
   },
   /** 设置每行间距,需要加单位 */
   gap: {
     type: String,
-    default: '10px',
+    default: "10px",
   },
   /**
    * 标签类型
@@ -90,7 +91,7 @@ const props = defineProps({
    * */
   type: {
     type: String,
-    default: 'primary',
+    default: "primary",
   },
   /**
    * 标签的大小
@@ -98,7 +99,7 @@ const props = defineProps({
    * */
   size: {
     type: String,
-    default: 'medium',
+    default: "medium",
   },
   /**
    * 标签的形状
@@ -106,51 +107,57 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'square',
+    default: "square",
   },
-})
-const { modelValue, columns, fieldNames, disabled, selectType } = toRefs(props)
-const emit = defineEmits<ICheckButtonEmits>()
+});
+const emit = defineEmits<ICheckButtonEmits>();
 
-const isDisabled = (disabledVal?: boolean): boolean => disabled.value || !!disabledVal
+const isDisabled = (disabledVal?: boolean): boolean =>
+  props.disabled || !!disabledVal;
 
-const columns_1 = ref<CheckboxColumnsVo[]>()
+const columns_1 = ref<CheckboxColumnsVo[]>();
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue: string | number | (string | number)[]) => {
-    if (!isArray(columns.value) || !columns.value.length) return
-    columns_1.value = columns.value.map((item) => {
+    if (!isArray(props.columns) || !props.columns.length) return;
+    columns_1.value = props.columns.map((item) => {
       if (isArray(newValue)) {
-        item[fieldNames.value.checked] = newValue.includes(item[fieldNames.value.value] as string)
+        item[props.fieldNames.checked] = newValue.includes(
+          item[props.fieldNames.value] as string,
+        );
       } else {
-        item[fieldNames.value.checked] = newValue === item[fieldNames.value.value]
+        item[props.fieldNames.checked] =
+          newValue === item[props.fieldNames.value];
       }
-      return item
-    })
+      return item;
+    });
   },
   { immediate: true },
-)
+);
 
-const onCheckbox = ({ name }: { name: number }) => {
-  if (selectType.value === 'checkbox') {
-    columns.value[name][fieldNames.value.checked] = !columns.value[name][fieldNames.value.checked]
-    emit(
-      'update:modelValue',
-      columns.value
-        .filter((item) => item[fieldNames.value.checked])
-        .map((item) => item[fieldNames.value.value]),
-    )
-  } else {
-    emit('update:modelValue', columns.value[name][fieldNames.value.value])
+const onCheckbox = ({ name }: TagParamsVo) => {
+  if (isNumber(name)) {
+    const index = Number(name);
+    if (props.selectType === "checkbox") {
+      props.columns[index][props.fieldNames.checked] =
+        !props.columns[index][props.fieldNames.checked];
+      emit(
+        "update:modelValue",
+        props.columns
+          .filter((item) => item[props.fieldNames.checked])
+          .map((item) => item[props.fieldNames.value]),
+      );
+    } else {
+      emit("update:modelValue", props.columns[index][props.fieldNames.value]);
+    }
+    emit("change", props.columns[index]);
   }
-
-  emit('change', columns.value[name])
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../libs/css/mixin.scss';
+@import "../../libs/css/mixin.scss";
 @include b(check-button) {
   display: grid;
   grid-template-columns: v-bind(col);

package/components/hy-checkbox/hy-checkbox.vue

@@ -16,7 +16,11 @@
           :class="iconClasses(item)"
           :style="iconWrapStyle(item)"
         >
-          <slot name="icon" :iconColor="iconColor" :iconSize="addUnit(iconSize)">
+          <slot
+            name="icon"
+            :iconColor="iconColor"
+            :iconSize="addUnit(iconSize)"
+          >
             <HyIcon
               class="hy-checkbox__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
@@ -51,30 +55,30 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-checkbox',
+  name: "hy-checkbox",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, watch, ref, reactive } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { addUnit, bem, error } from '../../utils'
-import { IconConfig } from '../../config'
-import type { ICheckBoxEmits } from './typing'
-import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
+import { computed, toRefs, watch, ref, reactive } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { addUnit, bem, error } from "../../utils";
+import { IconConfig } from "../../config";
+import type { ICheckBoxEmits } from "./typing";
+import type { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
 
 /**
  * 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
  * @displayName hy-checkbox
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -93,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",
     },
   },
   /**
@@ -104,7 +108,7 @@ const props = defineProps({
    * */
   size: {
     type: String,
-    default: 'medium',
+    default: "medium",
   },
   /**
    * 标签的形状
@@ -112,7 +116,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'square',
+    default: "square",
   },
   /** 是否禁用 */
   disabled: {
@@ -124,12 +128,12 @@ const props = defineProps({
   /** 未选中的颜色 */
   inactiveColor: {
     type: String,
-    default: '#c8c9cc',
+    default: "#c8c9cc",
   },
   /** 图标的大小，单位px */
   iconSize: {
     type: [String, Number],
-    default: '20',
+    default: "20",
   },
   /** 图标颜色 */
   iconColor: String,
@@ -139,7 +143,7 @@ const props = defineProps({
    * */
   iconPlacement: {
     type: String,
-    default: 'left',
+    default: "left",
   },
   /** 竖向配列时，是否显示下划线 */
   borderBottom: {
@@ -161,95 +165,83 @@ const props = defineProps({
    * */
   placement: {
     type: String,
-    default: 'row',
+    default: "row",
   },
   /** 定义需要用到的外部样式 */
   customStyle: {
     type: Object as PropType<CSSProperties>,
   },
-})
-const {
-  modelValue,
-  columns,
-  fieldNames,
-  disabled,
-  shape,
-  size,
-  iconSize,
-  activeColor,
-  inactiveColor,
-  customStyle,
-  borderBottom,
-  placement,
-  labelDisabled,
-} = toRefs(props)
-const emit = defineEmits<ICheckBoxEmits>()
+});
+const emit = defineEmits<ICheckBoxEmits>();
 
-const columns_1 = ref()
+const columns_1 = ref();
 const sizeType: AnyObject = reactive({
   small: 14,
   medium: 18,
   large: 22,
-})
+});
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue: boolean | (string | number)[]) => {
     // 判断数组长度为1可以传true/false
-    if (columns.value?.length === 1 && typeof newValue === 'boolean') {
-      columns.value[0][fieldNames.value.checked] = newValue
-      columns_1.value = columns.value
+    if (props.columns?.length === 1 && typeof newValue === "boolean") {
+      props.columns[0][props.fieldNames.checked] = newValue;
+      columns_1.value = props.columns;
     } else if (Array.isArray(newValue)) {
-      columns_1.value = columns.value.map((item) => {
-        item[fieldNames.value.checked] = newValue.includes(item[fieldNames.value.value] as string)
-        return item
-      })
+      columns_1.value = props.columns.map((item) => {
+        item[props.fieldNames.checked] = newValue.includes(
+          item[props.fieldNames.value] as string,
+        );
+        return item;
+      });
     } else {
-      error('传入值不是数组，请传数组值')
+      error("传入值不是数组，请传数组值");
     }
   },
   { immediate: true },
-)
+);
 
-const isDisabled = (disabledVal?: boolean): boolean => disabled.value || !!disabledVal
+const isDisabled = (disabledVal?: boolean): boolean =>
+  props.disabled || !!disabledVal;
 
 const checkboxStyle = 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('checkbox-group', props, ['placement'])
-})
+  return bem("checkbox-group", props, ["placement"]);
+});
 
 /**
  * @description 定义icon的Class类名
  * */
 const iconClasses = computed(() => {
   return (temp: CheckboxColumnsVo): string[] => {
-    let classes: string[] = []
+    let classes: string[] = [];
     // 组件的形状
-    classes.push('hy-checkbox__icon-wrap--' + shape.value)
+    classes.push("hy-checkbox__icon-wrap--" + props.shape);
     if (isDisabled(temp?.disabled)) {
-      classes.push('hy-checkbox__icon-wrap--disabled')
+      classes.push("hy-checkbox__icon-wrap--disabled");
     }
-    if (temp[fieldNames.value.checked]) {
-      classes.push('hy-checkbox__icon-wrap--checked')
+    if (temp[props.fieldNames.checked]) {
+      classes.push("hy-checkbox__icon-wrap--checked");
       if (isDisabled(temp?.disabled)) {
-        classes.push('hy-checkbox__icon-wrap--disabled--checked')
+        classes.push("hy-checkbox__icon-wrap--disabled--checked");
       }
     }
-    return classes
-  }
-})
+    return classes;
+  };
+});
 
 /**
  * @description 定义icon的样式
@@ -257,48 +249,48 @@ 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 执行函数改变状态传给父值
@@ -306,27 +298,27 @@ const labelClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
 const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
   // 将本组件标记为与原来相反的状态
   columns_1.value = columns_1.value.map((item: CheckboxColumnsVo) => {
-    if (temp[fieldNames.value.value] === item[fieldNames.value.value]) {
-      item[fieldNames.value.checked] = !item[fieldNames.value.checked]
+    if (temp[props.fieldNames.value] === item[props.fieldNames.value]) {
+      item[props.fieldNames.checked] = !item[props.fieldNames.checked];
     }
-    return item
-  })
-  emit('change', temp)
+    return item;
+  });
+  emit("change", temp);
   emit(
-    'update:modelValue',
+    "update:modelValue",
     columns_1.value.length === 1
       ? columns_1.value[0].checked
       : columns_1.value
-          .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
-          .map((item: CheckboxColumnsVo) => item[fieldNames.value.value]),
-  )
+          .filter((item: CheckboxColumnsVo) => item[props.fieldNames.checked])
+          .map((item: CheckboxColumnsVo) => item[props.fieldNames.value]),
+  );
   // 双向绑定
   // if (this.usedAlone) {
   // 	this.$emit('update:checked', this.isChecked)
   // }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>