hy-app 0.2.5 → 0.2.6

package/components/hy-modal/index.scss

@@ -6,70 +6,94 @@
   border-radius: $hy-border-radius-base;
   overflow: hidden;
 
+  /* 标题 */
   &__title {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: $hy-font-size-base;
     font-weight: bold;
     color: $hy-text-color;
     text-align: center;
     padding-top: 25px;
   }
 
+  /* 内容 */
   &__content {
     padding: 20px;
     @include flex;
     justify-content: center;
 
     &__text {
-      font-size: 15px;
+      font-size: $hy-font-size-sm;
       color: $hy-text-color--grey;
       flex: 1;
       text-align: center;
     }
   }
 
-  &__button-group {
-    border-top: $hy-border-line;
-    @include flex;
-
-    &--confirm-button {
-      flex-direction: column;
-      padding: 0 25px 15px;
+  /* 底部按钮 */
+  &__button {
+    /* 两个按钮的样式 */
+    &-exact {
+      view:first-child {
+        margin-right: $hy-border-margin-padding-lg;
+      }
+      &--reverse {
+        view:last-child {
+          margin-right: $hy-border-margin-padding-lg;
+        }
+      }
     }
 
-    &__wrapper {
-      flex: 1;
+
+    &-group {
       @include flex;
-      justify-content: center;
-      align-items: center;
-      height: 48px;
+      padding: 20px;
 
-      &--confirm,
-      &--only-cancel {
-        border-bottom-right-radius: $hy-border-radius-base;
+      /* 自定义底部按钮 */
+      &--confirm-button {
+        flex-direction: column;
+        padding: 0 25px 15px;
       }
 
-      &--cancel,
-      &--only-confirm {
-        border-bottom-left-radius: $hy-border-radius-base;
-      }
 
-      &--hover {
-        background-color: $hy-background--hover;
-      }
+      &__wrapper {
+        flex: 1;
+        @include flex;
+        justify-content: center;
+        align-items: center;
+        height: 43px;
+        border-radius: $hy-border-radius-semicircle;
 
-      &__text {
-        color: $hy-text-color--2;
-        font-size: 16px;
-        text-align: center;
-      }
+        /* 确认 */
+        &--confirm {
+          background-color: $hy-primary;
+          &-text {
+            color: #FFFFFF;
+          }
+        }
+
+        /* 取消 */
+        &--cancel {
+          //background-color: $hy-background--empty;
+          background-color: #323233;
+
+          &-text {
+            color: $hy-text-color;
+          }
+        }
+
+        &--hover {
+          background-color: $hy-background--hover;
+        }
 
-      &--confirm-text {
-        color: $hy-primary;
+        &__text {
+          font-size: 16px;
+          text-align: center;
+        }
       }
     }
   }
-}
+}

package/components/hy-modal/props.ts

@@ -1,24 +1,25 @@
-import type IProps from "./typing";
-import { ColorConfig } from "../../config";
+import type IProps from './typing'
+import { ColorConfig } from '../../config'
 
 const defaultProps: IProps = {
-  show: false,
-  title: "",
-  content: "",
-  confirmText: "确认",
-  cancelText: "取消",
+  modelValue: false,
+  title: '',
+  content: '',
+  confirmText: '确认',
+  cancelText: '取消',
   showConfirmButton: true,
   showCancelButton: false,
-  confirmColor: "",
-  cancelColor: "",
+  confirmColor: '',
+  cancelColor: '',
   buttonReverse: false,
   zoom: true,
+  round: 16,
   asyncClose: false,
   closeOnClickOverlay: false,
   negativeTop: 0,
-  width: "550rpx",
-  confirmButtonShape: "",
-  contentTextAlign: "left",
-};
+  width: '550rpx',
+  confirmButtonShape: '',
+  contentTextAlign: 'left',
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,70 +1,76 @@
+import { RowCenterType } from 'hy-app/typing/modules/common'
+
 export default interface HyModalProps {
   /**
    * @description 是否显示模态框，请赋值给show （默认 false ）
    * */
-  show: boolean;
+  modelValue: boolean
   /**
    * @description 标题内容
    * */
-  title?: string;
+  title?: string
   /**
    * @description 模态框内容，如传入slot内容，则此参数无效
    * */
-  content?: string;
+  content?: string
   /**
    * @description 确认按钮的文字 （默认 '确认' ）
    * */
-  confirmText?: string;
+  confirmText?: string
   /**
    * @description 取消按钮的文字 （默认 '取消' ）
    * */
-  cancelText?: string;
+  cancelText?: string
   /**
    * @description 是否显示确认按钮 （默认 true ）
    * */
-  showConfirmButton?: boolean;
+  showConfirmButton?: boolean
   /**
    * @description 是否显示取消按钮 （默认 false ）
    * */
-  showCancelButton?: boolean;
+  showCancelButton?: boolean
   /**
    * @description 确认按钮的颜色 （默认 '#2979ff' ）
    * */
-  confirmColor?: string;
+  confirmColor?: string
   /**
    * @description 取消按钮的颜色 （默认 '#606266' ）
    * */
-  cancelColor?: string;
+  cancelColor?: string
   /**
    * @description 对调确认和取消的位置 （默认 false ）
    * */
-  buttonReverse?: boolean;
+  buttonReverse?: boolean
   /**
    * @description 是否开启缩放模式 （默认 true ）
    * */
-  zoom?: boolean;
+  zoom?: boolean
+  /**
+   * @description 弹窗的圆角 （默认 16 ）
+   * */
+  round?: string | number
   /**
    * @description 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
    * */
-  asyncClose?: boolean;
+  asyncClose?: boolean
   /**
    * @description 是否允许点击遮罩关闭Modal （默认 false ）
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
    * */
-  negativeTop?: number;
+  negativeTop?: number
   /**
    * @description modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
    * */
-  width?: string | number;
+  width?: string | number
   /**
    * @description 确认按钮的样式,如设置，将不会显示取消按钮
    * */
-  confirmButtonShape?: HyApp.ShapeType | "";
+  confirmButtonShape?: HyApp.ShapeType | ''
   /**
    * @description 文案对齐方式
    * */
-  contentTextAlign?: HyApp.LeftRightType | "center";
+  contentTextAlign?: HyApp.RowCenterType
 }

package/components/hy-popup/index.scss

@@ -6,7 +6,7 @@
   flex: 1;
 
   &__content {
-    background-color: $hy-background--2;
+    background-color: $hy-background--container;
     position: relative;
 
     &--round-top {
@@ -57,4 +57,4 @@
       bottom: $hy-border-margin-padding-lg;
     }
   }
-}
+}

package/components/hy-popup/props.ts

@@ -1,9 +1,9 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
   show: false,
   overlay: true,
-  mode: "bottom",
+  mode: 'bottom',
   duration: 300,
   closeable: false,
   overlayStyle: {},
@@ -12,10 +12,10 @@ const defaultProps: IProps = {
   zIndex: 10075,
   safeAreaInsetBottom: true,
   safeAreaInsetTop: false,
-  closeIconPos: "top-right",
-  round: 0,
+  closeIconPos: 'top-right',
+  round: '',
   zoom: true,
-  bgColor: "",
-};
+  bgColor: '',
+}
 
