hy-app 0.4.13 → 0.5.0

package/components/hy-checkbox/typing.d.ts

@@ -2,79 +2,79 @@ import type { CSSProperties } from 'vue'
 import type { CheckboxColumnsVo, IFieldNames } from '../hy-check-button/typing'
 
 export default interface HyCheckboxProps {
-  /**
-   * @description 双向绑定值，数组类型
-   * */
-  modelValue: (string | number)[] | boolean
-  /**
-   * @description 接收数组值
-   * */
-  columns: CheckboxColumnsVo[]
-  /**
-   * @description 自定义接收columns的键
-   * */
-  fieldNames?: IFieldNames
-  /**
-   * @description 形状，square为方形，circle为圆型
-   * */
-  shape?: HyApp.ShapeType
-  /**
-   * @description 复选框大小
-   * */
-  size?: HyApp.SizeType | string | number
-  /**
-   * @description 是否禁用
-   * */
-  disabled?: boolean
-  /**
-   * @description 选中状态下的颜色
-   * */
-  activeColor?: string
-  /**
-   * @description 未选中的颜色
-   * */
-  inactiveColor?: string
-  /**
-   * @description 图标的大小，单位px
-   * */
-  iconSize?: string | number
-  /**
-   * @description 图标颜色
-   * */
-  iconColor?: string
-  /**
-   * @description label的字体大小，px单位
-   * */
-  labelSize?: string | number
-  /**
-   * @description label的颜色
-   * */
-  labelColor?: string
-  /**
-   * @description 勾选图标的对齐方式，left-左边，right-右边
-   * */
-  iconPlacement?: HyApp.LeftRightType
-  /**
-   * @description 竖向配列时，是否显示下划线
-   * */
-  borderBottom?: boolean
-  /**
-   * @description 是否禁止点击提示语选中复选框
-   * */
-  labelDisabled?: boolean
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
-  /**
-   * @description 排列方式，row-横向，column-纵向
-   * */
-  placement?: HyApp.DirectionType
+    /**
+     * @description 双向绑定值，数组类型
+     * */
+    modelValue: (string | number)[] | boolean
+    /**
+     * @description 接收数组值
+     * */
+    columns: CheckboxColumnsVo[]
+    /**
+     * @description 自定义接收columns的键
+     * */
+    fieldNames?: IFieldNames
+    /**
+     * @description 形状，square为方形，circle为圆型
+     * */
+    shape?: HyApp.ShapeType
+    /**
+     * @description 复选框大小
+     * */
+    size?: HyApp.SizeType | string | number
+    /**
+     * @description 是否禁用
+     * */
+    disabled?: boolean
+    /**
+     * @description 选中状态下的颜色
+     * */
+    activeColor?: string
+    /**
+     * @description 未选中的颜色
+     * */
+    inactiveColor?: string
+    /**
+     * @description 图标的大小，单位px
+     * */
+    iconSize?: string | number
+    /**
+     * @description 图标颜色
+     * */
+    iconColor?: string
+    /**
+     * @description label的字体大小，px单位
+     * */
+    labelSize?: string | number
+    /**
+     * @description label的颜色
+     * */
+    labelColor?: string
+    /**
+     * @description 勾选图标的对齐方式，left-左边，right-右边
+     * */
+    iconPlacement?: HyApp.LeftRightType
+    /**
+     * @description 竖向配列时，是否显示下划线
+     * */
+    borderBottom?: boolean
+    /**
+     * @description 是否禁止点击提示语选中复选框
+     * */
+    labelDisabled?: boolean
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
+    /**
+     * @description 排列方式，row-横向，column-纵向
+     * */
+    placement?: HyApp.DirectionType
 }
 
 export interface ICheckBoxEmits {
-  /** 选择触发 */
-  (e: 'change', temp: CheckboxColumnsVo): void
-  /** 更新值触发 */
-  (e: 'update:modelValue', value: any): void
+    /** 选择触发 */
+    (e: 'change', temp: CheckboxColumnsVo): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', value: any): void
 }

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

@@ -1,120 +1,45 @@
 <template>
