@cloudbase/weda-ui-mp 0.2.20

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,31 @@
+import { WD_PREFIX } from '../../../utils/constant';
+/**
+ * 弹窗选择器
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    className: {
+      type: String,
+      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 {{className}}" 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>

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/wd-date.wxss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}

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;
+}