hy-app 0.4.13 → 0.5.0

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

@@ -3,95 +3,96 @@ import { HyApp } from '../../typing'
 import type HyIconProps from '../hy-icon/typing'
 
 export interface CellContentVo extends AnyObject {
-  /**
-   * @description 单元格左图标
-   * */
-  icon?: Partial<HyIconProps>
-  /**
-   * @description 单元格标题
-   * */
-  title?: string
-  /**
-   * @description 单元格副标题
-   * */
-  subhead?: string
-  /**
-   * @description 是否禁用单元格
-   * */
-  disabled?: boolean
-  /**
-   * @description 单元格右图标集合
-   * */
-  rightIcon?: Partial<HyIconProps>
-  /**
-   * @description 单元格值
-   * */
-  value?: string | number | boolean
-  /**
-   * @description 跳转页面地址
-   * */
-  url?: string
-  /**
-   * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
-   * */
-  arrowDirection?: HyApp.RotateType
+    /**
+     * @description 单元格左图标
+     * */
+    icon?: Partial<HyIconProps>
+
+    /**
+     * @description 单元格标题
+     * */
+    title?: string
+    /**
+     * @description 单元格副标题
+     * */
+    subhead?: string
+    /**
+     * @description 是否禁用单元格
+     * */
+    disabled?: boolean
+    /**
+     * @description 单元格右图标集合
+     * */
+    rightIcon?: Partial<HyIconProps>
+    /**
+     * @description 单元格值
+     * */
+    value?: string | number | boolean
+    /**
+     * @description 跳转页面地址
+     * */
+    url?: string
+    /**
+     * @description 单元格右侧箭头的方向，可选值为：left，up，down,right
+     * */
+    arrowDirection?: HyApp.RotateType
 }
 export default interface HyCellProps {
-  /**
-   * @description cell列表数据
-   * */
-  list: CellContentVo[]
-  /**
-   * @description 头部标题
-   * */
-  title?: string
-  /**
-   * @description 是否显示标题前缀竖线
-   * */
-  showVertical?: boolean
-  /**
-   * @description 是否显示cell下边框 (默认 true )
-   * */
-  border?: boolean
-  /**
-   * @description 圆角
-   * */
-  borderRadius?: string | number
-  /**
-   * @description 是否禁用cell（默认false）
-   * */
-  disabled?: boolean
-  /**
-   * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
-   * */
-  clickable?: boolean
-  /**
-   * @description 单元的大小，可选值为 large，medium，small
-   * */
-  size?: HyApp.SizeType
-  /**
-   * @description 右侧的内容
-   * */
-  value?: string
-  /**
-   * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
-   * */
-  arrange?: HyApp.LeftRightType | 'center'
-  /**
-   * @description 右侧的图标箭头icon集合
-   * */
-  rightIcon?: Partial<HyIconProps>
-  /**
-   * @description 右侧箭头的方向，可选值为：left，up，down
-   * */
-  arrowDirection?: 'left' | 'up' | 'down' | 'right'
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties
+    /**
+     * @description cell列表数据
+     * */
+    list: CellContentVo[]
+    /**
+     * @description 头部标题
+     * */
+    title?: string
+    /**
+     * @description 是否显示标题前缀竖线
+     * */
+    showVertical?: boolean
+    /**
+     * @description 是否显示cell下边框 (默认 true )
+     * */
+    border?: boolean
+    /**
+     * @description 圆角
+     * */
+    borderRadius?: string | number
+    /**
+     * @description 是否禁用cell（默认false）
+     * */
+    disabled?: boolean
+    /**
+     * @description 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
+     * */
+    clickable?: boolean
+    /**
+     * @description 单元的大小，可选值为 large，medium，small
+     * */
+    size?: HyApp.SizeType
+    /**
+     * @description 右侧的内容
+     * */
+    value?: string
+    /**
+     * @description 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
+     * */
+    arrange?: HyApp.LeftRightType | 'center'
+    /**
+     * @description 右侧的图标箭头icon集合
+     * */
+    rightIcon?: Partial<HyIconProps>
+    /**
+     * @description 右侧箭头的方向，可选值为：left，up，down
+     * */
+    arrowDirection?: 'left' | 'up' | 'down' | 'right'
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface ICellEmits {
-  /** 点击行触发 */
-  (e: 'click', temp: CellContentVo, index: number): void
+    /** 点击行触发 */
+    (e: 'click', temp: CellContentVo, index: number): void
 }

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

@@ -1,166 +1,96 @@
 <template>
-  <view class="hy-check-button">
-    <template v-for="(item, i) in columns_1" :key="i">
-      <HyTag
-        :text="item?.[fieldNames.label] as string"
-        :name="i"
-        :type="type"
-        :size="size"
-        :shape="shape"
-        :disabled="isDisabled(item.disabled)"
-        :plain="!item?.[fieldNames.checked]"
-        @click="onCheckbox"
-      ></HyTag>
-    </template>
-  </view>
+    <view class="hy-check-button">
+        <template v-for="(item, i) in columns_1" :key="i">
+            <HyTag
+                :text="item?.[fieldNames.label] as string"
+                :name="i"
+                :type="type"
+                :size="size"
+                :shape="shape"
+                :disabled="isDisabled(item.disabled)"
+                :plain="!item?.[fieldNames.checked]"
+                @click="onCheckbox"
+            ></HyTag>
+        </template>
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-check-button",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-check-button',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { 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 "../../libs";
-import type { TagParamsVo } from "../hy-tag/typing";
+import { watch, ref } from 'vue'
+import type { ICheckButtonEmits } from './typing'
+import type { CheckboxColumnsVo } from './typing'
+import HyTag from '../hy-tag/hy-tag.vue'
+import { isArray, isNumber } from '../../libs'
+import type { TagParamsVo } from '../hy-tag/typing'
+import checkButtonProps from './props'
 
 /**
  * 该组件内部实现以tag二次封装按钮复选框和单选框
  * @displayName hy-check-button
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 选中得值，selectTypeW为radio是字符串，为checkbox是数组 */
-  modelValue: {
-    type: [String, Number, Array<string | number>],
-    required: true,
-  },
-  /** 选择列表数据 */
-  columns: {
-    type: Array as unknown as PropType<Array<CheckboxColumnsVo>>,
-    default: [],
-    required: true,
-  },
-  /** columns对应得键 */
-  fieldNames: {
-    type: Object as unknown as PropType<IFieldNames>,
-    default: {
-      label: "label",
-      value: "value",
-      checked: "checked",
-    },
-  },
-  /**
-   * 选择单选框还是复选框
-   * @values checkbox, radio
-   * */
-  selectType: {
-    type: String,
-    default: "checkbox",
-  },
-  /** 禁用 */
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  /** 每行几列，每列等宽 */
-  col: {
-    type: String,
-    default: "repeat(3, 1fr)",
-  },
-  /** 设置每行间距,需要加单位 */
-  gap: {
-    type: String,
-    default: "10px",
-  },
-  /**
-   * 标签类型
-   * @values info,primary,success,warning,error
-   * */
-  type: {
-    type: String,
-    default: "primary",
-  },
-  /**
-   * 标签的大小
-   * @values small,medium,large
-   * */
-  size: {
-    type: String,
-    default: "medium",
-  },
-  /**
-   * 标签的形状
-   * @values circle,square
-   * */
-  shape: {
-    type: String,
-    default: "square",
-  },
-});
-const emit = defineEmits<ICheckButtonEmits>();
+const props = defineProps(checkButtonProps)
+const emit = defineEmits<ICheckButtonEmits>()
 
