@cloudbase/weda-ui-mp 3.6.0

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,
+    },
+  },
+});

package/components/wd-tag/tag-item/index.js

@@ -0,0 +1,198 @@
+import classNames from '../../../utils/classnames';
+import {
+  WD_PREFIX as classPrefix,
+  TAG_STYLE_TYPE,
+} from '../../../utils/constant';
+import { convertIconSize, convertPx } from '../../../utils/getFormLegacy';
+import { convertLegacyEnum } from '../../../utils/platform';
+import { WD_TAG_STYLE_TYPE } from '../../../utils/enum';
+import { colorToRgba, TAG_BG_ALPHA } from '../../../utils/color';
+
+/**
+ * 标准化：标签
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+    },
+    size: {
+      type: String,
+    },
+    prefixType: {
+      type: String,
+    },
+    prefixIcon: {
+      type: String,
+    },
+    prefixSrc: {
+      type: String,
+    },
+    suffixType: {
+      type: String,
+    },
+    suffixIcon: {
+      type: String,
+    },
+    suffixSrc: {
+      type: String,
+    },
+    tagStyleType: {
+      type: String,
+    },
+    tagStyleRadius: {
+      type: String,
+    },
+    tagStyleWidth: {
+      type: String,
+    },
+    tagStyleColor: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    checked: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  methods: {
+    handleClick: function () {
+      this.triggerEvent('click');
+    },
+    getItemStyle: function (param = {}) {
+      const {
+        checked,
+        tagStyleType,
+        tagStyleRadius,
+        tagStyleWidth,
+        tagStyleColor,
+        style: _style,
+      } = param;
+      const hasTick =
+        checked &&
+        ['lightTick', 'darkTick', 'outlineTick'].includes(tagStyleType);
+      let color, backgroundColor, borderColor, tickColor, tickBg;
+      if (checked) {
+        switch (tagStyleType) {
+          case 'light':
+          case 'lightTick':
+            color = tagStyleColor;
+            backgroundColor = colorToRgba(tagStyleColor, TAG_BG_ALPHA);
+            tickColor = '#FFFFFF';
+            tickBg = tagStyleColor;
+            break;
+          case 'dark':
+          case 'darkTick':
+            backgroundColor = tagStyleColor;
+            tickColor = tagStyleColor;
+            tickBg = colorToRgba(tagStyleColor, TAG_BG_ALPHA);
+            break;
+          case 'outline':
+          case 'outlineTick':
+            color = tagStyleColor;
+            borderColor = tagStyleColor;
+            tickColor = '#FFFFFF';
+            tickBg = tagStyleColor;
+            break;
+        }
+      }
+      const styleCss = _style ? `${_style};` : '';
+      const colorCss = color ? `color:${color};` : '';
+      const backgroundColorCss = backgroundColor
+        ? `background-color:${backgroundColor};`
+        : '';
+      const borderColorCss = borderColor ? `border-color:${borderColor};` : '';
+      const borderRadiusCss = tagStyleRadius
+        ? `border-radius:${tagStyleRadius};`
+        : '';
+      const widthCss = tagStyleWidth ? `width:${tagStyleWidth};` : '';
+      const itemStyle = `${styleCss}${colorCss}${backgroundColorCss}${borderColorCss}${borderRadiusCss}${widthCss}`;
+
+      const borderBottomRightRadiusCss = tagStyleRadius
+        ? `border-bottom-right-radius:${tagStyleRadius};`
+        : '';
+      const borderRightColorCss = tickBg ? `border-right-color:${tickBg};` : '';
+      const borderLeftColorCss = tickColor
+        ? `border-left-color:${tickColor};`
+        : '';
+      const borderBottomColor = tickColor
+        ? `border-bottom-color:${tickColor};`
+        : '';
+
+      const boardStyle = `${borderRightColorCss}${borderBottomRightRadiusCss}`;
+      const boardPureStyle = borderBottomRightRadiusCss;
+      const tickStyle = `${borderLeftColorCss}${borderBottomColor}`;
+
+      return { itemStyle, hasTick, boardStyle, boardPureStyle, tickStyle };
+    },
+  },
+  data: {
+    iconSize: '',
+    cls: '',
+    classPrefix,
+    itemStyle: '',
+    hasTick: false,
+    boardStyle: '',
+    boardPureStyle: '',
+    tickStyle: '',
+  },
+  observers: {
+    'className,style, size, disabled, tagStyleType, tagStyleColor, tagStyleRadius, tagStyleWidth, checked':
+      function (
+        className,
+        style,
+        size,
+        disabled,
+        _tagStyleType,
+        tagStyleColor,
+        _tagStyleRadius,
+        _tagStyleWidth,
+        checked
+      ) {
+        const tagStyleType = convertLegacyEnum(
+          _tagStyleType,
+          WD_TAG_STYLE_TYPE
+        );
+        const tagStyleTypeToCls = TAG_STYLE_TYPE[tagStyleType] || tagStyleType;
+        const tagStyleRadius = convertPx(_tagStyleRadius);
+        const tagStyleWidth = convertPx(_tagStyleWidth);
+        const cls = classNames(className, `${classPrefix}-tag-item`, {
+          [`${classPrefix}-tag--${size}`]: !!size,
+          [`${classPrefix}-tag--${tagStyleTypeToCls}`]: !!tagStyleTypeToCls,
+          'is-disabled': disabled,
+          'is-selected': checked,
+        });
+        const { itemStyle, hasTick, boardStyle, boardPureStyle, tickStyle } =
+          this.getItemStyle({
+            checked,
+            tagStyleType,
+            tagStyleRadius,
+            tagStyleWidth,
+            tagStyleColor,
+            style,
+          });
+        const iconSize = convertIconSize(size);
+        this.setData({
+          cls,
+          iconSize,
+          itemStyle,
+          hasTick,
+          boardStyle,
+          boardPureStyle,
+          tickStyle,
+        });
+      },
+  },
+});

package/components/wd-tag/tag-item/index.json

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

package/components/wd-tag/tag-item/index.wxml

@@ -0,0 +1,15 @@
+<view class="{{cls}}" style="{{itemStyle}}" bindtap="handleClick">
+  <block wx:if="{{prefixType}}">
+    <wd-icon size="{{iconSize}}" name="{{prefixIcon}}" type="{{prefixType}}" src="{{prefixSrc}}" />
+  </block>
+  <text class="{{classPrefix}}-tag__text}}">{{label}}</text>
+  <block wx:if="{{suffixType}}">
+    <wd-icon size="{{iconSize}}" name="{{suffixIcon}}" type="{{suffixType}}" src="{{suffixSrc}}" />
+  </block>
+  <block wx:if="{{hasTick}}">
+    <view class="{{classPrefix}}-tag__tick--pure" style="{{boardPureStyle}}"></view>
+    <view class="{{classPrefix}}-tag__tick" style="{{boardStyle}}">
+      <view class="{{classPrefix}}-tag__tick-tick" style="{{tickStyle}}"></view>
+    </view>
+  </block>
+</view>