hy-app 0.2.5 → 0.2.7

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 {
@@ -92,6 +129,10 @@ $state-prefix: 'is-' !default;
   }
 }
 
+/**
+  * 圆角形状
+  * @param $shape circle-半圆形，square-方形带圆角
+*/
 @mixin borderRadio($shape) {
   @include m($shape) {
     @if $shape == circle {
@@ -103,6 +144,90 @@ $state-prefix: 'is-' !default;
   }
 }
 
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @param $size 正方形边长
+  * @param $bg 正方形背景颜色
+  * @param $z-index z-index属性值，不得大于外部包裹器
+  * @param $box-shadow 阴影
+*/
+@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
+  @include e(arrow) {
+    position: absolute;
+    width: $size;
+    height: $size;
+    z-index: $z-index;
+  }
+
+  @include e(arrow-down) {
+    transform: translateX(-50%);
+    bottom: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      bottom: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-up) {
+    transform: translateX(-50%);
+    top: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      top: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-left) {
+    transform: translateY(-50%);
+    left: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-right) {
+    transform: translateY(-50%);
+    right: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      right: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+}
+
 
 /* flex布局 */
 @mixin flex($direction: row) {
@@ -135,4 +260,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.7",
+  "description": "feat: 气泡组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},

package/theme.scss

@@ -34,7 +34,7 @@ $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-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击状态文字颜色
 
 
 /* 背景色 */
@@ -48,6 +48,7 @@ $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索
 $hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.1)) !default; // 点击状态
 $hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
 $hy-background--active: var(--hy-background--active, #131313); // 选中背景色
+$hy-background--close: var(--hy-background--close, #f0f0f0); // 选中背景色
 
 /* 文字尺寸 */
 $hy-font-size-sm: 24rpx; // 提示文字大小

package/utils/inside.ts

@@ -1,5 +1,5 @@
 // 内部使用方法
-import { inject } from "vue";
+import { inject } from 'vue'
 
 /**
  * 生成bem规则类名
@@ -18,33 +18,31 @@ export const bem = (
   change?: string[],
 ): string | string[] => {
   // 类名前缀
-  const prefix = `hy-${name}--`;
-  const classes: Record<string, string | boolean> = {};
+  const prefix = `hy-${name}--`
+  const classes: Record<string, string | boolean> = {}
   if (fixed) {
     fixed.map((item: string) => {
       // 这里的类名，会一直存在
-      classes[prefix + props[item]] = true;
-      if (item === "type" && props["plain"]) {
-        classes[prefix + props[item] + "__plain"] = true;
+      classes[prefix + props[item]] = true
+      if (item === 'type' && props['plain']) {
+        classes[prefix + props[item] + '__plain'] = true
       }
-    });
+    })
   }
   if (change) {
     change.map((item: string) => {
       // 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
-      props[item]
-        ? (classes[prefix + item] = props[item])
-        : delete classes[prefix + item];
-    });
+      props[item] ? (classes[prefix + item] = props[item]) : delete classes[prefix + item]
+    })
   }
   return (
     Object.keys(classes)
       // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
       // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK
-      .join(" ")
+      .join(' ')
     // #endif
-  );
-};
+  )
+}
 
 /**
  * @description 在u-form的子组件内容发生变化，或者失去焦点时，尝试通知u-form执行校验方法
@@ -53,8 +51,7 @@ export const bem = (
  */
 export function formValidate(event) {
   // const formItem = $parent.call(instance, "u-form-item");
-  const form = inject("uForm");
-  console.log(form, "form");
+  const form = inject('uForm')
   // 如果发生变化的input或者textarea等，其父组件中有u-form-item或者u-form等，就执行form的validate方法
   // 同时将form-item的pros传递给form，让其进行精确对象验证
   // if (formItem && form) {
@@ -68,18 +65,18 @@ export function formValidate(event) {
  */
 export function error(err: string) {
   // 开发环境才提示，生产环境不会提示
-  if (process.env.NODE_ENV === "development") {
-    console.error(`华玥组件提示：${err}`);
+  if (process.env.NODE_ENV === 'development') {
+    console.error(`华玥组件提示：${err}`)
   }
 }
 
 export const sleep = (value = 30) => {
   return new Promise((resolve) => {
     setTimeout(() => {
-      resolve();
-    }, value);
-  });
-};
+      resolve()
+    }, value)
+  })
+}
 
 /**
  * @param {Number} len uuid的长度
@@ -87,67 +84,62 @@ export const sleep = (value = 30) => {
  * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
  */
 export function guid(len = 32, firstU = true, radix = null) {
-  const chars =
-    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
-  const uuid = [];
-  radix = radix || chars.length;
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+  const uuid = []
+  radix = radix || chars.length
 
   if (len) {
     // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
-    for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+    for (let i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
   } else {
-    let r;
+    let r
     // rfc4122标准要求返回的uuid中,某些位为固定的字符
-    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
-    uuid[14] = "4";
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+    uuid[14] = '4'
 
     for (let i = 0; i < 36; i++) {
       if (!uuid[i]) {
-        r = 0 | (Math.random() * 16);
-        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+        r = 0 | (Math.random() * 16)
+        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
       }
     }
   }
   // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
   if (firstU) {
-    uuid.shift();
-    return `hy${uuid.join("")}`;
+    uuid.shift()
+    return `hy${uuid.join('')}`
   }
-  return uuid.join("");
+  return uuid.join('')
 }
 
 /**
  * @description 获取设备信息
  * */
 export const getWindowInfo = (): UniNamespace.GetWindowInfoResult => {
-  let ret: UniNamespace.GetWindowInfoResult;
+  let ret: UniNamespace.GetWindowInfoResult
   // #ifdef APP || H5 || MP-WEIXIN
-  ret = uni.getWindowInfo();
+  ret = uni.getWindowInfo()
   // #endif
-  return ret;
-};
+  return ret
+}
 
 function pickExclude(obj, keys) {
   // 某些情况下，type可能会为
-  if (
-    !["[object Object]", "[object File]"].includes(
-      Object.prototype.toString.call(obj),
-    )
-  ) {
-    return {};
+  if (!['[object Object]', '[object File]'].includes(Object.prototype.toString.call(obj))) {
+    return {}
   }
   return Object.keys(obj).reduce((prev, key) => {
     if (!keys.includes(key)) {
-      prev[key] = obj[key];
+      prev[key] = obj[key]
     }
-    return prev;
-  }, {});
+    return prev
+  }, {})
 }
 
 function formatImage(res) {
   return res.tempFiles.map((item) => ({
-    ...pickExclude(item, ["path"]),
-    type: "image",
+    ...pickExclude(item, ['path']),
+    type: 'image',
     url: item.path,
     thumb: item.path,
     size: item.size,
@@ -155,14 +147,14 @@ function formatImage(res) {
     name: item.name,
     file: item,
     // #endif
-  }));
+  }))
 }
 
 function formatVideo(res) {
   return [
     {
-      ...pickExclude(res, ["tempFilePath", "thumbTempFilePath", "errMsg"]),
-      type: "video",
+      ...pickExclude(res, ['tempFilePath', 'thumbTempFilePath', 'errMsg']),
+      type: 'video',
       url: res.tempFilePath,
       thumb: res.thumbTempFilePath,
       size: res.size,
@@ -171,25 +163,25 @@ function formatVideo(res) {
       file: res,
       // #endif
     },
-  ];
+  ]
 }
 
 function formatMedia(res) {
   return res.tempFiles.map((item) => ({
-    ...pickExclude(item, ["fileType", "thumbTempFilePath", "tempFilePath"]),
+    ...pickExclude(item, ['fileType', 'thumbTempFilePath', 'tempFilePath']),
     type: res.type,
     url: item.tempFilePath,
-    thumb: res.type === "video" ? item.thumbTempFilePath : item.tempFilePath,
+    thumb: res.type === 'video' ? item.thumbTempFilePath : item.tempFilePath,
     size: item.size,
     // #ifdef H5
     file: item,
     // #endif
-  }));
+  }))
 }
 
 function formatFile(res) {
   return res.tempFiles.map((item) => ({
-    ...pickExclude(item, ["path"]),
+    ...pickExclude(item, ['path']),
     url: item.path,
     size: item.size,
     // #ifdef H5
@@ -197,7 +189,7 @@ function formatFile(res) {
     type: item.type,
     file: item,
     // #endif
-  }));
+  }))
 }
 
 export function chooseFile({
@@ -213,18 +205,18 @@ export function chooseFile({
 }: any) {
   return new Promise((resolve, reject) => {
     switch (accept) {
-      case "image":
+      case 'image':
         uni.chooseImage({
           count: multiple ? Math.min(maxCount, 9) : 1,
           sourceType: capture,
           sizeType,
           success: (res) => resolve(formatImage(res)),
           fail: reject,
-        });
-        break;
+        })
+        break
       // #ifdef MP-WEIXIN
       // 只有微信小程序才支持chooseMedia接口
-      case "media":
+      case 'media':
         wx.chooseMedia({
           count: multiple ? Math.min(maxCount, 9) : 1,
           sourceType: capture,
@@ -233,10 +225,10 @@ export function chooseFile({
           camera,
           success: (res) => resolve(formatMedia(res)),
           fail: reject,
-        });
-        break;
+        })
+        break
       // #endif
-      case "video":
+      case 'video':
         uni.chooseVideo({
           sourceType: capture,
           compressed,
@@ -244,18 +236,18 @@ export function chooseFile({
           camera,
           success: (res) => resolve(formatVideo(res)),
           fail: reject,
-        });
-        break;
+        })
+        break
       // #ifdef MP-WEIXIN || H5
       // 只有微信小程序才支持chooseMessageFile接口
-      case "file":
+      case 'file':
         // #ifdef MP-WEIXIN
         wx.chooseMessageFile({
           count: multiple ? maxCount : 1,
           type: accept,
           success: (res) => resolve(formatFile(res)),
           fail: reject,
-        });
+        })
         // #endif
         // #ifdef H5
         // 需要hx2.9.9以上才支持uni.chooseFile
@@ -264,39 +256,39 @@ export function chooseFile({
           type: accept,
           success: (res) => resolve(formatFile(res)),
           fail: reject,
-        };
+        }
         if (extension.length && extension.length > 0) {
-          params.extension = extension;
+          params.extension = extension
         }
-        uni.chooseFile(params);
+        uni.chooseFile(params)
         // #endif
-        break;
+        break
       // #endif
       default:
         // 此为保底选项，在accept不为上面任意一项的时候选取全部文件
         // #ifdef MP-WEIXIN
         wx.chooseMessageFile({
           count: multiple ? maxCount : 1,
-          type: "all",
+          type: 'all',
           success: (res) => resolve(formatFile(res)),
           fail: reject,
-        });
+        })
         // #endif
         // #ifdef H5
         // 需要hx2.9.9以上才支持uni.chooseFile
         let paramsFile = {
           count: multiple ? maxCount : 1,
-          type: "all",
+          type: 'all',
           success: (res) => resolve(formatFile(res)),
           fail: reject,
-        };
+        }
         if (extension.length && extension.length > 0) {
-          paramsFile.extension = extension;
+          paramsFile.extension = extension
         }