-const isDisabled = (disabledVal?: boolean): boolean =>
-  props.disabled || !!disabledVal;
+const isDisabled = (disabledVal?: boolean): boolean => props.disabled || !!disabledVal
 
-const columns_1 = ref<CheckboxColumnsVo[]>();
+const columns_1 = ref<CheckboxColumnsVo[]>()
 
 watch(
-  () => props.modelValue,
-  (newValue: string | number | (string | number)[]) => {
-    if (!isArray(props.columns) || !props.columns.length) return;
-    columns_1.value = props.columns.map((item) => {
-      if (isArray(newValue)) {
-        item[props.fieldNames.checked] = newValue.includes(
-          item[props.fieldNames.value] as string,
-        );
-      } else {
-        item[props.fieldNames.checked] =
-          newValue === item[props.fieldNames.value];
-      }
-      return item;
-    });
-  },
-  { immediate: true },
-);
+    () => props.modelValue,
+    (newValue: string | number | (string | number)[]) => {
+        if (!isArray(props.columns) || !props.columns.length) return
+        columns_1.value = props.columns.map((item) => {
+            if (isArray(newValue)) {
+                item[props.fieldNames.checked] = newValue.includes(
+                    item[props.fieldNames.value] as string
+                )
+            } else {
+                item[props.fieldNames.checked] = newValue === item[props.fieldNames.value]
+            }
+            return item
+        })
+    },
+    { immediate: true }
+)
 
 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]);
