hy-app 0.2.14 → 0.2.16

package/components/hy-cell/hy-cell.vue

@@ -4,14 +4,13 @@
       :class="['hy-cell--title', showVertical && 'hy-cell--title__vertical']"
       v-if="title || $slots['title']"
     >
+      <!-- @slot 标题插槽 -->
       <slot name="title" :title="title">
         <text class="hy-cell--title__text">{{ title }}</text>
       </slot>
     </view>
-    <view
-      class="hy-cell__body"
-      :style="{ 'border-radius': addUnit(borderRadius) }"
-    >
+    <view class="hy-cell__body" :style="{ 'border-radius': addUnit(borderRadius) }">
+      <!-- @slot 整体插槽 -->
       <slot>
         <template v-for="(item, i) in list" :key="i">
           <view
@@ -19,20 +18,18 @@
             :hover-class="containerClass(item)"
             :hover-stay-time="250"
             :style="{
-              borderBottom:
-                border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
+              borderBottom: border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
             }"
             @tap="clickHandler($event, item, i)"
           >
             <view class="hy-cell__body--container__content">
               <view class="hy-cell__body--container__content-icon">
+                <!-- @slot 图标插槽 -->
                 <slot name="icon" :icon="item?.icon">
                   <HyIcon
                     :size="iconSize"
                     :name="item?.icon?.name"
-                    :color="
-                      disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color
-                    "
+                    :color="disabled || item?.disabled ? '#c0c0c0' : item?.icon?.color"
                     :bold="item?.icon?.bold"
                     :customPrefix="item?.icon?.customPrefix"
                     :imgMode="item?.icon?.imgMode"
@@ -47,21 +44,23 @@
               </view>
               <view class="hy-cell__body--container__content-title">
                 <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
+                <!-- @slot 列表标题插槽 -->
                 <slot name="cell-title" :title="item?.title">
                   <text
                     class="hy-cell__body--container__content-title--text"
-                    :class="[
-                      (disabled || item?.disabled) && 'hy-cell--disabled',
-                    ]"
-                    >{{ item?.title }}</text
+                    :class="[(disabled || item?.disabled) && 'hy-cell--disabled']"
                   >
+                    {{ item?.title }}
+                  </text>
                 </slot>
+                <!-- @slot 列表小标题插槽 -->
                 <slot name="sub" v-if="item?.subhead" :sub="item.subhead">
                   <text
                     class="hy-cell__body--container__content-title--sub"
                     :class="[disabled && 'hy-cell--disabled']"
-                    >{{ item.subhead }}</text
                   >
+                    {{ item.subhead }}
+                  </text>
                 </slot>
               </view>
             </view>
@@ -69,58 +68,50 @@
               class="hy-cell__body--container__center"
               :style="{
                 justifyContent:
-                  arrange === 'left'
-                    ? 'flex-start'
-                    : arrange === 'right'
-                      ? 'flex-end'
-                      : 'center',
+                  arrange === 'left' ? 'flex-start' : arrange === 'right' ? 'flex-end' : 'center',
               }"
             >
+              <!-- @slot 值内容插槽 -->
               <slot name="value" :record="item">
                 <text
                   class="hy-cell__body--container__center__value"
                   :class="[disabled && 'hy-cell--disabled']"
                   v-if="value || item?.value"
-                  >{{ item.value || value }}</text
                 >
+                  {{ item.value || value }}
+                </text>
               </slot>
             </view>
             <view
               class="hy-cell__body--container__right-icon"
               :class="[
-                `hy-cell__body--container__right-icon--${
-                  item?.arrowDirection || arrowDirection
-                }`,
+                `hy-cell__body--container__right-icon--${item?.arrowDirection || arrowDirection}`,
               ]"
             >
+              <!-- @slot 右边按钮插槽 -->
               <slot name="right-icon" :icon="item?.rightIcon || rightIcon">
                 <HyIcon
