hy-app 0.1.1 → 0.1.3

package/components/hy-image/index.scss

@@ -0,0 +1,26 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-image {
+  position: relative;
+  transition: opacity 0.5s ease-in-out;
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__loading,
+  &__error {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f8f8f8ff;
+    color: #909193ff;
+    font-size: 46px;
+  }
+}

package/components/hy-image/props.ts

@@ -0,0 +1,24 @@
+import type IProps from "./typing";
+import { IconConfig } from "../../config";
+
+const defaultProps: IProps = {
+  src: "",
+  mode: "aspectFill",
+  width: "200",
+  height: "150",
+  shape: "square",
+  radius: 0,
+  lazyLoad: true,
+  showMenuByLongPress: true,
+  loadingIcon: IconConfig.LOADING,
+  errorIcon: IconConfig.NOTICE,
+  showLoading: true,
+  showError: true,
+  fade: true,
+  webp: false,
+  duration: 500,
+  bgColor: "#f3f4f6",
+  previewImage: false,
+};
+
+export default defaultProps;

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

@@ -0,0 +1,76 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 图片地址
+   * */
+  src?: string;
+  /**
+   * @description 裁剪模式，见官网说明 （默认 'aspectFill' ）
+   * */
+  mode?: HyApp.ImageModeVo;
+  /**
+   * @description 宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
+   * */
+  width?: string | number;
+  /**
+   * @description 高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
+   * */
+  height?: string | number;
+  /**
+   * @description 图片形状，circle-圆形，square-方形 （默认 'square' ）
+   * */
+  shape?: HyApp.ShapeType;
+  /**
+   * @description 圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+   * */
+  radius?: number | string;
+  /**
+   * @description 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
+   * */
+  lazyLoad?: boolean;
+  /**
+   * @description 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
+   * */
+  showMenuByLongPress?: boolean;
+  /**
+   * @description 加载中的图标，或者小图片 （默认 'photo' ）
+   * */
+  loadingIcon?: string;
+  /**
+   * @description 加载失败的图标，或者小图片 （默认 'error-circle' ）
+   * */
+  errorIcon?: string;
+  /**
+   * @description 是否显示加载中的图标或者自定义的slot （默认 true ）
+   * */
+  showLoading?: boolean;
+  /**
+   * @description 是否显示加载错误的图标或者自定义的slot （默认 true ）
+   * */
+  showError?: boolean;
+  /**
+   * @description 是否需要淡入效果 （默认 true ）
+   * */
+  fade?: boolean;
+  /**
+   * @description 只支持网络资源，只对微信小程序有效 （默认 false ）
+   * */
+  webp?: boolean;
+  /**
+   * @description 搭配fade参数的过渡时间，单位ms （默认 500 ）
+   * */
+  duration?: number;
+  /**
+   * @description 背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
+   * */
+  bgColor?: string;
+  /**
+   * @description 是否预览图片  (默认 false )
+   * */
+  previewImage?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-input/hy-input.vue

@@ -57,7 +57,7 @@
         @click="onClear"
       >
         <HyIcon
-          :name="IconConfig.COLSE"
+          :name="IconConfig.CLOSE"
           size="11"
           color="#ffffff"
           :customStyle="{ lineHeight: '12px' }"
@@ -82,19 +82,18 @@
 <script setup lang="ts">
 import {
   computed,
-  CSSProperties,
-  inject,
   nextTick,
   ref,
   toRefs,
   watch,
-  getCurrentInstance
+  getCurrentInstance,
 } from "vue";
