hy-app 0.1.2 → 0.1.4

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

@@ -170,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(" ");
 });
 
@@ -327,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-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 {
   /**

package/components/hy-list/hy-list.vue

@@ -67,26 +67,26 @@
 <script lang="ts">
 export default {
   options: {
-    virtualHost: true
-  }
+    virtualHost: true,
+  },
 };
 </script>
 
 <script lang="ts" setup>
 import {
   computed,
-  CSSProperties,
+  type CSSProperties,
   nextTick,
   onMounted,
   reactive,
   ref,
   toRefs,
   useSlots,
-  watch
+  watch,
 } from "vue";
 import { addUnit, debounce, getPx, getRect } from "../../utils";
 import HyDivider from "../hy-divider/hy-divider.vue";
-import IProps from "./typing";
+import type IProps from "./typing";
 import defaultProps from "./props";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -100,7 +100,7 @@ const {
   padding,
   borderRadius,
   background,
-  border
+  border,
 } = toRefs(props);
 const emit = defineEmits(["scrollButton", "click"]);
 
@@ -111,7 +111,7 @@ const scrollTop = ref(0);
 const viewHeight = ref(0);
 const waterfall: { left: AnyObject[]; right: AnyObject[] } = reactive({
   left: [],
-  right: []
+  right: [],
 });
 // 排列方式
 const arrange = computed(() => (line.value === 1 ? "column" : "row"));
@@ -132,7 +132,7 @@ const itemStyle = computed((): CSSProperties => {
     marginBottom: addUnit(marginBottom.value),
     borderRadius: addUnit(borderRadius.value),
     background: background.value,
-    border: border.value ? "1px solid #dadbde" : ""
+    border: border.value ? "1px solid #dadbde" : "",
   };
 });
 
@@ -149,7 +149,7 @@ const start = computed(() => {
  */
 const over = computed(() => {
   const o = Math.floor(
-    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5
+    (scrollTop.value + viewHeight.value + 1) / boxHeight + 5,
   );
   return Math.min(list.value.length, o * line.value);
 });
@@ -185,7 +185,7 @@ watch(
       });
     }
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 /**
@@ -216,35 +216,5 @@ const slotDefault = useSlots().default;
 </script>
 
 <style lang="scss" scoped>
-@import "../../theme.scss";
-@import "../../libs/css/mixin.scss";
-.hy-virtual-container {
-  height: v-bind(listHeight);
-  padding: 0 $hy-border-margin-padding-base;
-  box-sizing: border-box;
-
-  &__list {
-    padding: v-bind(paddingAttr);
-    @include flex(v-bind(arrange));
-    overflow-anchor: none;
-    &--item {
-      box-sizing: border-box;
-    }
-
-    &--left {
-      margin-right: $hy-border-margin-padding-base;
-    }
-    &--box {
-      box-sizing: border-box;
-      width: 50%;
-      display: flex;
-      flex-direction: column;
-      &-item {
-        box-sizing: border-box;
-        position: relative;
-        overflow: hidden;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-list/index.scss

@@ -0,0 +1,32 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-virtual-container {
+  height: v-bind(listHeight);
+  padding: 0 $hy-border-margin-padding-base;
+  box-sizing: border-box;
+
+  &__list {
+    padding: v-bind(paddingAttr);
+    @include flex(v-bind(arrange));
+    overflow-anchor: none;
+    &--item {
+      box-sizing: border-box;
+    }
+
+    &--left {
+      margin-right: $hy-border-margin-padding-base;
+    }
+    &--box {
+      box-sizing: border-box;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      &-item {
+        box-sizing: border-box;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/components/hy-list/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   list: [],
@@ -12,7 +12,7 @@ const defaultProps: IProps = {
   line: 1,
   keyField: "id",
   load: "loadMore",
-  showDivider: true
+  showDivider: true,
 };
 
 export default defaultProps;

package/components/hy-loading/hy-loading.vue

@@ -0,0 +1,95 @@
+<template>
+  <view
+    class="hy-loading-icon"
+    :style="customStyle"
+    :class="[vertical && 'hy-loading-icon--vertical']"
+    v-if="show"
+  >
+    <view
+      v-if="!webviewHide"
+      class="hy-loading-icon__spinner"
+      :class="[`hy-loading-icon__spinner--${mode}`]"
+      ref="ani"
+      :style="{
+        color: color,
+        width: addUnit(size),
+        height: addUnit(size),
+        borderTopColor: color,
+        borderBottomColor: otherBorderColor,
+        borderLeftColor: otherBorderColor,
+        borderRightColor: otherBorderColor,
+        'animation-duration': `${duration}ms`,
+        'animation-timing-function':
+          mode === 'semicircle' || mode === 'circle' ? timingFunction : '',
+      }"
+    >
+      <block v-if="mode === 'spinner'">
+        <!-- #ifndef APP-NVUE -->
+        <view
+          v-for="(item, index) in array12"
+          :key="index"
+          class="hy-loading-icon__dot"
+        >
+        </view>
+        <!-- #endif -->
+      </block>
+    </view>
+    <text
+      v-if="text"
+      class="hy-loading-icon__text"
+      :style="{
+        fontSize: addUnit(textSize),
+        color: textColor,
+      }"
+      >{{ text }}</text
+    >
+  </view>
+</template>
+
+<script setup lang="ts">
+import defaultProps from "./props";
+import type IProps from "./typing";
+import { toRefs, ref, computed } from "vue";
+import { addUnit, colorGradient } from "../../utils";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { show, size, color, mode, inactiveColor } = toRefs(props);
+const emit = defineEmits(["update:modelValue", "change"]);
+
+//动画旋转角度
+const aniAngel = ref(360);
+const array12 = Array.from({
+  length: 12,
+});
+const webviewHide = ref(false);
+
+const otherBorderColor = computed(() => {
+  const lightColor = colorGradient(color.value, "#ffffff", 100)[80];
+  if (mode.value === "circle") {
+    return inactiveColor.value ? inactiveColor.value : lightColor;
+  } else {
+    return "transparent";
+  }
+});
+
+// 监听webview的显示与隐藏
+// const addEventListenerToWebview = () => {
+//   // webview的堆栈
+//   const pages = getCurrentPages()
+//   // 当前页面
+//   const page = pages[pages.length - 1]
+//   // 当前页面的webview实例
+//   const currentWebview = page.$getAppWebview()
+//   // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+//   currentWebview.addEventListener('hide', () => {
+//     webviewHide.value = true
+//   })
+//   currentWebview.addEventListener('show', () => {
+//     webviewHide.value = false
+//   })
+// }
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>