hy-app 0.1.1 → 0.1.3

package/components/hy-qrcode/hy-qrcode.vue

@@ -14,7 +14,7 @@
         class="hy-qrcode__loading"
         :style="{ width: addUnit(size), height: addUnit(size) }"
       >
-        <HyIcon :name="IconConfig.LOADING" is-rotate></HyIcon>
+        <HyLoading></HyLoading>
       </view>
     </view>
   </view>
@@ -23,11 +23,14 @@
 <script setup lang="ts">
 import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import QRCode from "./qrcode.js";
-import { addUnit } from "../../utils";
+import { addUnit, error } from "../../utils";
 import { IconConfig } from "../../config";
+
+// 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { text, allowPreview } = toRefs(props);
@@ -39,12 +42,13 @@ const qrcode = ref("");
 const result = ref("");
 
 onMounted(() => {
+  console.log(111);
   initQrCode();
 });
 
 const initQrCode = () => {
   if (text.value) {
-    loading.value;
+    loading.value = true;
     qrcode.value = new QRCode({
       context: instance, // 上下文环境
       canvasId: props.cid, // canvas-id
@@ -62,14 +66,10 @@ const initQrCode = () => {
       cbResult: function (res: any) {
         // 生成二维码的回调
         _result(res);
-      }
+      },
     });
   } else {
-    uni.showToast({
-      title: "二维码内容不能为空",
-      icon: "none",
-      duration: 2000
-    });
+    error("二维码内容不能为空");
   }
 };
 
@@ -87,9 +87,9 @@ const _saveCode = () => {
         uni.showToast({
           title: "二维码保存成功",
           icon: "success",
-          duration: 2000
+          duration: 2000,
         });
-      }
+      },
     });
   }
 };
@@ -114,8 +114,8 @@ const preview = (e) => {
         },
         fail: function (err) {
           console.error(err.errMsg);
-        }
-      }
+        },
+      },
     });
   }
   emit("preview", result.value, e);