+import type { CSSProperties } from "vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
-import { addUnit, formatObject, formValidate } from "../../utils";
+import { addUnit, formatObject } from "../../utils";
 import defaultProps from "./props";
 import { ColorConfig, IconConfig } from "../../config";
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -106,7 +105,7 @@ const {
   customStyle,
   fontSize,
   readonly,
-  placeholderStyle
+  placeholderStyle,
 } = toRefs(props);
 const emit = defineEmits([
   "blur",
@@ -116,7 +115,7 @@ const emit = defineEmits([
   "nicknamereview",
   "change",
   "update:modelValue",
-  "clear"
+  "clear",
 ]);
 
 const instance = getCurrentInstance();
@@ -151,7 +150,7 @@ watch(
     // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
     changeFromInner.value = false;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -171,7 +170,7 @@ const inputClass = computed((): string => {
     (classes = classes.concat(["hy-border", "hy-input--radius"]));
   classes.push(`hy-input--${shape}`);
   border === "bottom" &&
-    (classes = classes.concat(["hy-border-bottom", "hy-input--no-radius"]));
+    (classes = classes.concat(["hy-border__bottom", "hy-input--no-radius"]));
   return classes.join(" ");
 });
 
@@ -203,7 +202,7 @@ const inputStyle = computed((): CSSProperties => {
   return {
     color: color.value,
     fontSize: addUnit(fontSize.value),
-    textAlign: inputAlign.value
+    textAlign: inputAlign.value,
   };
 });
 
@@ -328,75 +327,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-input {
-  @include flex(row);
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-
-  &--radius,
-  &--square {
-    border-radius: 4px;
-  }
-
-  &--no-radius {
-    border-radius: 0;
-  }
-
-  &--circle {
-    border-radius: 100px;
-  }
-
-  &__content {
-    flex: 1;
-    @include flex(row);
-    align-items: center;
-    justify-content: space-between;
-
-    &__field-wrapper {
-      position: relative;
-      @include flex(row);
-      margin: 0;
-      flex: 1;
-
-      &__field {
-        line-height: 26px;
-        text-align: left;
-        color: $hy-text-color;
-        height: 24px;
-        font-size: 15px;
-        flex: 1;
-      }
-    }
-
-    &__clear {
-      width: 20px;
-      height: 20px;
-      border-radius: 100px;
-      background-color: #c6c7cb;
-      @include flex(row);
-      align-items: center;
-      justify-content: center;
-      transform: scale(0.82);
-      margin-left: 4px;
-    }
-
-    &__subfix-icon {
-      margin-left: 4px;
-    }
-
-    &__prefix-icon {
-      margin-right: 4px;
-    }
-  }
-}
-.hy-border-bottom {
-  border-bottom: $hy-border-line;
-}
-.hy-border {
-  border: $hy-border-line;
-}
+@import "./index.scss";
 </style>

package/components/hy-input/index.scss

@@ -0,0 +1,65 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-input {
+  @include flex(row);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  &--radius,
+  &--square {
+    border-radius: 4px;
+  }
+
+  &--no-radius {
+    border-radius: 0;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &__content {
+    flex: 1;
+    @include flex(row);
+    align-items: center;
+    justify-content: space-between;
+
+    &__field-wrapper {
+      position: relative;
+      @include flex(row);
+      margin: 0;
+      flex: 1;
+
+      &__field {
+        line-height: 26px;
+        text-align: left;
+        color: $hy-text-color;
+        height: 24px;
+        font-size: 15px;
+        flex: 1;
+      }
+    }
+
+    &__clear {
+      width: 20px;
+      height: 20px;
+      border-radius: 100px;
+      background-color: #c6c7cb;
+      @include flex(row);
+      align-items: center;
+      justify-content: center;
+      transform: scale(0.82);
+      margin-left: 4px;
+    }
+
+    &__subfix-icon {
+      margin-left: 4px;
+    }
+
+    &__prefix-icon {
+      margin-right: 4px;
+    }
+  }
+}

package/components/hy-input/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   modelValue: "",
@@ -35,7 +35,7 @@ const defaultProps: IProps = {
   readonly: false,
   shape: "square",
   formatter: null,
-  customStyle: {}
+  customStyle: {},
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -8,7 +8,7 @@ export default interface IProps {
   /**
    * @description 输入框类型，见上方说明 （ 默认 'text' ）
    * */
-  type?: "text" | "idcard" | "number" | "digit" | "password";
+  type?: HyApp.InputType;
   /**
    * @description 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
    * */

package/components/hy-line/hy-line.vue

@@ -3,9 +3,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";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -21,7 +21,7 @@ const lineStyle = computed<CSSProperties>(() => {
     style.borderBottomWidth = "1px";
     style.borderBottomStyle = dashed.value ? "dashed" : "solid";
     style.width = addUnit(length.value);
-    if (hairline.value) style.transform = "scaleY(0.5)";
+    if (!hairline.value) style.borderBottomWidth = "1.5px";
   } else {
     // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
     style.borderLeftWidth = "1px";
@@ -36,9 +36,5 @@ const lineStyle = computed<CSSProperties>(() => {
 </script>
 
 <style lang="scss" scoped>
-.hy-line {
-  /* #ifndef APP-NVUE */
-  vertical-align: middle;
-  /* #endif */
-}
+@import "./index.scss";
 </style>

package/components/hy-line/index.scss

@@ -0,0 +1,5 @@
+.hy-line {
+  /* #ifndef APP-NVUE */
+  vertical-align: middle;
+  /* #endif */
+}

package/components/hy-line/props.ts

@@ -1,12 +1,12 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
-  color: "#d6d7d9",
+  color: "#dcdfe6",
   length: "100%",
   direction: "row",
   hairline: true,
   margin: "0",
-  dashed: false
+  dashed: false,
 };
 
 export default defaultProps;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -12,7 +12,7 @@ export default interface IProps {
   /**
    * @description 线条的方向，row-横向，column-竖向 (默认 'row' )
    * */
-  direction?: HyApp.PermutationType;
+  direction?: HyApp.DirectionType;
   /**
    * @description 是否显示细线条 (默认 true )
    * */

package/components/hy-line-progress/hy-line-progress.vue

@@ -5,7 +5,7 @@
       ref="hy-line-progress__background"
       :style="{
         backgroundColor: inactiveColor,
-        height: addUnit(height)
+        height: addUnit(height),
       }"
     >
     </view>
@@ -22,19 +22,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, onMounted, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  type CSSProperties, getCurrentInstance,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit, getRect, range, sleep } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { percentage, activeColor, height } = toRefs(props);
 
+const instance = getCurrentInstance();
 const lineWidth = ref<string | number>(0);
 
 watch(
   () => percentage.value,
-  () => resizeProgressWidth()
+  () => resizeProgressWidth(),
 );
 
 const progressStyle = computed<CSSProperties>(() => {
@@ -61,7 +69,7 @@ const init = async () => {
 const getProgressWidth = () => {
   return new Promise((resolve) => {
     // #ifndef APP-NVUE
-    resolve(getRect(".u-line-progress__background"));
+    resolve(getRect(".hy-line-progress__background", false, instance));
     // #endif
   });
 };
@@ -72,47 +80,10 @@ const getProgressWidth = () => {
 const resizeProgressWidth = async () => {
   const { width } = await getProgressWidth();
   // 通过设置的percentage值，计算其所占总长度的百分比
-  lineWidth.value = (width * innserPercentage.value) / 100 + "px";
+  lineWidth.value = addUnit((width * innserPercentage.value) / 100);
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-line-progress {
-  align-items: stretch;
-  position: relative;
-  @include flex(row);
-  flex: 1;
-  overflow: hidden;
-  border-radius: 100px;
-
-  &__background {
-    background-color: #ececec;
-    border-radius: 100px;
-    flex: 1;
-  }
-
-  &__line {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    align-items: center;
-    @include flex(row);
-    color: #ffffff;
-    border-radius: 100px;
-    transition: width 0.5s ease;
-    justify-content: flex-end;
-  }
-
-  &__text {
-    font-size: 10px;
-    align-items: center;
-    text-align: right;
-    color: #ffffff;
-    margin-right: 5px;
-    transform: scale(0.9);
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-line-progress/index.scss

@@ -0,0 +1,38 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-line-progress {
+  align-items: stretch;
+  position: relative;
+  @include flex(row);
+  flex: 1;
+  overflow: hidden;
+  border-radius: 100px;
+
+  &__background {
+    background-color: #ececec;
+    border-radius: 100px;
+    flex: 1;
+  }
+
+  &__line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    align-items: center;
+    @include flex(row);
+    color: #ffffff;
+    border-radius: 100px;
+    transition: width 0.5s ease;
+    justify-content: flex-end;
+  }
+
+  &__text {
+    font-size: 10px;
+    align-items: center;
+    text-align: right;
+    color: #ffffff;
+    margin-right: 5px;
+    transform: scale(0.9);
+  }
+}

package/components/hy-line-progress/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -6,7 +6,7 @@ const defaultProps: IProps = {
   inactiveColor: "#ececec",
   percentage: 0,
   showText: true,
-  height: 12
+  height: 12,
 };
 
 export default defaultProps;

package/components/hy-line-progress/typing.d.ts

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