@cloudbase/weda-ui-mp 3.6.0

package/components/tooltip/index.js

@@ -0,0 +1,290 @@
+Component({
+  data: {
+    popStyle: '',
+    arrowStyle: '',
+    showStyle: '',
+    selector: 'tooltip',
+  },
+
+  properties: {
+    visibleArrow: {
+      type: Boolean,
+      value: true,
+    },
+    // 显示内容 String || Array
+    content: {
+      type: String,
+      value: '',
+    },
+    placement: {
+      type: String,
+      value: 'top',
+    },
+    offsetX: {
+      type: Number,
+      value: 0,
+    },
+    offsetY: {
+      type: Number,
+      value: 0,
+    },
+    useContentSlot: {
+      type: Boolean,
+      value: false,
+    },
+    show: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      this.setData({
+        showStyle: this.data.show ? 'opacity: 1;' : 'opacity: 0;',
+      });
+      this.init();
+      this.handleShow();
+    },
+  },
+
+  methods: {
+    init() {
+      // 初始化 class
+      const { placement, visibleArrow, selector } = this.data;
+      if (visibleArrow) {
+        let arrowClass = [
+          `wd-${selector}__arrow`,
+          placement === 'bottom' ||
+          placement === 'bottom-start' ||
+          placement === 'bottom-end'
+            ? `wd-${selector}__arrow-up`
+            : '',
+          placement === 'left' ||
+          placement === 'left-start' ||
+          placement === 'left-end'
+            ? `wd-${selector}__arrow-right`
+            : '',
+          placement === 'right' ||
+          placement === 'right-start' ||
+          placement === 'right-end'
+            ? `wd-${selector}__arrow-left`
+            : '',
+          placement === 'top' ||
+          placement === 'top-start' ||
+          placement === 'top-end'
+            ? `wd-${selector}__arrow-down`
+            : '',
+        ];
+        arrowClass = arrowClass.join(' ');
+        this.setData({ arrowClass });
+      }
+
+      Promise.all([
+        this.getRect('#target').then((rect) => {
+          if (!rect) return;
+          this.left = rect.left;
+          this.bottom = rect.bottom;
+          this.width = rect.width;
+          this.height = rect.height;
+          this.top = rect.top;
+        }),
+        this.getRect('#pos').then((rect) => {
+          if (!rect) return;
+          this.popWidth = rect.width;
+          this.popHeight = rect.height;
+        }),
+      ]).then(() => {
+        this.control();
+      });
+    },
+
+    getRect(selector) {
+      return new Promise((res, rej) => {
+        wx.createSelectorQuery()
+          .in(this)
+          .select(selector)
+          .boundingClientRect((rect) => {
+            if (!rect) {
+              rej();
+            }
+            res(rect);
+          })
+          .exec();
+      });
+    },
+
+    control() {
+      const {
+        placement,
+        offsetX: userOffsetX,
+        offsetY: userOffsetY,
+      } = this.data;
+      // arrow size
+      const arrowSize = 9;
+      // 上下位（纵轴）对应的距离左边的距离
+      const verticalX = this.width / 2;
+      // 上下位（纵轴）对应的距离底部的距离
+      const verticalY = arrowSize + this.height + 5;
+      // 左右位（横轴）对应的距离左边的距离
+      const horizontalX = this.width + arrowSize + 5;
+      // 左右位（横轴）对应的距离底部的距离
+      const horizontalY = this.height / 2;
+
+      const offsetX = verticalX - 17 > 0 ? 0 : verticalX - 25;
+      const offsetY = horizontalY - 17 > 0 ? 0 : horizontalY - 25;
+
+      const placements = new Map([
+        // 上
+        [
+          'top',
+          [
+            `left: ${verticalX}px; bottom: ${verticalY}px; transform: translate(calc(-50% + ${userOffsetX}px), ${userOffsetY}px);`,
+            'left: 50%;',
+          ],
+        ],
+        [
+          'top-start',
+          [
+            `left: ${offsetX}px; bottom: ${verticalY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `left: ${
+              (this.popWidth >= this.width
+                ? this.width / 2
+                : this.popWidth - 25) - offsetX
+            }px;`,
+          ],
+        ],
+        [
+          'top-end',
+          [
+            `right: ${offsetX}px; bottom: ${verticalY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `right: ${
+              (this.popWidth >= this.width
+                ? this.width / 2
+                : this.popWidth - 25) - offsetX
+            }px; transform: translate(calc(50% + ${userOffsetX}px), ${userOffsetY}px);`,
+          ],
+        ],
+        // 下
+        [
+          'bottom',
+          [
+            `left: ${verticalX}px; top: ${verticalY}px; transform: translateX(calc(-50% + ${userOffsetX}px, ${userOffsetY}px));`,
+            'left: 50%;',
+          ],
+        ],
+        [
+          'bottom-start',
+          [
+            `left: ${offsetX}px; top: ${verticalY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `left: ${
+              (this.popWidth >= this.width
+                ? this.width / 2
+                : this.popWidth - 25) - offsetX
+            }px;`,
+          ],
+        ],
+        [
+          'bottom-end',
+          [
+            `right: ${offsetX}px; top: ${verticalY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `right: ${
+              (this.popWidth >= this.width
+                ? this.width / 2
+                : this.popWidth - 25) - offsetX
+            }px; transform: translateX(50%);`,
+          ],
+        ],
+        // 左
+        [
+          'left',
+          [
+            `right: ${horizontalX}px; top: ${horizontalY}px; transform: translate(${userOffsetX}px, calc(-50% + ${userOffsetY}px));`,
+            'top: 50%',
+          ],
+        ],
+        [
+          'left-start',
+          [
+            `right: ${horizontalX}px; top: ${offsetY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `top: ${
+              (this.popHeight >= this.height
+                ? this.height / 2
+                : this.popHeight - 20) - offsetY
+            }px;`,
+          ],
+        ],
+        [
+          'left-end',
+          [
+            `right: ${horizontalX}px; bottom: ${offsetY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `bottom: ${
+              (this.popHeight >= this.height
+                ? this.height / 2
+                : this.popHeight - 20) - offsetY
+            }px; transform: translateY(50%);`,
+          ],
+        ],
+        // 右
+        [
+          'right',
+          [
+            `left: ${horizontalX}px; top: ${horizontalY}px; transform: translate(${userOffsetX}px, calc(-50% + ${userOffsetY}px));`,
+            'top: 50%',
+          ],
+        ],
+        [
+          'right-start',
+          [
+            `left: ${horizontalX}px; top: ${offsetY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `top: ${
+              (this.popHeight >= this.height
+                ? this.height / 2
+                : this.popHeight - 20) - offsetY
+            }px;`,
+          ],
+        ],
+        [
+          'right-end',
+          [
+            `left: ${horizontalX}px; bottom: ${offsetY}px; transform: translate(${userOffsetX}px, ${userOffsetY}px);`,
+            `bottom: ${
+              (this.popHeight >= this.height
+                ? this.height / 2
+                : this.popHeight - 20) - offsetY
+            }px; transform: translateY(50%);`,
+          ],
+        ],
+      ]);
+
+      const [popStyle, arrowStyle] = [
+        placements.get(placement)[0],
+        placements.get(placement)[1],
+      ];
+
+      this.setData({
+        popStyle,
+        arrowStyle,
+      });
+    },
+
+    handleShow() {
+      const { show } = this.data;
+      if (show) {
+        this.control();
+      }
+      this.setData({
+        showStyle: show ? 'display: inline-block;' : 'display: none;',
+      });
+    },
+  },
+
+  observers: {
+    show() {
+      this.handleShow();
+    },
+    'placement, offsetX, offsetY': function () {
+      this.control();
+    },
+  },
+});

package/components/tooltip/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/components/tooltip/index.wxml

@@ -0,0 +1,18 @@
+<view class="wd-tooltip" id="tooltip">
+  <view class="wd-tooltip__pos wd-tooltip__hidden" id="pos">
+    <view class="wd-tooltip__container">
+      <view class="wd-tooltip__inner">{{ content }}</view>
+    </view>
+  </view>
+  <view wx:if="{{ show }}" name="fade">
+    <view class="wd-tooltip__pos" style="{{ popStyle }};">
+      <view class="wd-tooltip__container">
+        <view wx:if="{{ visibleArrow }}" class="wd-tooltip__arrow {{ arrowClass }}" style="{{arrowStyle}}"></view>
+        <view class="wd-tooltip__inner wd-wedatea2td-bubble__inner">{{ content }}</view>
+      </view>
+    </view>
+  </view>
+  <view class="wd-tooltip__target" id="target">
+    <slot />
+  </view>
+</view>

package/components/tooltip/index.wxss

@@ -0,0 +1,72 @@
+@import '../../style/wd-design.wxss';
+@import './wd-tooltip.wxss';
+
+.wd-tooltip {
+  position: relative;
+  display: inline-block;
+}
+.wd-tooltip__pos {
+  position: absolute;
+  min-width: fit-content;
+  min-height: fit-content;
+  font-size: 14px;
+  backdrop-filter: blur(10px);
+  background-clip: padding-box;
+  border-radius: 2px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+  box-sizing: border-box;
+  z-index: 10;
+}
+.wd-tooltip__hidden {
+  left: -100vw;
+  bottom: -100vh;
+  visibility: hidden;
+}
+.wd-tooltip__container {
+  line-height: 18px;
+  font-size: 14px;
+}
+.wd-tooltip__inner {
+  padding: 12px;
+  white-space: nowrap;
+  line-height: 18px;
+  box-shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.05),
+    0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08),
+    inset 0 0.5px 0 #dcdcdc, inset 0.5px 0 0 #dcdcdc, inset 0 -0.5px 0 #dcdcdc,
+    inset -0.5px 0 0 #dcdcdc;
+}
+.wd-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.wd-tooltip__arrow-down {
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-top: 9px solid rgba(255, 255, 255, 1);
+  transform: translate(-50%, -2px);
+  bottom: -9px;
+}
+.wd-tooltip__arrow-up {
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid rgba(255, 255, 255, 0.8);
+  transform: translateX(-50%);
+  top: -9px;
+}
+.wd-tooltip__arrow-left {
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-right: 9px solid rgba(255, 255, 255, 0.8);
+  transform: translateY(-50%);
+  left: -9px;
+}
+.wd-tooltip__arrow-right {
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-left: 9px solid rgba(255, 255, 255, 0.8);
+  transform: translateY(-50%);
+  right: -9px;
+}

package/components/tooltip/wd-tooltip.wxss

@@ -0,0 +1,25 @@
+.wd-bubble {
+  --wd-bubble-top: 0px;
+  --wd-bubble-inner-horizontal-padding: 12px;
+  --wd-bubble-inner-vertical-padding: 8px;
+  --wd-divider-inner-border-radius: var(--wd-border-radius);
+}
+
+.wd-bubble {
+  margin-top: var(--wd-bubble-top);
+}
+
+.wd-wedatea2td-bubble__inner {
+  padding: var(--wd-bubble-inner-vertical-margin) var(--wd-bubble-inner-horizontal-margin);
+  border-radius: var(--wd-divider-inner-border-radius);
+}
+
+.wd-bubble-content {
+  min-width: 140px;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.wd-bubble-child {
+  display: inline-block;
+}

package/components/wd-ad/index.js

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import handleEvents from '../../utils/handleEvents';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: { virtualHost: true },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    adType: {
+      type: String,
+      value: 'banner',
+    },
+    unitId: {
+      type: String,
+    },
+    adTheme: {
+      type: String,
+      value: 'white',
+    },
+    adIntervals: {
+      type: Number,
+    },
+    gridCount: {
+      type: Number,
+      value: 5,
+    },
+  },
+  data: {
+    _adType: 'banner',
+    _gridCount: 5,
+    _adIntervals: null,
+    classPrefix: WD_PREFIX,
+  },
+  methods: {
+    ...handleEvents([
+      { name: 'load', title: '广告加载成功' },
+      { name: 'error', title: '广告加载失败' },
+      { name: 'close', title: '广告被关闭' },
+    ]),
+  },
+  observers: {
+    // 规范取值
+    'adType,adIntervals,gridCount': function (adType, adIntervals, gridCount) {
+      const _adType = ['banner', 'video', 'grid'].includes(adType)
+        ? adType
+        : 'banner';
+      const _adIntervals =
+        Number(adIntervals) >= 30 ? Number(adIntervals) : null;
+      const _gridCount = gridCount == 8 ? 8 : 5;
+      this.setData({ _adType, _gridCount, _adIntervals });
+    },
+  },
+});

package/components/wd-ad/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/wd-ad/index.wxml

@@ -0,0 +1,3 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix}}-ad {{classPrefix}}-mp-ad {{classPrefix}}-ad--{{_adType}} {{className}} ">
+  <ad unit-id="{{unitId}}" ad-intervals="{{_adIntervals}}" ad-type="{{_adType}}" ad-theme="{{adTheme}}" grid-count="{{_gridCount}}" bindload="load" binderror="error" bindclose="close"></ad>
+</view>

package/components/wd-ad/index.wxss

@@ -0,0 +1,3 @@
+.wd-ad {
+  width: 100%;
+}