@cloudbase/weda-ui-mp 0.2.20

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>

package/components/wd-tag/wd-tag.wxss

@@ -0,0 +1,325 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-tag-root {
+  --wd-tag-padding-sm: 2px var(--wd-space-base);
+  --wd-tag-padding-md: 2px calc(var(--wd-space-base) * 2);
+  --wd-tag-padding-lg: 2px calc(var(--wd-space-base) * 3);
+  --wd-tag-font-size-sm: var(--wd-typography-body-sm);
+  --wd-tag-font-size-md: var(--wd-typography-body-md);
+  --wd-tag-font-size-lg: var(--wd-typography-body-lg);
+  --wd-tag-height-sm: calc(var(--wd-space-base) * 5);
+  --wd-tag-height-md: calc(var(--wd-space-base) * 6);
+  --wd-tag-height-lg: calc(var(--wd-space-base) * 8);
+  --wd-tag-height-xl: calc(var(--wd-space-base) * 8);
+  --wd-tag-border-radius-sm: var(--wd-border-radius);
+  --wd-tag-border-radius-lg: calc(var(--wd-space-base) * 5);
+  --wd-tag-item-gap-sm: var(--wd-space-base);
+  --wd-tag-item-gap-md: calc(var(--wd-space-base) * 2);
+  --wd-tag-item-gap-lg: calc(var(--wd-space-base) * 3);
+  --wd-tag-default-color: var(--wd-color-text-default);
+  --wd-tag-default-bg: var(--wd-color-gray-2);
+  --wd-tag-default-color-hover: var(--wd-color-text-default);
+  --wd-tag-default-bg-hover: var(--wd-color-bg-component-hover);
+  --wd-tag-default-color-selected: var(--wd-color-brand);
+  --wd-tag-default-bg-selected: rgba(0, 82, 217, 0.1);
+  --wd-tag-default-color-disabled: var(--wd-color-text-disabled);
+  --wd-tag-default-bg-disabled: var(--wd-color-gray-2);
+  --wd-tag-default-color-disabled-selected: #b5c7ff;
+  --wd-tag-default-bg-disabled-selected: rgba(0, 82, 217, 0.1);
+  --wd-tag-dark-color-selected: var(--wd-font-white-1);
+  --wd-tag-dark-bg-selected: var(--wd-color-brand);
+  --wd-tag-dark-color-disabled-selected: var(--wd-font-white-1);
+  --wd-tag-dark-bg-disabled-selected: var(--wd-color-brand);
+  --wd-tag-light-color-selected: var(--wd-color-brand);
+  --wd-tag-light-bg-selected: rgba(0, 82, 217, 0.1);
+  --wd-tag-light-color-disabled-selected: var(--wd-font-white-1);
+  --wd-tag-light-bg-disabled-selected: var(--wd-color-brand);
+  --wd-tag-outline-border-color: var(--wd-color-gray-4);
+  --wd-tag-outline-bg: var(--wd-white);
+  --wd-tag-outline-bg-hover: var(--wd-color-gray-2);
+  --wd-tag-outline-color-selected: var(--wd-color-brand);
+  --wd-tag-outline-color-disabled: var(--wd-color-text-disabled);
+  --wd-tag-warning-color: #e37318;
+  --wd-tag-warning-color-transparent-10: rgba(227, 115, 24, 0.1);
+  --wd-tag-danger-color: #d54941;
+  --wd-tag-danger-color-transparent-10: rgba(213, 73, 65, 0.1);
+  --wd-tag-success-color: #2ba471;
+  --wd-tag-success-color-transparent-10: rgba(43, 164, 113, 0.1);
+  --wd-tag-text-min-width: calc(var(--wd-space-base) * 9);
+}
+
+.wd-h5-tag-root,
+.wd-mp-tag-root {
+  --wd-tag-padding-sm: 2px var(--wd-space-base);
+  --wd-tag-padding-md: 2px calc(var(--wd-space-base) * 2);
+  --wd-tag-padding-lg: 2px calc(var(--wd-space-base) * 3);
+  --wd-tag-padding-xl: 2px calc(var(--wd-space-base) * 4);
+  --wd-tag-height-sm: calc(var(--wd-space-base) * 5);
+  --wd-tag-height-md: calc(var(--wd-space-base) * 6);
+  --wd-tag-height-lg: calc(var(--wd-space-base) * 7);
+  --wd-tag-height-xl: calc(var(--wd-space-base) * 8);
+  --wd-tag-tick-pure-width: 20px;
+  --wd-tag-tick-tick-width: 6px;
+  --wd-tag-tick-tick-heigth: 4px;
+  --wd-tag-tick-tick-left: 10px;
+  --wd-tag-tick-tick-bottom: 5px;
+}
+
+.wd-pc-tag-root {
+  --wd-tag-tick-pure-width: 16px;
+  --wd-tag-tick-tick-width: 5.5px;
+  --wd-tag-tick-tick-heigth: 3.5px;
+  --wd-tag-tick-tick-left: 8px;
+  --wd-tag-tick-tick-bottom: 4px;
+}
+
+.wd-tag-select-root .wd-tag-root {
+  --wd-tag-padding-sm: 6px calc(var(--wd-space-base) * 4);
+  --wd-tag-padding-md: calc(var(--wd-space-base) * 2)
+    calc(var(--wd-space-base) * 6);
+  --wd-tag-padding-lg: calc(var(--wd-space-base) * 2)
+    calc(var(--wd-space-base) * 8);
+}
+
+.wd-tag-root.wd-tag--fixed {
+  --wd-tag-padding-sm: 8px;
+  --wd-tag-padding-md: 8px;
+  --wd-tag-padding-lg: 8px;
+}
+
+.wd-tag-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;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--wd-tag-item-gap-md);
+  flex-direction: row;
+}
+.wd-tag--hundred {
+  width: 100%;
+}
+.wd-tag--horizontal {
+  flex-direction: row;
+}
+.wd-tag--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+.wd-tag--gap-sm {
+  gap: var(--wd-tag-item-gap-sm);
+}
+.wd-tag--gap-md {
+  gap: var(--wd-tag-item-gap-md);
+}
+.wd-tag--gap-lg {
+  gap: var(--wd-tag-item-gap-lg);
+}
+.wd-tag__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.wd-tag__tick--pure {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-bottom-right-radius: var(--wd-tag-border-radius-md);
+  border-top: var(--wd-tag-tick-pure-width) solid transparent;
+  border-right: var(--wd-tag-tick-pure-width) solid var(--wd-tag-default-color);
+  border-right-color: #fff;
+}
+.wd-tag__tick {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-bottom-right-radius: var(--wd-tag-border-radius-md);
+  border-top: var(--wd-tag-tick-pure-width) solid transparent;
+  border-right: var(--wd-tag-tick-pure-width) solid var(--wd-tag-default-color);
+}
+.wd-tag__tick-tick {
+  content: "";
+  position: absolute;
+  width: var(--wd-tag-tick-tick-width);
+  height: var(--wd-tag-tick-tick-heigth);
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  transform: rotate(-45deg);
+  left: var(--wd-tag-tick-tick-left);
+  bottom: var(--wd-tag-tick-tick-bottom);
+}
+.wd-tag-item {
+  gap: var(--wd-space-base);
+  box-sizing: border-box;
+  flex: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--wd-tag-border-radius-sm);
+  font-size: var(--wd-tag-font-size-md);
+  font-weight: 400;
+  padding: var(--wd-tag-padding-md);
+  color: var(--wd-tag-default-color);
+  background: var(--wd-tag-default-bg);
+  overflow: hidden;
+  position: relative;
+}
+.wd-tag-item--radius-sm {
+  border-radius: var(--wd-tag-border-radius-sm);
+}
+.wd-tag-item--radius-lg {
+  border-radius: var(--wd-tag-border-radius-lg);
+}
+.wd-tag-item.is-hover:hover {
+  cursor: pointer;
+  background-color: var(--wd-tag-default-bg-hover);
+  color: var(--wd-tag-default-color-hover);
+}
+.wd-tag-item.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-default-bg-selected);
+  color: var(--wd-tag-default-color-selected);
+}
+.wd-tag-item.is-disabled {
+  cursor: not-allowed;
+  color: var(--wd-tag-default-color-disabled);
+  background-color: var(--wd-tag-default-bg-disabled);
+}
+.wd-tag-item.is-disabled.is-selected {
+  opacity: 0.5;
+  background-color: var(--wd-tag-default-bg-selected);
+  color: var(--wd-tag-default-color-selected);
+}
+.wd-tag--dark.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-dark-bg-selected);
+  color: var(--wd-tag-dark-color-selected);
+}
+.wd-tag--dark.is-disabled.is-selected {
+  opacity: 0.5;
+  color: var(--wd-tag-dark-color-disabled-selected);
+  background-color: var(--wd-tag-dark-bg-disabled-selected);
+}
+.wd-tag--light.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-light-bg-selected);
+  color: var(--wd-tag-light-color-selected);
+}
+.wd-tag--light.is-disabled.is-selected {
+  opacity: 0.5;
+  background-color: var(--wd-tag-light-bg-selected);
+  color: var(--wd-tag-light-color-selected);
+}
+.wd-tag--outline {
+  border: 1px solid var(--wd-tag-outline-border-color);
+  background-color: var(--wd-tag-outline-bg);
+}
+.wd-tag--outline.is-hover:hover {
+  background: var(--wd-tag-outline-bg-hover);
+}
+.wd-tag--outline.is-selected:not(.is-disabled) {
+  color: var(--wd-tag-default-color-selected);
+  background-color: var(--wd-tag-outline-bg);
+  border: 1px solid var(--wd-tag-outline-color-selected);
+}
+.wd-tag--outline.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--wd-tag-outline-bg);
+  border: 1px solid var(--wd-tag-outline-border-color);
+  color: var(--wd-tag-outline-color-disabled);
+}
+.wd-tag--outline.is-disabled.is-selected {
+  opacity: 0.5;
+  border: 1px solid var(--wd-tag-outline-color-selected);
+  background-color: var(--wd-tag-outline-bg);
+}
+.wd-tag--warning.wd-tag--dark.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-warning-color);
+}
+.wd-tag--warning.wd-tag--dark.is-disabled.is-selected {
+  background-color: var(--wd-tag-warning-color);
+}
+.wd-tag--warning.wd-tag--light.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-warning-color-transparent-10);
+  color: var(--wd-tag-warning-color);
+}
+.wd-tag--warning.wd-tag--light.is-disabled.is-selected {
+  opacity: 0.5;
+  background-color: var(--wd-tag-warning-color-transparent-10);
+  color: var(--wd-tag-warning-color);
+}
+.wd-tag--warning.wd-tag--outline.is-selected:not(.is-disabled) {
+  border: 1px solid var(--wd-tag-warning-color);
+  color: var(--wd-tag-warning-color);
+}
+.wd-tag--warning.wd-tag--outline.is-disabled.is-selected {
+  border: 1px solid var(--wd-tag-warning-color);
+}
+.wd-tag--danger.wd-tag--dark.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-danger-color);
+}
+.wd-tag--danger.wd-tag--dark.is-disabled.is-selected {
+  background-color: var(--wd-tag-danger-color);
+}
+.wd-tag--danger.wd-tag--light.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-danger-color-transparent-10);
+  color: var(--wd-tag-danger-color);
+}
+.wd-tag--danger.wd-tag--light.is-disabled.is-selected {
+  opacity: 0.5;
+  background-color: var(--wd-tag-danger-color-transparent-10);
+  color: var(--wd-tag-danger-color);
+}
+.wd-tag--danger.wd-tag--outline.is-selected:not(.is-disabled) {
+  border: 1px solid var(--wd-tag-danger-color);
+  color: var(--wd-tag-danger-color);
+}
+.wd-tag--danger.wd-tag--outline.is-disabled.is-selected {
+  border: 1px solid var(--wd-tag-danger-color);
+}
+.wd-tag--success.wd-tag--dark.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-success-color);
+}
+.wd-tag--success.wd-tag--dark.is-disabled.is-selected {
+  background-color: var(--wd-tag-success-color);
+}
+.wd-tag--success.wd-tag--light.is-selected:not(.is-disabled) {
+  background-color: var(--wd-tag-success-color-transparent-10);
+  color: var(--wd-tag-success-color);
+}
+.wd-tag--success.wd-tag--light.is-disabled.is-selected {
+  opacity: 0.5;
+  background-color: var(--wd-tag-success-color-transparent-10);
+  color: var(--wd-tag-success-color);
+}
+.wd-tag--success.wd-tag--outline.is-selected:not(.is-disabled) {
+  border: 1px solid var(--wd-tag-success-color);
+  color: var(--wd-tag-success-color);
+}
+.wd-tag--success.wd-tag--outline.is-disabled.is-selected {
+  border: 1px solid var(--wd-tag-success-color);
+}
+.wd-tag--sm {
+  padding: var(--wd-tag-padding-sm);
+  font: var(--wd-tag-font-size-sm);
+}
+.wd-tag--md {
+  padding: var(--wd-tag-padding-md);
+  font: var(--wd-tag-font-size-md);
+}
+.wd-tag--lg {
+  padding: var(--wd-tag-padding-lg);
+  font: var(--wd-tag-font-size-lg);
+}

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

