hy-app 0.2.1 → 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

@@ -12,6 +12,10 @@
   &__wrapper {
     flex: 1;
 
+    :deep(.uni-swiper-wrapper) {
+      background-color: $hy-background;
+    }
+
     &__item {
       flex: 1;
 
@@ -22,6 +26,7 @@
         transition: transform 0.3s;
         flex: 1;
 
+
         &__image {
           flex: 1;
         }

package/components/hy-tabs/index.scss

@@ -47,10 +47,10 @@
         &--text {
           font-size: 15px;
           color: $hy-text-color;
-          white-space: nowrap !important;
+          white-space: nowrap;
 
           &--disabled {
-            color: $hy-light-background-disabled !important;
+            color: $hy-background--disabled !important;
           }
         }
       }

package/components/hy-tag/index.scss

@@ -13,7 +13,7 @@
   }
 
   /*禁用*/
-  @include themeColor(disabled, $hy-background--disabled, $hy-color-disable-icon,
+  @include themeColor(disabled, $hy-background--disabled, $hy-text-color--disabled,
 $hy-background--disabled);
 
   /*圆角*/

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

@@ -8,31 +8,30 @@
   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 {
+  @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-text-color--2;
     background-color: $hy-background--3;
     padding: 1px 4px;
     border-radius: $hy-border-radius-sm;

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;
@@ -49,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

@@ -37,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;
         }
       }

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/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,6 +31,53 @@ $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;
@@ -62,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;

package/libs/css/vars.css

@@ -5,7 +5,8 @@
   --hy-text-color--2: #67676c;
   --hy-text-color--3: #929295;
   --hy-text-color--4: rgba(0, 0, 0, 0.1);
-  --hy-icon-color: #606266;
+  --hy-icon-color: #999;
+  --hy-text-color--grey: #67676c;
   --hy-text-color--placeholder: rgba(0, 0, 0, 0.25);
   --hy-text-color--disabled: rgba(0, 0, 0, 0.25);
 
@@ -18,6 +19,8 @@
   --hy-background--hover: rgba(0,0,0,0.2);
 
   --hy-border-line: 1rpx solid #c2c2c4;
