@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

package/components/status-content/index.wxss

@@ -0,0 +1,145 @@
+.weda-status_content {
+  width: 100%;
+  padding: 16px;
+  word-break: break-all;
+}
+.weda-status_content__content {
+  color: rgba(0, 0, 0, 0.9);
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 14px;
+  border-radius: 6px;
+}
+.white-bg {
+  background-color: #fff;
+}
+.grey-bg {
+  background-color: #f2f2f2;
+}
+
+.weda-status_content__content .weda-status_content__content__image {
+  width: 48px;
+  height: 48px;
+}
+
+/* 错误图片 */
+.wd-status-content__status-icon.error {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIj4KPHJlY3QgeD0iNiIgeT0iMTQiIHdpZHRoPSIzNiIgaGVpZ2h0PSIyNiIgZmlsbD0iI0RDRENEQyIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjUgMjAuNVYzMEgyNC41VjIwLjVIMjMuNVpNMjMuMjUgMzJWMzMuNUgyNC43NVYzMkgyMy4yNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuOSIvPgo8cGF0aCBkPSJNNiA3SDQyVjEzSDZWN1oiIGZpbGw9IiNEQ0RDREMiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ni41MjM0IDQzLjk2MzZDNDYuNTIzNCA0NC40ODMgNDYuMjY4NyA0NC45MzI1IDQ1LjkwMjggNDUuMjkyOUM0NS41Mzg3IDQ1LjY1MTYgNDUuMDM3NCA0NS45NTE3IDQ0LjQ1ODQgNDYuMTkyOUM0My4yOTgxIDQ2LjY3NjQgNDEuNzI5OCA0Ni45NjM2IDQwLjAyMzQgNDYuOTYzNkMzOC4zMTcxIDQ2Ljk2MzYgMzYuNzQ4OCA0Ni42NzY0IDM1LjU4ODUgNDYuMTkyOUMzNS4wMDk0IDQ1Ljk1MTcgMzQuNTA4MiA0NS42NTE2IDM0LjE0NDEgNDUuMjkyOUMzMy43NzgyIDQ0LjkzMjUgMzMuNTIzNCA0NC40ODMgMzMuNTIzNCA0My45NjM2VjM2Ljk2MzZDMzMuNTIzNCAzNi40NDQzIDMzLjc3ODIgMzUuOTk0OCAzNC4xNDQxIDM1LjYzNDNDMzQuNTA4MiAzNS4yNzU2IDM1LjAwOTQgMzQuOTc1NiAzNS41ODg1IDM0LjczNDNDMzYuNzQ4OCAzNC4yNTA5IDM4LjMxNzEgMzMuOTYzNiA0MC4wMjM0IDMzLjk2MzZDNDEuNzI5OCAzMy45NjM2IDQzLjI5ODEgMzQuMjUwOSA0NC40NTg0IDM0LjczNDNDNDUuMDM3NCAzNC45NzU2IDQ1LjUzODcgMzUuMjc1NiA0NS45MDI4IDM1LjYzNDNDNDYuMjY4NyAzNS45OTQ4IDQ2LjUyMzQgMzYuNDQ0MyA0Ni41MjM0IDM2Ljk2MzZWNDMuOTYzNlpNMzQuODQ1OCAzNi4zNDY3QzM0LjYwNDUgMzYuNTg0NSAzNC41MjM0IDM2Ljc5MjYgMzQuNTIzNCAzNi45NjM2QzM0LjUyMzQgMzcuMTM0NiAzNC42MDQ1IDM3LjM0MjggMzQuODQ1OCAzNy41ODA1QzM1LjA4ODkgMzcuODIgMzUuNDY2NCAzOC4wNTg3IDM1Ljk3MzEgMzguMjY5OUMzNi45ODQ0IDM4LjY5MTIgMzguNDE2MSAzOC45NjM2IDQwLjAyMzQgMzguOTYzNkM0MS42MzA4IDM4Ljk2MzYgNDMuMDYyNSAzOC42OTEyIDQ0LjA3MzggMzguMjY5OUM0NC41ODA1IDM4LjA1ODcgNDQuOTU3OSAzNy44MiA0NS4yMDEgMzcuNTgwNUM0NS40NDI0IDM3LjM0MjggNDUuNTIzNCAzNy4xMzQ2IDQ1LjUyMzQgMzYuOTYzNkM0NS41MjM0IDM2Ljc5MjYgNDUuNDQyNCAzNi41ODQ1IDQ1LjIwMSAzNi4zNDY3QzQ0Ljk1NzkgMzYuMTA3MiA0NC41ODA1IDM1Ljg2ODUgNDQuMDczOCAzNS42NTc0QzQzLjA2MjUgMzUuMjM2IDQxLjYzMDggMzQuOTYzNiA0MC4wMjM0IDM0Ljk2MzZDMzguNDE2MSAzNC45NjM2IDM2Ljk4NDQgMzUuMjM2IDM1Ljk3MzEgMzUuNjU3NEMzNS40NjY0IDM1Ljg2ODUgMzUuMDg4OSAzNi4xMDcyIDM0Ljg0NTggMzYuMzQ2N1pNNDUuNTIzNCAzOC42MTE4VjQwLjQ2MzZDNDUuNTIzNCA0MC42MzQ2IDQ1LjQ0MjQgNDAuODQyOCA0NS4yMDEgNDEuMDgwNUM0NC45NTc5IDQxLjMyIDQ0LjU4MDUgNDEuNTU4NyA0NC4wNzM4IDQxLjc2OTlDNDMuMDYyNSA0Mi4xOTEyIDQxLjYzMDggNDIuNDYzNiA0MC4wMjM0IDQyLjQ2MzZDMzguNDE2MSA0Mi40NjM2IDM2Ljk4NDQgNDIuMTkxMiAzNS45NzMxIDQxLjc2OTlDMzUuNDY2NCA0MS41NTg3IDM1LjA4ODkgNDEuMzIgMzQuODQ1OCA0MS4wODA1QzM0LjYwNDUgNDAuODQyOCAzNC41MjM0IDQwLjYzNDYgMzQuNTIzNCA0MC40NjM2VjM4LjYxMThDMzQuODI4OCAzOC44MzMzIDM1LjE5MDIgMzkuMDI3IDM1LjU4ODUgMzkuMTkyOUMzNi43NDg4IDM5LjY3NjQgMzguMzE3MSAzOS45NjM2IDQwLjAyMzQgMzkuOTYzNkM0MS43Mjk4IDM5Ljk2MzYgNDMuMjk4MSAzOS42NzY0IDQ0LjQ1ODQgMzkuMTkyOUM0NC44NTY2IDM5LjAyNyA0NS4yMTgxIDM4LjgzMzMgNDUuNTIzNCAzOC42MTE4Wk00NS41MjM0IDQzLjk2MzZWNDIuMTExOEM0NS4yMTgxIDQyLjMzMzMgNDQuODU2NiA0Mi41MjcgNDQuNDU4NCA0Mi42OTI5QzQzLjI5ODEgNDMuMTc2NCA0MS43Mjk4IDQzLjQ2MzYgNDAuMDIzNCA0My40NjM2QzM4LjMxNzEgNDMuNDYzNiAzNi43NDg4IDQzLjE3NjQgMzUuNTg4NSA0Mi42OTI5QzM1LjE5MDIgNDIuNTI3IDM0LjgyODggNDIuMzMzMyAzNC41MjM0IDQyLjExMThWNDMuOTYzNkMzNC41MjM0IDQ0LjEzNDYgMzQuNjA0NSA0NC4zNDI4IDM0Ljg0NTggNDQuNTgwNUMzNS4wODg5IDQ0LjgyIDM1LjQ2NjQgNDUuMDU4NyAzNS45NzMxIDQ1LjI2OTlDMzYuOTg0NCA0NS42OTEyIDM4LjQxNjEgNDUuOTYzNiA0MC4wMjM0IDQ1Ljk2MzZDNDEuNjMwOCA0NS45NjM2IDQzLjA2MjUgNDUuNjkxMiA0NC4wNzM4IDQ1LjI2OTlDNDQuNTgwNSA0NS4wNTg3IDQ0Ljk1NzkgNDQuODIgNDUuMjAxIDQ0LjU4MDVDNDUuNDQyNCA0NC4zNDI4IDQ1LjUyMzQgNDQuMTM0NiA0NS41MjM0IDQzLjk2MzZaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjkiLz4KPC9zdmc+');
+}
+
+.weda-status_content__content .title {
+  padding: 10px 0 5px 0;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 16px;
+}
+
+.weda-status_content__content .code {
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 5px;
+}
+
+.weda-status_content__content .detail {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  font-weight: 400;
+  padding-right: 7px;
+}
+
+.weda-status_content__content .arrow {
+  width: 6px;
+  height: 10px;
+}
+
+/* 底部弹窗 */
+.weda-status_content_error-picker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.weda-status_content_mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.4s ease-in-out 0;
+  pointer-events: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.weda-status_content_picker-inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+}
+
+.weda-status_content_picker-inner .title {
+  position: relative;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 26px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 10px 0 20px 0;
+}
+
+.weda-status_content_picker-inner .close {
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  cursor: pointer;
+}
+
+.weda-status_content_picker-inner .detail {
+  position: relative;
+  padding: 12px 15px;
+  display: block;
+  border: 1px solid #dcdcdc;
+  border-radius: 6px;
+  margin: 0 10px;
+}
+
+.weda-status_content_picker-inner .line {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+  padding: 3px 0;
+  display: block;
+  word-wrap: break-word;
+}
+
+.weda-status_content_picker-inner .foot {
+  margin: 20px 10px 0 10px;
+}
+
+.weda-status_content_picker-inner .copy {
+  height: 44px;
+  background: var(--wd-color-brand, #0052d9);
+  border-radius: 3px;
+  color: #fff;
+  width: 100%;
+  line-height: 44px;
+  text-align: center;
+}

package/components/swiper/index.js

@@ -0,0 +1,65 @@
+import handleEvents from '../../utils/handleEvents';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    indicatorDots: {
+      value: true,
+      type: Boolean,
+    },
+    autoplay: {
+      value: true,
+      type: Boolean,
+    },
+    current: {
+      value: 0,
+      type: Number,
+    },
+    interval: {
+      value: 5000,
+      type: Number,
+    },
+    duration: {
+      value: 500,
+      type: Number,
+    },
+    circular: {
+      value: true,
+      type: Boolean,
+    },
+    vertical: {
+      value: false,
+      type: Boolean,
+    },
+    indicatorColor: {
+      type: String,
+      value: 'rgba(200, 200, 200, 0.9)',
+    },
+    indicatorActiveColor: {
+      type: String,
+      value: 'rgba(0, 0, 0, 0.9)',
+    },
+  },
+  methods: {
+    ...handleEvents([
+      {
+        name: 'change',
+        title: '切换',
+      },
+    ]),
+  },
+});

