hy-app 0.1.1 → 0.1.2

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

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   modelValue: "",
@@ -6,7 +6,7 @@ const defaultProps: IProps = {
   fieldNames: {
     label: "label",
     value: "value",
-    checked: "checked"
+    checked: "checked",
   },
   selectType: "checkbox",
   disabled: false,
@@ -14,7 +14,7 @@ const defaultProps: IProps = {
   gap: "10px",
   type: "primary",
   size: "medium",
-  shape: "square"
+  shape: "square",
 };
 
 export default defaultProps;

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

@@ -3,11 +3,11 @@
     <template v-for="(item, i) in columns_1" :key="i">
       <view
         class="hy-checkbox cursor-pointer"
-        @tap.stop="wrapperClickHandler"
+        @tap.stop="wrapperClickHandler($event, item)"
         :style="checkboxStyle"
         :class="[
           `hy-checkbox-label--${iconPlacement}`,
-          borderBottom && placement === 'column' && 'hy-border-bottom'
+          borderBottom && placement === 'column' && 'hy-border-bottom',
         ]"
       >
         <view
@@ -24,7 +24,7 @@
             <HyIcon
               class="hy-checkbox__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
-              :size="addUnit(iconSize)"
+              :size="addUnit(sizeType[size] ?? iconSize)"
               :color="iconColor || '#ffffff'"
             />
           </slot>
@@ -37,7 +37,7 @@
             <text
               :style="{
                 color: labelColor,
-                fontSize: labelSize
+                fontSize: addUnit(sizeType[size] ?? labelSize),
               }"
               >{{ item[fieldNames.label] }}</text
             >
@@ -50,8 +50,10 @@
 
 <script setup lang="ts">
 import defaultProps from "./props";
-import IProps, { CheckboxColumnsVo } from "./typing";
-import { computed, CSSProperties, toRefs, watch, ref } from "vue";
+import type { CheckboxColumnsVo } from "./typing";
+import type IProps from "./typing";
+import { computed, toRefs, watch, ref, reactive } from "vue";
+import type { CSSProperties } from "vue";
 import { addUnit, bem, error } from "../../utils";
 import { IconConfig } from "../../config";
 import HyIcon from "../hy-icon/hy-icon.vue";
@@ -69,11 +71,16 @@ const {
   inactiveColor,
   customStyle,
   borderBottom,
-  placement
+  placement,
 } = toRefs(props);
 const emit = defineEmits(["change", "update:modelValue"]);
 
 const columns_1 = ref();
