@cloudbase/weda-ui-mp 3.6.0

package/components/wd-date/calendar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "year-month-picker": "../year-month-picker"
+  }
+}

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

@@ -0,0 +1,38 @@
+<block>
+  <view class="{{classPrefix}}-custom-calendar-op">
+    <view class="{{classPrefix}}-custom-calendar-op__start">
+      <view class="{{classPrefix}}-custom-calendar-op__select {{showMode === 'month' ? 'is-active' : ''}}" bind:tap="handleClickMode">
+        <block>{{yearMonthDisplay}}</block>
+        <i class="{{classPrefix}}-icon-arrow-right"></i>
+      </view>
+    </view>
+    <view class="{{classPrefix}}-custom-calendar-op__end" style="{{showMode === 'month' ? ' visibility:hidden' : ''}}">
+      <text class="{{classPrefix}}-icon-turn-pre" bind:tap="handlePreMonth"></text>
+      <text class="{{classPrefix}}-icon-turn-next" bind:tap="handletNextMonth"></text>
+    </view>
+  </view>
+
+  <view class="{{classPrefix}}-custom-picker__box{{showMode === 'day' ? '' : '--month'}}">
+    <block wx:if="{{showMode === 'day'}}">
+      <view class="{{classPrefix}}-custom-calendar">
+        <view class="{{classPrefix}}-custom-calendar__weeks">
+          <block wx:for="{{WEEKS}}" wx:key="*this">
+            <text class="{{classPrefix}}-custom-calendar__weeks-item">{{item}}</text>
+          </block>
+        </view>
+        <view class="{{classPrefix}}-custom-calendar__days">
+          <block wx:for="{{weeks}}" wx:for-item="week" wx:key="*this">
+            <view class="{{classPrefix}}-custom-calendar__days-row">
+              <block wx:for="{{week}}" wx:key="ymd">
+                <text class="{{classPrefix}}-custom-calendar__days-item {{item.ymd === ymd ? 'is-current' : ''}} {{item.disabled ? 'no-select' : ''}}" bind:tap="handleSelectDay" data-item="{{item}}">{{item.day}}</text>
+              </block>
+            </view>
+          </block>
+        </view>
+      </view>
+    </block>
+    <block wx:if="{{showMode === 'month'}}">
+      <year-month-picker value="{{yearMonthValue}}" start="{{start}}" end="{{end}}" bind:onChange="handleSelectYearMonth" />
+    </block>
+  </view>
+</block>

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