-  <view class="hy-checkbox-group" :class="bemClass">
-    <slot></slot>
-  </view>
+    <view class="hy-checkbox-group" :class="bemClass">
+        <slot></slot>
+    </view>
 </template>
 
 <script setup lang="ts">
-import { computed, provide, toRefs } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { bem } from "../../libs";
-import type { ICheckBoxGroupEmits } from "./typing";
+import { computed, provide, toRefs } from 'vue'
+import { bem } from '../../libs'
+import type { ICheckBoxGroupEmits } from './typing'
+import checkboxGroupProps from './props'
 
 /**
  * 复选框组件一般用于需要多个选择的场景，需要搭配hy-checkbox-item组件一起使用
  * @displayName hy-checkbox-group
  */
-defineOptions({});
+defineOptions({})
 
-const props = defineProps({
-  /** 双向绑定值，数组类型 */
-  modelValue: {
-    type: Array<string | number>,
-    required: true,
-  },
-  /**
-   * 标签的大小
-   * @values small,medium,large
-   * */
-  size: {
-    type: String,
-    default: "medium",
-  },
-  /**
-   * 标签的形状
-   * @values circle,square
-   * */
-  shape: {
-    type: String,
-    default: "square",
-  },
-  /** 是否禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /** 选中状态下的颜色 */
-  activeColor: String,
-  /** 未选中的颜色 */
-  inactiveColor: {
-    type: String,
-    default: "#c8c9cc",
-  },
-  /** 图标的大小，单位px */
-  iconSize: {
-    type: [String, Number],
-    default: "20",
-  },
-  /** 图标颜色 */
-  iconColor: String,
-  /**
-   * 勾选图标的对齐方式
-   * @values left,right
-   * */
-  iconPlacement: {
-    type: String,
-    default: "left",
-  },
-  /** 竖向配列时，是否显示下划线 */
-  borderBottom: {
-    type: Boolean,
-    default: false,
-  },
-  /** label的字体大小，px单位 */
-  labelSize: [String, Number],
-  /** label的颜色 */
-  labelColor: String,
-  /** 是否禁止点击提示语选中复选框 */
-  labelDisabled: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * 排列方式
-   * @values row,column
-   * */
-  placement: {
-    type: String,
-    default: "row",
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-});
-const emit = defineEmits<ICheckBoxGroupEmits>();
+const props = defineProps(checkboxGroupProps)
+const emit = defineEmits<ICheckBoxGroupEmits>()
 
 const bemClass = computed(() => {
-  return bem("checkbox-group", props, ["placement"]);
-});
+    return bem('checkbox-group', props, ['placement'])
+})
 
 const context = {
-  ...toRefs(props),
-  setCheckedStatus(value: string | number) {
-    let arr = [...props.modelValue];
-    if (props.modelValue?.includes(value)) {
-      arr = props.modelValue?.filter((item) => item !== value);
-    } else {
-      arr.push(value);
+    ...toRefs(props),
+    setCheckedStatus(value: string | number) {
+        let arr = [...props.modelValue]
+        if (props.modelValue?.includes(value)) {
+            arr = props.modelValue?.filter((item) => item !== value)
+        } else {
+            arr.push(value)
+        }
+        emit('update:modelValue', arr)
+        emit('change', arr)
     }
-    emit("update:modelValue", arr);
-    emit("change", arr);
-  },
-};
+}
 
-provide("hy-checkbox-group", context);
+provide('hy-checkbox-group', context)
 </script>
 
 <style lang="scss" scoped>
-@import "./index";
+@import './index';
 </style>

