@cloudbase/weda-ui-mp 0.2.20

package/components/wd-card/wd-card.wxss

@@ -0,0 +1,120 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-card-root {
+  --wd-card-border-radius: var(--wd-border-radius-md);
+  --wd-card-border-color: var(--wd-color-gray-3);
+  --wd-card-border-shadow: var(--wd-shadow-sm);
+  --wd-card-bg: var(--wd-white);
+  --wd-card-heder-pd-collapse: 1rem;
+  --wd-card-heder-bg: transparent;
+  --wd-card-heder-pd: 1rem 1rem 0 1rem;
+  --wd-card-heder-pd-bordered: 1rem;
+  --wd-card-heder-border-color: var(--wd-color-gray-3);
+  --wd-card-body-pd: 1rem;
+  --wd-card-body-pd-bordered: 0.75rem 1rem;
+  --wd-card-body-bg: transparent;
+  --wd-card-body-pd-bordered-is-footer: 0.75rem 1rem 1rem;
+  --wd-card-footer-pd: 1rem;
+  --wd-card-footer-pd-bordered: 1rem;
+  --wd-card-footer-bg: transparent;
+}
+
+.wd-mp-card-root,
+.wd-h5-card-root {
+  --wd-card-heder-pd: 1rem 1rem 0 1rem;
+  --wd-card-body-pd: 1rem;
+  --wd-card-footer-pd: 1rem;
+  --wd-card-heder-pd-bordered: 1rem;
+  --wd-card-body-pd-bordered: 0.75rem 1rem;
+  --wd-card-footer-pd-bordered: 1rem;
+}
+
+.wd-card-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;
+  background: var(--wd-card-bg);
+  border: 0.5px solid var(--wd-card-border-color);
+  border-radius: var(--wd-card-border-radius);
+  box-shadow: var(--wd-card-border-shadow);
+}
+.wd-card__header {
+  display: flex;
+  align-items: center;
+  padding: var(--wd-card-heder-pd);
+  font: var(--wd-typography-title-sm);
+}
+.wd-card__header-fold--left {
+  justify-content: flex-start;
+}
+.wd-card__header-fold--right {
+  justify-content: space-between;
+}
+.wd-card__body {
+  background-color: var(--wd-card-body-bg);
+  padding: var(--wd-card-body-pd);
+}
+.wd-card__footer {
+  background-color: var(--wd-card-footer-bg);
+  padding: var(--wd-card-footer-pd);
+}
+.wd-card--bordered .wd-card__header {
+  border-bottom: 1px solid var(--wd-card-border-color);
+  padding: var(--wd-card-heder-pd-bordered);
+}
+.wd-card--bordered .wd-card__body {
+  padding: var(--wd-card-body-pd-bordered);
+}
+.wd-card--bordered .wd-card__body.is-footer {
+  padding: var(--wd-card-body-pd-bordered-is-footer);
+}
+.wd-card--bordered .wd-card__footer {
+  border-top: 1px solid var(--wd-card-border-color);
+  padding: var(--wd-card-footer-pd-bordered);
+}
+.wd-card--collapse-active .wd-card__header {
+  padding: var(--wd-card-heder-pd-collapse);
+}
+.wd-card--collapse-active .wd-card__header .wd-card-icon-fold {
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}
+.wd-card--collapse-active .wd-card__header .wd-card-fold-icon {
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}
+.wd-card--collapse-active .wd-card__body {
+  display: none;
+}
+.wd-card--collapse-active .wd-card__footer {
+  display: none;
+}
+.wd-card-icon-fold {
+  flex: none;
+  cursor: pointer;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3IiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjQ1OTYgMTAuMDQwNEwxMS41NDA0IDEwLjk1OTZMOC4wMDAwMSA3LjQxOTIxTDQuNDU5NjMgMTAuOTU5NkwzLjU0MDM5IDEwLjA0MDRMNy4yOTI5IDYuMjg3ODRDNy42ODM0MiA1Ljg5NzMyIDguMzE2NTkgNS44OTczMiA4LjcwNzExIDYuMjg3ODRMMTIuNDU5NiAxMC4wNDA0WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+.wd-card-icon-fold--left {
+  margin-right: 0.5rem;
+}
+.wd-card-icon-fold--right {
+  margin-left: 0.5rem;
+}
+
+.wd-h5-card-root .wd-card-icon-fold {
+  width: 20px;
+  height: 20px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1LjU3NDUgMTIuNUwxNC40MjU1IDEzLjY0OUwxMCA5LjIyMzU3TDUuNTc0NTMgMTMuNjQ5TDQuNDI1NDggMTIuNUw5LjExNjEyIDcuODA5MzZDOS42MDQyOCA3LjMyMTIgMTAuMzk1NyA3LjMyMTIgMTAuODgzOSA3LjgwOTM2TDE1LjU3NDUgMTIuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuOSIvPjwvc3ZnPg==);
+}

package/components/wd-cascader/index.js

@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { convertFixedIcon, SELECT_ICON_H5 } from '../../utils/getFormLegacy';
+import debounce from '../../utils/debounce';
+import {
+  getSelectedOptions,
+  transformTabData,
+  setSelectedValue,
+  initTabData,
+  initListOptions,
+  placeholderItem,
+} from './utils';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'cascader',
+    },
+    data: {
+      type: Array,
+      value: [],
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    initData: [],
+    tabData: [],
+    listOptions: [],
+    _suffixType: '',
+    _suffixIcon: '',
+    modalVisible: false,
+    searchable: false,
+    selectedOptions: [],
+    displayValue: '',
+  },
+  methods: {
+    finalUpdateWidgetAPI: function () {
+      const { selectedOptions } = this.data;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          selectedOptions,
+        });
+      this.updateWidgetAPI();
+    },
+    search: function (e) {
+      this.debouncedTriggerSearchEvent(e.detail.value);
+    },
+    debouncedTriggerSearchEvent: debounce(function (value) {
+      this.triggerEvent('search', {
+        value,
+      });
+    }),
+
+    // tab 展示值
+    updateTabData: function (newTabData, activeItem) {
+      let _activeItem = activeItem;
+      // 当前选中值是否存在子选项
+      const hasChildItem = newTabData[newTabData.length - 1]?.children?.length;
+
+      let tabData = [...newTabData];
+      if (hasChildItem) {
+        _activeItem = placeholderItem;
+        tabData = [...tabData, placeholderItem];
+      }
+      const _tabData = setSelectedValue(tabData, _activeItem.value);
+      this.setData({
+        tabData: _tabData,
+      });
+    },
+
+    // 点击列表选项
+    handleListOptionsClick: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.disabled) return;
+      const { listOptions, tabData } = this.data;
+      if (item.children) {
+        this.setData({
+          listOptions: [...item.children],
+        });
+      } else {
+        const _listOptions = setSelectedValue(listOptions, item.value);
+        this.setData({
+          listOptions: _listOptions,
+        });
+      }
+      // 更新tab数据
+      const newTabData = [...tabData.filter((i) => i.level < item.level), item];
+      this.updateTabData(newTabData, item);
+    },
+
+    // 点击tab项，更新列表选项
+    handleTabClick: function (e) {
+      const selectedIndex = e?.detail;
+      const { tabData, initData } = this.data;
+      const selectedItem = tabData[selectedIndex];
+      this.updateTabData(tabData, selectedItem);
+      let listOptions =
+        selectedItem.level === 0
+          ? initData
+          : tabData.find((i) => i.level === selectedIndex - 1)?.children;
+
+      listOptions = setSelectedValue(listOptions, selectedItem?.value);
+      this.setData({
+        listOptions: listOptions,
+      });
+    },
+    init: function () {
+      const { data, value } = this.data;
+      const _value = Array.isArray(value) ? value : [];
+      const initData = transformTabData(data);
+      const tabData = initTabData(initData, _value || [], placeholderItem);
+      const listOptions = initListOptions(initData, _value || []);
+      const selectedOptions = _value?.map(
+        (i) => getSelectedOptions(data, i) || { label: i, value: i }
+      );
+      const displayValue = selectedOptions
+        ?.map((i) => i?.label || i?.value)
+        ?.join(' / ');
+      this.setData({
+        tabData,
+        listOptions,
+        initData,
+        selectedOptions,
+        displayValue,
+      });
+    },
+    handleClick: function () {
+      if (this.data.disabled) return;
+      this.setData({
+        modalVisible: true,
+      });
+    },
+    handleClose: function () {
+      this.setData({
+        modalVisible: false,
+      });
+      this.init();
+    },
+    handleOk: function () {
+      const { tabData, data } = this.data;
+      const value = tabData
+        .map((item) => item.value)
+        .filter((i) => i !== '__placeholderItem');
+      const selectedOptions = value.map((i) => getSelectedOptions(data, i));
+      this.setData({
+        modalVisible: false,
+        value,
+        selectedOptions,
+        displayValue: selectedOptions?.map((i) => i.label)?.join(' / '),
+      });
+      this.triggerEvent('change', {
+        value,
+      });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after, selectedOptions':
+      function () {
+        this.finalUpdateWidgetAPI();
+      },
+    'suffixType,suffixIcon': function (suffixType, suffixIcon) {
+      const [_suffixType, _suffixIcon] = convertFixedIcon(
+        suffixType,
+        suffixIcon,
+        SELECT_ICON_H5
+      );
+      this.setData({
+        _suffixType,
+        _suffixIcon,
+      });
+    },
+    'data, value': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.finalUpdateWidgetAPI();
+      this.init();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-cascader/index.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "wd-input-group": "../wd-input-group/index",
+    "wd-input-wrap": "../wd-input-wrap/index",
+    "wd-modal": "../wd-date/modal/index",
+    "wd-tabs": "../wd-tabs",
+    "wd-icon": "../wd-icon"
+  }
+}

package/components/wd-cascader/index.wxml

@@ -0,0 +1,59 @@
+<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}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}" readOnly="{{readOnly}}">
+      <wd-input-wrap block="{{block}}" classRoot="{{classRoot}}" before="{{before}}" after="{{after}}" disabled="{{disabled}}" prefixType="{{prefixType}}" prefixIcon="{{prefixIcon}}" prefixSrc="{{prefixSrc}}" suffixType="{{_suffixType}}" suffixIcon="{{_suffixIcon}}" suffixSrc="{{suffixSrc}}" hasClearIcon="{{hasClearIcon}}" bind:onClear="handleClear" readOnly="{{readOnly}}">
+        <view class="weui-cell__bd">
+          <view bindtap="handleClick" class="weui-picker__group weui-input">
+            <label class="wd-form-select_input {{displayValue ? '' : 'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+          </view>
+        </view>
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+  <wd-modal visible="{{modalVisible}}" bind:onClose="handleClose" bind:onOk="handleOk" header="{{focus}}" className="{{classPrefix + '-cascader-modal'}}">
+    <block wx:if="{{searchable}}">
+      <view class="wd-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+        <view class="wd-custom-search-box" bindtap="onFocus">
+          <input class="wd-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
+          <view class="wd-custom-search-box__label">
+            <span class="wd-custom-search-box__search-icon"></span>
+            <span class="wd-custom-search-box__search-placeholder"> 搜索 </span>
+          </view>
+          <span wx:if="{{focus && searchValue !== ''}}" class="wd-custom-search-box__dismiss-icon" bindtap="clear"></span>
+        </view>
+        <text class="wd-custom-search__btn-cancle" bindtap="shrink">取消</text>
+      </view>
+    </block>
+    <view class="wd-custom-view-content">
+      <wd-tabs list="{{tabData}}" bind:onCurrent="handleTabClick" direction="horizontal">
+        <scroll-view scroll-y="true" class="{{classPrefix + '-cascader-h5-view-list'}}" enable-flex="true">
+          <view wx:for="{{listOptions}}" class="{{classPrefix + '-cascader-h5-view-list__menu'}} {{item.selected?'is-selected':''}} {{item.isDisabled?'is-disabled':''}}" wx:for-index="index" wx:for-item="item" wx:key="{{item.value}}" id="{{'cell-'+index}}" bindtap="handleListOptionsClick" data-value="{{item.value}}" data-item="{{item}}">
+            <view class="{{classPrefix + '-cascader-h5-view-list__menu__text'}}"> {{item.label}} </view>
+            <view wx-if="{{item.selected}}">
+              <wd-icon name="td:check" size="md" />
+            </view>
+          </view>
+        </scroll-view>
+      </wd-tabs>
+    </view>
+  </wd-modal>
+</block>

package/components/wd-cascader/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-cascader.wxss';

package/components/wd-cascader/utils.js

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import { deepClone } from '../../utils/lodash';
+
+// 获取选中项
+export const getSelectedOptions = (data, value) => {
+  for (const i of data) {
+    if (i.value === value) return i;
+    if (i.children) {
+      const res = getSelectedOptions(i.children, value);
+      if (res) return res;
+    }
+  }
+};
+
+// 组装tab数据
+export const transformTabData = (data, pid = 'root', level = 0) => {
+  if (!Array.isArray(data)) return [];
+  return data.map((_item) => {
+    const item = deepClone(_item);
+    if (item.children) {
+      item.children = transformTabData(item.children, item.value, level + 1);
+    }
+    return { ...item, level, selected: false, pid };
+  });
+};
+// 设置选中值
+export const setSelectedValue = (data, value) => {
+  if (!Array.isArray(data)) return [];
+  const _value = [].concat(value);
+  return data
+    .map((item) => {
+      if (!item) return null;
+      item.selected = !!_value.find((i) => i === item?.value);
+      if (item.children) {
+        item.children = setSelectedValue(item.children, value);
+      }
+      return { ...item };
+    })
+    .filter((i) => i);
+};
+
+export const initTabData = (data, value, placeholderItem) => {
+  if (!Array.isArray(data)) return [];
+  let tabDataRes = [placeholderItem];
+  const selectedOptions =
+    value?.map((i) => getSelectedOptions(data, i)).filter((i) => i) || [];
+  if (value.length && selectedOptions.length) {
+    const selectedItem = selectedOptions[selectedOptions.length - 1];
+
+    tabDataRes = setSelectedValue(selectedOptions, selectedItem?.value);
+  }
+  return tabDataRes;
+};
+
+export const initListOptions = (data, value) => {
+  if (!Array.isArray(data)) return [];
+  let listOptionsRes = deepClone(data);
+  const selectedOptions =
+    value?.map((i) => getSelectedOptions(data, i)).filter((i) => i) || [];
+  if (value.length && selectedOptions.length) {
+    const selectedItem = selectedOptions[selectedOptions.length - 1];
+    listOptionsRes =
+      getSelectedOptions(data, selectedItem?.pid)?.children || data;
+  }
+  return listOptionsRes;
+};
+
+export const placeholderItem = {
+  label: '请选择',
+  value: '__placeholderItem',
+  selected: true,
+};