-                  :name="
-                    item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT
-                  "
+                  :name="item?.rightIcon?.name || rightIcon?.name || IconConfig.RIGHT"
                   :color="
                     disabled || item?.disabled
                       ? '#c0c0c0'
                       : item?.rightIcon?.color || rightIcon?.color
                   "
                   :bold="item?.rightIcon?.bold || rightIcon?.bold"
-                  :customPrefix="
-                    item?.rightIcon?.customPrefix || rightIcon?.customPrefix
-                  "
+                  :customPrefix="item?.rightIcon?.customPrefix || rightIcon?.customPrefix"
                   :imgMode="item?.rightIcon?.imgMode || rightIcon?.imgMode"
                   :width="item?.rightIcon?.width || rightIcon?.width"
                   :height="item?.rightIcon?.height || rightIcon?.height"
                   :top="item?.rightIcon?.top || rightIcon?.name"
                   :stop="item?.rightIcon?.stop || rightIcon?.stop"
                   :round="item?.rightIcon?.round || rightIcon?.round"
-                  :customStyle="
-                    item?.rightIcon?.customStyle || rightIcon?.customStyle
-                  "
+                  :customStyle="item?.rightIcon?.customStyle || rightIcon?.customStyle"
                 ></HyIcon>
               </slot>
             </view>
           </view>
 
+          <!-- @slot 底部插槽 -->
           <slot name="bottom" :record="item" />
         </template>
       </slot>
@@ -129,28 +120,104 @@
 </template>
 
 <script lang="ts">
+/**
+ * cell单元格一般用于一组列表的情况，比如个人中心页，设置页等
+ * @displayName hy-cell
+ */
+defineOptions({})
 export default {
-  name: "hy-cell",
+  name: 'hy-cell',
   options: {
     virtualHost: true,
-    styleIsolation: "shared",
+    styleIsolation: 'shared',
   },
-};
+}
 </script>
 
 <script setup lang="ts">
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { CellContentVo } from "./typing";
-import { IconConfig } from "../../config";
+import { computed, toRefs } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { ICellEmits } from './typing'
+import type { CellContentVo } from './typing'
+import { IconConfig } from '../../config'
+import { addUnit } from '../../utils'
 
