@tplc/wot 0.0.1

package/components/common/AbortablePromise.ts

@@ -0,0 +1,36 @@
+export class AbortablePromise<T> {
+  promise: Promise<T>
+  private _reject: ((res?: any) => void) | null = null
+
+  constructor(
+    executor: (
+      resolve: (value: T | PromiseLike<T>) => void,
+      reject: (reason?: any) => void,
+    ) => void,
+  ) {
+    this.promise = new Promise<T>((resolve, reject) => {
+      executor(resolve, reject)
+      this._reject = reject // 保存reject方法的引用，以便在abort时调用
+    })
+  }
+
+  // 提供abort方法来中止Promise
+  abort(error?: any) {
+    if (this._reject) {
+      this._reject(error) // 调用reject方法来中止Promise
+    }
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
+    onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null,
+  ): Promise<TResult1 | TResult2> {
+    return this.promise.then(onfulfilled, onrejected)
+  }
+
+  catch<TResult = never>(
+    onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null,
+  ): Promise<T | TResult> {
+    return this.promise.catch(onrejected)
+  }
+}

package/components/common/abstracts/_config.scss

@@ -0,0 +1,7 @@
+/**
+ * SCSS 配置项：命名空间以及BEM
+ */
+$namespace: 'wd';
+$elementSeparator: '__';
+$modifierSeparator: '--';
+$state-prefix: 'is-';

package/components/common/abstracts/_function.scss

@@ -0,0 +1,76 @@
+/**
+ * 辅助函数
+ */
+@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/components/common/abstracts/_mixin.scss

@@ -0,0 +1,339 @@
+/**
+ * 混合宏
+ */
+@import 'config';
+@import 'function';
+/**
+  * BEM，定义块（b)
+  */
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin e($element...) {
+  $selector: &;
+  $selectors: '';
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+/* 此方法用于生成穿透样式 */
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin edeep($element...) {
+  $selector: &;
+  $selectors: '';
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      #{$selector} {
+        :deep() {
+          #{$selectors} {
+            @content;
+          }
+        }
+      }
+    }
+  } @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      :deep() {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+}
+/* 定义状态（m） */
+@mixin m($modifier...) {
+  $selectors: '';
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + $modifierSeparator + $item + ','};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
+@mixin me($element...) {
+  $selector: &;
+  $selectors: '';
+
+  @if containsModifier($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + '.' + $B + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ','};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+/* 状态，生成 is-$state 类名 */
+@mixin when($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+/**
+  * 常用混合宏
+  */
+/* 单行超出隐藏 */
+@mixin lineEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 多行超出隐藏 */
+@mixin multiEllipsis($lineNumber: 3) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lineNumber;
+  overflow: hidden;
+}
+/* 清除浮动 */
+@mixin clearFloat {
+  &::after {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+    visibility: hidden;
+    content: '';
+  }
+}
+/* 0.5px 边框 指定方向*/
+@mixin halfPixelBorder($direction: 'bottom', $left: 0, $color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    left: $left;
+    display: block;
+
+    height: 1px;
+    content: '';
+    background: $color;
+
+    transform: scaleY(0.5);
+
+    @if ($left==0) {
+      width: 100%;
+    } @else {
+      width: calc(100% - #{$left});
+    }
+
+    @if ($direction== 'bottom') {
+      bottom: 0;
+    } @else {
+      top: 0;
+    }
+  }
+}
+/* 0.5px 边框 环绕 */
+@mixin halfPixelBorderSurround($color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    display: block;
+    width: 200%;
+    height: 200%;
+    pointer-events: none;
+    content: ' ';
+    border: 1px solid $color;
+    transform: scale(0.5);
+    transform-origin: left top;
+  }
+}
+
+@mixin buttonClear {
+  -webkit-appearance: none;
+  background: transparent;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+/**
+  * 三角形实现尖角样式，适用于背景透明情况
+  * @param $size 三角形高，底边为 $size * 2
+  * @param $bg 三角形背景颜色
+  */
+@mixin triangleArrow($size, $bg) {
+  @include e(arrow) {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  @include e(arrow-down) {
+    bottom: calc(-1 * $size);
+    border-top: $size solid $bg;
+    border-right: $size solid transparent;
+    border-left: $size solid transparent;
+    transform: translateX(-50%);
+  }
+
+  @include e(arrow-up) {
+    top: calc(-1 * $size);
+    border-right: $size solid transparent;
+    border-bottom: $size solid $bg;
+    border-left: $size solid transparent;
+    transform: translateX(-50%);
+  }
+
+  @include e(arrow-left) {
+    left: calc(-1 * $size);
+    border-top: $size solid transparent;
+    border-right: $size solid $bg;
+    border-bottom: $size solid transparent;
+    transform: translateY(-50%);
+  }
+
+  @include e(arrow-right) {
+    right: calc(-1 * $size);
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $bg;
+    transform: translateY(-50%);
+  }
+}
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @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;
+    z-index: $z-index;
+    width: $size;
+    height: $size;
+  }
+
+  @include e(arrow-down) {
+    bottom: 0;
+    transform: translateX(-50%);
+
+    &:after {
+      position: absolute;
+      bottom: calc(-1 * $size / 2);
+      left: 0;
+      width: $size;
+      height: $size;
+      content: '';
+      background-color: $bg;
+      box-shadow: $box-shadow;
+      transform: rotateZ(45deg);
+    }
+  }
+
+  @include e(arrow-up) {
+    top: 0;
+    transform: translateX(-50%);
+
+    &:after {
+      position: absolute;
+      top: calc(-1 * $size / 2);
+      left: 0;
+      width: $size;
+      height: $size;
+      content: '';
+      background-color: $bg;
+      box-shadow: $box-shadow;
+      transform: rotateZ(45deg);
+    }
+  }
+
+  @include e(arrow-left) {
+    left: 0;
+    transform: translateY(-50%);
+
+    &:after {
+      position: absolute;
+      top: 0;
+      left: calc(-1 * $size / 2);
+      width: $size;
+      height: $size;
+      content: '';
+      background-color: $bg;
+      box-shadow: $box-shadow;
+      transform: rotateZ(45deg);
+    }
+  }
+
+  @include e(arrow-right) {
+    right: 0;
+    transform: translateY(-50%);
+
+    &:after {
+      position: absolute;
+      top: 0;
+      right: calc(-1 * $size / 2);
+      width: $size;
+      height: $size;
+      content: '';
+      background-color: $bg;
+      box-shadow: $box-shadow;
+      transform: rotateZ(45deg);
+    }
+  }
+}