package/components/hy-checkbox-group/props.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties, PropType } from 'vue'
+
+const checkboxGroupProps = {
+    /** 双向绑定值，数组类型 */
+    modelValue: {
+        type: Array<string | number>,
+        required: true
+    },
+    /**
+     * 标签的大小
+     * @values small,medium,large
+     * */
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    /**
+     * 标签的形状
+     * @values circle,square
+     * */
+    shape: {
+        type: String,
+        default: 'square'
+    },
+    /** 是否禁用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 选中状态下的颜色 */
+    activeColor: String,
+    /** 未选中的颜色 */
+    inactiveColor: {
+        type: String,
+        default: '#c8c9cc'
+    },
+    /** 图标的大小，单位px */
+    iconSize: {
+        type: [String, Number],
+        default: '20'
+    },
+    /** 图标颜色 */
+    iconColor: String,
+    /**
+     * 勾选图标的对齐方式
+     * @values left,right
+     * */
+    iconPlacement: {
+        type: String,
+        default: 'left'
+    },
+    /** 竖向配列时，是否显示下划线 */
+    borderBottom: {
+        type: Boolean,
+        default: false
+    },
+    /** label的字体大小，px单位 */
+    labelSize: [String, Number],
+    /** label的颜色 */
+    labelColor: String,
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 排列方式
+     * @values row,column
+     * */
+    placement: {
+        type: String,
+        default: 'row'
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    }
+}
+
+export default checkboxGroupProps

package/components/hy-checkbox-group/typing.d.ts

@@ -1,71 +1,71 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyCheckboxGroupProps {
-  /**
-   * @description 双向绑定值，数组类型
-   * */
-  modelValue: (string | number)[];
-  /**
-   * @description 形状，square为方形，circle为圆型
-   * */
-  shape?: HyApp.ShapeType;
-  /**
-   * @description 复选框大小
-   * */
-  size?: HyApp.SizeType | string | number;
-  /**
-   * @description 是否禁用
-   * */
-  disabled?: boolean;
-  /**
-   * @description 选中状态下的颜色
-   * */
-  activeColor?: string;
-  /**
-   * @description 未选中的颜色
-   * */
-  inactiveColor?: string;
-  /**
-   * @description 图标的大小，单位px
-   * */
-  iconSize?: string | number;
-  /**
-   * @description 图标颜色
-   * */
-  iconColor?: string;
-  /**
-   * @description label的字体大小，px单位
-   * */
-  labelSize?: string | number;
-  /**
-   * @description label的颜色
-   * */
-  labelColor?: string;
-  /**
-   * @description 勾选图标的对齐方式，left-左边，right-右边
-   * */
-  iconPlacement?: HyApp.LeftRightType;
-  /**
-   * @description 竖向配列时，是否显示下划线
-   * */
-  borderBottom?: boolean;
-  /**
-   * @description 是否禁止点击提示语选中复选框
-   * */
-  labelDisabled?: boolean;
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties;
-  /**
-   * @description 排列方式，row-横向，column-纵向
-   * */
-  placement?: HyApp.DirectionType;
+    /**
+     * @description 双向绑定值，数组类型
+     * */
+    modelValue: (string | number)[]
+    /**
+     * @description 形状，square为方形，circle为圆型
+     * */
+    shape?: HyApp.ShapeType
+    /**
+     * @description 复选框大小
+     * */
+    size?: HyApp.SizeType | string | number
+    /**
+     * @description 是否禁用
+     * */
+    disabled?: boolean
+    /**
+     * @description 选中状态下的颜色
+     * */
+    activeColor?: string
+    /**
+     * @description 未选中的颜色
+     * */
+    inactiveColor?: string
+    /**
+     * @description 图标的大小，单位px
+     * */
+    iconSize?: string | number
+    /**
+     * @description 图标颜色
+     * */
+    iconColor?: string
+    /**
+     * @description label的字体大小，px单位
+     * */
+    labelSize?: string | number
+    /**
+     * @description label的颜色
+     * */
+    labelColor?: string
+    /**
+     * @description 勾选图标的对齐方式，left-左边，right-右边
+     * */
+    iconPlacement?: HyApp.LeftRightType
+    /**
+     * @description 竖向配列时，是否显示下划线
+     * */
+    borderBottom?: boolean
+    /**
+     * @description 是否禁止点击提示语选中复选框
+     * */
+    labelDisabled?: boolean
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
+    /**
+     * @description 排列方式，row-横向，column-纵向
+     * */
+    placement?: HyApp.DirectionType
 }
 
 export interface ICheckBoxGroupEmits {
-  /** 选择触发 */
-  (e: "change", temp: CheckboxColumnsVo): void;
-  /** 更新值触发 */
-  (e: "update:modelValue", value: any): void;
+    /** 选择触发 */
+    (e: 'change', temp: CheckboxColumnsVo): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', value: any): void
 }