@@ -127,27 +127,5 @@ const onLongPress = () => {
 </script>
 
 <style lang="scss" scoped>
-.hy-qrcode {
-  &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f7f7f7;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  &__content {
-    position: relative;
-
-    &__canvas {
-      position: fixed;
-      top: -99999rpx;
-      left: -99999rpx;
-      z-index: -99999;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-qrcode/index.scss

@@ -0,0 +1,23 @@
+.hy-qrcode {
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f7f7f7;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  &__content {
+    position: relative;
+
+    &__canvas {
+      position: fixed;
+      top: -99999rpx;
+      left: -99999rpx;
+      z-index: -99999;
+    }
+  }
+}

package/components/hy-qrcode/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   cid: "hy-qrcode-canvas" + Math.random().toString(),
@@ -14,7 +14,7 @@ const defaultProps: IProps = {
   iconSize: 40,
   showLoading: true,
   loadingText: "二维码生成中",
-  allowPreview: false
+  allowPreview: false,
 };
 
 export default defaultProps;

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

@@ -1,8 +1,8 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
-   * @description 实例ID字符串(必须)
+   * @description 实例ID字符串(如果有多个二维码组件必须设置不一样的cid)
    * */
   cid?: string;
   /**

package/components/hy-radio/hy-radio.vue

@@ -7,7 +7,7 @@
         :style="radioStyle"
         :class="[
           `hy-radio-label--${iconPlacement}`,
-          borderBottom && placement === 'column' && 'hy-border-bottom'
+          borderBottom && placement === 'column' && 'hy-border__bottom',
         ]"
       >
         <view
@@ -19,12 +19,12 @@
           <slot
             name="icon"
             :iconColor="iconColor"
-            :iconSize="addUnit(iconSize)"
+            :iconSize="addUnit(sizeType[size] ?? iconSize)"
           >
             <HyIcon
               class="hy-radio__icon-wrap__icon"
               :name="IconConfig.CHECK_MASK"
-              :size="addUnit(iconSize)"
+              :size="addUnit(sizeType[size] ?? iconSize)"
               :color="iconColorCom(item.checked)"
             />
           </slot>
@@ -38,7 +38,7 @@
               class="hy-radio__text"
               :style="{
                 color: labelColor,
-                fontSize: labelSize
+                fontSize: addUnit(sizeType[size] ?? labelSize),
               }"
               >{{ item[fieldNames.label] }}</text
             >
@@ -50,10 +50,17 @@
 </template>
 
 <script setup lang="ts">
-import IProps from "./typing";
-import { CheckboxColumnsVo } from "../hy-check-button/typing";
+import type IProps from "./typing";
+import type { CheckboxColumnsVo } from "../hy-check-button/typing";
 import defaultProps from "./props";
-import { computed, CSSProperties, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  type CSSProperties,
+  reactive,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import { addUnit, bem, error } from "../../utils";
 import { IconConfig } from "../../config";
 
@@ -73,21 +80,27 @@ const {
   customStyle,
   borderBottom,
   placement,
-  iconColor
+  iconColor,
 } = 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,
   (newValue) => {
     columns_1.value = columns.value.map((item: any) => {
-      item[fieldNames.value.checked] = newValue == item[fieldNames.value.value];
+      item[fieldNames.value.checked] =
+        newValue === item[fieldNames.value.value];
       return item;
     });
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const isDisabled = (disabledVal?: boolean): boolean =>
@@ -116,7 +129,7 @@ const radioStyle = 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才有效",
     );
   }
   // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
@@ -162,8 +175,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;
   };
 });
@@ -216,104 +229,5 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-radio {
-  /* #ifndef APP-NVUE */
-  @include flex(row);
-  /* #endif */
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 5px;
-  margin-top: 5px;
-
-  &-group {
-    flex: 1;
-
-    &--row {
-      /* #ifndef APP-NVUE */
-      display: flex;
-      /* #endif */
-      flex-flow: row wrap;
-    }
-
-    &--column {
-      @include flex(column);
-      margin: $hy-border-margin-padding-lg 0;
-    }
-  }
-
-  &-label--left {
-    flex-direction: row;
-  }
-
-  &-label--right {
-    flex-direction: row-reverse;
-    justify-content: space-between;
-  }
-
-  &__icon-wrap {
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    // nvue下，border-color过渡有问题
-    transition-property: border-color, background-color, color;
-    transition-duration: 0.2s;
-    /* #endif */
-    @include flex;
-    align-items: center;
-    justify-content: center;
-    color: transparent;
-    text-align: center;
-    margin-right: $hy-border-margin-padding-sm;
-    border: $hy-border-line;
-
-    /* #ifdef MP-TOUTIAO */
-    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
-    &__icon {
-      line-height: 0;
-    }
-
-    /* #endif */
-
-    &--circle {
-      border-radius: 50%;
-    }
-
-    &--square {
-      border-radius: 3px;
-    }
-
-    &--checked {
-      color: $hy-text-color-inverse;
-      background-color: $hy-primary;
-      border-color: $hy-primary;
-    }
-
-    &--disabled {
-      background-color: $hy-color-disable-bg !important;
-    }
-
-    &--disabled--checked {
-      color: $hy-color-disable-icon !important;
-    }
-  }
-
-  &__label-wrap {
-    /* #ifndef APP-NVUE */
-    word-wrap: break-word;
-    /* #endif */
-    color: $hy-text-color;
-    font-size: $hy-font-size-base;
-    margin-right: $hy-border-margin-padding-sm;
-
-    &--disabled {
-      color: $hy-text-color-disable;
-    }
-  }
-}
-.hy-border-bottom {
-  border-bottom: $hy-border-line;
-}
+@import "./index.scss";
 </style>

package/components/hy-radio/index.scss

@@ -0,0 +1,93 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-radio {
+  @include flex(row);
+  overflow: hidden;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+  margin-top: 5px;
+
+  &-group {
+    flex: 1;
+
+    &--row {
+      @include flex(row);
+      flex-flow: row wrap;
+    }
+
+    &--column {
+      @include flex(column);
+      margin: $hy-border-margin-padding-lg 0;
+    }
+  }
+
+  &-label--left {
+    flex-direction: row;
+  }
+
+  &-label--right {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  &__icon-wrap {
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    // nvue下，border-color过渡有问题
+    transition-property: border-color, background-color, color;
+    transition-duration: 0.2s;
+    /* #endif */
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    text-align: center;
+    margin-right: $hy-border-margin-padding-sm;
+    border: $hy-border-line;
+
+    /* #ifdef MP-TOUTIAO */
+    // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+    &__icon {
+      line-height: 0;
+    }
+
+    /* #endif */
+
+    &--circle {
+      border-radius: 50%;
+    }
+
+    &--square {
+      border-radius: 3px;
+    }
+
+    &--checked {
+      color: $hy-text-color-inverse;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+    }
+
+    &--disabled {
+      background-color: $hy-color-disable-bg !important;
+    }
+
+    &--disabled--checked {
+      color: $hy-color-disable-icon !important;
+    }
+  }
+
+  &__label-wrap {
+    /* #ifndef APP-NVUE */
+    word-wrap: break-word;
+    /* #endif */
+    color: $hy-text-color;
+    font-size: $hy-font-size-base;
+    margin-right: $hy-border-margin-padding-sm;
+
+    &--disabled {
+      color: $hy-text-color-disable;
+    }
+  }
+}

package/components/hy-radio/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: "circle",
-  size: 20,
+  size: "medium",
   disabled: false,
   activeColor: ColorConfig.primary,
   inactiveColor: "#c8c9cc",
@@ -22,7 +22,7 @@ const defaultProps: IProps = {
   labelSize: "",
   labelColor: "",
   labelDisabled: "",
-  placement: "row"
+  placement: "row",
 };
 
 export default defaultProps;

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

@@ -25,7 +25,7 @@ export default interface IProps {
   /**
    * @description 整体的大小
    * */
-  size?: string | number;
+  size?: HyApp.SizeType | string | number;
   /**
    * @description 是否默认选中
    * */
@@ -81,5 +81,5 @@ export default interface IProps {
   /**
    * @description 布局方式，row-横向，column-纵向
    * */
-  placement?: HyApp.PermutationType;
+  placement?: HyApp.DirectionType;
 }

package/components/hy-rate/hy-rate.vue

@@ -22,11 +22,11 @@
               disabled
                 ? '#c8c9cc'
                 : Math.floor(activeIndex) > index
-                ? activeColor
-                : inactiveColor
+                  ? activeColor
+                  : inactiveColor
             "
             :custom-style="{
-              padding: `0 ${addUnit(gutter / 2)}`
+              padding: `0 ${addUnit(gutter / 2)}`,
             }"
             :size="size"
           ></HyIcon>
@@ -37,8 +37,8 @@
           class="hy-rate__content__item__icon-wrap hy-rate__content__item__icon-wrap--half"
           :style="[
             {
-              width: addUnit(rateWidth / 2)
-            }
+              width: addUnit(rateWidth / 2),
+            },
           ]"
           ref="hy-rate__content__item__icon-wrap"
         >
@@ -48,11 +48,11 @@
               disabled
                 ? '#c8c9cc'
                 : Math.ceil(activeIndex) > index
-                ? activeColor
-                : inactiveColor
+                  ? activeColor
+                  : inactiveColor
             "
             :custom-style="{
-              padding: `0 ${addUnit(gutter / 2)}`
+              padding: `0 ${addUnit(gutter / 2)}`,
             }"
             :size="size"
           ></HyIcon>