-import HyIcon from "../hy-icon/hy-icon.vue";
-import { computed, toRefs } from "vue";
-import { addUnit } from "@/package";
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import type HyIconProps from '../hy-icon/typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { size, disabled, clickable, borderRadius } = toRefs(props);
-const emit = defineEmits(["click"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps);
+const props = defineProps({
+  /** cell列表数据 */
+  list: {
+    type: Array as unknown as PropType<Array<CellContentVo>>,
+    default: [],
+    required: true,
+  },
+  /** 头部标题 */
+  title: String,
+  /** 是否显示标题前缀竖线 */
+  showVertical: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示cell下边框 */
+  border: {
+    type: Boolean,
+    default: true,
+  },
+  /** 圆角 */
+  borderRadius: {
+    type: String,
+    default: '5px',
+  },
+  /** 是否禁用cell */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否开启点击反馈(表现为点击时加上灰色背景)  */
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 单元的大小
+   * @values large,medium,small
+   * */
+  size: {
+    type: String,
+    default: 'medium',
+  },
+  /** 右侧的内容 */
+  value: String,
+  /**
+   * 内容是否垂直居中(主要是针对右侧的value部分)
+   * @values left,center,right
+   * */
+  arrange: {
+    type: String,
+    default: 'right',
+  },
+  /** cell列表数据 */
+  rightIcon: {
+    type: Object as unknown as PropType<HyIconProps>,
+  },
+  /**
+   * 右侧箭头的方向
+   * @values left,up,down
+   * */
+  arrowDirection: {
+    type: String,
+    default: 'right',
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+})
+const { size, disabled, clickable, borderRadius } = toRefs(props)
+const emit = defineEmits<ICellEmits>()
 
 /**
  * @description 计算什么时候出现点击状态
@@ -161,45 +228,42 @@ const containerClass = computed(() => {
       !disabled.value &&
         !temp?.disabled &&
         clickable.value &&
-        "hy-cell__body--container__clickable",
+        'hy-cell__body--container__clickable',
     ]
       .filter(Boolean)
-      .join();
-  };
-});
+      .join()
+  }
+})
 const ItemClass = computed(() => {
-  return [
-    "hy-cell__body--container",
-    `hy-cell__body--container__${size.value}`,
-  ];
-});
+  return ['hy-cell__body--container', `hy-cell__body--container__${size.value}`]
+})
 
 const iconSize = computed(() => {
   switch (size.value) {
-    case "large":
-      return 25;
-    case "medium":
-      return 20;
-    case "small":
-      return 15;
+    case 'large':
+      return 25
+    case 'medium':
+      return 20
+    case 'small':
+      return 15
   }
-});
+})
 
 /**
  * @description 点击cell
  * */
 const clickHandler = (e: Event, temp: CellContentVo, index: number) => {
-  if (disabled.value) return;
-  emit("click", temp, index);
+  if (disabled.value) return
+  emit('click', temp, index)
   if (temp?.url) {
     uni.navigateTo({
       url: temp.url,
-    });
+    })
   }
-  e.stopPropagation();
-};
+  e.stopPropagation()
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue'
-import { HyApp } from '@/package/typing/modules/common'
+import { HyApp } from '../../typing'
 import type HyIconProps from '../hy-icon/typing'
 
 export interface CellContentVo extends AnyObject {
@@ -90,3 +90,8 @@ export default interface HyCellProps {
    * */
   customStyle?: CSSProperties
 }
+
+export interface ICellEmits {
+  /** 点击行触发 */
+  (e: 'click', temp: CellContentVo, index: number): void
+}

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

@@ -16,71 +16,140 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件内部实现以tag二次封装按钮复选框和单选框
+ * @displayName hy-check-button
+ */
+defineOptions({})
 export default {
   name: 'hy-check-button',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { toRefs, watch, ref } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { CheckboxColumnsVo } from "./typing";
-import HyTag from "../hy-tag/hy-tag.vue";
+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'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { modelValue, columns, fieldNames, disabled, selectType } = toRefs(props);
-const emit = defineEmits(["change", "update:modelValue"]);
+// 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: true,
+  },
+  /** 每行几列，每列等宽 */
+  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 { modelValue, columns, fieldNames, disabled, selectType } = toRefs(props)
+const emit = defineEmits<ICheckButtonEmits>()
 
-const isDisabled = (disabledVal?: boolean): boolean =>
-  disabled.value || !!disabledVal;
+const isDisabled = (disabledVal?: boolean): boolean => disabled.value || !!disabledVal
 
-const columns_1 = ref<CheckboxColumnsVo[]>();
+const columns_1 = ref<CheckboxColumnsVo[]>()
 
 watch(
   () => modelValue.value,
   (newValue: string | number | (string | number)[]) => {
-    if (!columns.value.length) return;
+    if (!isArray(columns.value) || !columns.value.length) return
     columns_1.value = columns.value.map((item) => {
-      if (Array.isArray(newValue)) {
-        item[fieldNames.value.checked] = newValue.includes(
-          item[fieldNames.value.value] as string,
-        );
+      if (isArray(newValue)) {
+        item[fieldNames.value.checked] = newValue.includes(item[fieldNames.value.value] as string)
       } else {
-        item[fieldNames.value.checked] =
-          newValue === item[fieldNames.value.value];
+        item[fieldNames.value.checked] = newValue === item[fieldNames.value.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];
+  if (selectType.value === 'checkbox') {
+    columns.value[name][fieldNames.value.checked] = !columns.value[name][fieldNames.value.checked]
     emit(
-      "update:modelValue",
+      '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]);
+    emit('update:modelValue', columns.value[name][fieldNames.value.value])
   }
 
-  emit("change", columns.value[name]);
-};
+  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-check-button/typing.d.ts

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