+const sizeType: AnyObject = reactive({
+  small: 14,
+  medium: 18,
+  large: 22,
+});
 
 watch(
   () => modelValue.value,
@@ -81,7 +88,7 @@ watch(
     if (Array.isArray(newValue)) {
       columns_1.value = columns.value.map((item) => {
         item[fieldNames.value.checked] = newValue.includes(
-          item[fieldNames.value.value] as string
+          item[fieldNames.value.value] as string,
         );
         return item;
       });
@@ -89,7 +96,7 @@ watch(
       error("传入值不是数组，请传数组值");
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const isDisabled = (disabledVal?: boolean): boolean =>
@@ -99,7 +106,7 @@ const checkboxStyle = computed(() => {
   const style: CSSProperties = {};
   if (borderBottom.value && placement.value === "row") {
     error(
-      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效"
+      "检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效",
     );
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
@@ -145,8 +152,8 @@ const iconWrapStyle = computed(() => {
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
         : inactiveColor.value;
-    style.width = addUnit(size.value);
-    style.height = addUnit(size.value);
+    style.width = addUnit(sizeType[size.value] ?? size.value);
+    style.height = addUnit(sizeType[size.value] ?? size.value);
     return style;
   };
 });
@@ -160,6 +167,9 @@ const iconClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
     setRadioCheckedStatus(temp);
   }
 };
+/**
+ * @description 点击整行
+ * */
 const wrapperClickHandler = (e: Event, temp: CheckboxColumnsVo) => {
   e.stopPropagation();
   if (!isDisabled(temp?.disabled)) {
@@ -192,7 +202,7 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
     "update:modelValue",
     columns_1.value
       .filter((item: CheckboxColumnsVo) => item[fieldNames.value.checked])
-      .map((item: CheckboxColumnsVo) => item[fieldNames.value.value])
+      .map((item: CheckboxColumnsVo) => item[fieldNames.value.value]),
   );
   // 双向绑定
   // if (this.usedAlone) {

package/components/hy-checkbox/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -7,10 +7,10 @@ const defaultProps: IProps = {
   fieldNames: {
     label: "label",
     value: "value",
-    checked: "checked"
+    checked: "checked",
   },
   shape: "square",
-  size: 18,
+  size: "medium",
   disabled: false,
   activeColor: ColorConfig.primary,
   inactiveColor: "#c8c9cc",
@@ -18,11 +18,10 @@ const defaultProps: IProps = {
   iconColor: "",
   iconPlacement: "left",
   borderBottom: false,
-  label: "",
   labelSize: "",
   labelColor: "",
   labelDisabled: "",
-  placement: "row"
+  placement: "row",
 };
 
 export default defaultProps;

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

@@ -1,5 +1,6 @@
 import type { CSSProperties } from "vue";
-import { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
+import type { CheckboxColumnsVo, IFieldNames } from "../hy-check-button/typing";
+import { HyApp } from "@/package/typing/modules/common";
 
 export default interface IProps {
   /**
@@ -21,7 +22,7 @@ export default interface IProps {
   /**
    * @description 复选框大小
    * */
-  size?: string | number;
+  size?: HyApp.SizeType | string | number;
   /**
    * @description 是否禁用
    * */
@@ -42,10 +43,6 @@ export default interface IProps {
    * @description 图标颜色
    * */
   iconColor?: string;
-  /**
-   * @description label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
-   * */
-  label?: string;
   /**
    * @description label的字体大小，px单位
    * */

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import dayjs from "dayjs/esm";
 import { error, padZero } from "../../utils";
 import { DateModeEnum } from "../../typing";
@@ -79,14 +79,14 @@ const {
   minHour,
   maxHour,
   minMinute,
-  maxMinute
+  maxMinute,
 } = toRefs(props);
 const emit = defineEmits([
   "close",
   "cancel",
   "confirm",
   "change",
-  "update:modelValue"
+  "update:modelValue",
 ]);
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
@@ -100,7 +100,7 @@ const validModes = new Set([
   DateModeEnum.TIME,
   DateModeEnum.MONTH_DAY,
   DateModeEnum.HOUR_MINUTE,
-  DateModeEnum.MINUTE_SECOND
+  DateModeEnum.MINUTE_SECOND,
 ]);
 
 /**
@@ -110,7 +110,7 @@ const updateColumns = () => {
   const formatterFn = formatter.value || innerFormatter;
   // 获取各列的值，并且map后，对各列的具体值进行补0操作
   columns.value = getOriginColumns().map((column) =>
-    column.values.map((value) => formatterFn(column.type, value))
+    column.values.map((value) => formatterFn(column.type, value)),
   );
 };
 
@@ -122,7 +122,7 @@ const updateColumnValue = (value: string | number) => {
   updateColumns();
   // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
   setTimeout(() => {
-    updateIndexs(value);
+    updateIndexes(value);
   }, 100);
 };
 
@@ -142,12 +142,12 @@ watch(
     if (newValue) {
       updateColumnValue(innerValue.value);
     }
-  }
+  },
 );
 
 watch(
   () => modelValue.value,
-  () => init()
+  () => init(),
 );
 
 const propsChange = computed(() => {
@@ -159,13 +159,13 @@ const propsChange = computed(() => {
     maxHour.value,
     minMinute.value,
     maxMinute.value,
-    filter.value
+    filter.value,
   ];
 });
 
 watch(
   () => propsChange.value,
-  () => init()
+  () => init(),
 );
 
 onMounted(() => {
@@ -254,7 +254,7 @@ const confirm = () => {
   }
   emit("confirm", {
     value: innerValue.value,
-    mode: mode.value
+    mode: mode.value,
   });
 };
 
@@ -287,12 +287,12 @@ const change = (e: any) => {
   if (validModes.has(mode.value) && mode.value !== DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
     selectValue = `${intercept(values[0][indexs[0]])}:${intercept(
-      values[1][indexs[1]]
+      values[1][indexs[1]],
     )}`;
   } else if (mode.value === DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
     selectValue = `${intercept(values[0][indexs[0]])}-${intercept(
-      values[1][indexs[1]]
+      values[1][indexs[1]],
     )}`;
   } else {
     // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
@@ -325,15 +325,15 @@ const change = (e: any) => {
     // 微信小程序不能传递this实例，会因为循环引用而报错
     // picker: this.$refs.picker,
     // #endif
-    mode: mode.value
+    mode: mode.value,
   });
 };
 
 /**
  * @description 更新索引
  * */
-const updateIndexs = (value: number | string) => {
-  let values = [];
+const updateIndexes = (value: number | string) => {
+  let values: string[] = [];
   let timeArr: string[] = [];
   const formatterFn = formatter.value || innerFormatter;
 
@@ -343,7 +343,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1])
+        formatterFn("minute", timeArr[1]),
       ];
       break;
     case DateModeEnum.MONTH_DAY:
@@ -351,7 +351,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("month", timeArr[0]),
-        formatterFn("day", timeArr[1])
+        formatterFn("day", timeArr[1]),
       ];
       break;
     case DateModeEnum.HOUR_MINUTE:
@@ -359,7 +359,7 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1])
+        formatterFn("minute", timeArr[1]),
       ];
       break;
     case DateModeEnum.MINUTE_SECOND:
@@ -367,14 +367,14 @@ const updateIndexs = (value: number | string) => {
       // 使用formatter格式化方法进行管道处理
       values = [
         formatterFn("minute", timeArr[0]),
-        formatterFn("second", timeArr[1])
+        formatterFn("second", timeArr[1]),
       ];
       break;
     default:
       values = [
         formatterFn("year", `${dayjs(value).year()}`),
         // 月份补0
-        formatterFn("month", padZero(dayjs(value).month() + 1))
+        formatterFn("month", padZero(dayjs(value).month() + 1)),
       ];
       if (mode.value === DateModeEnum.DATE) {
         // date模式，需要添加天列
@@ -386,7 +386,7 @@ const updateIndexs = (value: number | string) => {
           formatterFn("day", padZero(dayjs(value).date())),
           formatterFn("hour", padZero(dayjs(value).hour())),
           formatterFn("minute", padZero(dayjs(value).minute())),
-          formatterFn("second", padZero(dayjs(value).second()))
+          formatterFn("second", padZero(dayjs(value).second())),
         );
       }
       break;
@@ -396,7 +396,7 @@ const updateIndexs = (value: number | string) => {
     // 通过取大值，可以保证不会出现找不到索引的"-1"情况
     return Math.max(
       0,
-      column.findIndex((item: string) => item === values[index])
+      column.findIndex((item: string) => item === values[index]),
     );
   });
 };
@@ -456,47 +456,47 @@ const getRanges = () => {
     return [
       {
         type: "hour",
-        range: [props.minHour, props.maxHour]
+        range: [props.minHour, props.maxHour],
       },
       {
         type: "minute",
-        range: [props.minMinute, props.maxMinute]
-      }
+        range: [props.minMinute, props.maxMinute],
+      },
     ];
   }
   const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
     "max",
-    innerValue.value
+    innerValue.value,
   );
   const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
     "min",
-    innerValue.value
+    innerValue.value,
   );
   const result = [
     {
       type: "year",
-      range: [minYear, maxYear]
+      range: [minYear, maxYear],
     },
     {
       type: "month",
-      range: [minMonth, maxMonth]
+      range: [minMonth, maxMonth],
     },
     {
       type: "day",
-      range: [minDate, maxDate]
+      range: [minDate, maxDate],
     },
     {
       type: "hour",
-      range: [minHour, maxHour]
+      range: [minHour, maxHour],
     },
     {
       type: "minute",
-      range: [minMinute, maxMinute]
+      range: [minMinute, maxMinute],
     },
     {
       type: "second",
-      range: [minMinute, maxMinute]
-    }
+      range: [minMinute, maxMinute],
+    },
   ];
   let arr = result;
   // 截取对应的列数
