hy-app 0.1.4 → 0.2.0

package/components/hy-slider/index.scss

@@ -1,7 +1,8 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-slider {
+
+@include b(slider) {
   position: relative;
   @include flex;
   align-items: center;
@@ -71,7 +72,7 @@
     // transform: translate3d(50%, -50%, 0);
   }
 
-  &--disabled {
+  @include m(disabled) {
     opacity: 0.5;
   }
 }

package/components/hy-slider/props.ts

@@ -7,7 +7,7 @@ const defaultProps: IProps = {
   min: 0,
   max: 100,
   step: 1,
-  activeColor: ColorConfig.primary,
+  activeColor: "",
   inactiveColor: "#c0c4cc",
   blockColor: "#ffffff",
   showValue: false,

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HySliderProps {
   /**
    * @description 滑块默认值（默认0）
    * */

package/components/hy-status-bar/typing.d.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyStatusBarProps {
   /**
    * @description 背景色 (默认 'transparent' )
    * */

package/components/hy-steps/hy-steps.vue

@@ -7,8 +7,8 @@
       >
         <!--	线条	-->
         <view
-          v-if="i + 1 < list.length"
-          :class="[`hy-steps-item__line--${direction}`, 'hy-steps-item__line']"
+          v-if="i > 0"
+          :class="[`hy-steps-item__line--${direction}`, 'hy-steps-item__line', statusClass(i, item.error)]"
           :style="lineStyle(item, i)"
         ></view>
         <!--	线条	-->
@@ -17,14 +17,14 @@
         <view
           :class="[
             `hy-steps-item__wrapper--${direction}`,
-            dot && `hy-steps-item__wrapper--${direction}--dot`,
-            'hy-steps-item__wrapper',
+            dot ? `hy-steps-item__wrapper--dot` : statusClass(i, item.error),
+            'hy-steps-item__wrapper'
           ]"
           :style="itemStyleInner"
         >
           <slot name="icon" :error="item?.error" :index="i">
             <view
-              class="hy-steps-item__wrapper__dot"
+              :class="['hy-steps-item__wrapper--dot__item', `hy-steps-item__wrapper--dot__${statusClass(i, item.error)}`]"
               v-if="dot"
               :style="{
                 backgroundColor: statusColor(i, item?.error),
@@ -111,19 +111,30 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-steps',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
-import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance} from "vue";
+import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance, watch} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type { StepListVo } from "./typing";
-import { addUnit, getRect } from "../../utils";
+import {addUnit, getRect} from "../../utils";
 import { ColorConfig, IconConfig } from "../../config";
 
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { current, direction, dot, inactiveColor, activeColor } = toRefs(props);
+const { current, list, direction, dot, inactiveColor, activeColor } = toRefs(props);
 const emit = defineEmits(["click", "update:current"]);
 
 const size = ref<UniApp.NodeInfo>({
@@ -132,29 +143,38 @@ const size = ref<UniApp.NodeInfo>({
 });
 const instance = getCurrentInstance();
 
+watch(
+    () => current.value,
+    (newVal: number) => {
+      if(list.value[newVal - 1]?.error) {
+        const index = list.value.findIndex(item => item.error);
+        emit("update:current", index);
+      }
+    }
+)
+
+/**
+ * @description 线条样式
+ * */
 const lineStyle = computed(() => {
   return (temp: StepListVo, index: number): CSSProperties => {
     const style: CSSProperties = {};
     if (direction.value === "row") {
-      style.width = addUnit(size.value.width);
-      style.left = addUnit(size.value.width! / 2);
+      style.width = addUnit(size.value.width! - 25);
+      style.left = addUnit(-size.value.width! / 2 + 12);
     } else {
-      style.height = addUnit(size.value.height);
-      // style.top = addUnit(size.width / 2)
+      style.height = addUnit(size.value.height! - 30);
+      style.top = addUnit(25)
     }
     style.backgroundColor = temp.error
-      ? ColorConfig.error
+      ? ''
       : index < current.value
         ? activeColor.value
         : inactiveColor.value;
     return style;
   };
 });
-// const itemStyleInner = () => {
-// 	return {
-// 		...itemStyle.value
-// 	}
-// }
+
 const itemStyleInner = computed(() => {
   return {};
 });
@@ -165,8 +185,6 @@ const statusClass = computed(() => {
   return (index: number, error: boolean = false) => {
     if (current.value == index) {
       return error ? "error" : "process";
-    } else if (error) {
-      return "error";
     } else if (current.value > index) {
       return "finish";
     } else {

package/components/hy-steps/index.scss

@@ -1,8 +1,21 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(steps) {
+      //color: $hy-dark-color;
+      &__wrapper__nav__item--active {
+        .hy-tabs__wrapper__nav__item--text {
+          color: $hy-dark-color;
+        }
+      }
+    }
+  }
+}
 
-.hy-steps {
+@include b(steps) {
   @include flex;
 
   &--column {
@@ -40,26 +53,46 @@
       justify-content: center;
       align-items: center;
       position: relative;
-      background-color: #fff;
+      background-color: transparent;
       border-radius: $hy-border-radius-semicircle;
 
+      /* 选择 */
+      &.process {
+        background-color: $hy-primary;
+      }
+
+      /* 已完成 */
+      &.finish {
+       border: 1px solid $hy-primary;
+        :deep(.hy-icon) {
+          color: $hy-primary;
+        }
+      }
+
       &--column {
         width: 20px;
         height: 20px;
-
-        &--dot {
-          height: 20px;
-          width: 20px;
-        }
       }
 
       &--row {
         width: 20px;
         height: 20px;
+      }
 
-        &--dot {
-          width: 20px;
-          height: 20px;
+      /* 点形状 */
+      &--dot {
+        &__item {
+          width: 10px;
+          height: 10px;
+          border-radius: $hy-border-radius-circle;
+          background-color: $hy-info;
+          border: none;
+        }
+        &__finish {
+          background-color: $hy-primary;
+        }
+        &__process {
+          background-color: $hy-primary;
         }
       }
 
@@ -87,13 +120,6 @@
           line-height: 11px;
         }
       }
-
-      &__dot {
-        width: 10px;
-        height: 10px;
-        border-radius: $hy-border-radius-semicircle;
-        background-color: $hy-color-subtitle;
-      }
     }
 
     &__content {
@@ -113,10 +139,24 @@
       }
     }
 
+    /* 线条样式 */
     &__line {
       position: absolute;
       background: $hy-tips-color;
 
+      &.finish {
+        background-color: $hy-primary;
+      }
+      &.process {
+        background-color: $hy-primary;
+      }
+      &.error {
+        background-color: $hy-error;
+      }
+      &.wait {
+        background-color: $hy-info;
+      }
+
       &--row {
         top: $hy-border-margin-padding-base;
         height: 1px;

package/components/hy-steps/props.ts

@@ -4,8 +4,8 @@ const defaultProps: IProps = {
   list: [],
   direction: "row",
   current: 0,
-  activeColor: "#3c9cff",
-  inactiveColor: "#969799",
+  activeColor: "",
+  inactiveColor: "",
   activeIcon: "",
   inactiveIcon: "",
   dot: false,

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

@@ -14,7 +14,7 @@ export interface StepListVo {
    * */
   error?: boolean;
 }
-export default interface IProps {
+export default interface HyStepsProps {
   /**
    * @description 设置当前处于第几步 (默认 0 )
    * */

package/components/{hy-submitBar/hy-submitBar.vue → hy-submit-bar/hy-submit-bar.vue}

@@ -69,6 +69,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-submit-bar",
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import defaultProps from "./props";
@@ -102,6 +113,7 @@ const emit = defineEmits(["click", "menuClick"]);
 const submitBarStyle = computed(() => {
   const style: CSSProperties = {
     bottom: 0,
+    left: 0,
   };
   if (fixed.value) style.position = "fixed";
   return Object.assign(style, customStyle.value);
@@ -179,38 +191,5 @@ const confirmClickFn = debounce((i: number) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../theme.scss";
-.hy-submit-bar {
-  display: flex;
-  background-color: #ffffff;
-  padding: $hy-border-margin-padding-base;
-  width: 100%;
-  box-sizing: border-box;
-  /*左边内容*/
-  &__left {
-    display: flex;
-    font-size: 20rpx;
-    flex: 1;
-    &--item {
-      margin: 0 $hy-border-margin-padding-base;
-      position: relative;
-    }
-  }
-
-  /*右边内容*/
-  &__right {
-    display: flex;
-    justify-content: flex-end;
-    font-size: 26rpx;
-    align-items: center;
-    width: 400rpx;
-    &--button {
-      padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
-      color: #ffffff;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-submit-bar/index.scss

@@ -0,0 +1,45 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(submit-bar) {
+      background-color: $hy-dark-background;
+    }
+  }
+}
+
+@include b(submit-bar) {
+  display: flex;
+  background-color: $hy-light-background-color;
+  padding: $hy-border-margin-padding-base;
+  width: 100%;
+  box-sizing: border-box;
+  /*左边内容*/
+  &__left {
+    display: flex;
+    font-size: 20rpx;
+    flex: 1;
+    &--item {
+      margin: 0 $hy-border-margin-padding-base;
+      position: relative;
+    }
+  }
+
+  /*右边内容*/
+  &__right {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 26rpx;
+    align-items: center;
+    width: 400rpx;
+    &--button {
+      padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
+      color: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/components/{hy-submitBar → hy-submit-bar}/typing.d.ts

@@ -16,7 +16,7 @@ interface IconMenus {
   badge?: BadgeProps["badge"];
 }
 
-export default interface IProps {
+export default interface HySubmitBarProps {
   /**
    * @description 左边菜单栏
    * */

package/components/hy-subsection/hy-subsection.vue

@@ -20,6 +20,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-subsection',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {computed, toRefs, ref, onMounted, watch, getCurrentInstance} from "vue";
 import type { CSSProperties } from "vue";
@@ -72,6 +83,7 @@ const wrapperClass = computed(() => {
       "hy-subsection__item",
       "cursor-pointer",
       `hy-subsection__item--${innerCurrent.value}__${guidClass}`,
+        `hy-subsection__item--${mode.value}`,
       index < list.value.length - 1 && "hy-subsection__item--no-border-right",
       index === 0 && "hy-subsection__item--first",
       index === list.value.length - 1 && "hy-subsection__item--last",

package/components/hy-subsection/index.scss

@@ -1,7 +1,22 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-subsection {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(subsection) {
+      color: $hy-dark-color;
+      @include m(button) {
+        background-color: $hy-dark-background--track;
+        &__bar {
+          background-color: $hy-dark-background--container;
+        }
+      }
+    }
+  }
+}
+
+@include b(subsection) {
   @include flex;
   position: relative;
   overflow: hidden;
@@ -10,7 +25,7 @@
   box-sizing: border-box;
   /* #endif */
 
-  &--button {
+  @include m(button) {
     height: 35px;
     background-color: rgb(238, 238, 239);
     padding: 3px;
@@ -23,7 +38,7 @@
     }
   }
 
-  &--subsection {
+  @include m(subsection) {
     height: 32px;
   }
 
@@ -34,16 +49,17 @@
     transition-duration: 0.3s;
     transition-timing-function: ease-in-out;
     /* #endif */
+    background-color: $hy-primary;
 
-    &--first {
+    @include m(first) {
       border-radius: $hy-border-radius-sm 0 0 $hy-border-radius-sm;
     }
 
-    &--center {
+    @include m(center) {
       border-radius: 0;
     }
 
-    &--last {
+    @include m(last) {
       border-radius: 0 $hy-border-radius-sm $hy-border-radius-sm 0;
     }
   }
@@ -56,16 +72,20 @@
     // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
     position: relative;
 
+    @include m(subsection) {
+      border: 1px solid $hy-primary;
+    }
+
     &--no-border-right {
       border-right-width: 0 !important;
     }
 
-    &--first {
+    @include m(first) {
       border-top-left-radius: $hy-border-radius-sm;
       border-bottom-left-radius: $hy-border-radius-sm;
     }
 
-    &--last {
+    @include m(last) {
       border-top-right-radius: $hy-border-radius-sm;
       border-bottom-right-radius: $hy-border-radius-sm;
     }

package/components/hy-subsection/props.ts

@@ -9,12 +9,12 @@ const defaultProps: IProps = {
     label: "name",
     value: "value",
   },
-  activeColor: ColorConfig.success,
-  inactiveColor: "#303133",
+  activeColor: "",
+  inactiveColor: "",
   mode: "button",
   fontSize: 12,
   bold: true,
-  bgColor: "#eeeeef",
+  bgColor: "",
 };
 
 export default defaultProps;

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

@@ -8,7 +8,7 @@ export interface SubSectionItemVo extends HyApp.FieldNamesType {
 
 export type SubSectionVo = string | number | SubSectionItemVo;
 
-export default interface IProps {
+export default interface HySubsectionProps {
   /**
    * @description 接收值
    * */

package/components/hy-swipe-action/typing.d.ts

@@ -7,7 +7,7 @@ interface SwipeActionOptionsVo {
   iconSize?: string | number;
 }
 
-export default interface IProps {
+export default interface SwipeActionProps {
   /**
    * @description 数据列表
    * */

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

@@ -91,6 +91,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-swiper',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,

package/components/hy-swiper/index.scss

@@ -1,7 +1,18 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-swiper {
+/* 暗色主题 */
+@include b(theme) {
+  @include m(dark) {
+    @include b(swiper__wrapper) {
+      :deep(.uni-swiper-wrapper) {
+        background-color: $hy-dark-background--container;
+      }
+    }
+  }
+}
+
+@include b(swiper) {
   @include flex;
   justify-content: center;
   align-items: center;
@@ -51,7 +62,7 @@
 }
 
 
-.hy-swiper-indicator {
+@include b(swiper-indicator) {
   &__wrapper {
     @include flex;
 

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

@@ -1,10 +1,7 @@
 import type { CSSProperties, PropType } from "vue";
-import {
-  HyApp,
-  type SwiperIndicatorModeType,
-} from "@/package/typing/modules/common";
+import { HyApp } from "@/package/typing/modules/common";
 
-export default interface IProps {
+export default interface HySwiperProps {
   /**
    * @description 轮播图数据
    * */