-export default defaultProps;
+export default defaultProps

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

@@ -1,68 +1,68 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyPopupProps {
   /**
    * @description 是否展示弹窗 (默认 false )
    * */
-  show: boolean;
+  show: boolean
   /**
    * @description 是否显示遮罩 （默认 true ）
    * */
-  overlay?: boolean;
+  overlay?: boolean
   /**
    * @description 弹出方向（默认 'bottom' ）
    * */
-  mode?: HyApp.LayoutType;
+  mode?: HyApp.LayoutType
   /**
    * @description 动画时长，单位ms （默认 300 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 是否显示关闭图标（默认 false ）
    * */
-  closeable?: boolean;
+  closeable?: boolean
   /**
    * @description 自定义遮罩的样式
    * */
-  overlayStyle?: CSSProperties;
+  overlayStyle?: CSSProperties
   /**
    * @description 遮罩透明度，0-1之间（默认 0.5）
    * */
-  overlayOpacity?: number;
+  overlayOpacity?: number
   /**
    * @description 点击遮罩是否关闭弹窗 （默认  true ）
    * */
-  closeOnClickOverlay?: boolean;
+  closeOnClickOverlay?: boolean
   /**
    * @description 层级 （默认 10075 ）
    * */
-  zIndex?: number;
+  zIndex?: number
   /**
    * @description 是否为iPhoneX留出底部安全距离 （默认 true ）
    * */
-  safeAreaInsetBottom?: boolean;
+  safeAreaInsetBottom?: boolean
   /**
    * @description 是否留出顶部安全距离（状态栏高度） （默认 false ）
    * */
-  safeAreaInsetTop?: boolean;
+  safeAreaInsetTop?: boolean
   /**
    * @description 自定义关闭图标位置（默认 'top-right' ）
    * */
-  closeIconPos?: "top-left" | "top-right";
+  closeIconPos?: 'top-left' | 'top-right'
   /**
    * @description 圆角值（默认 0）
    * */
-  round?: number;
+  round?: string | number
   /**
    * @description 当mode=center时 是否开启缩放（默认 true ）
    * */
-  zoom?: boolean;
+  zoom?: boolean
   /**
    * @description 背景颜色
    * */
-  bgColor?: string;
+  bgColor?: string
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
 }

package/components/hy-signature/props.ts

@@ -1,29 +1,29 @@
-import type IProps from "./typing";
+import type IProps from './typing'
 
 const defaultProps: IProps = {
-  penColor: "#000",
-  lineWidth: 2,
-  clearText: "清空",
-  revokeText: "撤销",
-  restoreText: "恢复",
-  confirmText: "确认",
-  fileType: "png",
+  penColor: '#000',
+  lineWidth: 3,
+  clearText: '清空',
+  revokeText: '撤销',
+  restoreText: '恢复',
+  confirmText: '确认',
+  fileType: 'png',
   quality: 1,
   exportScale: 1,
   disabled: false,
   height: 1,
   width: 1,
-  round: "10rpx",
-  backgroundColor: "",
+  round: '10rpx',
+  backgroundColor: '',
   disableScroll: true,
   enableHistory: false,
   step: 1,
-  undoText: "",
-  redoText: "",
+  undoText: '',
+  redoText: '',
   pressure: false,
   minWidth: 2,
   maxWidth: 6,
   minSpeed: 1.5,
-};
+}
 
