@cloudbase/weda-ui-mp 0.2.20

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

@@ -0,0 +1,74 @@
+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 { safeObj, arrayToMap, getSelected } from '../../utils/tool';
+import debounce from '../../utils/debounce';
+
+Component({
+  options: { virtualHost: true, styleIsolation: 'shared' },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'select-multiple',
+    },
+  },
+  data: {
+    options: [],
+    itemMap: {},
+    selectedLabel: null,
+    selectedItem: null,
+    _suffixType: '',
+    _suffixIcon: '',
+  },
+  methods: {
+    finalUpdateWidgetAPI: function () {
+      const { selectedLabel, primaryField, selectedItem } = this.properties;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          selectedLabel,
+          selectFields: [primaryField],
+          item: selectedItem,
+        });
+      this.updateWidgetAPI();
+    },
+    changeOptions: function (e) {
+      const { options } = safeObj(e.detail.value);
+      this.setData({ options });
+    },
+    search: function (e) {
+      this.debouncedTriggerSearchEvent(e.detail.value);
+    },
+    debouncedTriggerSearchEvent: debounce(function (value) {
+      this.triggerEvent('search', { value });
+    }),
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after, primaryField, selectedLabel, selectedItem':
+      function () {
+        this.finalUpdateWidgetAPI();
+      },
+    'suffixType,suffixIcon': function (suffixType, suffixIcon) {
+      const [_suffixType, _suffixIcon] = convertFixedIcon(
+        suffixType,
+        suffixIcon,
+        SELECT_ICON_H5
+      );
+      this.setData({ _suffixType, _suffixIcon });
+    },
+    options: function (options) {
+      const itemMap = arrayToMap(options, 'value');
+      this.setData({ itemMap });
+    },
+    'itemMap, value': function (itemMap, value) {
+      const { selectedLabel, selectedItem } = getSelected(itemMap, value, true);
+      this.setData({ selectedLabel, selectedItem });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.finalUpdateWidgetAPI();
+    },
+  },
+});

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

@@ -0,0 +1,10 @@
+{
+  "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",
+    "old-select": "../form/selectMultiple"
+  }
+}

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

@@ -0,0 +1,52 @@
+<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}}">
+        <old-select
+          labelVisible="{{false}}"
+          label=""
+          readOnly="{{readOnly}}"
+          disabled="{{disabled || readOnly}}"
+          defaultValue="{{value}}"
+          enumName="{{enumName}}"
+          format="{{format}}"
+          placeholder="{{placeholder}}"
+          primaryField="{{primaryField}}"
+          range="{{range}}"
+          size="full"
+          tipBlock="{{tipBlock}}"
+          viewId="{{viewId}}"
+          where="{{where}}"
+          dataSourceName="{{dataSourceName}}"
+          mode="selector"
+          version="wd"
+          ignoreCase="{{ignoreCase}}"
+          staticSearchable="{{staticSearchable}}"
+          bind:change="handleChange"
+          bind:changeOptions="changeOptions"
+          bind:changeLabel="changeLabel"
+          bind:search="search"
+        />
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+</block>

package/components/wd-side-tab/index.js