@@ -64,8 +64,8 @@
 
 <script setup lang="ts">
 import { addUnit, getRect, guid, range, sleep } from "../../utils";
-import { ref, watch, toRefs, onMounted, nextTick } from "vue";
-import IProps from "./typing";
+import { ref, watch, toRefs, onMounted, getCurrentInstance } from "vue";
+import type IProps from "./typing";
 import defaultProps from "./props";
 
 // 组件
@@ -79,7 +79,7 @@ const {
   count,
   disabled,
   readonly,
-  allowHalf
+  allowHalf,
 } = toRefs(props);
 const emit = defineEmits(["update:modelValue", "change"]);
 
@@ -96,40 +96,52 @@ watch(
   () => modelValue.value,
   (newValue) => {
     activeIndex.value = newValue;
-  }
+  },
 );
 watch(
   () => activeIndex.value,
   (newVal) => {
     emitEvent();
-  }
+  },
 );
+const instance = getCurrentInstance();
 
 onMounted(() => {
   init();
 });
 
 const init = () => {
-  sleep(200).then(() => {
-    getRateItemRect();
-    getRateIconWrapRect();
+  sleep(300).then(async () => {
+    await getRateItemRect();
+    await getRateIconWrapRect();
   });
 };
 
-// 获取评分组件盒子的布局信息
+/**
+ * @description 获取评分组件盒子的布局信息
+ * */
 const getRateItemRect = async () => {
   await sleep();
   // #ifndef APP-NVUE
-  const res: UniApp.NodeInfo = (await getRect(`#${elId}`)) as UniApp.NodeInfo;
+  const res: UniApp.NodeInfo = (await getRect(
+    `#${elId}`,
+    false,
+    instance,
+  )) as UniApp.NodeInfo;
   rateBoxLeft.value = res.left || 0;
   // #endif
 };
-// 获取单个星星的尺寸
+
+/**
+ * @description 获取单个星星的尺寸
+ * */
 const getRateIconWrapRect = async () => {
   // uView封装的获取节点的方法，详见文档
   // #ifndef APP-NVUE
   const res: UniApp.NodeInfo = (await getRect(
-    `.${elClass}`
+    `.${elClass}`,
+    false,
+    instance,
   )) as UniApp.NodeInfo;
   rateWidth.value = res.width || 0;
   // #endif
@@ -225,37 +237,5 @@ const getActiveIndex = (x: number, isClick = false) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-rate {
-  @include flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  /* #ifndef APP-NVUE */
-  touch-action: none;
-  /* #endif */
-
-  &__content {
-    @include flex;
-
-    &__item {
-      position: relative;
-
-      &__icon-wrap {
-        &--half {
-          position: absolute;
-          overflow: hidden;
-          top: 0;
-          left: 0;
-        }
-      }
-    }
-  }
-}
-.hy-icon {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-}
+@import "./index.scss";
 </style>

package/components/hy-rate/index.scss

@@ -0,0 +1,33 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-rate {
+  @include flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+
+  &__content {
+    @include flex;
+
+    &__item {
+      position: relative;
+
+      &__icon-wrap {
+        &--half {
+          position: absolute;
+          overflow: hidden;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+}
+.hy-icon {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}