hy-app 0.2.0 → 0.2.2

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties, PropType } from "vue";
 
 interface SwipeActionOptionsVo {
   text: string;
@@ -6,36 +6,33 @@ interface SwipeActionOptionsVo {
   icon?: string;
   iconSize?: string | number;
 }
+export type SwipeActionStatus = "close" | "left" | "right";
+// 点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮
+export type SwipeActionReason = "click" | "swipe" | "value";
+export type SwipeActionPosition = SwipeActionStatus | "inside";
+export type SwipeActionBeforeClose = (
+  reason: SwipeActionReason,
+  position: SwipeActionPosition,
+) => void;
 
 export default interface SwipeActionProps {
   /**
-   * @description 数据列表
+   * @description 滑动按钮的状态，使用v-model进行双向绑定。
+   * 选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
    * */
-  list: Record<string, any>[];
+  modelValue?: SwipeActionStatus;
   /**
-   * @description 控制打开或者关闭（默认 false ）
-   * */
-  show?: boolean;
-  /**
-   * @description 标识符，如果是v-for，可用index索引值
-   * */
-  name?: string;
-  /**
-   * @description 唯一键值
-   * */
-  key?: string;
-  /**
-   * @description 是否禁用（默认 false ）
+   * @description 是否禁用滑动操作
    * */
   disabled?: boolean;
-  /**
-   * @description 滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
-   * */
-  threshold?: number;
   /**
    * @description 是否自动关闭其他swipe按钮组（默认 true ）
    * */
   autoClose?: boolean;
+  /**
+   * @description 显示底部边框
+   * */
+  borderBottom?: boolean;
   /**
    * @description 右侧按钮内容
    * */
@@ -45,9 +42,10 @@ export default interface SwipeActionProps {
    * */
   duration?: number;
   /**
-   * @description 是否关闭
+   * @description 在关闭滑动按钮前调用的钩子函数
+   * @desc 可以在此函数中执行一些关闭前的操作，如确认提示等。
    * */
-  closeOnClick: boolean;
+  beforeClose?: funtion | PropType<SwipeActionBeforeClose>;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-swiper/index.scss

@@ -1,16 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@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;
@@ -22,6 +12,10 @@
   &__wrapper {
     flex: 1;
 
+    :deep(.uni-swiper-wrapper) {
+      background-color: $hy-background;
+    }
+
     &__item {
       flex: 1;
 
@@ -32,6 +26,7 @@
         transition: transform 0.3s;
         flex: 1;
 
+
         &__image {
           flex: 1;
         }

package/components/hy-switch/index.scss

@@ -2,28 +2,29 @@
 @use "../../libs/css/mixin.scss" as *;
 
 /* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(switch) {
-      color: $hy-dark-color;
-      @include m(container) {
-        background-color: $hy-dark-background--track;
-      }
-      @include m(node) {
-        background-color: $hy-dark-background--container;
-      }
-      @include m(bg) {
-        background-color: $hy-dark-background--track;
-      }
-    }
-  }
-}
+//@include b(theme){
+//  @include m(dark) {
+//    @include b(switch) {
+//      color: $hy-dark-color;
+//      @include m(container) {
+//        background-color: $hy-dark-background--track;
+//      }
+//      @include m(node) {
+//        background-color: $hy-dark-background--container;
+//      }
+//      @include m(bg) {
+//        background-color: $hy-dark-background--track;
+//      }
+//    }
+//  }
+//}
 
 @include b(switch) {
   @include flex(row);
   /* #ifndef APP-NVUE */
   box-sizing: border-box;
   /* #endif */
+  background-color: $hy-background--3;
   position: relative;
   border-radius: $hy-border-radius-semicircle;
   transition: background-color 0.4s;
@@ -41,7 +42,7 @@
     @include flex(row);
     align-items: center;
     justify-content: center;
-    background-color: #fff;
+    background-color: $hy-background--container;
     border-radius: $hy-border-radius-semicircle;
     box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
     transition-property: transform;
@@ -52,7 +53,7 @@
   @include m(bg) {
     position: absolute;
     border-radius: $hy-border-radius-semicircle;
-    background-color: #ffffff;
+    background-color: $hy-background--3;
     transition-property: transform;
     transition-duration: 0.4s;
     transition-timing-function: ease;

package/components/hy-switch/props.ts

@@ -1,5 +1,4 @@
 import type IProps from "./typing";
-import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
   modelValue: false,

package/components/hy-tabs/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(tabs) {
-      color: $hy-dark-color;
-      &__wrapper__nav__item--active {
-        .hy-tabs__wrapper__nav__item--text {
-          color: $hy-dark-color;
-        }
-      }
-    }
-  }
-}
-
 @include b(tabs) {
   &__wrapper {
     @include flex;
@@ -54,17 +40,17 @@
 
         &--active {
           .hy-tabs__wrapper__nav__item--text {
-            color: #303133;
+            color: $hy-text-color;
           }
         }
 
         &--text {
           font-size: 15px;
-          color: #606266;
-          white-space: nowrap !important;
+          color: $hy-text-color;
+          white-space: nowrap;
 
           &--disabled {
-            color: $hy-light-background-disabled !important;
+            color: $hy-background--disabled !important;
           }
         }
       }

package/components/hy-tag/index.scss

@@ -13,8 +13,8 @@
   }
 
   /*禁用*/
-  @include themeColor(disabled, $hy-light-background-disabled, $hy-color-disable-icon,
-$hy-light-background-disabled);
+  @include themeColor(disabled, $hy-background--disabled, $hy-text-color--disabled,
+$hy-background--disabled);
 
   /*圆角*/
   @include borderRadio(circle);
@@ -75,7 +75,7 @@ $hy-light-background-disabled);
   @include themeColor(info--plain, transparent, $hy-info, $hy-info);
 
   /* 主题色镂空带背景色 */
-  @include themeColor(primary--plain__fill, var(--hy-tag-plain--fill__bg, $hy-primary-light), $hy-primary, $hy-primary);
+  @include themeColor(primary--plain__fill, $hy-primary-light, $hy-primary, $hy-primary);
   @include themeColor(error--plain__fill, $hy-error-light, $hy-error, $hy-error);
   @include themeColor(warning--plain__fill, $hy-warning-light, $hy-warning, $hy-warning);
   @include themeColor(success--plain__fill, $hy-success-light, $hy-success, $hy-success);

package/components/hy-text/hy-text.vue

@@ -51,13 +51,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-text',
+  name: "hy-text",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -243,6 +243,7 @@ const toLink = () => {
 <style scoped lang="scss">
 @import "./index.scss";
 @import "../../libs/css/mixin.scss";
+/*超出出现省略号*/
 .hy-text__value--lines {
   @include multiEllipsis(v-bind(lines));
 }

package/components/hy-text/index.scss

@@ -1,23 +1,16 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(text) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(text) {
   @include flex(row);
   align-items: center;
   flex-wrap: nowrap;
+  color: $hy-text-color;
 
   &__price {
     font-size: 14px;
-    color: $hy-text-color-grey;
+    color: $hy-text-color--grey;
   }
 
   &__value {
@@ -34,18 +27,13 @@
       color: $hy-primary;
     }
 
-    /*超出出现省略号*/
-    &--lines {
-      @include multiEllipsis(v-bind(lines));
-    }
-
     @include themeColor(primary, "", "", $hy-primary);
     @include themeColor(warning, "", "", $hy-warning);
     @include themeColor(success, "", "", $hy-success);
     @include themeColor(info, "", "", $hy-info);
     @include themeColor(error, "", "", $hy-error);
     @include themeColor(main, "", "", $hy-light-color);
-    @include themeColor(content, "", "", $hy-text-color-grey);
+    @include themeColor(content, "", "", $hy-text-color--grey);
     @include themeColor(tips, "", "",$hy-tips-color);
     @include themeColor(light, "", "", $hy-border-color-light);
 

package/components/hy-textarea/hy-textarea.vue

@@ -5,7 +5,7 @@
     :style="[textareaStyle, borderStyle(isFocus)]"
   >
     <textarea
-      class="hy-textarea__field"
+      class="hy-textarea--field"
       :value="innerValue"
       :style="{ height: addUnit(height) }"
       :placeholder="placeholder || ''"
@@ -47,13 +47,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-textarea',
+  name: "hy-textarea",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-textarea/index.scss

@@ -1,18 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(textarea) {
-      color: $hy-dark-color;
-      &--count {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
-
 @include b(textarea) {
   border-radius: $hy-border-radius-sm;
   position: relative;
@@ -20,31 +8,31 @@
   flex: 1;
   padding: $hy-border-margin-padding-base;
 
-  &--radius {
+  @include m(radius) {
     border-radius: $hy-border-radius-sm;
   }
 
-  &--no-radius {
+  @include m(no-radius) {
     border-radius: $hy-border-radius-no;
   }
 
-  &--disabled {
-    background-color: $hy-light-background-disabled;
+  @include m(disabled) {
+    background-color: $hy-background--disabled;
+    color: $hy-text-color--disabled;
   }
 
-  &__field {
+  @include m(field) {
     flex: 1;
     font-size: 15px;
     width: 100%;
   }
 
-  &--count {
+  @include m(count) {
     position: absolute;
     right: 5px;
     bottom: 2px;
     font-size: 12px;
-    color: $hy-tips-color;
-    background-color: #ffffff;
+    background-color: $hy-background--3;
     padding: 1px 4px;
     border-radius: $hy-border-radius-sm;
   }

package/components/hy-toast/index.scss

@@ -46,29 +46,12 @@
     }
   }
 
-  @include m(success)  {
-    color: $hy-success;
-    background-color: $hy-success-light;
-    border: 1px solid #bef5c8;
-  }
-
-  @include m(primary)  {
-    color: $hy-primary;
-    background-color: $hy-primary-light;
-    border: 1px solid rgb(215, 234, 254);
-  }
+  @include themeColor(success, $hy-success-light, #bef5c8, $hy-success);
+  @include themeColor(primary, $hy-primary-light, rgb(215, 234, 254), $hy-primary);
+  @include themeColor(error, $hy-error-light, #fde2e2, $hy-error);
+  @include themeColor(warning, $hy-warning-light, #faecd8, $hy-warning);
+  @include themeColor(info, $hy-info-light, $hy-info, $hy-info);
 
-  @include m(error)  {
-    color: $hy-error;
-    background-color: $hy-error-light;
-    border: 1px solid #fde2e2;
-  }
-
-  @include m(warning)  {
-    color: $hy-warning;
-    background-color: $hy-warning-light;
-    border: 1px solid #faecd8;
-  }
 
   @include m(default)  {
     color: #ffffff;

package/components/hy-tooltip/index.scss

@@ -21,7 +21,7 @@
       justify-content: center;
 
       &__list {
-        background-color: #060607;
+        background-color: rgb(50, 50, 51);
         position: relative;
         flex: 1;
         border-radius: $hy-border-radius-sm;
@@ -31,14 +31,16 @@
         overflow: hidden;
 
         &__btn {
-          padding: $hy-border-margin-padding-base;
+          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-base;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
           &--hover {
-            background-color: $hy-text-color-hover;
+            background-color: $hy-background--hover;
           }
 
           &__text {
-            line-height: 12px;
             font-size: 13px;
             color: #ffffff;
           }
@@ -47,7 +49,7 @@
 
       &__indicator {
         position: absolute;
-        background-color: #060607;
+        background-color: rgb(50, 50, 51);
         width: 14px;
         height: 14px;
         bottom: -4px;

package/components/hy-upload/index.scss

@@ -4,16 +4,6 @@
 $hy-upload-image-width: 80px !default;
 $hy-upload-text-font-size: 11px !default;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(upload) {
-      &__button {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
 
 @include b(upload) {
   @include flex(column);
@@ -47,7 +37,7 @@ $hy-upload-text-font-size: 11px !default;
 
         &__text {
           font-size: $hy-upload-text-font-size;
-          color: $hy-tips-color;
+          color: $hy-text-color--grey;
           margin-top: 2px;
         }
       }
@@ -110,7 +100,7 @@ $hy-upload-text-font-size: 11px !default;
     justify-content: center;
     width: $hy-upload-image-width;
     height: $hy-upload-image-width;
-    background-color: rgb(244, 245, 247);
+    background-color: $hy-background--empty;
     border-radius: 2px;
     margin: 0 8px 8px 0;
     /* #ifndef APP-NVUE */
@@ -119,12 +109,12 @@ $hy-upload-text-font-size: 11px !default;
 
     &__text {
       font-size: $hy-upload-text-font-size;
-      color: $hy-tips-color;
+      color: $hy-text-color--grey;
       margin-top: 2px;
     }
 
     &--hover {
-      background-color: rgb(230, 231, 233);
+      background-color: $hy-background--hover;
     }
 
     &--disabled {
@@ -153,6 +143,6 @@ $hy-upload-text-font-size: 11px !default;
 
   .tips-text {
     font-size: 12px;
-    color: #b99c65;
+    color: $hy-primary;
   }
 }

package/composables/index.ts

@@ -1 +1,2 @@
 export * from "./useShare";
+export * from "./useTouch";

package/composables/useTouch.ts

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+
+export function useTouch() {
+  const direction = ref<string>("");
+  const deltaX = ref<number>(0);
+  const deltaY = ref<number>(0);
+  const offsetX = ref<number>(0);
+  const offsetY = ref<number>(0);
+  const startX = ref<number>(0);
+  const startY = ref<number>(0);
+
+  function touchStart(event: any) {
+    const touch = event.touches[0];
+    direction.value = "";
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    startX.value = touch.clientX;
+    startY.value = touch.clientY;
+  }
+
+  function touchMove(event: any) {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    direction.value =
+      offsetX.value > offsetY.value
+        ? "horizontal"
+        : offsetX.value < offsetY.value
+          ? "vertical"
+          : "";
+  }
+
+  return {
+    touchStart,
+    touchMove,
+    direction,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    startX,
+    startY,
+  };
+}

package/index.scss

@@ -1,2 +1,3 @@
 @use "./libs/css/common.scss";
+@use "./libs/css/vars.css";
 //@use "./libs/css/mixin.scss" as HyMixin;

package/libs/css/mixin.scss

@@ -1,6 +1,9 @@
 @use "../../theme.scss";
-$namespace: hy;
-$modifier-separator: '--';
+$namespace: 'hy' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;
 
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;
@@ -28,11 +31,64 @@ $modifier-separator: '--';
   }
 }
 
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector +
+      '.' +
+      $B +
+      $element-separator +
+      $unit +
+      ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 状态，生成 is-$state 类名 */
+@mixin is($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+/* 添加伪类元素 */
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}
+
 @mixin themeColor($type, $bg-color: transparent, $border-color: transparent, $color: #FFFFFF) {
   @include m($type) {
     background-color: $bg-color;
     border: 1px solid $border-color;
     color: $color;
+
+    :deep() {
+      @include b(icon) {
+        color: $color;
+      }
+    }
   }
 }
 
@@ -56,17 +112,6 @@ $modifier-separator: '--';
   flex-direction: $direction;
 }
 
-/* 状态，生成 is-$state 类名 */
-@mixin when($states...) {
-  @at-root {
-    @each $state in $states {
-      &.#{$state-prefix + $state} {
-        @content;
-      }
-    }
-  }
-}
-
 /* 几行出现省略号 */
 @mixin line-feed($line: 1) {
   display: -webkit-box;