+    if (name !== undefined && 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", props.columns[index]);
-  }
-};
+}
 </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);
-  gap: v-bind(gap);
+    display: grid;
+    grid-template-columns: v-bind(col);
+    gap: v-bind(gap);
 }
 </style>

package/components/hy-check-button/props.ts

@@ -1,20 +1,74 @@
-import type IProps from "./typing";
+import type { CheckboxColumnsVo, IFieldNames } from './typing'
+import type { PropType } from 'vue'
 
-const defaultProps: IProps = {
-  modelValue: "",
-  columns: [],
-  fieldNames: {
-    label: "label",
-    value: "value",
-    checked: "checked",
-  },
-  selectType: "checkbox",
-  disabled: false,
-  col: "repeat(3, 1fr)",
-  gap: "10px",
-  type: "primary",
-  size: "medium",
-  shape: "square",
-};
+const checkButtonProps = {
+    /** 选中得值，selectTypeW为radio是字符串，为checkbox是数组 */
+    modelValue: {
+        type: [String, Number, Array<string | number>],
+        required: true
+    },
+    /** 选择列表数据 */
+    columns: {
+        type: Array as PropType<Array<CheckboxColumnsVo>>,
+        default: [],
+        required: true
+    },
+    /** columns对应得键 */
+    fieldNames: {
+        type: Object as PropType<IFieldNames>,
+        default: {
+            label: 'label',
+            value: 'value',
+            checked: 'checked'
+        }
+    },
+    /**
+     * 选择单选框还是复选框
+     * @values checkbox, radio
+     * */
+    selectType: {
+        type: String,
+        default: 'checkbox'
+    },
+    /** 禁用 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 每行几列，每列等宽 */
+    col: {
+        type: String,
+        default: 'repeat(3, 1fr)'
+    },
+    /** 设置每行间距,需要加单位 */
+    gap: {
+        type: String,
+        default: '10px'
+    },
+    /**
+     * 标签类型
+     * @values info,primary,success,warning,error
+     * */
+    type: {
+        type: String,
+        default: 'primary'
+    },
+    /**
+     * 标签的大小
+     * @values small,medium,large
+     * */
+    size: {
+        type: String,
+        default: 'medium'
+    },
+    /**
+     * 标签的形状
+     * @values circle,square
+     * */
+    shape: {
+        type: String,
+        default: 'square'
+    }
+}
 
-export default defaultProps;
+export default checkButtonProps

package/components/hy-check-button/typing.d.ts