+  --hy-border-color: #c2c2c4;
+  --hy-border-color--2: #c9cacc;
 }
 
 .hy-theme--dark {
@@ -32,6 +35,7 @@
   --hy-text-color-3: #6a6a71;
   --hy-text-color--4: rgba(255, 255, 255, 0.1);
   --hy-icon-color: #FFFFFF;
+  --hy-text-color--grey: #98989f;
   --hy-text-color--placeholder: rgba(255, 255, 255, 0.25);
   --hy-text-color--disabled: rgba(255, 255, 255, 0.25);
 
@@ -44,4 +48,6 @@
   --hy-background--hover: rgba(255,255,255,0.2);
 
   --hy-border-line: 1rpx solid #3c3f44;
+  --hy-border-color: #3c3f44;
+  --hy-border-color--2: #FFFFFF;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.2.1",
-  "description": "全局主题色配置",
+  "version": "0.2.2",
+  "description": "添加签名、分页组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -24,30 +24,29 @@ $hy-info-dark: var(--hy-info--dark, #82848a) !default;
 $hy-info-disabled: var(--hy-info--disabled, #c8c9cc) !default;
 $hy-info-light: var(--hy-info--light, #f4f4f5) !default;
 
+/* 字体颜色 */
+$hy-text-color: var(--hy-text-color, #3c3c43) !default; // 一般用于基础文字
+$hy-text-color--2: var(--hy-text-color--2, #67676c) !default; // 一般用于提示
+$hy-text-color--3: var(--hy-text-color--3, #929295) !default; // 一般用于浅色提示
+$hy-text-color--4: var(--hy-text-color--4, rgba(0, 0, 0, 0.1)) !default; // 一般用于浅色
+$hy-icon-color: var(--hy-icon-color, #606266) !default; // 一般用于icon
+$hy-text-color--grey: var(--hy-text-color--grey, #999) !default; // 辅助灰色，如加载更多的提示信息
+$hy-text-color--placeholder: var(--hy-text-color--placeholder, #808080) !default; // 输入框提示颜色
+$hy-text-color--disabled: var(--hy-text-color--disabled, #c0c0c0) !default; // 禁用文字颜色
+$hy-border-color: var(--hy-border-color, #c0c0c0) !default; // 边框颜色
+$hy-text-color-hover: var(--hy-text-color-hover, #58595b)!default; // 点击状态文字颜色
 
-$hy-dark-bg-disabled: rgba(48, 48, 56, 0.51) !default;
-$hy-dark-color: #ffffff !default;
-$hy-dark-icon: #7C7C7C !default;
-$hy-dark-color2: var(#f2270c) !default;
-$hy-dark-color3: var(rgba(232, 230, 227, 0.8)) !default;
-$hy-dark-color-gray: var(#c0c0c0) !default;
-$hy-dark-text-disabled: #c0c0c0 !default;
-$hy-dark-border-color: var(#3a3a3c) !default;
 
-/* 亮色背景颜色 */
-$hy-light-background: var(--hy-light-background, #F8F8F8) !default;
-$hy-light-background-color: var(--hy-light-background-color, #FFFFFF) !default;
-$hy-light-background-disabled: var(--hy-light-background-disabled, #F5F5F5) !default;
-$hy-light-background-hover: var(--hy-light-background-hover, #f1f1f1) !default; //点击状态颜色
+/* 背景色 */
+$hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
+$hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
+$hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
+$hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
+$hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
+$hy-background--track: var(--hy-background--track, #c6c7cb) !default;
+$hy-background--empty: var(--hy-background--empty, #f6f6f7) !default; // 搜索背景色
+$hy-background--hover: var(--hy-background--hover, #707070) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
-$hy-light-background-image: var(--hy-light-background-image, #F3F3F3) !default; // 图片背景色
-
-/* 文字基本颜色 */
-$hy-light-color: var(--hy-light-color, #333) !default; //基本色
-$hy-text-color-hover: var(--hy-text-color-hover, #58595b)!default;
-
-$hy-tips-color: #909193FF;
-$hy-color-disable-icon:  #c8c9cc;
 
 /* 文字尺寸 */
 $hy-font-size-sm: 12px;
@@ -68,7 +67,8 @@ $hy-font-size-hint: 26rpx;
 
 /* 边框颜色 */
 $hy-border-color-light: var(--hy-border-color-light, #c8c7cc) !default;
-$hy-border-color: var(--hy-border-color, #c8c7cc66) !default;
+$hy-border-color: var(--hy-border-color, #c2c2c4) !default;
+$hy-border-color--2: var(--hy-border-color--2, #c9cacc) !default;
 
 /* 图片尺寸 */
 $hy-img-size-sm: var(--hy-img-size-sm, 45rpx) !default;
@@ -97,27 +97,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid #dadbde) !default;
-
-
-/* 字体 */
-$hy-text-color: var(--hy-text-color, #3c3c43) !default; // 一般用于文字
-$hy-text-color--2: var(--hy-text-color--2, #67676c) !default; // 一般用于icon
-$hy-text-color--3: var(--hy-text-color--3, #929295) !default; // 一般用于icon
-$hy-text-color--4: var(--hy-text-color--4, #929295) !default; // 一般用于icon
-$hy-icon-color: var(--hy-icon-color, #606266) !default; // 一般用于icon
-$hy-text-color--grey: var(--hy-text-color-3, #999) !default; // 辅助灰色，如加载更多的提示信息
-$hy-text-color--placeholder: var(--hy-text-color--placeholder, #808080) !default; // 输入框提示颜色
-$hy-text-color--disabled: var(--hy-text-color--disabled, #c0c0c0) !default; // 禁用文字颜色
-$hy-border-color: var(--hy-border-color, #c0c0c0) !default;
-
-
-/* 背景色 */
-$hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
-$hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
-$hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
-$hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
-$hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
-$hy-background--track: var(--hy-background--track, #c6c7cb) !default;
-$hy-background--empty: var(--hy-background--empty, #f6f6f7) !default; // 搜索背景色
-$hy-background--hover: var(--hy-background--hover, #707070) !default; // 点击状态
+$hy-border-line: var(--hy-border-line, 1rpx solid #c2c2c4) !default;