@@ -543,7 +543,7 @@ const getBoundary = (type: string, innerVal: string | number) => {
     [`${type}Month`]: month,
     [`${type}Date`]: date,
     [`${type}Hour`]: hour,
-    [`${type}Minute`]: minute
+    [`${type}Minute`]: minute,
   };
 };
 const onShowByClickInput = () => {

package/components/hy-datetime-picker/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { DateModeEnum } from "../../typing";
 
 const defaultProps: IProps = {
@@ -30,7 +30,7 @@ const defaultProps: IProps = {
   format: "",
   placeholder: "请选择日期",
   disabledColor: "#F5F5F5",
-  toolbarRightSlot: false
+  toolbarRightSlot: false,
 };
 
 export default defaultProps;

package/components/hy-datetime-picker/typing.d.ts

@@ -1,5 +1,5 @@
 import { DateModeEnum } from "../../typing";
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**

package/components/hy-form/hy-form.vue

@@ -157,11 +157,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, reactive, toRefs } from "vue";
-import IProps from "./typing";
+import { computed, type CSSProperties, reactive, toRefs } from "vue";
+import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit, error } from "../../utils";
-import { FormColumnsType, RulesVo, FormTypeEnum } from "../../typing";
+import type { FormColumnsType, RulesVo, FormTypeEnum } from "../../typing";
 
 // 组件
 import HyInput from "../hy-input/hy-input.vue";