package/components/swiper/index.json

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

package/components/swiper/index.wxml

@@ -0,0 +1,3 @@
+<swiper id="{{id}}" class="weda-ui {{className}}" style="{{style}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current="{{current}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" vertical="{{vertical}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}">
+  <slot></slot>
+</swiper>

package/components/tabs/index.js

@@ -0,0 +1,67 @@
+Component({
+  externalClasses: ['ext-class'],
+
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true,
+  },
+
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    isMultipleSlot: {
+      type: Boolean,
+      value: true,
+    },
+    tabs: { type: Array, value: [] },
+    scrollCellId: {
+      type: String,
+      value: '',
+    },
+    selectedIndex: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    currentIndex: 0,
+    stickyStyle: null,
+  },
+  methods: {
+    toggle(e) {
+      const { tabs } = this.data;
+      const { index } = e.target.dataset;
+      this.setData({
+        currentIndex: index,
+      });
+      if (tabs.length > 5) {
+        this.setData({
+          scrollCellId: `cell-${Math.max(index - 2, 0)}`,
+        });
+      }
+    },
+  },
+  observers: {
+    selectedIndex: function (selectedIndex) {
+      if (selectedIndex !== this.data.currentIndex) {
+        this.setData({
+          currentIndex: selectedIndex,
+        });
+      }
+    },
+    'currentIndex, tabs': function (currentIndex, tabs) {
+      this.triggerEvent('change', {
+        id: currentIndex,
+        label: tabs[currentIndex].title,
+        value: tabs[currentIndex].value,
+      });
+    },
+  },
+});

