@cloudbase/weda-ui-mp 0.2.20

package/components/wd-cascader/wd-cascader.wxss

@@ -0,0 +1,284 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-cascader,
+.wd-cascader-menu,
+.wd-cascader-h5-view-list__menu {
+  --wd-cascader-font-size: var(--wd-font-size-default);
+  --wd-cascader-border-radius: var(--wd-border-radius);
+  --wd-cascader-color-text: var(--wd-color-text-default);
+  --wd-cascader-color-bg: var(--wd-color-bg-form-default);
+  --wd-cascader-color-bg-hover: var(--wd-color-bg-form-default);
+  --wd-cascader-menu-li-color-bg-hover: var(--wd-color-bg-container-hover);
+  --wd-cascader-menu-li-color-bg-selected: var(--wd-color-brand-light);
+  --wd-cascader-menu-li-color-text-disabled: var(--wd-color-text-disabled);
+  --wd-cascader-menu-li-color-text-selected: var(--wd-color-brand);
+  --wd-cascader-color-border: var(--wd-color-border-form-default);
+}
+
+.wd-cascader,
+.wd-cascader-menu,
+.wd-cascader-h5-view-list__menu {
+  --wd-cascader-font-size: var(--wd-font-size-default);
+  --wd-cascader-border-radius: var(--wd-border-radius);
+  --wd-cascader-color-text: var(--wd-color-text-default);
+  --wd-cascader-color-bg: var(--wd-color-bg-form-default);
+  --wd-cascader-color-bg-hover: var(--wd-color-bg-form-default);
+  --wd-cascader-menu-li-color-bg-hover: var(--wd-color-bg-container-hover);
+  --wd-cascader-menu-li-color-bg-selected: var(--wd-color-brand-light);
+  --wd-cascader-menu-li-color-text-disabled: var(--wd-color-text-disabled);
+  --wd-cascader-menu-li-color-text-selected: var(--wd-color-brand);
+  --wd-cascader-color-border: var(--wd-color-border-form-default);
+}
+
+.wd-form-region-wrap {
+  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;
+  padding: 0 0.5rem 0 0;
+}
+.wd-form-region-wrap .wd-form-region__input {
+  font-size: 16px;
+}
+
+.wd-cascader {
+  display: inline-flex;
+  vertical-align: middle;
+  position: relative;
+  border: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  color: var(--wd-cascader-color-text);
+  transition: 0.2s ease-in-out;
+  transition-property: color, background-color, border;
+  padding-left: 0.5rem;
+}
+.wd-cascader__input {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wd-cascader .wd-icon-arrowdown {
+  display: none;
+}
+.wd-cascader .wd-tag {
+  margin-top: calc((var(--wd-form-height-md) - 20) / 2);
+}
+.wd-cascader .wd-input--editor {
+  position: relative;
+  padding: 0;
+  height: 24px;
+  line-height: 24px;
+  width: 26px;
+  top: calc((var(--wd-form-height-md) - 26) / 2);
+}
+
+.wd-cascader__input .wd-input[readonly],
+.wd-cascader__input .wd-input {
+  background-color: transparent;
+  border: 0;
+  position: absolute;
+  height: calc(var(--wd-form-height-md) - 4);
+  line-height: calc(var(--wd-form-height-md) - 4);
+  top: 0px;
+  left: 0.5rem;
+  z-index: 1;
+  right: 0px;
+  cursor: pointer;
+  height: 100%;
+}
+
+.wd-cascader__input .wd-input {
+  z-index: 2;
+}
+
+.wd-cascader__input .wd-input--editor {
+  position: relative;
+  padding: 0;
+  height: 24px;
+  line-height: 24px;
+  width: 26px;
+  top: calc((var(--wd-form-height-md) - 26) / 2);
+}
+
+.wd-cascader__value {
+  line-height: calc(var(--wd-form-height-md) - 2);
+  font-size: var(--wd-cascader-font-size);
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+}
+.wd-cascader__value .wd-tag-group {
+  margin-top: 0px;
+  margin-bottom: 4px;
+  white-space: normal;
+}
+
+.wd-cascader > .wd-icon,
+.wd-cascader .wd-icon-arrowdown {
+  position: absolute;
+  z-index: 2;
+  right: 4px;
+  top: calc((var(--wd-form-height-md) - 16 - 2) / 2);
+}
+
+.wd-cascader.is-disabled {
+  background-color: var(--wd-color-bg-form-disabled);
+  cursor: not-allowed;
+}
+.wd-cascader.is-disabled .wd-cascader__value {
+  color: var(--wd-color-text-form-disabled);
+}
+.wd-cascader.is-disabled .wd-cascader__input .wd-input {
+  cursor: inherit;
+}
+
+.wd-cascader-menu {
+  min-width: 198px;
+  box-sizing: border-box;
+}
+
+.wd-cascader-menu .wd-tabs--bordered .wd-tabs__tab {
+  font-size: var(--wd-cascader-font-size);
+}
+
+.wd-cascader-menu__list {
+  padding: 0 5px 0 15px;
+  font-size: 0;
+  width: 500px;
+  margin-bottom: -10px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.wd-cascader-menu__list li {
+  font-size: var(--wd-cascader-font-size);
+  line-height: 1.5;
+  margin-bottom: 8px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.wd-cascader-menu__col4 .wd-cascader-menu__list li {
+  width: 116px;
+}
+
+.wd-cascader-menu__col2 .wd-cascader-menu__list li {
+  width: 232px;
+}
+
+.wd-cascader-menu__col1 .wd-cascader-menu__list li {
+  width: 100%;
+}
+
+.wd-cascader-menu__col1 .wd-cascader-menu__list {
+  width: 350px;
+}
+
+.wd-cascader-menu__label {
+  padding: 1px 5px;
+  cursor: pointer;
+  margin-right: 10px;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wd-cascader-menu__label:hover {
+  background-color: var(--wd-cascader-menu-li-color-bg-hover);
+}
+
+.wd-cascader-menu__label.is-selected {
+  background-color: --wd-cascader-menu-li-color-bg-selected;
+  color: var(--wd-color-text-inverse);
+}
+
+.wd-cascader-menu__label.is-disabled {
+  color: var(--wd-cascader-menu-li-color-text-disabled);
+}
+.wd-cascader-menu__label.is-disabled:hover {
+  background-color: transparent;
+  cursor: not-allowed;
+}
+
+.wd-cascader--search .wd-input {
+  border: none;
+}
+.wd-cascader-menu--thin {
+  display: flex;
+  min-width: 0;
+}
+.wd-cascader-menu--thin .wd-list {
+  min-width: 160px;
+  max-height: 194px;
+  border-left: 1px solid var(--wd-color-border-separator);
+}
+.wd-cascader-menu--thin .wd-list:first-child {
+  border-left: none;
+}
+.wd-cascader-menu--thin .wd-list > li {
+  position: relative;
+}
+.wd-cascader-menu--thin .wd-list__submenu {
+  padding-right: 24px;
+}
+.wd-cascader-menu--thin .wd-list__submenu::after {
+  top: 50%;
+  margin-top: -8px;
+}
+.wd-cascader-menu--thin .wd-list__submenu.is-selected::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "t";
+  content: ">";
+  content: "\e0f7";
+}
+
+.wd-cascader-modal .wd-tabs-h5-root .wd-tabs__header-item-content {
+  width: auto;
+}
+
+.wd-cascader-h5-multiple-view {
+  height: 260px;
+  padding: 8px 16px;
+  overflow: auto;
+}
+
+.wd-cascader-h5-view-list {
+  padding: 8px;
+  overflow: auto;
+  height: 260px;
+}
+.wd-cascader-h5-view-list__menu {
+  display: flex;
+  padding: 0 8px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.wd-cascader-h5-view-list__menu__text {
+  display: inline-block;
+  padding: 8px 0;
+}
+.wd-cascader-h5-view-list__menu.is-selected {
+  color: var(--wd-cascader-menu-li-color-text-selected);
+}
+.wd-cascader-h5-view-list__menu.is-disabled {
+  color: var(--wd-cascader-menu-li-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.wd-h5-cascader-root .wd-form-input-wrap {
+  font-size: var(--wd-font-size-4);
+}

package/components/wd-checkbox-list/index.js

@@ -0,0 +1,170 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import classNames from '../../utils/classnames';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { callWedaApi } from '../../utils/tcb';
+import destr from '../../utils/destr';
+import { isObjHasProp, arrayToMap, getSelected, isObj } from '../../utils/tool';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {},
+  data: {
+    checkboxCls: '',
+    classPrefix: WD_PREFIX,
+    options: [],
+    enumOptions: [],
+    checkedItemValue: {},
+    readValue: '-',
+    selectedLabel: null,
+    selectedItem: null,
+    itemMap: {},
+  },
+  methods: {
+    handleClick: function (e) {
+      // 禁用项
+      const item = e.currentTarget.dataset.item;
+      if (item?.disabled) return;
+
+      const { disabled, readOnly } = this.properties;
+      const { checkedItemValue } = this.data;
+      const value = e.currentTarget.dataset.value;
+      const checked = !checkedItemValue[value];
+      const newMap = Object.assign({}, checkedItemValue, {
+        [value]: checked,
+      });
+      if (!disabled && !readOnly) {
+        const value = Object.entries(newMap)
+          .filter(([, checked]) => checked)
+          .map(([value]) => value);
+        this.setData({ checkedItemValue: newMap });
+        this.setData({ value });
+        this.triggerEvent('change', { value });
+      }
+    },
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        selectedItem,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        item: selectedItem,
+      });
+    },
+    // 加上选中
+    getOptions: function (options, value) {
+      if (!Array.isArray(options)) return [];
+      if (!Array.isArray(value)) return options;
+      const opts = options.map((item) => {
+        const checked = value.find((val) => `${val}` === `${item.value}`);
+        return {
+          ...item,
+          value: item.value,
+          label: item.label,
+          checked: !!checked,
+        };
+      });
+      return opts;
+    },
+    _fetchData: async function () {
+      let data = await callWedaApi({
+        action: 'DescribeGeneralOptionsDetailList',
+        data: {
+          OptNameList: [this.properties.enumName],
+          PageIndex: 1,
+          PageSize: 10,
+        },
+      });
+      const config = destr(data?.Items?.[0]?.Config) ?? [];
+      const enumOption = config.map((item) => {
+        return {
+          ...item,
+          label: item.value,
+          value: item.key,
+          checked: false,
+        };
+      });
+      this.setData({ enumOptions: enumOption });
+      const opts = this.getOptions(enumOption, this.properties.value);
+      this.setData({ options: opts });
+    },
+  },
+  observers: {
+    direction: function (direction) {
+      const { classPrefix } = this.data;
+      const compClassName = `${classPrefix}-checkbox-group `;
+      const classList = [compClassName];
+      if (['inline'].includes(direction)) {
+        classList.push(`${classPrefix}-checkbox-group--inline `);
+      }
+      this.setData({ checkboxCls: classNames(classList) });
+    },
+    'format, range, value': function (format, rawRange, value) {
+      const range = (Array.isArray(rawRange) ? rawRange : []).filter((item) =>
+        isObjHasProp(item, 'value')
+      );
+      const options = format !== 'x-enum' ? range : this.data.enumOptions;
+      const opts = this.getOptions(options, value);
+      this.setData({ options: opts });
+    },
+    'options, readOnly': function (options, readOnly) {
+      const tempValue = {};
+      const tempLabel = [];
+      options.forEach(({ value, label, checked }) => {
+        tempValue[value] = !!checked;
+        if (checked) {
+          tempLabel.push(label);
+        }
+      });
+      this.setData({
+        checkedItemValue: tempValue,
+      });
+      if (readOnly && tempLabel.length > 0) {
+        this.setData({ readValue: tempLabel.join('，') });
+      } else {
+        this.setData({ readValue: '-' });
+      }
+    },
+    options: function (options) {
+      const list = (Array.isArray(options) ? options : []).filter((item) =>
+        isObj(item)
+      );
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const tidyOptions = list.map(({ checked, ...rest }) => rest);
+      const itemMap = arrayToMap(tidyOptions, 'value');
+      this.setData({ itemMap });
+    },
+    'itemMap, value': function (itemMap, value) {
+      const { selectedLabel, selectedItem } = getSelected(itemMap, value, true);
+      this.setData({ selectedLabel, selectedItem });
+    },
+    'format, enumName': function (format, enumName) {
+      if (format === 'x-enum' && enumName) {
+        this._fetchData();
+      }
+    },
+    'name, value, label, required, visible, disabled, readOnly, selectedLabel, selectedItem':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+});

package/components/wd-checkbox-list/index.json

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

package/components/wd-checkbox-list/index.wxml

@@ -0,0 +1,37 @@
+<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}}"
+    disabled="{{disabled}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    borderedH5="{{borderedH5}}"
+    readValue="{{readValue}}"
+    classRoot="checkbox"
+    size="xs"
+  >
+    <view class="{{checkboxCls}}">
+      <block wx:for="{{options}}" wx:key="index" wx:for-item="option">
+        <label class="{{classPrefix}}-checkbox-wrap size-lg {{(disabled || option.disabled) ? 'is-disabled' : ''}} {{checkedItemValue[option.value] ? 'is-checked' : ''}} {{isAll ? 'is-indeterminate' : ''}} checkbox{{index+1}}" bindtap="handleClick" data-value="{{option.value}}" data-item="{{option}}">
+          <checkbox class="{{classPrefix}}-checkbox-input" value="{{option.value}}" checked="{{!!checkedItemValue[option.value]}}" disabled="{{disabled}}" />
+          <text class="{{classPrefix}}-checkbox-inner" />
+          <block wx:if="{{option.label}}">
+            <text class="{{classPrefix}}-checkbox-label" style="cursor: none">{{option.label}}</text>
+          </block>
+        </label>
+      </block>
+    </view>
+  </wd-form-item>
+</block>

package/components/wd-checkbox-list/index.wxss

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