@@ -213,7 +213,7 @@ const errors: AnyObject = reactive({});
 const labelStyle = computed(() => {
   return {
     textAlign: labelAlign.value,
-    width: addUnit(labelWidth.value)
+    width: addUnit(labelWidth.value),
   };
 });
 
@@ -260,7 +260,7 @@ const validateField = (
   rules: RulesVo | RulesVo[] | undefined,
   value: string,
   field: string,
-  event?: "blur" | "change"
+  event?: "blur" | "change",
 ) => {
   if (!rules) return;
 
@@ -335,7 +335,7 @@ const handleBlur = (event: string, temp: FormColumnsType) => {
 
 defineExpose({
   validateField,
-  handleSubmit
+  handleSubmit,
 });
 </script>
 

package/components/hy-form/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   labelPosition: "left",
@@ -9,7 +9,7 @@ const defaultProps: IProps = {
   shape: "square",
   border: "surround",
   columns: [],
-  formData: {}
+  formData: {},
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { FormColumnsType } from "../../typing";
+import type { FormColumnsType } from "../../typing";
 
 export default interface IProps {
   /**

package/components/hy-grid/hy-grid.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit } from "../../utils";
 
 // 组件
@@ -63,7 +63,7 @@ const itemStyle = computed<CSSProperties>(() => {
     background: bgColor.value,
     height: addUnit(itemHeight.value),
     width: "100%",
-    border: border.value ? "0.5px solid #c8c7cc66" : ""
+    border: border.value ? "0.5px solid #c8c7cc66" : "",
   };
   return style;
 });
@@ -102,6 +102,7 @@ const childClick = (name: string | Record<string, any>) => {
     justify-content: center;
     position: relative;
     flex-direction: column;
+    overflow: hidden;
     /* #ifndef APP-NVUE */
     box-sizing: border-box;
     display: flex;

package/components/hy-grid/props.ts

@@ -1,16 +1,16 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
-  col: 4,
+  col: 5,
   border: false,
-  itemHeight: "100px",
+  itemHeight: "80px",
   align: "left",
   gap: "0px",
   bgColor: "transparent",
-  iconSize: "50px",
+  iconSize: "30px",
   round: "6px",
-  space: "12px"
+  space: "12px",
 };
 
 export default defaultProps;

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

@@ -50,11 +50,11 @@ export default interface IProps {
   /**
    * @description icon图片圆角
    * */
-  round: number | string;
+  round?: number | string;
   /**
    * @description icon图片和文字间距
    * */
-  space: number | string;
+  space?: number | string;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-icon/hy-icon.vue

@@ -21,7 +21,7 @@
         color: labelColor,
         fontSize: addUnit(labelSize),
         marginLeft: labelPos == 'right' ? addUnit(space) : 0,
-        marginTop: labelPos == 'bottom' ? addUnit(space) : 0
+        marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
       }"
       >{{ label }}</text
     >
@@ -29,11 +29,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import { ColorConfig, IconConfig } from "../../config";
 import { addUnit } from "../../utils";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -48,7 +48,7 @@ const {
   stop,
   index,
   isRotate,
-  round
+  round,
 } = toRefs(props);
 const emit = defineEmits(["click"]);
 
@@ -80,8 +80,8 @@ const iconStyle = computed<CSSProperties>(() => {
     color: color.value
       ? color.value
       : name.value === IconConfig.LOADING
-      ? ColorConfig.primary
-      : "#606266"
+        ? ColorConfig.primary
+        : "#606266",
   };
 
   return style;
@@ -187,6 +187,8 @@ const clickHandler = (e: any) => {
   }
 
   &__label {
+    @include line-feed();
+    overflow: hidden;
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */