@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/date-picker/src/day-picker-panel.js

@@ -0,0 +1,352 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _esm = _interopRequireDefault(require("dayjs/esm"));
+
+var _isSameOrBefore = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrBefore"));
+
+var _isSameOrAfter = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrAfter"));
+
+var _panelHeader = _interopRequireDefault(require("./panel-header.js"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _vue = require("vue");
+
+var _props = require("../props");
+
+var _shared = require("../../utils/shared");
+
+var _locale = require("../../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+_esm.default.extend(_isSameOrBefore.default);
+
+_esm.default.extend(_isSameOrAfter.default);
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-day-picker__panel"
+};
+var _hoisted_2 = {
+  class: "var-day-picker__content"
+};
+var _hoisted_3 = {
+  class: "var-day-picker__head"
+};
+var _hoisted_4 = {
+  class: "var-day-picker__body"
+};
+
+function render(_ctx, _cache) {
+  var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
+
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+    type: "day",
+    date: _ctx.preview,
+    disabled: _ctx.panelBtnDisabled,
+    onCheckPanel: _ctx.clickMonth,
+    onCheckDate: _ctx.checkDate
+  }, null, 8
+  /* PROPS */
+  , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
+    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+  }, {
+    default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: _ctx.panelKey
+    }, [(0, _vue.createElementVNode)("ul", _hoisted_3, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sortWeekList, week => {
+      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+        key: week.index
+      }, (0, _vue.toDisplayString)(_ctx.getDayAbbr(week.index)), 1
+      /* TEXT */
+      );
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))]), (0, _vue.createElementVNode)("ul", _hoisted_4, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.days, (day, index) => {
+      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+        key: index
+      }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
+        type: "primary",
+        class: ["var-day-picker__button", {
+          'var-day-picker__button--usable': day > 0
+        }],
+        "var-day-picker-cover": "",
+        round: "",
+        ripple: false
+      }, _extends({}, _ctx.buttonProps(day)), {
+        onClick: $event => _ctx.chooseDay(day)
+      }), {
+        default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.filterDay(day)), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1040
+      /* FULL_PROPS, DYNAMIC_SLOTS */
+      , ["class", "onClick"])]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))])]))]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["name"])])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'DayPickerPanel',
+  components: {
+    VarButton: _button.default,
+    PanelHeader: _panelHeader.default
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    preview: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    clickMonth: {
+      type: Function,
+      required: true
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['check-preview', 'choose-day'],
+
+  setup(props, {
+    emit
+  }) {
+    var [currentYear, currentMonth, currentDay] = props.current.split('-');
+    var days = (0, _vue.ref)([]);
+    var reverse = (0, _vue.ref)(false);
+    var panelKey = (0, _vue.ref)(0);
+    var panelBtnDisabled = (0, _vue.reactive)({
+      left: false,
+      right: false
+    });
+    var isCurrent = (0, _vue.computed)(() => props.preview.previewYear === currentYear && props.preview.previewMonth.index === currentMonth);
+    var isSame = (0, _vue.computed)(() => props.choose.chooseYear === props.preview.previewYear && props.choose.chooseMonth.index === props.preview.previewMonth.index);
+    var sortWeekList = (0, _vue.computed)(() => {
+      var index = _props.WEEK_HEADER.findIndex(week => week.index === props.componentProps.firstDayOfWeek);
+
+      if (index === -1 || index === 0) return _props.WEEK_HEADER;
+      return _props.WEEK_HEADER.slice(index).concat(_props.WEEK_HEADER.slice(0, index));
+    });
+
+    var getDayAbbr = key => {
+      var _pack$value$datePicke, _pack$value$datePicke2;
+
+      return (_pack$value$datePicke = (_pack$value$datePicke2 = _locale.pack.value.datePickerWeekDict) == null ? void 0 : _pack$value$datePicke2[key].abbr) != null ? _pack$value$datePicke : '';
+    };
+
+    var filterDay = day => day > 0 ? day : '';
+
+    var initDate = () => {
+      var {
+        preview: {
+          previewMonth,
+          previewYear
+        }
+      } = props;
+      var monthNum = (0, _esm.default)(previewYear + "-" + previewMonth.index).daysInMonth();
+      var firstDayToWeek = (0, _esm.default)(previewYear + "-" + previewMonth.index + "-01").day();
+      var index = sortWeekList.value.findIndex(week => week.index === "" + firstDayToWeek);
+      days.value = [...Array(index).fill(-1), ...Array.from(Array(monthNum + 1).keys())].filter(value => value);
+    };
+
+    var initHeader = () => {
+      var {
+        preview: {
+          previewYear,
+          previewMonth
+        },
+        componentProps: {
+          max,
+          min
+        }
+      } = props;
+
+      if (max) {
+        var date = previewYear + "-" + ((0, _shared.toNumber)(previewMonth.index) + 1);
+        panelBtnDisabled.right = !(0, _esm.default)(date).isSameOrBefore((0, _esm.default)(max), 'month');
+      }
+
+      if (min) {
+        var _date = previewYear + "-" + ((0, _shared.toNumber)(previewMonth.index) - 1);
+
+        panelBtnDisabled.left = !(0, _esm.default)(_date).isSameOrAfter((0, _esm.default)(min), 'month');
+      }
+    };
+
+    var inRange = day => {
+      var {
+        preview: {
+          previewYear,
+          previewMonth
+        },
+        componentProps: {
+          min,
+          max
+        }
+      } = props;
+      var isBeforeMax = true;
+      var isAfterMin = true;
+      var previewDate = previewYear + "-" + previewMonth.index + "-" + day;
+      if (max) isBeforeMax = (0, _esm.default)(previewDate).isSameOrBefore((0, _esm.default)(max), 'day');
+      if (min) isAfterMin = (0, _esm.default)(previewDate).isSameOrAfter((0, _esm.default)(min), 'day');
+      return isBeforeMax && isAfterMin;
+    };
+
+    var shouldChoose = val => {
+      var {
+        choose: {
+          chooseDays,
+          chooseRangeDay
+        },
+        componentProps: {
+          range
+        }
+      } = props;
+      if (!chooseRangeDay.length) return false;
+
+      if (range) {
+        var isBeforeMax = (0, _esm.default)(val).isSameOrBefore((0, _esm.default)(chooseRangeDay[1]), 'day');
+        var isAfterMin = (0, _esm.default)(val).isSameOrAfter((0, _esm.default)(chooseRangeDay[0]), 'day');
+        return isBeforeMax && isAfterMin;
+      }
+
+      return chooseDays.includes(val);
+    };
+
+    var buttonProps = day => {
+      if (day < 0) {
+        return {
+          text: true,
+          outline: false,
+          textColor: ''
+        };
+      }
+
+      var {
+        choose: {
+          chooseDay
+        },
+        preview: {
+          previewYear,
+          previewMonth
+        },
+        componentProps: {
+          allowedDates,
+          color,
+          multiple,
+          range
+        }
+      } = props;
+      var val = previewYear + "-" + previewMonth.index + "-" + day;
+
+      var dayExist = () => {
+        if (range || multiple) return shouldChoose(val);
+        return (0, _shared.toNumber)(chooseDay) === day && isSame.value;
+      };
+
+      var computeDisabled = () => {
+        if (!inRange(day)) return true;
+        if (!allowedDates) return false;
+        return !allowedDates(val);
+      };
+
+      var disabled = computeDisabled();
+
+      var computeText = () => {
+        if (disabled) return true;
+        if (range || multiple) return !shouldChoose(val);
+        return !isSame.value || (0, _shared.toNumber)(chooseDay) !== day;
+      };
+
+      var computeOutline = () => {
+        // 不满足基本条件， 基本条件为当前年、当前月、当前日并且 showCurrent 为true的情况
+        if (!(isCurrent.value && (0, _shared.toNumber)(currentDay) === day && props.componentProps.showCurrent)) return false; // 存在着 disabled
+
+        if ((range || multiple || isSame.value) && disabled) return true; // 在选择范围之外
+
+        if (range || multiple) return !shouldChoose(val); // 同一年但是未被选择的情况
+
+        if (isSame.value) return chooseDay !== currentDay;
+        return true;
+      };
+
+      var textColorOrClass = () => {
+        if (disabled) return '';
+        if (computeOutline()) return color != null ? color : '';
+        if (dayExist()) return '';
+        return 'var-date-picker-main__color';
+      };
+
+      var isClass = textColorOrClass().startsWith('var-date-picker');
+      return {
+        disabled,
+        text: computeText(),
+        outline: computeOutline(),
+        textColor: isClass ? '' : textColorOrClass(),
+        class: isClass ? textColorOrClass() : ''
+      };
+    };
+
+    var checkDate = checkType => {
+      reverse.value = checkType === 'prev';
+      panelKey.value += checkType === 'prev' ? -1 : 1;
+      emit('check-preview', 'month', checkType);
+    };
+
+    var chooseDay = day => {
+      emit('choose-day', day);
+    };
+
+    (0, _vue.onMounted)(() => {
+      initDate();
+      initHeader();
+    });
+    (0, _vue.watch)(() => props.preview, () => {
+      initDate();
+      initHeader();
+    });
+    return {
+      days,
+      reverse,
+      panelKey,
+      sortWeekList,
+      panelBtnDisabled,
+      filterDay,
+      getDayAbbr,
+      checkDate,
+      chooseDay,
+      buttonProps
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/date-picker/src/month-picker-panel.js

@@ -0,0 +1,286 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _esm = _interopRequireDefault(require("dayjs/esm"));
+
+var _isSameOrBefore = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrBefore"));
+
+var _isSameOrAfter = _interopRequireDefault(require("dayjs/esm/plugin/isSameOrAfter"));
+
+var _props = require("../props");
+
+var _panelHeader = _interopRequireDefault(require("./panel-header.js"));
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _shared = require("../../utils/shared");
+
+var _locale = require("../../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+_esm.default.extend(_isSameOrBefore.default);
+
+_esm.default.extend(_isSameOrAfter.default);
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-month-picker__panel"
+};
+var _hoisted_2 = {
+  class: "var-month-picker__content"
+};
+
+function render(_ctx, _cache) {
+  var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
+
+  var _component_var_button = (0, _vue.resolveComponent)("var-button");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+    type: "month",
+    date: _ctx.preview,
+    disabled: _ctx.panelBtnDisabled,
+    onCheckPanel: _ctx.clickYear,
+    onCheckDate: _ctx.checkDate
+  }, null, 8
+  /* PROPS */
+  , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
+    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+  }, {
+    default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
+      key: _ctx.panelKey
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.MONTH_LIST, month => {
+      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+        key: month.index
+      }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
+        type: "primary",
+        class: "var-month-picker__button",
+        "var-month-picker-cover": "",
+        ripple: false
+      }, _extends({}, _ctx.buttonProps(month.index)), {
+        onClick: $event => _ctx.chooseMonth(month)
+      }), {
+        default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthAbbr(month.index)), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1040
+      /* FULL_PROPS, DYNAMIC_SLOTS */
+      , ["onClick"])]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))]))]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["name"])])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'MonthPickerPanel',
+  components: {
+    VarButton: _button.default,
+    PanelHeader: _panelHeader.default
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    preview: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    clickYear: {
+      type: Function,
+      required: true
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['check-preview', 'choose-month'],
+
+  setup(props, {
+    emit
+  }) {
+    var [currentYear, currentMonth] = props.current.split('-');
+    var reverse = (0, _vue.ref)(false);
+    var panelKey = (0, _vue.ref)(0);
+    var panelBtnDisabled = (0, _vue.reactive)({
+      left: false,
+      right: false
+    });
+    var isSameYear = (0, _vue.computed)(() => props.choose.chooseYear === props.preview.previewYear);
+    var isCurrentYear = (0, _vue.computed)(() => props.preview.previewYear === currentYear);
+
+    var getMonthAbbr = key => {
+      var _pack$value$datePicke, _pack$value$datePicke2;
+
+      return (_pack$value$datePicke = (_pack$value$datePicke2 = _locale.pack.value.datePickerMonthDict) == null ? void 0 : _pack$value$datePicke2[key].abbr) != null ? _pack$value$datePicke : '';
+    };
+
+    var inRange = key => {
+      var {
+        preview: {
+          previewYear
+        },
+        componentProps: {
+          min,
+          max
+        }
+      } = props;
+      var isBeforeMax = true;
+      var isAfterMin = true;
+      var previewDate = previewYear + "-" + key;
+      if (max) isBeforeMax = (0, _esm.default)(previewDate).isSameOrBefore((0, _esm.default)(max), 'month');
+      if (min) isAfterMin = (0, _esm.default)(previewDate).isSameOrAfter((0, _esm.default)(min), 'month');
+      return isBeforeMax && isAfterMin;
+    };
+
+    var shouldChoose = val => {
+      var {
+        choose: {
+          chooseMonths,
+          chooseDays,
+          chooseRangeMonth
+        },
+        componentProps: {
+          type,
+          range
+        }
+      } = props;
+      if (!chooseRangeMonth.length) return false;
+
+      if (range) {
+        var isBeforeMax = (0, _esm.default)(val).isSameOrBefore((0, _esm.default)(chooseRangeMonth[1]), 'month');
+        var isAfterMin = (0, _esm.default)(val).isSameOrAfter((0, _esm.default)(chooseRangeMonth[0]), 'month');
+        return isBeforeMax && isAfterMin;
+      }
+
+      if (type === 'month') return chooseMonths.includes(val);
+      return chooseDays.some(value => value.includes(val));
+    };
+
+    var buttonProps = key => {
+      var {
+        choose: {
+          chooseMonth
+        },
+        preview: {
+          previewYear
+        },
+        componentProps: {
+          allowedDates,
+          color,
+          multiple,
+          range
+        }
+      } = props;
+      var val = previewYear + "-" + key;
+
+      var monthExist = () => {
+        if (range || multiple) return shouldChoose(val);
+        return chooseMonth.index === key && isSameYear.value;
+      };
+
+      var computeDisabled = () => {
+        if (!inRange(key)) return true;
+        if (!allowedDates) return false;
+        return !allowedDates(val);
+      };
+
+      var disabled = computeDisabled();
+
+      var computeText = () => {
+        if (disabled) return true;
+        if (range || multiple) return !shouldChoose(val);
+        return !isSameYear.value || chooseMonth.index !== key;
+      };
+
+      var computeOutline = () => {
+        // 不满足基本条件， 基本条件为当前年、当前月并且 showCurrent 为true的情况
+        if (!(isCurrentYear.value && currentMonth === key && props.componentProps.showCurrent)) return false; // 存在着 disabled
+
+        if ((range || multiple || isSameYear.value) && disabled) return true; // 在选择范围之外
+
+        if (range || multiple) return !shouldChoose(val); // 同一年但是未被选择的情况
+
+        if (isSameYear.value) return chooseMonth.index !== currentMonth;
+        return true;
+      };
+
+      var textColorOrClass = () => {
+        if (disabled) return '';
+        if (computeOutline()) return color != null ? color : '';
+        if (monthExist()) return '';
+        return 'var-date-picker-main__color';
+      };
+
+      var isClass = textColorOrClass().startsWith('var-date-picker');
+      return {
+        disabled,
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : '',
+        textColor: isClass ? '' : textColorOrClass(),
+        class: isClass ? textColorOrClass() : ''
+      };
+    };
+
+    var chooseMonth = month => {
+      emit('choose-month', month);
+    };
+
+    var checkDate = checkType => {
+      reverse.value = checkType === 'prev';
+      panelKey.value += checkType === 'prev' ? -1 : 1;
+      emit('check-preview', 'year', checkType);
+    };
+
+    (0, _vue.watch)(() => props.preview.previewYear, year => {
+      var {
+        componentProps: {
+          min,
+          max
+        }
+      } = props;
+      if (max) panelBtnDisabled.right = !(0, _esm.default)("" + ((0, _shared.toNumber)(year) + 1)).isSameOrBefore((0, _esm.default)(max), 'year');
+      if (min) panelBtnDisabled.left = !(0, _esm.default)("" + ((0, _shared.toNumber)(year) - 1)).isSameOrAfter((0, _esm.default)(min), 'year');
+    }, {
+      immediate: true
+    });
+    return {
+      pack: _locale.pack,
+      MONTH_LIST: _props.MONTH_LIST,
+      reverse,
+      panelKey,
+      panelBtnDisabled,
+      buttonProps,
+      getMonthAbbr,
+      chooseMonth,
+      checkDate
+    };
+  }
+
+});
+
+exports.default = _default;