@@ -0,0 +1,101 @@
+import { convertDayjs, getStartMoment } from '../../../utils/getFormLegacy.js';
+import { WD_PREFIX } from '../../../utils/constant';
+
+/**
+ * 日期时间弹窗选择器
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    value: {
+      type: null,
+    },
+    start: {
+      type: null,
+    },
+    end: {
+      type: null,
+    },
+    mode: {
+      type: String,
+      value: 'day',
+    },
+    okText: {
+      type: String,
+      value: '确定',
+    },
+    cancelText: {
+      type: String,
+      value: '取消',
+    },
+    maskClosable: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    dateOrTime: 'date',
+    dateDisplay: '',
+    timeDisplay: '',
+    currentValue: null, // 当前值，默认当天
+  },
+  methods: {
+    setDate: function () {
+      this.setData({ dateOrTime: 'date' });
+    },
+    setTime: function () {
+      this.setData({ dateOrTime: 'time' });
+    },
+
+    handleChange: function (e) {
+      const value = e.detail.value;
+      this.setData({ currentValue: value });
+    },
+
+    // 取消
+    handleClose: function () {
+      this.triggerEvent('onClose', { value: this.data.currentValue });
+    },
+
+    // 取消空白处
+    handleCloseMask: function () {
+      if (this.properties.maskClosable) {
+        this.handleClose;
+      }
+    },
+
+    // 确认
+    handleOk: function () {
+      try {
+        const calendarRef = this.selectComponent('#wd-date-day');
+        if (
+          this.properties.mode === 'day' &&
+          calendarRef?.data?.showMode === 'month' &&
+          calendarRef?.handleClickMode
+        ) {
+          calendarRef.handleClickMode();
+          return;
+        }
+        this.triggerEvent('onOk', { value: this.data.currentValue });
+      } catch (e) {}
+    },
+  },
+  observers: {
+    'value,mode': function (value, mode) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+      this.setData({ currentValue });
+    },
+    currentValue: function (currentValue) {
+      const m = convertDayjs(currentValue);
+      const timeFormat =
+        this.properties.mode === 'datetimeMinute' ? 'HH:mm' : 'HH:mm:ss';
+      const dateDisplay = m.format('YYYY-MM-DD');
+      const timeDisplay = m.format(timeFormat);
+      this.setData({ dateDisplay, timeDisplay });
+    },
+  },
+  lifetimes: {},
+});

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

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "calendar": "../calendar",
+    "year-month-picker": "../year-month-picker/index",
+    "time-picker": "../time-picker/index"
+  }
+}

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

@@ -0,0 +1,41 @@
+<view class="{{classPrefix}}-custom-picker">
+  <view class="{{classPrefix}}-custom-backdrop" bind:tap="handleCloseMask"></view>
+
+  <view class="{{classPrefix}}-custom-picker__inner">
+    <view class="{{classPrefix}}-custom-picker__header">
+      <view class="{{classPrefix}}-custom-picker__header-cancle" bindtap="handleClose">{{cancelText}} </view>
+      <view class="{{classPrefix}}-custom-picker__header-confirm" bindtap="handleOk">{{okText}} </view>
+    </view>
+
+    <view class="{{classPrefix}}-custom-picker__body">
+      <block wx:if="{{mode === 'datetime' || mode === 'datetimeMinute'}}">
+        <view class="{{classPrefix}}-custom-picker__select">
+          <text class="{{classPrefix}}-custom-picker__select-item {{classPrefix}}-custom-picker__select-item-date {{dateOrTime === 'date' ? 'is-current' : ''}}" bind:tap="setDate">{{dateDisplay}}</text>
+          <text class="{{classPrefix}}-custom-picker__select-item {{classPrefix}}-custom-picker__select-item-time {{dateOrTime === 'time' ? 'is-current' : ''}}" bind:tap="setTime">{{timeDisplay}}</text>
+        </view>
+        <block wx:if="{{dateOrTime === 'date'}}">
+          <view class="{{classPrefix}}-custom-picker__select-date">
+            <calendar value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" isWheelChange="{{true}}" />
+          </view>
+        </block>
+        <block wx:else>
+          <view class="{{classPrefix}}-custom-picker__select-time">
+            <time-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+          </view>
+        </block>
+      </block>
+
+      <block wx:elif="{{mode === 'year'}}">
+        <year-month-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+      </block>
+
+      <block wx:elif="{{mode === 'month'}}">
+        <year-month-picker value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" />
+      </block>
+
+      <block wx:elif="{{mode === 'day'}}">
+        <calendar id="wd-date-day" value="{{currentValue}}" start="{{start}}" end="{{end}}" mode="{{mode}}" bind:onChange="handleChange" isWheelChange="{{true}}" />
+      </block>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,7 @@
+.wd-custom-picker .wd-custom-picker__box--month {
+  padding: 45px 0;
+}
+
+.wd-custom-picker .wd-custom-picker__box--month .weda-ui-custom-picker-view {
+  margin: 0;
+}

package/components/wd-date/index.js

@@ -0,0 +1,129 @@
+/* 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 {
+  convertDateFormat,
+  convertDayjs,
+  isDateInRange,
+  getValueByAddYear,
+  getStartMoment,
+  getEndMoment,
+} from '../../utils/getFormLegacy.js';
+import equal from '../../utils/deepEqual';
+import { isDateNil } from '../../utils/date';
+
+/**
+ * 标准化：日期时间
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'date',
+    },
+  },
+  data: {
+    pickerVisible: false,
+    readValue: '',
+    _format: '',
+    _start: null,
+    _end: null,
+    _oldDateValue: null,
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      });
+    },
+
+    setPickerVisible: function () {
+      if (this.data.disabled) return;
+      this.setData({ pickerVisible: true });
+    },
+
+    handleClose: function () {
+      this.setData({ pickerVisible: false });
+    },
+
+    handleOk: function (e) {
+      const { _start, _end, _format } = this.data;
+      const value = e.detail.value;
+      const [inRange, content] = isDateInRange(value, _start, _end, _format);
+      if (!inRange) {
+        wx.showModal?.({ title: '提示', content, showCancel: false });
+        return;
+      }
+      this.setData({ value, pickerVisible: false });
+      this.triggerEvent('change', { value });
+    },
+
+    handleClear: function () {
+      this.setData({ value: null });
+      this.triggerEvent('change', { value: null });
+    },
+
+    setStartEnd: function () {
+      const { start, end, mode } = this.properties;
+      const _startDefault = isDateNil(start) ? getValueByAddYear(-100) : start;
+      const _endDefault = isDateNil(end) ? getValueByAddYear(100) : end;
+      const _start = getStartMoment(mode, _startDefault).valueOf();
+      const _end = getEndMoment(mode, _endDefault).valueOf();
+      this.setData({ _start, _end });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+    'value,mode,dateFormat': function (value, mode, dateFormat) {
+      const _format = convertDateFormat(mode);
+      const formatDisplay = convertDateFormat(mode, dateFormat);
+      const readValue = convertDayjs(value)?.format(formatDisplay) || '';
+      this.setData({ readValue, _format });
+    },
+    'start,end,mode': function () {
+      this.setStartEnd();
+    },
+    // 监听 value 并转成时间戳
+    value: function (value) {
+      if (
+        equal(this.data._oldDateValue, value) ||
+        typeof value === 'number' ||
+        value == null
+      )
+        return;
+      const timestamp = convertDayjs(value)?.valueOf() ?? null;
+      this.setData({ value: timestamp, _oldDateValue: timestamp });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.setStartEnd();
+      this.updateWidgetAPI();
+    },
+  },
+});

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

package/components/wd-date/index.wxml

@@ -0,0 +1,36 @@
+<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">
+        <input class="{{classPrefix}}-form-select_input" placeholder-class="weui-input__placeholder" placeholder="{{placeholder}}" value="{{readValue}}" disabled="true" name="{{name}}" bindtap="setPickerVisible" />
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+
+  <block wx:if="{{pickerVisible}}">
+    <date-picker value="{{value}}" start="{{_start}}" end="{{_end}}" mode="{{mode}}" bind:onClose="handleClose" bind:onOk="handleOk" />
+  </block>
+</block>

package/components/wd-date/index.wxss

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

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

@@ -0,0 +1,28 @@
+import { WD_PREFIX } from '../../../utils/constant';
+
+/**
+ * 弹窗选择器
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+  },
+  methods: {
+    handleClose: function () {
+      this.triggerEvent('onClose');
+    },
+
+    handleOk: function () {
+      this.triggerEvent('onOk');
+    },
+  },
+  observers: {},
+  lifetimes: {},
+});

package/components/wd-date/modal/index.json

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

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

@@ -0,0 +1,14 @@
+<view class="{{classPrefix}}-custom-picker" wx:if="{{visible}}">
+  <view class="{{classPrefix}}-custom-backdrop" bind:tap="handleClose"></view>
+
+  <view class="{{classPrefix}}-custom-picker__inner">
+    <view class="{{classPrefix}}-custom-picker__header">
+      <view class="{{classPrefix}}-custom-picker__header-cancle" bindtap="handleClose">取消 </view>
+      <view class="{{classPrefix}}-custom-picker__header-confirm" bindtap="handleOk">确定 </view>
+    </view>
+
+    <view class="{{classPrefix}}-custom-picker__body">
+      <slot></slot>
+    </view>
+  </view>
+</view>

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

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

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

@@ -0,0 +1,202 @@
+import {
+  convertValueToDateItem,
+  convertDayjs,
+  convertDateItemToValue,
+  getExistIndex,
+  getYMD,
+  getStartMoment,
+  getPickerOptions,
+} 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: 'datetime',
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    itemStyle: 'line-height: 40px; text-align: center',
+    hourOptions: [], // number[]
+    minuteOptions: [], // number[]
+    secondOptions: [], // number[]
+    pickerValue: [], // index[]
+    currentValue: null,
+  },
+  methods: {
+    // 变更值，同时变更范围
+    handleChange: function (e) {
+      const [hourIndex, minuteIndex, secondIndex] = e.detail.value || [];
+      const { start, end } = this.properties;
+      const { hourOptions, minuteOptions, secondOptions, currentValue } =
+        this.data;
+      const [hour, minute, second] = [
+        hourOptions[hourIndex],
+        minuteOptions[minuteIndex],
+        secondOptions[secondIndex],
+      ];
+
+      const newMinuteOptions = this.getMinuteOptions(
+        hour,
+        currentValue,
+        start,
+        end
+      );
+      const newMinuteIndex = getExistIndex(minute, newMinuteOptions);
+      const newMinute = newMinuteOptions[newMinuteIndex];
+
+      const newSecondOptions = this.getSecondOptions(
+        hour,
+        newMinute,
+        currentValue,
+        start,
+        end
+      );
+      const newSecondIndex = getExistIndex(second, newSecondOptions);
+      const newSecond = newSecondOptions[newSecondIndex];
+
+      const dateItem = convertValueToDateItem(currentValue);
+      const newValue = convertDateItemToValue({
+        ...dateItem,
+        hour,
+        minute: newMinute,
+        second: newSecond,
+      });
+      const pickerValue = [hourIndex, newMinuteIndex, newSecondIndex];
+
+      this.setData({
+        currentValue: newValue,
+        pickerValue,
+        minuteOptions: newMinuteOptions,
+        secondOptions: newSecondOptions,
+      });
+
+      this.triggerEvent('onChange', { value: newValue });
+    },
+
+    // 获取首尾需要对比的值
+    getStartAndEnd: function (value, start, end) {
+      value = value ?? this.data.currentValue;
+      start = start ?? this.properties.start;
+      end = end ?? this.properties.end;
+      const [dateItem, startItem, endItem] = [value, start, end].map((d) =>
+        convertValueToDateItem(d)
+      );
+      const [dateYMD, startYMD, endYMD] = [dateItem, startItem, endItem].map(
+        (d) => getYMD(d)
+      );
+      return { dateItem, startItem, endItem, dateYMD, startYMD, endYMD };
+    },
+
+    // 时
+    getHourOptions: function (value, start, end) {
+      let _start = 0;
+      let _end = 23;
+      const { dateYMD, startYMD, endYMD, startItem, endItem } =
+        this.getStartAndEnd(value, start, end);
+      if (dateYMD === startYMD) {
+        _start = startItem.hour;
+      }
+      if (dateYMD === endYMD) {
+        _end = endItem.hour;
+      }
+      return getPickerOptions(_start, _end);
+    },
+
+    // 分
+    getMinuteOptions: function (hour, value, start, end) {
+      let _start = 0;
+      let _end = 59;
+      const { dateYMD, startYMD, endYMD, startItem, endItem } =
+        this.getStartAndEnd(value, start, end);
+      if (dateYMD === startYMD && startItem.hour === hour) {
+        _start = startItem.minute;
+      }
+      if (dateYMD === endYMD && endItem.hour === hour) {
+        _end = endItem.minute;
+      }
+      return getPickerOptions(_start, _end);
+    },
+
+    // 秒
+    getSecondOptions: function (hour, minute, value, start, end) {
+      let _start = 0;
+      let _end = 59;
+      const { dateYMD, startYMD, endYMD, startItem, endItem } =
+        this.getStartAndEnd(value, start, end);
+      if (
+        dateYMD === startYMD &&
+        startItem.hour === hour &&
+        startItem.minute === minute
+      ) {
+        _start = startItem.second;
+      }
+      if (
+        dateYMD === endYMD &&
+        endItem.hour === hour &&
+        endItem.minute === minute
+      ) {
+        _end = endItem.second;
+      }
+      return getPickerOptions(_start, _end);
+    },
+
+    // 初始化值
+    setInitOptions: function () {
+      const { value, start, end, mode } = this.properties;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+
+      const { hour, minute, second } = convertValueToDateItem(currentValue);
+      const hourOptions = this.getHourOptions(currentValue, start, end);
+      const minuteOptions = this.getMinuteOptions(
+        hour,
+        currentValue,
+        start,
+        end
+      );
+      const secondOptions = this.getSecondOptions(
+        hour,
+        minute,
+        currentValue,
+        start,
+        end
+      );
+      const hourIndex = hourOptions.findIndex((d) => d === hour);
+      const minuteIndex = minuteOptions.findIndex((d) => d === minute);
+      const secondIndex = secondOptions.findIndex((d) => d === second);
+      const pickerValue = [hourIndex, minuteIndex, secondIndex];
+      this.setData({
+        currentValue,
+        pickerValue,
+        hourOptions,
+        minuteOptions,
+        secondOptions,
+      });
+    },
+  },
+  observers: {
+    value: function (value) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      this.setInitOptions();
+    },
+    'mode,start,end': function () {
+      this.setInitOptions();
+    },
+  },
+});

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

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

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

@@ -0,0 +1,13 @@
+<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="{{hourOptions}}" wx:key="*this">{{item < 10 ? ('0'+item) : item}}时 </view>
+  </picker-view-column>
+
+  <picker-view-column>
+    <view style="{{itemStyle}}" wx:for="{{minuteOptions}}" wx:key="*this">{{item < 10 ? ('0'+item) : item}}分 </view>
+  </picker-view-column>
+
+  <picker-view-column wx:if="{{mode !== 'datetimeMinute'}}">
+    <view style="{{itemStyle}}" wx:for="{{secondOptions}}" wx:key="*this">{{item < 10 ? ('0'+item) : item}}秒 </view>
+  </picker-view-column>
+</picker-view>