hy-app 0.1.2 → 0.1.4

package/components/hy-swiper/hy-swiper.vue

@@ -218,58 +218,5 @@ const getItemType = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-swiper__wrapper {
-  flex: 1;
-}
-.hy-swiper {
-  @include flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-
-  &__wrapper {
-    flex: 1;
-
-    &__item {
-      flex: 1;
-
-      &__wrapper {
-        @include flex;
-        position: relative;
-        overflow: hidden;
-        transition: transform 0.3s;
-        flex: 1;
-
-        &__image {
-          flex: 1;
-        }
-
-        &__video {
-          flex: 1;
-        }
-
-        &__title {
-          position: absolute;
-          background-color: rgba(0, 0, 0, 0.3);
-          bottom: 0;
-          left: 0;
-          right: 0;
-          font-size: 28rpx;
-          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
-          color: #ffffff;
-          flex: 1;
-        }
-      }
-    }
-  }
-
-  &__indicator {
-    position: absolute;
-    bottom: $hy-border-margin-padding-sm;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-swiper/index.scss

@@ -0,0 +1,82 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-swiper {
+  @include flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  &__wrapper {
+    flex: 1;
+
+    &__item {
+      flex: 1;
+
+      &__wrapper {
+        @include flex;
+        position: relative;
+        overflow: hidden;
+        transition: transform 0.3s;
+        flex: 1;
+
+        &__image {
+          flex: 1;
+        }
+
+        &__video {
+          flex: 1;
+        }
+
+        &__title {
+          position: absolute;
+          background-color: rgba(0, 0, 0, 0.3);
+          bottom: 0;
+          left: 0;
+          right: 0;
+          font-size: 28rpx;
+          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
+          color: #ffffff;
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    bottom: $hy-border-margin-padding-sm;
+  }
+}
+
+
+.hy-swiper-indicator {
+  &__wrapper {
+    @include flex;
+
+    &--line {
+      border-radius: 100px;
+      height: 4px;
+
+      &__bar {
+        width: 22px;
+        height: 4px;
+        border-radius: $hy-border-radius-semicircle;
+        background-color: #ffffff;
+        transition: transform 0.3s;
+      }
+    }
+
+    &__dot {
+      width: 5px;
+      height: 5px;
+      border-radius: $hy-border-radius-semicircle;
+      margin: 0 $hy-border-margin-padding-sm;
+
+      &--active {
+        width: 12px;
+      }
+    }
+  }
+}

package/components/hy-switch/hy-switch.vue

@@ -11,31 +11,32 @@
       :style="[nodeStyle]"
       ref="hy-switch__node"
     >
-      <HyIcon
-        v-if="loading"
-        :name="IconConfig.LOADING"
-        is-rotate
-        :color="modelValue ? activeColor : '#AAABAD'"
-        :size="size * 0.6"
-      ></HyIcon>
+      <hy-loading
+        :show="loading"
+        :size="switchSize * 0.6"
+        mode="circle"
+      ></hy-loading>
+      <view class="" v-if="!loading">
+        <slot>
+          <HyIcon
+            :name="modelValue ? activeIcon : inactiveIcon"
+            :size="switchSize * 0.6"
+            :color="iconColor"
+          ></HyIcon>
+        </slot>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import {
-  toRefs,
-  watch,
-  ref,
-  nextTick,
-  computed,
-  type CSSProperties,
-} from "vue";
-import { IconConfig } from "../../config";
+import { toRefs, watch, nextTick, computed, type CSSProperties } from "vue";
 import { addUnit, error } from "../../utils";
 import defaultProps from "./props";
 import type IProps from "./typing";
 
+// 组件
+import HyLoading from "../hy-loading/hy-loading.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -52,7 +53,6 @@ const {
   inactiveColor,
 } = toRefs(props);
 const emit = defineEmits(["update:modelValue", "change"]);
-const bgColor = ref("#ffffff");
 
 watch(
   () => modelValue.value,
@@ -64,14 +64,36 @@ watch(
   { immediate: true },
 );
 
+/**
+ * @description 是否打开
+ * */
 const isActive = computed(() => {
   return modelValue.value === activeValue.value;
 });
+
+/**
+ * @description 设置开关大小
+ * */
+const switchSize = computed((): number => {
+  const sz: AnyObject = {
+    small: 20,
+    medium: 25,
+    large: 30,
+  };
+
+  return typeof size.value === "number"
+    ? size.value
+    : sz[size.value] || Number(size.value);
+});
+
+/**
+ * @description 开关样式
+ * */
 const switchStyle = computed<CSSProperties>(() => {
   let style: CSSProperties = {};
   // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-  style.width = addUnit(size.value * 2 + 2);
-  style.height = addUnit(Number(size.value) + 2);
+  style.width = addUnit(switchSize.value * 2 + 2);
+  style.height = addUnit(switchSize.value + 2);
   // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
   // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
   // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
@@ -83,32 +105,47 @@ const switchStyle = computed<CSSProperties>(() => {
     : inactiveColor.value;
   return style;
 });
+
+/**
+ * @description 圆圈样式
+ * */
 const nodeStyle = computed<CSSProperties>(() => {
   let style: CSSProperties = {};
   // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-  style.width = addUnit(size.value - space.value);
-  style.height = addUnit(size.value - space.value);
+  style.width = addUnit(switchSize.value - space.value);
+  style.height = addUnit(switchSize.value - space.value);
   const translateX = isActive.value
     ? addUnit(space.value)
-    : addUnit(size.value);
+    : addUnit(switchSize.value);
   style.transform = `translateX(-${translateX})`;
   return style;
 });
+
+/**
+ * @description 背景样式
+ * */
 const bgStyle = computed<CSSProperties>(() => {
   let style: CSSProperties = {};
   // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
-  style.width = addUnit(Number(size.value) * 2 - size.value / 2);
-  style.height = addUnit(size.value);
+  style.width = addUnit(switchSize.value * 2 - switchSize.value / 2);
+  style.height = addUnit(switchSize.value);
   style.backgroundColor = inactiveColor.value;
   // 打开时，让此元素收缩，否则反之
   style.transform = `scale(${isActive.value ? 0 : 1})`;
   return style;
 });
+
+/**
+ * @description 自定义颜色
+ * */
 const customInactiveColor = computed(() => {
   // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
   return inactiveColor.value !== "#fff" && inactiveColor.value !== "#ffffff";
 });
 
+/**
+ * @description 点击事件
+ * */
 const clickHandler = () => {
   if (!disabled.value && !loading.value) {
     const oldValue = isActive.value ? inactiveValue.value : activeValue.value;
@@ -124,52 +161,5 @@ const clickHandler = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-switch {
-  @include flex(row);
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-  position: relative;
-  background-color: #fff;
-  border-width: 1px;
-  border-radius: 100px;
-  transition: background-color 0.4s;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-style: solid;
-  justify-content: flex-end;
-  align-items: center;
-  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
-  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
-  overflow: hidden;
-
-  &__node {
-    @include flex(row);
-    align-items: center;
-    justify-content: center;
-    border-radius: 100px;
-    background-color: #fff;
-    border-radius: 100px;
-    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
-    transition-property: transform;
-    transition-duration: 0.4s;
-    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
-  }
-
-  &__bg {
-    position: absolute;
-    border-radius: 100px;
-    background-color: #ffffff;
-    transition-property: transform;
-    transition-duration: 0.4s;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    transition-timing-function: ease;
-  }
-
-  &--disabled {
-    opacity: 0.6;
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-switch/index.scss

@@ -0,0 +1,46 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-switch {
+  @include flex(row);
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  position: relative;
+  background-color: #fff;
+  border-radius: $hy-border-radius-semicircle;
+  transition: background-color 0.4s;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  justify-content: flex-end;
+  align-items: center;
+  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
+  overflow: hidden;
+
+  &__node {
+    @include flex(row);
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border-radius: $hy-border-radius-semicircle;
+    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+    transition-property: transform;
+    transition-duration: 0.4s;
+    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &__bg {
+    position: absolute;
+    border-radius: $hy-border-radius-semicircle;
+    background-color: #ffffff;
+    transition-property: transform;
+    transition-duration: 0.4s;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    transition-timing-function: ease;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}

package/components/hy-switch/props.ts

@@ -5,11 +5,14 @@ const defaultProps: IProps = {
   modelValue: false,
   loading: false,
   disabled: false,
-  size: 25,
+  size: "medium",
   activeColor: ColorConfig.primary,
   inactiveColor: "#ffffff",
   activeValue: true,
   inactiveValue: false,
+  activeIcon: "",
+  inactiveIcon: "",
+  iconColor: "",
   asyncChange: false,
   space: 0,
 };

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "vue";
+import { HyApp } from "@/package/typing/modules/common";
 
 export default interface IProps {
   /**
@@ -16,7 +17,7 @@ export default interface IProps {
   /**
    * @description 开关尺寸，单位px （默认 25 ）
    * */
-  size?: number;
+  size?: HyApp.SizeType | string | number;
   /**
    * @description 打开时的背景色 （默认 '#2979ff' ）
    * */
@@ -33,6 +34,18 @@ export default interface IProps {
    * @description 关闭选择器时通过change事件发出的值 （默认 false ）
    * */
   inactiveValue?: boolean;
+  /**
+   * @description 打开选择器时图标
+   * */
+  activeIcon?: string;
+  /**
+   * @description 关闭选择器时图标
+   * */
+  inactiveIcon?: string;
+  /**
+   * @description 图标颜色
+   * */
+  iconColor?: string;
   /**
    * @description 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
    * */

package/components/hy-tabs/hy-tabs.vue

@@ -25,7 +25,7 @@
                 item.disabled && 'hy-tabs__wrapper__nav__item--disabled',
                 innerCurrent == index
                   ? 'hy-tabs__wrapper__nav__item-active'
-                  : ''
+                  : '',
               ]"
             >
               <slot
@@ -51,7 +51,8 @@
               <text
                 v-else
                 :class="[
-                  item.disabled && 'hy-tabs__wrapper__nav__item__text--disabled'
+                  item.disabled &&
+                    'hy-tabs__wrapper__nav__item__text--disabled',
                 ]"
                 class="hy-tabs__wrapper__nav__item__text"
                 :style="[textStyle(index)]"
@@ -94,7 +95,7 @@
                   (item?.badge && item?.badge?.inverted) || propsBadge?.inverted
                 "
                 :customStyle="{
-                  marginLeft: '4px'
+                  marginLeft: '4px',
                 }"
               ></HyBadge>
             </view>
@@ -109,8 +110,8 @@
                   transitionDuration: `${firstTime ? 0 : duration}ms`,
                   height: addUnit(lineHeight),
                   background: lineColor,
-                  backgroundSize: lineBgSize
-                }
+                  backgroundSize: lineBgSize,
+                },
               ]"
             >
             </view>
@@ -139,15 +140,16 @@
 <script setup lang="ts">
 import {
   computed,
-  CSSProperties,
+  type CSSProperties,
   toRefs,
   ref,
   watch,
   nextTick,
-  onMounted
+  onMounted, getCurrentInstance,
 } from "vue";
 import defaultProps from "./props";
-import IProps, { TabsItemVo } from "./typing";
+import type IProps from "./typing";
+import type { TabsItemVo } from "./typing";
 import { addUnit, getPx, getRect, sleep } from "../../utils";
 
 // 组件
@@ -158,12 +160,13 @@ const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props);
 const emit = defineEmits(["click", "longPress", "update:current", "change"]);
 
+const instance = getCurrentInstance();
 const firstTime = ref<boolean>(true);
 const scrollLeft = ref<number>(0);
 const scrollViewWidth = ref<number>(0);
 const lineOffsetLeft = ref<number>(0);
 const tabsRect = ref<UniApp.NodeInfo>({
-  left: 0
+  left: 0,
 });
 const innerCurrent = ref<number>(0);
 
@@ -178,11 +181,11 @@ watch(
       });
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 watch(
   () => list.value,
-  () => resize()
+  () => resize(),
 );
 
 const textStyle = computed(() => {
@@ -234,9 +237,9 @@ const clickHandler = (item: TabsItemVo, index: number) => {
     "click",
     {
       ...item,
-      index
+      index,
     },
-    index
+    index,
   );
   // 如果disabled状态，返回
   if (item.disabled) return;
@@ -249,7 +252,7 @@ const clickHandler = (item: TabsItemVo, index: number) => {
 const longPressHandler = (item: TabsItemVo, index: number) => {
   emit("longPress", {
     ...item,
-    index
+    index,
   });
 };
 const setScrollLeft = () => {
@@ -275,7 +278,7 @@ const setScrollLeft = () => {
   // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
   scrollLeft_1 = Math.min(
     scrollLeft_1,
-    scrollViewWidth.value - (tabsRect.value.width || 0)
+    scrollViewWidth.value - (tabsRect.value.width || 0),
   );
   scrollLeft.value = Math.max(0, scrollLeft_1);
 };
@@ -313,7 +316,7 @@ const resize = () => {
       // 获取了tabs的尺寸之后，设置滑块的位置
       setLineLeft();
       setScrollLeft();
-    }
+    },
   );
 };
 /**
@@ -321,7 +324,7 @@ const resize = () => {
  * */
 const getTabsRect = () => {
   return new Promise((resolve) => {
-    getRect(".hy-tabs__wrapper__scroll-view").then((size) => resolve(size));
+    getRect(".hy-tabs__wrapper__scroll-view", false, instance).then((size) => resolve(size));
   });
 };
 /**
@@ -330,7 +333,7 @@ const getTabsRect = () => {
 const getAllItemRect = () => {
   return new Promise((resolve) => {
     const promiseAllArr = list.value.map((item, index) =>
-      getRect(`.hy-tabs__wrapper__nav__item-${index}`)
+      getRect(`.hy-tabs__wrapper__nav__item-${index}`, false, instance),
     );
     Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
   });
@@ -350,67 +353,5 @@ const animationFinish = (e: any) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-tabs {
-  &__wrapper {
-    @include flex;
-    align-items: center;
-
-    &__scroll-view-wrapper {
-      flex: 1;
-      /* #ifndef APP-NVUE */
-      overflow: auto hidden;
-      /* #endif */
-    }
-
-    &__scroll-view {
-      @include flex;
-      flex: 1;
-    }
-
-    &__nav {
-      @include flex;
-      position: relative;
-
-      &__item {
-        padding: 0 11px;
-        @include flex;
-        align-items: center;
-        justify-content: center;
-        /* #ifdef H5 */
-        cursor: pointer;
-        /* #endif */
-
-        &--disabled {
-          /* #ifdef H5 */
-          cursor: not-allowed;
-          /* #endif */
-        }
-
-        &__text {
-          font-size: 15px;
-          color: $hy-text-color-grey;
-          white-space: nowrap !important;
-
-          &--disabled {
-            color: $hy-color-disable-bg !important;
-          }
-        }
-      }
-
-      &__line {
-        height: 3px;
-        background: $hy-primary;
-        width: 30px;
-        position: absolute;
-        bottom: 2px;
-        border-radius: 100px;
-        transition-property: transform;
-        transition-duration: 300ms;
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>