@cloudbase/weda-ui-mp 0.2.20

package/components/wd-tabs/wd-tabs.wxss

@@ -0,0 +1,278 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-tabs-root {
+  --wd-tabs-border-color: var(--wd-color-gray-3);
+  --wd-tabs-bg: transparent;
+  --wd-tabs-heder-bg: transparent;
+  --wd-tabs-heder-item-pd: 0.8125rem calc(var(--wd-space-base) * 4);
+  --wd-tabs-heder-item-size: var(--wd-font-size-default);
+  --wd-tabs-heder-item-size-selected: var(--wd-font-size-default);
+  --wd-tabs-heder-item-size-disabled: var(--wd-font-size-default);
+  --wd-tabs-heder-item-color: var(--wd-font-gray-2);
+  --wd-tabs-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-heder-item-color-disabled: var(--wd-color-text-disabled);
+  --wd-tabs-vertical-heder-width: 12.5rem;
+  --wd-tabs-vertical-heder-bg: #f8f8f8;
+  --wd-tabs-vertical-heder-item-size: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-size-selected: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-size-disabled: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-pd: calc(var(--wd-space-base) * 3)
+    calc(var(--wd-space-base) * 6);
+  --wd-tabs-vertical-heder-item-color: var(--wd-font-gray-2);
+  --wd-tabs-vertical-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-vertical-heder-item-bg-selected: var(--wd-white);
+  --wd-tabs-vertical-heder-item-color-disabled: var(--wd-color-text-disabled);
+  --wd-tabs-body-bg: transparent;
+  --wd-tabs-body-pd: calc(var(--wd-space-base) * 4) 0 0 0;
+  --wd-tabs-body-vertical-pd: calc(var(--wd-space-base) * 4);
+}
+
+.wd-tabs-h5-root {
+  --wd-tabs-vertical-heder-width: 6.375rem;
+  --wd-tabs-heder-item-color: var(--wd-color-text-default);
+  --wd-tabs-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-body-pd: calc(var(--wd-space-base) * 4)
+    calc(var(--wd-space-base) * 4) 0 calc(var(--wd-space-base) * 4);
+  --wd-tabs-body-vertical-pd: calc(var(--wd-space-base) * 4);
+  --wd-tabs-vertical-heder-item-pd: calc(var(--wd-space-base) * 4);
+}
+
+.wd-tabs-root {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 100%;
+  background: var(--wd-tabs-bg);
+}
+.wd-tabs__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--wd-tabs-border-color);
+  background: var(--wd-tabs-heder-bg);
+}
+.wd-tabs__header-wrapper {
+  width: 100%;
+}
+.wd-tabs__header-item-wrap {
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+}
+.wd-tabs__header-item-content {
+  display: flex;
+  flex: none;
+}
+.wd-tabs__header-nav-left {
+  cursor: pointer;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0 calc(var(--wd-space-base) * 3);
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBpZD0iY2hldnJvbi1yaWdodC5kb3VibGUiPjxwYXRoIGlkPSJVbmlvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4wNDEgMTEuNTQwNUwxMi4xMjE4IDEyLjQ1OTdMOC4zNjkyNiA4LjcwNzJDNy45Nzg3NCA4LjMxNjY4IDcuOTc4NzQgNy42ODM1MSA4LjM2OTI2IDcuMjkyOTlMMTIuMTIxOCAzLjU0MDQ4TDEzLjA0MSA0LjQ1OTcyTDkuNTAwNjQgOC4wMDAxTDEzLjA0MSAxMS41NDA1Wk04LjA0MTA4IDExLjU0MDVMNy4xMjE4NSAxMi40NTk3TDMuMzY5MzMgOC43MDcyQzIuOTc4ODEgOC4zMTY2OCAyLjk3ODgxIDcuNjgzNTEgMy4zNjkzMyA3LjI5Mjk5TDcuMTIxODUgMy41NDA0OEw4LjA0MTA4IDQuNDU5NzJMNC41MDA3IDguMDAwMUw4LjA0MTA4IDExLjU0MDVaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjYiLz48L2c+PC9zdmc+);
+}
+.wd-tabs__header-nav-right {
+  cursor: pointer;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0 calc(var(--wd-space-base) * 3);
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBpZD0iY2hldnJvbi1yaWdodC5kb3VibGUiPjxwYXRoIGlkPSJVbmlvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjk1ODk4IDExLjU0MDVMMy44NzgyMiAxMi40NTk3TDcuNjMwNzQgOC43MDcyQzguMDIxMjYgOC4zMTY2OCA4LjAyMTI2IDcuNjgzNTEgNy42MzA3NCA3LjI5Mjk5TDMuODc4MjIgMy41NDA0OEwyLjk1ODk4IDQuNDU5NzJMNi40OTkzNiA4LjAwMDFMMi45NTg5OCAxMS41NDA1Wk03Ljk1ODkyIDExLjU0MDVMOC44NzgxNSAxMi40NTk3TDEyLjYzMDcgOC43MDcyQzEzLjAyMTIgOC4zMTY2OCAxMy4wMjEyIDcuNjgzNTEgMTIuNjMwNyA3LjI5Mjk5TDguODc4MTUgMy41NDA0OEw3Ljk1ODkyIDQuNDU5NzJMMTEuNDk5MyA4LjAwMDFMNy45NTg5MiAxMS41NDA1WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+PC9nPjwvc3ZnPg==);
+}
+.wd-tabs__item {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: var(--wd-tabs-heder-item-pd);
+  position: relative;
+  color: var(--wd-tabs-heder-item-color);
+  font-size: var(--wd-tabs-heder-item-size);
+  cursor: pointer;
+}
+.wd-tabs__item-icon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--wd-space-base) * 2);
+}
+.wd-tabs__item::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background-color: var(--wd-tabs-heder-item-color-selected);
+  bottom: 0;
+  left: 0;
+  display: none;
+}
+.wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs__item:not(.is-disabled).is-selected {
+  font-size: var(--wd-tabs-heder-item-size-selected);
+  color: var(--wd-tabs-heder-item-color-selected);
+}
+.wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}
+.wd-tabs__item.is-disabled {
+  cursor: not-allowed;
+  font-size: var(--wd-tabs-heder-item-size-disabled);
+  color: var(--wd-tabs-heder-item-color-disabled);
+}
+.wd-tabs__item.is-disabled::after {
+  display: none;
+}
+.wd-tabs__body {
+  width: 100%;
+  background-color: var(--wd-tabs-body-bg);
+}
+.wd-tabs__body-content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-direction: column;
+}
+.wd-tabs__body-content.is-not-content {
+  height: 64px;
+}
+.wd-tabs--vertical.wd-tabs-root {
+  display: flex;
+  height: 100vh;
+}
+.wd-tabs--vertical > .wd-tabs__header {
+  width: var(--wd-tabs-vertical-heder-width);
+  flex: none;
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--wd-tabs-border-color);
+  background: var(--wd-tabs-vertical-heder-bg);
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__header-item-content {
+  flex-direction: column;
+  overflow-y: auto;
+  width: 100%;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__header-item-content::-webkit-scrollbar {
+  display: none;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item {
+  padding: var(--wd-tabs-vertical-heder-item-pd);
+  font-size: var(--wd-tabs-vertical-heder-item-size);
+  line-height: calc(var(--wd-space-base) * 6);
+  color: var(--wd-tabs-vertical-heder-item-color);
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item-icon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--wd-space-base) * 2);
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item-text {
+  word-break: break-all;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item::after {
+  width: 2px;
+  height: 100%;
+  background-color: var(--wd-tabs-vertical-heder-item-color-selected);
+  top: 0;
+  left: 0;
+  display: none;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item.is-disabled {
+  cursor: not-allowed;
+  font-size: var(--wd-tabs-vertical-heder-item-size-disabled);
+  color: var(--wd-tabs-vertical-heder-item-color-disabled);
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item.is-disabled::after {
+  display: none;
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item:not(.is-disabled).is-selected {
+  font-size: var(--wd-tabs-vertical-heder-item-size-selected);
+  color: var(--wd-tabs-vertical-heder-item-color-selected);
+  background-color: var(--wd-tabs-vertical-heder-item-bg-selected);
+}
+.wd-tabs--vertical > .wd-tabs__header > .wd-tabs__header-item-wrap .wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}
+.wd-tabs--vertical > .wd-tabs__body {
+  display: flex;
+  height: 100%;
+  background-color: var(--wd-tabs-body-bg);
+}
+.wd-tabs--vertical > .wd-tabs__body-content.is-not-content {
+  height: 100%;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-wrap {
+  position: relative;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-content {
+  overflow-x: auto;
+  width: 100%;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-content::-webkit-scrollbar {
+  display: none;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-mask {
+  pointer-events: none;
+  position: absolute;
+  width: 50px;
+  right: -1px;
+  bottom: 0px;
+  height: 47px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff);
+}
+.wd-tabs-h5-root .wd-tabs__item {
+  text-align: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+.wd-tabs-h5-root .wd-tabs__item-icon {
+  margin-right: var(--wd-space-base);
+}
+.wd-tabs-h5-root .wd-tabs__item::after {
+  height: 3px;
+  width: 16px;
+  left: auto;
+}
+.wd-tabs-h5-root .wd-tabs__item:not(.is-disabled).is-selected {
+  font-weight: 600;
+}
+.wd-tabs-h5-root.wd-tabs--vertical > .wd-tabs__header-item-wrap .wd-tabs__item {
+  justify-content: flex-start;
+}
+.wd-tabs-h5-root.wd-tabs--vertical > .wd-tabs__header-item-wrap .wd-tabs__item-text {
+  word-break: break-all;
+  text-align: left;
+}
+.wd-tabs-h5-root.wd-tabs--vertical > .wd-tabs__header-item-wrap .wd-tabs__item::after {
+  width: 3px;
+  height: 16px;
+  top: auto;
+  bottom: auto;
+  left: 0;
+}
+.wd-tabs-h5-root.wd-tabs--vertical > .wd-tabs__header-item-wrap .wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs-h5-root.wd-tabs--vertical > .wd-tabs__header-item-wrap .wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}
+
+.wd-mp-side-tab-root .wd-tabs__item {
+  cursor: unset;
+}
+
+.wd-mp-top-tab-root .wd-tabs__item {
+  cursor: unset;
+}

package/components/wd-tag/index.js

@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { commonCompBehavior } from '../../utils/common-behavior';
+import tagBehavior from './tag-behavior';
+import { convertLegacyEnum } from '../../utils/platform';
+import { isObj } from '../../utils/tool';
+import { WD_TAG_DIRECTION, WD_INPUT_SIZE } from '../../utils/enum';
+import { WD_PREFIX as classPrefix, TAG_GAP } from '../../utils/constant';
+import { COLORS } from '../../utils/color';
+import classNames from '../../utils/classnames';
+import isEqual from '../../utils/deepEqual';
+import { convertPx } from '../../utils/getFormLegacy';
+
+/**
+ * 标准化：标签
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [tagBehavior, commonCompBehavior],
+  properties: {
+    isFormField: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    value: {
+      type: null,
+    },
+    multiple: {
+      type: Boolean,
+      value: true,
+    },
+    tagSameColor: {
+      type: Boolean,
+      value: true,
+    },
+    colors: {
+      type: Array,
+      value: COLORS,
+    },
+  },
+  data: {
+    tagCls: '',
+    tagSize: 'md',
+    processedRange: [],
+    processedRangeExtra: [], // 在 range 上加属性，避免污染原始对象
+    tagStyle: '',
+    tagStyleWidthNew: '',
+  },
+  methods: {
+    handleClick: function (e) {
+      const item = e.currentTarget?.dataset?.item;
+      this.triggerEvent('click', { item });
+    },
+    updateWidgetAPI: function () {
+      const { processedRange: range } = this.data;
+      this.setReadonlyAttributes?.({ range });
+    },
+    init() {
+      {
+        const {
+          size: _size,
+          direction: _direction,
+          className: _className,
+          style,
+          tagStyleWidth,
+          tagStyleWidthType,
+          tagStyleWidthCols,
+          tagStyleSpace,
+        } = this.data;
+        const isFixed = tagStyleWidthType === 'fixed';
+        const tagSize = convertLegacyEnum(_size, WD_INPUT_SIZE, 'md');
+        const direction = convertLegacyEnum(_direction, WD_TAG_DIRECTION);
+        const tagCls = classNames(
+          _className,
+          `${classPrefix}-tag--${direction}`,
+          `${classPrefix}-tag-root`,
+          `${classPrefix}-mp-tag-root`,
+          {
+            [`${classPrefix}-tag--hundred`]: isFixed,
+            [`${classPrefix}-tag--fixed`]: isFixed,
+          }
+        );
+        const gap = TAG_GAP[tagStyleSpace] || convertPx(tagStyleSpace);
+        const gapCss = gap ? `gap:${gap};` : '';
+        const tagStyle = `${gapCss}${style || ''}`;
+        let tagStyleWidthNew = tagStyleWidth;
+        if (isFixed) {
+          const gapNew = gap ?? '0px';
+          const count =
+            typeof tagStyleWidthCols === 'number' && tagStyleWidthCols > 1
+              ? tagStyleWidthCols
+              : 1;
+          tagStyleWidthNew = `calc((100% - ${gapNew} * ${
+            count - 1
+          }) / ${count})`;
+        }
+        this.setData({ tagCls, tagStyle, tagSize, tagStyleWidthNew });
+      }
+    },
+  },
+  observers: {
+    'size,direction,className,style,tagStyleWidth,tagStyleWidthType,tagStyleWidthCols,tagStyleSpace':
+      function () {
+        this.init();
+      },
+    range: function (_range) {
+      const list = Array.isArray(_range) ? _range : [];
+      const processedRange = list.filter((item) => isObj(item));
+      this.setData({ processedRange }, () => this.updateWidgetAPI());
+    },
+    'processedRange, disabled, isFormField, multiple, value, tagStyleColor, colors, tagSameColor':
+      function (
+        processedRange,
+        disabled,
+        isFormField,
+        multiple,
+        value,
+        tagStyleColor,
+        colors,
+        tagSameColor
+      ) {
+        // 1、加禁用
+        const getDisabled = (item) => {
+          if (!isFormField) return false;
+          return disabled || item.disabled;
+        };
+        // 2、加选中
+        const getChecked = (item) => {
+          if (!isFormField) return true;
+          if (multiple) {
+            return (
+              Array.isArray(value) && value.some((d) => isEqual(d, item.value))
+            );
+          }
+          return isEqual(value, item.value);
+        };
+        // 3、加自定义颜色
+        const colorList = [...colors];
+        const colorMap = new Map();
+        const getColor = (item) => {
+          if (!isFormField) {
+            if (tagSameColor && colorMap.has(item.value))
+              return colorMap.get(item.value);
+            let color = item.color;
+            if ([undefined, 'auto'].includes(color)) {
+              color = colorList.shift() || tagStyleColor;
+            }
+            !colorMap.has(item.value) && colorMap.set(item.value, color);
+            return color;
+          }
+          return tagStyleColor;
+        };
+        const processedRangeExtra = processedRange.map((item) => ({
+          ...item,
+          disabled: getDisabled(item),
+          checked: getChecked(item),
+          color: getColor(item),
+        }));
+        this.setData({ processedRangeExtra });
+      },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-tag/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "tag-item": "./tag-item/index"
+  }
+}

package/components/wd-tag/index.wxml

@@ -0,0 +1,22 @@
+<view class="{{tagCls}}" id="{{id}}" style="{{tagStyle}}">
+  <block wx:for="{{processedRange}}" wx:key="value">
+    <tag-item
+      label="{{item.label == null ? item.value : item.label}}"
+      size="{{tagSize}}"
+      prefixType="{{item.prefixType}}"
+      prefixIcon="{{item.prefixIcon}}"
+      prefixSrc="{{item.prefixSrc}}"
+      suffixType="{{item.suffixType}}"
+      suffixIcon="{{item.suffixIcon}}"
+      suffixSrc="{{item.suffixSrc}}"
+      tagStyleType="{{tagStyleType}}"
+      tagStyleRadius="{{tagStyleRadius}}"
+      tagStyleWidth="{{tagStyleWidthNew}}"
+      bindclick="handleClick"
+      data-item="{{item}}"
+      tagStyleColor="{{processedRangeExtra[index] && processedRangeExtra[index].color}}"
+      disabled="{{processedRangeExtra[index] && processedRangeExtra[index].disabled}}"
+      checked="{{processedRangeExtra[index] && processedRangeExtra[index].checked}}"
+    />
+  </block>
+</view>

package/components/wd-tag/index.wxss

@@ -0,0 +1,3 @@
+@import '../../style/wd-design.wxss';
+@import '../wd-text/wd-text.wxss';
+@import './wd-tag.wxss';

package/components/wd-tag/tag-behavior.js

@@ -0,0 +1,57 @@
+/**
+ * 标签 / 标签选择共同的属性，保证默认值相同
+ */
+export default Behavior({
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: String,
+      value: '',
+    },
+    range: {
+      type: Array,
+      value: [],
+    },
+    direction: {
+      type: String,
+      value: 'inline',
+    },
+    tagStyleType: {
+      type: String,
+      value: 'light',
+    },
+    tagStyleColor: {
+      type: String,
+      value: '#0052d9',
+    },
+    tagStyleSpace: {
+      type: String,
+      value: 'md',
+    },
+    tagStyleRadius: {
+      type: null,
+    },
+    tagStyleWidth: {
+      type: null,
+    },
+    tagStyleWidthType: {
+      type: String,
+      value: 'flex',
+    },
+    tagStyleWidthCols: {
+      type: Number,
+      value: 4,
+    },
+  },
+});