@@ -1,86 +1,87 @@
 export interface CheckboxColumnsVo extends FieldNamesType {
-  /**
-   * @description 显示文本内容
-   * */
-  label?: string
-  /**
-   * @description 值
-   * */
-  value?: string | number
-  /**
-   * @description 是否选中
-   * */
-  checked?: boolean
-  /**
-   * @description 是否禁用
-   * */
-  disabled?: boolean
+    /**
+     * @description 显示文本内容
+     * */
+    label?: string
+    /**
+     * @description 值
+     * */
+    value?: string | number
+    /**
+     * @description 是否选中
+     * */
+    checked?: boolean
+
+    /**
+     * @description 是否禁用
+     * */
+    disabled?: boolean
 }
 export interface IFieldNames {
-  /**
-   * @description 自定义columns的文本键
-   * */
-  label: string
-  /**
-   * @description 自定义columns的值键
-   * */
-  value: string
-  /**
-   * @description 自定义columns的选中键
-   * */
-  checked: string
+    /**
+     * @description 自定义columns的文本键
+     * */
+    label: string
+    /**
+     * @description 自定义columns的值键
+     * */
+    value: string
+    /**
+     * @description 自定义columns的选中键
+     * */
+    checked: string
 }
 
 export type FieldNamesType = {
-  [key in keyof IFieldNames as IFieldNames[key]]?: string | number | boolean
+    [key in keyof IFieldNames as IFieldNames[key]]?: string | number | boolean
 }
 
 export default interface HyCheckButtonProps {
-  /**
-   * @description 选中得值，radio是字符串，checkbox是数组
-   * */
-  modelValue: (string | number) | (string | number)[]
-  /**
-   * @description 选择列表数据
-   * */
-  columns: CheckboxColumnsVo[]
-  /**
-   * @description columns对应得键
-   * */
-  fieldNames?: IFieldNames
-  /**
-   * @description 选择单选框还是复选框
-   * */
-  selectType?: 'checkbox' | 'radio'
-  /**
-   * @description 禁用
-   * */
-  disabled?: boolean
-  /**
-   * @description 每行几列，每列等宽
-   * */
-  col?: string
-  /**
-   * @description 设置每行间距,需要加单位
-   * */
-  gap?: string
-  /**
-   * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
-   * */
-  type?: HyApp.ThemeType
-  /**
-   * @description 标签的大小，large，medium，small （默认 'medium' ）
-   * */
-  size?: HyApp.SizeType
-  /**
-   * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
-   * */
-  shape?: HyApp.ShapeType
+    /**
+     * @description 选中得值，radio是字符串，checkbox是数组
+     * */
+    modelValue: (string | number) | (string | number)[]
+    /**
+     * @description 选择列表数据
+     * */
+    columns: CheckboxColumnsVo[]
+    /**
+     * @description columns对应得键
+     * */
+    fieldNames?: IFieldNames
+    /**
+     * @description 选择单选框还是复选框
+     * */
+    selectType?: 'checkbox' | 'radio'
+    /**
+     * @description 禁用
+     * */
+    disabled?: boolean
+    /**
+     * @description 每行几列，每列等宽
+     * */
+    col?: string
+    /**
+     * @description 设置每行间距,需要加单位
+     * */
+    gap?: string
+    /**
+     * @description 标签类型info、primary、success、warning、error （默认 'primary' ）
+     * */
+    type?: HyApp.ThemeType
+    /**
+     * @description 标签的大小，large，medium，small （默认 'medium' ）
+     * */
+    size?: HyApp.SizeType
+    /**
+     * @description tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
+     * */
+    shape?: HyApp.ShapeType
 }
 
 export interface ICheckButtonEmits {
-  /** 选择触发 */
-  (e: 'change', value: any): void
-  /** 更新值触发 */
-  (e: 'update:modelValue', value: any): void
+    /** 选择触发 */
+    (e: 'change', value: any): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', value: any): void
 }