-export default defaultProps;
+export default defaultProps

package/components/hy-tooltip/index.scss

@@ -58,9 +58,9 @@
         z-index: -1;
 
         &--hover {
-          background-color: $hy-text-color-hover;
+          background-color: $hy-text-color--hover;
         }
       }
     }
   }
-}
+}

package/libs/css/_config.scss

@@ -0,0 +1,5 @@
+$namespace: 'hy' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/libs/css/_function.scss

@@ -0,0 +1,89 @@
+/**
+ * 辅助函数
+ */
+@import 'config';
+$default-theme: #4d80f0 !default; // 正常色
+
+/* 转换成字符串 */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+
+  @return $selector;
+}
+
+/* 判断是否存在 Modifier */
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifierSeparator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/* 判断是否存在伪类 */
+@function containsPseudo($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+
+/**
+ * 主题色切换
+ * @params $theme-color 主题色
+ * @params $type 变暗’dark‘ 变亮 'light'
+ * @params $mix-color 自己设置的混色
+ */
+@function themeColor($theme-color, $type: "", $mix-color: "") {
+  @if $default-theme !=#4d80f0 {
+    @if $type=="dark" {
+      @return darken($theme-color, 10%);
+    }
+
+    @else if $type=="light" {
+      @return lighten($theme-color, 10%);
+    }
+
+    @else {
+      @return $theme-color;
+    }
+  }
+
+  @else {
+    @return $mix-color;
+  }
+}
+
+/**
+ * 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
+ * @params $open-linear 是否开启线性渐变色
+ * @params $deg 渐变色角度
+ * @params $theme-color 当前配色
+ * @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
+ * @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
+ * @params [Array] $per-list 渐变色比例
+ */
+@function resultColor($deg, $theme-color, $set, $color-list, $per-list) {
+  // 开启渐变
+
+  $len: length($color-list);
+  $arg: $deg;
+
+  @for $i from 1 through $len {
+    $arg: $arg + ","+ themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " "+ nth($per-list, $i);
+  }
+
+  @return linear-gradient(unquote($arg));
+
+}

package/libs/css/mixin.scss

@@ -1,9 +1,7 @@
 @use "../../theme.scss";
-$namespace: 'hy' !default;
-$common-separator: '-' !default;
-$element-separator: '__' !default;
-$modifier-separator: '--' !default;
-$state-prefix: 'is-' !default;
+@import "config";
+@import "function";
+
 
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;
@@ -31,36 +29,75 @@ $state-prefix: 'is-' !default;
   }
 }
 
-@mixin e($element) {
-  $E: $element !global;
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin e($element...) {
   $selector: &;
-  $currentSelector: '';
-  @each $unit in $element {
-    $currentSelector: #{$currentSelector +
-      '.' +
-      $B +
-      $element-separator +
-      $unit +
-      ','};
-  }
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $element-separator + $item + ","};
+    }
 
-  @if hitAllSpecialNestRule($selector) {
     @at-root {
       #{$selector} {
-        #{$currentSelector} {
+        #{$selectors} {
           @content;
         }
       }
     }
-  } @else {
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $element-separator + $item + ","};
+    }
+
     @at-root {
-      #{$currentSelector} {
+      #{$selectors} {
         @content;
       }
     }
   }
 }
 
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin edeep($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $element-separator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        :deep() {
+          #{$selectors} {
+            @content;
+          }
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $element-separator + $item + ","};
+    }
+
+    @at-root {
+      :deep() {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+}
+
 /* 状态，生成 is-$state 类名 */
 @mixin is($states...) {
   @at-root {
@@ -135,4 +172,4 @@ $state-prefix: 'is-' !default;
   -webkit-line-clamp: $lineNumber;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}

package/libs/css/vars.css

@@ -19,6 +19,7 @@
   --hy-background--empty: #F3F3F3;
   --hy-background--hover: rgba(0,0,0,0.05);
   --hy-background--active: #FFFFFF;
+  --hy-background--close:  #f0f0f0;
 
   --hy-border-line: 1rpx solid #c2c2c4;
   --hy-border-color: #c2c2c4;
@@ -50,8 +51,9 @@
   --hy-background--empty: #3A3A44;
   --hy-background--hover: rgba(255,255,255,0.2);
   --hy-background--active: #000000;
+  --hy-background--close:  #323233;
 
   --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.5",
-  "description": "修复在微信小程序线上bug",
+  "version": "0.2.6",
+  "description": "修改模态框样式、加了摇一摇功能",
   "main": "./index.ts",
   "private": false,
   "scripts": {},