package/components/tabs/index.json

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

package/components/tabs/index.wxml

@@ -0,0 +1,10 @@
+<view class="weda-tabs ext-class {{className}}" style="{{style}}">
+  <scroll-view class="weda-tabs__nav" scroll-into-view="{{ scrollCellId }}" scroll-with-animation scroll-x enable-flex="true">
+    <view bind:tap="toggle" class="weda-tabs__nav-cell {{ currentIndex === index ? 'active' : '' }} {{ tabs.length > 5 ? 'scroll' : '' }}" data-index="{{index}}" id="cell-{{index}}" wx:for="{{tabs}}" wx:for-index="index" wx:for-item="tab" wx:key="index">{{ tab.title }}</view>
+  </scroll-view>
+
+  <view class="weda-tabs__panel">
+    <slot wx:if="{{isMultipleSlot}}" name="panel{{currentIndex + 1}}"></slot>
+    <slot wx:else name="panel1"></slot>
+  </view>
+</view>

package/components/tabs/index.wxss

@@ -0,0 +1,61 @@
+.weda-tabs {
+  width: 100%;
+}
+.weda-tabs__panel {
+  min-height: 50px;
+}
+.weda-tabs__nav {
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+  position: relative;
+  white-space: nowrap;
+  border-bottom: 1px solid #eee;
+  display: flex;
+}
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+.weda-tabs__nav-cell {
+  flex-basis: 0;
+  flex-grow: 1;
+  height: 100%;
+  font-size: 1em;
+  color: #000;
+  box-sizing: border-box;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: unset;
+  position: relative;
+}
+.weda-tabs__nav-cell.scroll {
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: unset;
+}
+.weda-tabs__nav-cell.active {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.weda-tabs__nav-cell::after {
+  display: block;
+  position: absolute;
+  content: '';
+  bottom: 0;
+  left: 0;
+  width: 0;
+  border-bottom: 2px solid transparent;
+}
+
+.weda-tabs__nav-cell.active::after {
+  width: 100%;
+  border-bottom-color: var(--wd-color-brand, #0052d9);
+  transition: border-color 0.15s ease-in-out, width 0.15s ease-in-out,
+    height 0.15s ease-in-out;
+}

package/components/text/index.js

@@ -0,0 +1,40 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    level: {
+      type: String,
+      value: '0',
+    },
+    userSelect: {
+      type: Boolean,
+      value: true,
+    },
+    space: {
+      type: Boolean,
+      value: false,
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  methods: {},
+  observers: {
+    level: function (level) {
+      const levelName = `level_${level}`;
+      if (level !== '0') {
+        this.setData({ levelName });
+      }
+    },
+  },
+});

package/components/text/index.json

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

package/components/text/index.wxml

@@ -0,0 +1,7 @@
+<!-- 小程序 text 组件即使空白也会会有一个高度与web不一致，空白的时候改成空白view -->
+<block wx:if="{{text && text.length > 0}}">
+  <text class="weda-text weda-ui {{className}} {{levelName}}" id="{{id}}" user-select="{{userSelect}}" style="white-space: {{ space ? 'pre-warp' : 'pre-line'}}; {{style}}">{{text}}</text>
+</block>
+<block wx:else>
+  <view class="weda-text weda-ui {{className}} {{levelName}}" id="{{id}}" style="white-space: {{ space ? 'pre-warp' : 'pre-line'}}; {{style}}">{{text}}</view>
+</block>

package/components/text/index.wxss

@@ -0,0 +1,27 @@
+.weda-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  /* -webkit-line-clamp: 1; */
+  /* white-space: pre-line; */
+  word-break: break-all;
+}
+.weda-text.level_1 {
+  font-size: 64px !important;
+}
+.weda-text.level_2 {
+  font-size: 56px !important;
+}
+.weda-text.level_3 {
+  font-size: 48px !important;
+}
+.weda-text.level_4 {
+  font-size: 40px !important;
+}
+.weda-text.level_5 {
+  font-size: 32px !important;
+}
+.weda-text.level_6 {
+  font-size: 24px !important;
+}

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%;
+}