@@ -0,0 +1,121 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import handleEvents from '../../utils/handleEvents';
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    isMultipleSlot: {
+      type: Boolean,
+      value: false,
+    },
+    isSlotAuto: {
+      type: Boolean,
+      value: false,
+    },
+    selectedValue: {
+      type: String,
+      value: '1',
+    },
+    list: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    cls: '',
+    classPrefix: WD_PREFIX,
+    currentIndex: 0,
+    tabsData: [],
+    slotKey: '1',
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setCurrentIndex();
+    },
+  },
+  methods: {
+    getCurrent: function (e) {
+      this.setData({
+        currentIndex: e.detail,
+      });
+      const idx = e.detail;
+      this.triggerEvent('change', {
+        value: this.data.tabsData?.[idx]?.value,
+      });
+    },
+    choooseTab: function (params) {
+      const value = params?.value;
+      const index = this.properties.list.findIndex((i) => i.value === value);
+      this.setData({
+        currentIndex: index,
+      });
+    },
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          isMultipleSlot: this.properties.isMultipleSlot,
+          selectedValue: this.properties.list.find(
+            (i, index) => index === this.data.currentIndex
+          )?.value,
+          list: this.properties.list,
+          selectTab: this.choooseTab.bind(this),
+        });
+    },
+    setCurrentIndex(selectedValue = this.properties.selectedValue) {
+      const index = this.properties.list.findIndex(
+        (i) => i.value === selectedValue
+      );
+      if (index !== this.data.currentIndex) {
+        this.setData({
+          currentIndex: index,
+          slotKey: this.properties.list[index]?.slotKey || '1',
+        });
+      }
+    },
+    ...handleEvents([
+      {
+        name: 'tap',
+        title: '点击',
+      },
+      {
+        name: 'change',
+        title: '类别切换',
+      },
+    ]),
+  },
+  observers: {
+    'selectedValue, list': function (selectedValue) {
+      this.setCurrentIndex(selectedValue);
+    },
+    'currentIndex, list': function (currentIndex, list) {
+      const tabData = list.map((item, index) => {
+        return {
+          ...item,
+          selected: index === currentIndex,
+        };
+      });
+      this.setData({
+        tabsData: tabData,
+        slotKey: this.properties.list[currentIndex]?.slotKey || '1',
+      });
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-side-tab/index.json

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

package/components/wd-side-tab/index.wxml

@@ -0,0 +1,7 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix + '-side-tab-root'}} {{classPrefix + '-mp-side-tab-root'}} {{className}}">
+  <wd-tabs list="{{tabsData}}" selectedIndex="{{selectedValue}}" direction="vertical" bind:onCurrent="getCurrent" bind:change="change">
+    <slot wx:if="{{isSlotAuto}}" name="autoPanel_{{isMultipleSlot?slotKey:'1'}}"></slot>
+    <slot wx:elif="{{isMultipleSlot}}" name="panel{{currentIndex + 1}}"></slot>
+    <slot wx:else name="panel1"></slot>
+  </wd-tabs>
+</view>

package/components/wd-side-tab/index.wxss

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

package/components/wd-switch/index.js

@@ -0,0 +1,67 @@
+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';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {},
+  data: {
+    checked: false,
+    classPrefix: WD_PREFIX,
+    switchCls: '',
+  },
+  methods: {
+    handleChange: function (e) {
+      this.setData({ value: e?.detail?.value });
+      this.setData({ checked: e?.detail?.value });
+      this.triggerEvent('change', e?.detail);
+    },
+    updateWidgetAPI: function () {
+      const { name, value, label, required, visible, disabled, readOnly } =
+        this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+      });
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      const { value, disabled, readOnly } = this.properties;
+      this.setData({ checked: value });
+      const switchCls = classNames({
+        'is-checked': value,
+        'is-disabled': disabled || readOnly,
+        'is-readonly': readOnly,
+        'size-lg': true,
+      });
+      this.setData({ switchCls });
+    },
+  },
+  observers: {
+    'value, disabled, readOnly': function (value, disabled, readOnly) {
+      const switchCls = classNames({
+        'is-checked': value,
+        'is-disabled': disabled || readOnly,
+        'size-lg': true,
+      });
+      this.setData({
+        switchCls,
+      });
+    },
+    'name, value, label, required, visible, disabled, readOnly': function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-switch/index.json

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

package/components/wd-switch/index.wxml

@@ -0,0 +1,28 @@
+<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}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    borderedH5="{{borderedH5}}"
+    readValue="{{value}}"
+    classRoot="switch"
+  >
+    <label class="{{classPrefix}}-switch {{switchCls}}">
+      <switch class="{{classPrefix}}-switch__input" type="checkbox" checked="{{checked}}" bindchange="handleChange" disabled="{{disabled || readOnly}}" />
+      <view class="{{classPrefix}}-switch__box" />
+    </label>
+  </wd-form-item>
+</block>

package/components/wd-switch/index.wxss

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