-        uni.chooseFile(paramsFile);
+        uni.chooseFile(paramsFile)
       // #endif
     }
-  });
+  })
 }
 
 /**
@@ -310,28 +302,27 @@ export function chooseFile({
 export function priceFormat(
   number: string | number,
   decimals = 0,
-  decimalPoint = ".",
-  thousandsSeparator = ",",
+  decimalPoint = '.',
+  thousandsSeparator = ',',
 ) {
-  number = `${number}`.replace(/[^0-9+-Ee.]/g, "");
-  const n = !isFinite(+number) ? 0 : +number;
-  const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
-  const sep =
-    typeof thousandsSeparator === "undefined" ? "," : thousandsSeparator;
-  const dec = typeof decimalPoint === "undefined" ? "." : decimalPoint;
-  let s = "";
+  number = `${number}`.replace(/[^0-9+-Ee.]/g, '')
+  const n = !isFinite(+number) ? 0 : +number
+  const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
+  const sep = typeof thousandsSeparator === 'undefined' ? ',' : thousandsSeparator
+  const dec = typeof decimalPoint === 'undefined' ? '.' : decimalPoint
+  let s = ''
 
-  s = (prec ? n + "" : `${Math.round(n)}`).split(".");
-  const re = /(-?\d+)(\d{3})/;
+  s = (prec ? n + '' : `${Math.round(n)}`).split('.')
+  const re = /(-?\d+)(\d{3})/
   while (re.test(s[0])) {
-    s[0] = s[0].replace(re, `$1${sep}$2`);
+    s[0] = s[0].replace(re, `$1${sep}$2`)
   }
 
-  if ((s[1] || "").length < prec) {
-    s[1] = s[1] || "";
-    s[1] += new Array(prec - s[1].length + 1).join("0");
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || ''
+    s[1] += new Array(prec - s[1].length + 1).join('0')
   }
-  return s.join(dec);
+  return s.join(dec)
 }
 
 /**
@@ -340,20 +331,17 @@ export function priceFormat(
  * @return {string}
  * */
 export const formatName = (name: string): string => {
-  let value = "";
+  let value = ''
   if (name.length === 2) {
-    value = name.substring(0, 1) + "*";
+    value = name.substring(0, 1) + '*'
   } else if (name.length > 2) {
-    let char = "";
+    let char = ''
     for (let i = 0, len = name.length - 2; i < len; i++) {
-      char += "*";
+      char += '*'
     }
-    value =
-      name.substring(0, 1) +
-      char +
-      name.substring(name.length - 1, name.length);
+    value = name.substring(0, 1) + char + name.substring(name.length - 1, name.length)
   } else {
-    value = name;
+    value = name
   }
-  return value;
-};
+  return value
+}