@cloudbase/weda-ui 3.5.1 → 3.5.2-mp

package/components/wd-date/time-picker/index.wxss

@@ -0,0 +1,9 @@
+.weda-ui-custom-picker-view {
+  width: 100%;
+  height: 220px;
+  margin: 65px 0;
+}
+
+.weda-ui-custom-picker-view-indicator {
+  height: 45px;
+}

package/components/wd-date/year-month-picker/index.js

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  convertValueToDateItem,
+  convertDayjs,
+  convertDateItemToValue,
+  getExistIndex,
+  getPickerOptions,
+  getStartMoment,
+} from '../../../utils/getFormLegacy.js';
+import { WD_PREFIX } from '../../../utils/constant.js';
+
+/**
+ * 年/年月选择组件
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    value: {
+      type: null,
+    },
+    start: {
+      type: null,
+    },
+    end: {
+      type: null,
+    },
+    mode: {
+      type: String,
+      value: 'month',
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    itemStyle: 'line-height: 40px; text-align: center',
+    yearOptions: [], // number[]
+    monthOptions: [], // number[]
+    pickerValue: [], // index[]
+    currentValue: null, // number
+  },
+  methods: {
+    // 变更值，同时变更范围
+    handleChange: function (e) {
+      const [yearIndex, monthIndex] = e.detail.value || [];
+      const { yearOptions, monthOptions, currentValue } = this.data;
+      const [year, month] = [yearOptions[yearIndex], monthOptions[monthIndex]];
+
+      const newMonthOptions = this.getMonthOptions(year);
+      const newMonthIndex = getExistIndex(month, newMonthOptions);
+      const newMonth = newMonthOptions[newMonthIndex];
+
+      const dateItem = convertValueToDateItem(currentValue);
+      const newValue = convertDateItemToValue({
+        ...dateItem,
+        year,
+        month: newMonth,
+      });
+      const pickerValue = [yearIndex, newMonthIndex];
+      this.setData({
+        currentValue: newValue,
+        pickerValue,
+        monthOptions: newMonthOptions,
+      });
+      this.triggerEvent('onChange', { value: newValue });
+    },
+
+    // 月选项
+    getMonthOptions: function (year, start, end) {
+      const { startY, endY, startYM, endYM } = this.getStartAndEnd(start, end);
+      if (!startY || !endY) return [];
+      let [_start, _end] = [0, 11];
+      if (year === startY) {
+        _start = startYM;
+      }
+      if (year === endY) {
+        _end = endYM;
+      }
+      return getPickerOptions(_start, _end);
+    },
+
+    // 年选项
+    getYearOptions: function (start, end) {
+      const { startY, endY } = this.getStartAndEnd(start, end);
+      if (!startY || !endY) return [];
+      return getPickerOptions(startY, endY);
+    },
+
+    // 年月首尾
+    getStartAndEnd: function (start, end) {
+      start = start || this.properties.start;
+      end = end || this.properties.end;
+      const startM = convertDayjs(start);
+      const endM = convertDayjs(end);
+      const [startY, endY, startYM, endYM] = [
+        startM?.year(),
+        endM?.year(),
+        startM?.month(),
+        endM?.month(),
+      ];
+      return { startY, endY, startYM, endYM };
+    },
+
+    // 初始化值
+    setInitOptions: function () {
+      const { value, start, end, mode } = this.properties;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+      const { year, month } = convertValueToDateItem(currentValue);
+      const yearOptions = this.getYearOptions(start, end);
+      const monthOptions = this.getMonthOptions(year, start, end);
+      const yearIndex = yearOptions.findIndex((d) => d === year);
+      const monthIndex = monthOptions.findIndex((d) => d === month);
+      const pickerValue = [yearIndex, monthIndex];
+      this.setData({
+        currentValue,
+        pickerValue,
+        yearOptions,
+        monthOptions,
+      });
+    },
+  },
+  observers: {
+    'value,mode': function (value) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      this.setInitOptions();
+    },
+  },
+  lifetimes: {},
+});

package/components/wd-date/year-month-picker/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/wd-date/year-month-picker/index.wxml

@@ -0,0 +1,8 @@
+<picker-view indicator-class="weda-ui-custom-picker-view-indicator" class="weda-ui-custom-picker-view" value="{{pickerValue}}" bindchange="handleChange" immediate-change="{{true}}">
+  <picker-view-column>
+    <view style="{{itemStyle}}" wx:for="{{yearOptions}}" wx:key="*this">{{item}}年 </view>
+  </picker-view-column>
+  <picker-view-column wx:if="{{mode === 'month'}}">
+    <view style="{{itemStyle}}" wx:for="{{monthOptions}}" wx:key="*this">{{(item+1) < 10 ? ('0'+(item+1)) : (item+1) }}月 </view>
+  </picker-view-column>
+</picker-view>

package/components/wd-date/year-month-picker/index.wxss

@@ -0,0 +1,9 @@
+.weda-ui-custom-picker-view {
+  width: 100%;
+  height: 220px;
+  margin: 65px 0;
+}
+
+.weda-ui-custom-picker-view-indicator {
+  height: 45px;
+}

package/components/wd-date-range/index.js

@@ -0,0 +1,172 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import {
+  isDateInRange,
+  getValueByAddYear,
+  getStartMoment,
+  getEndMoment,
+  convertDateFormat,
+} from '../../utils/getFormLegacy.js';
+import {
+  isDateNil,
+  convertStartEndValue,
+  convertDateRangeToString,
+  YEAR_START,
+  YEAR_END,
+} from '../../utils/date';
+
+/**
+ * 日期区间
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'date-range',
+    },
+    mode: {
+      type: String,
+      value: 'day',
+    },
+  },
+  data: {
+    pickerVisible: false,
+    step: 'start',
+    readValue: '',
+    valueDisplay: [],
+    _value: [],
+    _format: '',
+    _start: null,
+    _end: null,
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        pickerVisible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        pickerVisible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      });
+    },
+
+    // 清空
+    handleClear: function () {
+      this.setData({ value: null });
+      this.triggerEvent('change', { value: null });
+    },
+
+    // 打开
+    handleOpen: function () {
+      if (this.data.disabled) return;
+      this.setData({ step: 'start', pickerVisible: true });
+    },
+
+    // 取消
+    handleCancel: function () {
+      this.setData({
+        _value: this.properties.value,
+        step: 'start',
+        pickerVisible: false,
+      });
+    },
+
+    // 下一步
+    handleNext: function (e) {
+      const v = e.detail.value;
+      const { _value } = this.data;
+      if (!this.verifyRange(v)) return;
+      this.setData({ _value: [v, _value?.[1]], step: 'end' });
+    },
+
+    // 上一步
+    handlePre: function (e) {
+      const v = e.detail.value;
+      const { _value } = this.data;
+      if (!this.verifyRange(v)) return;
+      this.setData({ _value: [_value?.[0], v], step: 'start' });
+    },
+
+    // 确定，自动转换前后值
+    handleChange: function (e) {
+      const v = e.detail.value;
+      const { _value } = this.data;
+      const { mode } = this.properties;
+      if (!this.verifyRange(v)) return;
+      const standardValue = [_value?.[0], v].map((d) =>
+        getStartMoment(mode, d, false)
+      );
+      const value = convertStartEndValue(standardValue);
+      this.setData({ value, step: 'start', pickerVisible: false });
+      this.triggerEvent('change', { value });
+    },
+
+    // 校验开始/结束范围
+    verifyRange: function (v) {
+      const { _start, _end, _format } = this.data;
+      const [inRange, content] = isDateInRange(v, _start, _end, _format);
+      if (!inRange) {
+        wx.showModal?.({
+          title: '提示',
+          content,
+          showCancel: false,
+          icon: 'none',
+        });
+      }
+      return inRange;
+    },
+
+    // 初始化传入属性
+    setConvertedData: function () {
+      const { start, end, mode, value } = this.properties;
+      const _format = convertDateFormat(mode);
+      const _startDefault = isDateNil(start)
+        ? getValueByAddYear(YEAR_START)
+        : start;
+      const _endDefault = isDateNil(end) ? getValueByAddYear(YEAR_END) : end;
+      const _start = getStartMoment(mode, _startDefault).valueOf();
+      const _end = getEndMoment(mode, _endDefault).valueOf();
+      const readValue = convertDateRangeToString(value, _format)?.join(' - ');
+      const _value = Array.isArray(value) ? value : [];
+      this.setData({ _start, _end, _format, _value, readValue });
+    },
+  },
+  observers: {
+    'name, value, label, required, pickerVisible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+    'value,start,end,mode': function () {
+      this.setConvertedData();
+    },
+    _value: function (_value) {
+      const { _format } = this.data;
+      const valueDisplay = convertDateRangeToString(_value, _format) || [];
+      this.setData({ valueDisplay });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.setConvertedData();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-date-range/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",
+    "date-picker": "../wd-date/date-picker/index"
+  }
+}

package/components/wd-date-range/index.wxml

@@ -0,0 +1,41 @@
+<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="{{readValue}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+    before="{{before}}"
+    after="{{after}}"
+  >
+    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}">
+      <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="{{clearable && !disabled && (value != null)}}" bind:onClear="handleClear">
+        <view class="{{classPrefix}}-form-select_input {{classPrefix}}-form-select_input--range" bind:tap="handleOpen">
+          <text class="{{classPrefix}}-form-select_input-{{valueDisplay[0]?'value':'placeholder'}}">{{valueDisplay[0] || startPlaceholder}}</text>
+          <text class="{{classPrefix}}-form-select_input-split">-</text>
+          <text class="{{classPrefix}}-form-select_input-{{valueDisplay[1]?'value':'placeholder'}}">{{valueDisplay[1] || endPlaceholder}}</text>
+        </view>
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+
+  <block wx:if="{{pickerVisible}}">
+    <date-picker wx:if="{{step === 'start'}}" value="{{_value && _value[0]}}" start="{{_start}}" end="{{_end}}" mode="{{mode}}" okText="下一步" maskClosable="{{false}}" bind:onClose="handleCancel" bind:onOk="handleNext" />
+    <date-picker wx:if="{{step === 'end'}}" value="{{_value && _value[1]}}" start="{{_start}}" end="{{_end}}" mode="{{mode}}" cancelText="上一步" maskClosable="{{false}}" bind:onClose="handlePre" bind:onOk="handleChange" />
+  </block>
+</block>

package/components/wd-date-range/index.wxss

@@ -0,0 +1,9 @@
+@import '../../style/wd-design.wxss';
+@import '../../style/utils.wxss';
+
+@import '../wd-select/select.wxss';
+@import '../form/form/index.wxss';
+@import '../wd-input-wrap/wd-input-wrap.wxss';
+@import '../wd-input-group/wd-input-group.wxss';
+
+@import './wd-date-range.wxss';

package/components/wd-divider/index.js

@@ -0,0 +1,46 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: 'solid',
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { type } = this.data;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          type,
+        });
+    },
+  },
+  observers: {
+    type: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-divider/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/wd-divider/index.wxml

@@ -0,0 +1 @@
+<view id="{{id}}" style="{{style}}" class="wd-divider wd-mp-divider {{type === 'solid'? 'wd-divider--solid' : 'wd-divider--dashed'}} {{className}}" />

package/components/wd-divider/index.wxss

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

package/components/wd-divider/wd-divider.wxss

@@ -0,0 +1,26 @@
+.wd-divider {
+  --wd-divider-size-border: 1px;
+  --wd-divider-color-border: var(--wd-color-border-separator);
+  --wd-divider-margin-top: calc(var(--wd-space-base) * 4);
+  --wd-divider-margin-bottom: calc(var(--wd-space-base) * 4);
+  --wd-divider-margin-horizontal: var(--wd-divider-margin-top) 0
+    var(--wd-divider-margin-top);
+}
+
+.wd-divider {
+  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;
+  width: 100%;
+  display: flex;
+  height: 0;
+  border-top: var(--wd-divider-size-border) solid var(--wd-divider-color-border);
+  margin: var(--wd-divider-margin-horizontal);
+}
+.wd-divider--dashed {
+  border-top-style: dashed;
+}

package/components/wd-form/form-utils.js

@@ -0,0 +1,55 @@
+import lodashSet from 'lodash.set';
+
+function getFormDetailValueIsNull({ formData, formItemMap }) {
+  const formDetailList = [];
+  Object.keys(formItemMap)?.forEach((item) => {
+    const widgetArray = Array.isArray(formItemMap[item])
+      ? formItemMap[item]
+      : [formItemMap[item]];
+    widgetArray.forEach((w) => {
+      if (w.getConfig?.()?.componentType === 'formdetail') {
+        formDetailList.push(item);
+      }
+    });
+  });
+  const arr = formDetailList.filter(
+    (i) => !Object.keys(formData).find((j) => i === j)
+  );
+  return arr;
+}
+
+export function getFormDataFromItemMap(formItemMap, formType) {
+  const formData = Object.keys(formItemMap).reduce((acc, k) => {
+    const widgetArray = Array.isArray(formItemMap[k])
+      ? formItemMap[k]
+      : [formItemMap[k]];
+    widgetArray.forEach((w) => {
+      if (w.getConfig?.()?.componentType === 'formdetail') {
+        return acc;
+      }
+      lodashSet(acc, k, w?.getValue?.());
+    });
+
+    return acc;
+  }, {});
+
+  const result = getFormDetailValueIsNull({ formData, formItemMap });
+  // 编辑或查看场景，提交表单时，若子表单内容为空，则赋值为空
+  if (result.length && ['read', 'edit'].includes(formType)) {
+    result.forEach((name) => {
+      lodashSet(formData, name, null);
+    });
+  }
+
+  return formData;
+}
+
+export function getErrorObjectFromValidateResult(errObj) {
+  return Object.keys(errObj ?? {}).reduce((acc, cur) => {
+    const errors = errObj[cur];
+    if (errors.length > 0) {
+      acc[cur] = { message: errors[0].message, label: errors[0].label };
+    }
+    return acc;
+  }, {});
+}