@@ -0,0 +1,107 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import tagBehavior from '../wd-tag/tag-behavior';
+import isEqual from '../../utils/deepEqual';
+import { arrayToMap, isObjHasProp, getSelected } from '../../utils/tool';
+
+/**
+ * 标准化：标签选择
+ */
+Component({
+  options: { virtualHost: true, pureDataPattern: /^itemMap$/ },
+  behaviors: [itemBehavior, tagBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'tag-select',
+    },
+    size: {
+      type: String,
+      value: 'lg',
+    },
+  },
+  data: {
+    options: [], // 过滤掉无value值后的 range
+    selectedLabel: null,
+    selectedItem: null,
+    itemMap: {},
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        selectedItem: item,
+        options: range,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        item,
+        range,
+      });
+    },
+    handleChange: function (e) {
+      const item = e.detail.item;
+      if (this.data.disabled || item.disabled) return;
+      const newValue =
+        this.properties.checkType !== 'radio'
+          ? this.getMultipleValue(this.data.value, item.value)
+          : this.getSingleValue(this.data.value, item.value);
+      this.setData({ value: newValue });
+      this.triggerEvent('change', { value: newValue });
+    },
+    getSingleValue: function (value, val) {
+      const lastChecked = isEqual(value, val);
+      return lastChecked ? null : val;
+    },
+    getMultipleValue: function (value, val) {
+      let newValue = Array.isArray(value) ? [].concat(value) : [];
+      const lastChecked = newValue.some((d) => isEqual(d, val));
+      if (lastChecked) {
+        newValue = newValue.filter((d) => !isEqual(d, val));
+      } else {
+        newValue.push(val);
+      }
+      return newValue;
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, selectedLabel, selectedItem':
+      function () {
+        this.updateWidgetAPI();
+      },
+    range: function (range) {
+      const list = Array.isArray(range) ? range : [];
+      const options = list.filter((item) => isObjHasProp(item, 'value'));
+      const itemMap = arrayToMap(options, 'value');
+      this.setData({ options, itemMap });
+    },
+    'itemMap, value, checkType': function (itemMap, value, checkType) {
+      const { selectedLabel, selectedItem } = getSelected(
+        itemMap,
+        value,
+        checkType !== 'radio'
+      );
+      this.setData({ selectedLabel, selectedItem });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

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

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

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

@@ -0,0 +1,42 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    readValue="{{selectedLabel}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <wd-tag
+      size="{{size}}"
+      range="{{options}}"
+      direction="{{direction}}"
+      tagStyleType="{{tagStyleType}}"
+      tagStyleColor="{{tagStyleColor}}"
+      tagStyleSpace="{{tagStyleSpace}}"
+      tagStyleRadius="{{tagStyleRadius}}"
+      tagStyleWidth="{{tagStyleWidth}}"
+      tagStyleWidthType="{{tagStyleWidthType}}"
+      tagStyleWidthCols="{{tagStyleWidthCols}}"
+      isFormField="{{true}}"
+      disabled="{{disabled}}"
+      value="{{value}}"
+      multiple="{{checkType !== 'radio'}}"
+      bind:click="handleChange"
+    />
+  </wd-form-item>
+</block>