@opentinyvue/vue-date-range 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import DateRange from './src/index';
+export default DateRange;

package/lib/index.js

@@ -0,0 +1,75 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $props, $setup } from "@opentinyvue/vue-common";
+import PcTemplate from "./pc.js";
+import MobileFirstTemplate from "./mobile-first.js";
+import "@opentinyvue/vue-theme/date-range/index.css";
+var template = function template2(mode) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
+    return PcTemplate;
+  }
+  if ("mobile-first" === (tinyMode || mode)) {
+    return MobileFirstTemplate;
+  }
+  return PcTemplate;
+};
+var $constants = {
+  startDate: /* @__PURE__ */ new Date("1970-01-01"),
+  endDate: /* @__PURE__ */ new Date("2099-12-31")
+};
+var DateRange = defineComponent({
+  name: $prefix + "DateRange",
+  componentName: "DateRange",
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    emitter: Object,
+    step: {
+      type: Object,
+      default: function _default2() {
+        return {
+          hour: 1,
+          minute: 1,
+          second: 1
+        };
+      }
+    },
+    showWeekNumber: {
+      type: Boolean,
+      default: false
+    },
+    formatWeeks: Function,
+    timeEditable: {
+      type: Boolean,
+      default: true
+    }
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+DateRange.install = function(Vue) {
+  Vue.component(DateRange.name, DateRange);
+};
+DateRange.version = version;
+export {
+  DateRange as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,474 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/date-range/vue';
+import { defineComponent, directive, props, setup } from '@opentinyvue/vue-common';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import Time from '@opentinyvue/vue-time';
+import DateTable from '@opentinyvue/vue-date-table';
+import Input from '@opentinyvue/vue-input';
+import Button from '@opentinyvue/vue-button';
+import { IconDoubleRight, IconDoubleLeft, IconChevronLeft, IconChevronRight } from '@opentinyvue/vue-icon';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var classes = {
+  "picker-panel": "text-color-text-primary text-xs shadow-md bg-color-bg-1 rounded leading-4 my-0.5 mx-0",
+  "date-range-picker": "w-144",
+  "sidebar": "absolute top-0 bottom-0 w-28 border-r border-r-color-bg-3 box-border pt-5 bg-color-bg-1 overflow-auto",
+  "shortcut": "block my-0 mx-auto w-24 rounded border-0 bg-transparent leading-8 text-xs text-color-text-primary pl-4 text-left outline-0 cursor-pointer hover:bg-color-bg-2",
+  "shortcut-selected": "text-color-brand bg-color-brand-hover-subtle",
+  "body": "min-w-[513px]",
+  "time-header": "relative text-xs h-10 leading-10 table w-full box-border border-b border-b-color-bg-3",
+  "content": "float-left w-1/2 box-border pt-4 pr-4 pb-1.5 pl-4",
+  "header": "relative text-center p-4 h-12",
+  "icon-btn": "text-sm leading-4 fill-color-text-primary border-0 cursor-pointer outline-0 hover:fill-color-brand",
+  "is-disabled": "text-color-text-disabled hover:cursor-not-allowed",
+  "arrow-left": "float-left",
+  "arrow-right": "float-right",
+  "editors-wrap": "box-border table-cell",
+  "is-left": "border-r border-r-color-bg-3 relative -left-px",
+  "is-right": "text-right",
+  "time-picker-wrap": "relative table-cell px-1",
+  "time-picker-wrap-left": "before:content-[''] before:h-6 before:absolute before:right-0 before:top-2 before:border-r before:border-r-color-bg-3",
+  "editor": "relative items-center sm:border-0 text-center",
+  "footer": "border-t border-t-color-bg-3 py-3 px-4 bg-color-bg-1 overflow-hidden rounded-b"
+};
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("transition", {
+    attrs: {
+      "name": "tiny-zoom-in-top"
+    },
+    on: {
+      "after-leave": function afterLeave($event) {
+        return _vm.$emit("dodestroy");
+      }
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.visible,
+      expression: "state.visible"
+    }],
+    ref: "refDateRange",
+    class: _vm.m(_vm.gcls(["picker-panel", "date-range-picker"]), _vm.state.popperClass),
+    attrs: {
+      "data-tag": "tiny-picker-panel tiny-date-range-picker tiny-popper"
+    }
+  }, [_c("div", {
+    staticClass: "relative",
+    attrs: {
+      "data-tag": "tiny-picker-panel__body-wrapper"
+    }
+  }, [_vm._t("sidebar", null, {
+    "dataTag": "tiny-picker-panel__sidebar"
+  }), _vm.state.shortcuts ? _c("div", {
+    ref: "shortcut",
+    class: _vm.gcls("sidebar"),
+    attrs: {
+      "data-tag": "tiny-picker-panel__sidebar"
+    }
+  }, _vm._l(_vm.state.shortcuts, function(shortcut, key) {
+    return _c("button", {
+      key,
+      class: _vm.m(_vm.gcls("shortcut"), _vm.state.singleSelect && shortcut.type === _vm.state.shortcutType && shortcut.text === _vm.state.shortcutText && _vm.gcls("shortcut-selected")),
+      attrs: {
+        "type": "button",
+        "data-tag": "tiny-picker-panel__shortcut"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.handleShortcutClick(shortcut);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(shortcut.text) + " ")]);
+  }), 0) : _vm._e(), _c("div", {
+    attrs: {
+      "data-tag": "tiny-picker-panel__body"
+    }
+  }, [_vm.state.showTime ? _c("div", {
+    class: _vm.gcls("time-header"),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__time-header"
+    }
+  }, [_c("span", {
+    class: _vm.gcls(["editors-wrap", "is-left"]),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__editors-wrap"
+    }
+  }, [_c("span", {
+    class: _vm.gcls(["time-picker-wrap", "time-picker-wrap-left"]),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__time-picker-wrap"
+    }
+  }, [_c("tiny-input", {
+    ref: "minInput",
+    attrs: {
+      "size": "small",
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.startDate"),
+      "data-tag": "tiny-date-range-picker__editor",
+      "custom-class": _vm.gcls("editor"),
+      "modelValue": _vm.state.minVisibleDate
+    },
+    on: {
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleDateInput(val, "min");
+      },
+      "change": function change(val) {
+        return _vm.handleDateChange(val, "min");
+      }
+    }
+  })], 1), _c("span", {
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: _vm.handleMinTimeClose,
+      expression: "handleMinTimeClose"
+    }],
+    class: _vm.gcls("time-picker-wrap"),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__time-picker-wrap"
+    }
+  }, [_c("tiny-input", {
+    attrs: {
+      "size": "small",
+      "data-tag": "tiny-date-range-picker__editor",
+      "custom-class": _vm.gcls("editor"),
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.startTime"),
+      "modelValue": _vm.state.minVisibleTime
+    },
+    on: {
+      "focus": function focus($event) {
+        _vm.state.minTimePickerVisible = true;
+      },
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleTimeInput(val, "min");
+      },
+      "change": function change(val) {
+        return _vm.handleTimeChange(val, "min");
+      }
+    }
+  }), _c("time-picker", {
+    ref: "minTimePicker",
+    attrs: {
+      "step": _vm.step,
+      "time-arrow-control": _vm.state.arrowControl,
+      "show": _vm.state.minTimePickerVisible,
+      "value": _vm.state.minDate
+    },
+    on: {
+      "pick": _vm.handleMinTimePick
+    }
+  })], 1)]), _c("span", {
+    attrs: {
+      "data-tag": "tiny-icon-arrow-right"
+    }
+  }), _c("span", {
+    class: _vm.gcls(["editors-wrap", "is-right"]),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__editors-wrap is-right"
+    }
+  }, [_c("span", {
+    class: _vm.gcls(["time-picker-wrap", "time-picker-wrap-left"]),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__time-picker-wrap"
+    }
+  }, [_c("tiny-input", {
+    attrs: {
+      "size": "small",
+      "data-tag": "tiny-date-range-picker__editor",
+      "custom-class": _vm.gcls("editor"),
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.endDate"),
+      "modelValue": _vm.state.maxVisibleDate,
+      "readonly": !_vm.state.minDate
+    },
+    on: {
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleDateInput(val, "max");
+      },
+      "change": function change(val) {
+        return _vm.handleDateChange(val, "max");
+      }
+    }
+  })], 1), _c("span", {
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: _vm.handleMaxTimeClose,
+      expression: "handleMaxTimeClose"
+    }],
+    class: _vm.gcls("time-picker-wrap"),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__time-picker-wrap"
+    }
+  }, [_c("tiny-input", {
+    attrs: {
+      "size": "small",
+      "data-tag": "tiny-date-range-picker__editor",
+      "custom-class": _vm.gcls("editor"),
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.endTime"),
+      "modelValue": _vm.state.maxVisibleTime,
+      "readonly": !_vm.state.minDate
+    },
+    on: {
+      "focus": function focus($event) {
+        _vm.state.minDate && (_vm.state.maxTimePickerVisible = true);
+      },
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleTimeInput(val, "max");
+      },
+      "change": function change(val) {
+        return _vm.handleTimeChange(val, "max");
+      }
+    }
+  }), _c("time-picker", {
+    ref: "maxTimePicker",
+    attrs: {
+      "step": _vm.step,
+      "time-arrow-control": _vm.state.arrowControl,
+      "show": _vm.state.maxTimePickerVisible,
+      "value": _vm.state.maxDate
+    },
+    on: {
+      "pick": _vm.handleMaxTimePick
+    }
+  })], 1)])]) : _vm._e(), _c("div", {
+    class: _vm.gcls(["content", "is-left"]),
+    attrs: {
+      "data-tag": "tiny-picker-panel__content tiny-date-range-picker__content is-left"
+    }
+  }, [_c("div", {
+    class: _vm.gcls("header"),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__header"
+    }
+  }, [_c("button", {
+    class: _vm.gcls(["icon-btn", "arrow-left"]),
+    attrs: {
+      "type": "button",
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-d-arrow-left"
+    },
+    on: {
+      "click": _vm.leftPrevYear
+    }
+  }, [_c("icon-double-left")], 1), _c("button", {
+    class: _vm.gcls(["icon-btn", "arrow-left"]),
+    attrs: {
+      "type": "button",
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-arrow-left"
+    },
+    on: {
+      "click": _vm.leftPrevMonth
+    }
+  }, [_c("icon-chevron-left")], 1), _vm.state.unlinkPanels ? _c("button", {
+    class: {
+      "is-disabled": !_vm.state.enableYearArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableYearArrow,
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-d-arrow-right"
+    },
+    on: {
+      "click": _vm.leftNextYear
+    }
+  }, [_c("icon-double-right")], 1) : _vm._e(), _vm.state.unlinkPanels ? _c("button", {
+    class: {
+      "is-disabled": !_vm.state.enableMonthArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableMonthArrow,
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-arrow-right"
+    },
+    on: {
+      "click": _vm.leftNextMonth
+    }
+  }, [_c("icon-chevron-right")], 1) : _vm._e(), _c("div", {
+    staticClass: "mx-12"
+  }, [_vm._v(_vm._s(_vm.state.leftLabel))])]), _c("date-table", {
+    attrs: {
+      "selection-mode": "range",
+      "date": _vm.state.leftDate,
+      "default-value": _vm.state.defaultValue,
+      "min-date": _vm.state.minDate,
+      "max-date": _vm.state.maxDate,
+      "range-state": _vm.state.rangeState,
+      "disabled-date": _vm.state.disabledDate,
+      "cell-class-name": _vm.state.cellClassName,
+      "first-day-of-week": _vm.state.firstDayOfWeek,
+      "show-week-number": _vm.showWeekNumber,
+      "format-weeks": _vm.formatWeeks
+    },
+    on: {
+      "changerange": _vm.handleChangeRange,
+      "pick": _vm.handleRangePick
+    }
+  })], 1), _c("div", {
+    class: _vm.gcls(["content", "is-right"]),
+    attrs: {
+      "data-tag": "tiny-picker-panel__content tiny-date-range-picker__content is-right"
+    }
+  }, [_c("div", {
+    class: _vm.gcls("header"),
+    attrs: {
+      "data-tag": "tiny-date-range-picker__header"
+    }
+  }, [_vm.state.unlinkPanels ? _c("button", {
+    class: _vm.m(_vm.gcls(["icon-btn", "arrow-left"]), !_vm.state.enableYearArrow && _vm.gcls("is-disabled")),
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableYearArrow,
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-d-arrow-left"
+    },
+    on: {
+      "click": _vm.rightPrevYear
+    }
+  }, [_c("icon-double-left")], 1) : _vm._e(), _vm.state.unlinkPanels ? _c("button", {
+    class: _vm.m(_vm.gcls(["icon-btn", "arrow-left"]), !_vm.state.enableMonthArrow && _vm.gcls("is-disabled")),
+    attrs: {
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-arrow-left",
+      "type": "button",
+      "disabled": !_vm.state.enableMonthArrow
+    },
+    on: {
+      "click": _vm.rightPrevMonth
+    }
+  }, [_c("icon-chevron-left")], 1) : _vm._e(), _c("button", {
+    class: _vm.gcls(["icon-btn", "arrow-right"]),
+    attrs: {
+      "type": "button",
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-d-arrow-right"
+    },
+    on: {
+      "click": _vm.rightNextYear
+    }
+  }, [_c("icon-double-right")], 1), _c("button", {
+    class: _vm.gcls(["icon-btn", "arrow-right"]),
+    attrs: {
+      "type": "button",
+      "data-tag": "tiny-picker-panel__icon-btn tiny-icon-arrow-right"
+    },
+    on: {
+      "click": _vm.rightNextMonth
+    }
+  }, [_c("icon-chevron-right")], 1), _c("div", [_vm._v(_vm._s(_vm.state.rightLabel))])]), _c("date-table", {
+    attrs: {
+      "selection-mode": "range",
+      "date": _vm.state.rightDate,
+      "default-value": _vm.state.defaultValue,
+      "min-date": _vm.state.minDate,
+      "max-date": _vm.state.maxDate,
+      "range-state": _vm.state.rangeState,
+      "disabled-date": _vm.state.disabledDate,
+      "cell-class-name": _vm.state.cellClassName,
+      "first-day-of-week": _vm.state.firstDayOfWeek,
+      "show-week-number": _vm.showWeekNumber,
+      "format-weeks": _vm.formatWeeks
+    },
+    on: {
+      "changerange": _vm.handleChangeRange,
+      "pick": _vm.handleRangePick
+    }
+  })], 1)])], 2), _vm.state.showTime ? _c("div", {
+    class: _vm.gcls("footer"),
+    attrs: {
+      "data-tag": "tiny-picker-panel__footer"
+    }
+  }, [_c("tiny-button", {
+    attrs: {
+      "size": "mini",
+      "type": "text",
+      "data-tag": "tiny-picker-panel__link-btn",
+      "custom-class": "text-left pl-0"
+    },
+    on: {
+      "click": _vm.handleClear
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.datepicker.clear")) + " ")]), _c("tiny-button", {
+    attrs: {
+      "type": "primary",
+      "size": "mini",
+      "data-tag": "tiny-picker-panel__link-btn",
+      "custom-class": "float-right",
+      "disabled": _vm.state.btnDisabled
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.handleConfirm(false);
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.datepicker.confirm")) + " ")])], 1) : _vm._e()])]);
+};
+var staticRenderFns = [];
+var __vue2_script = defineComponent({
+  directives: directive({
+    Clickoutside
+  }),
+  components: {
+    TimePicker: Time,
+    DateTable,
+    TinyInput: Input,
+    TinyButton: Button,
+    IconDoubleRight: IconDoubleRight(),
+    IconDoubleLeft: IconDoubleLeft(),
+    IconChevronLeft: IconChevronLeft(),
+    IconChevronRight: IconChevronRight()
+  },
+  props: [].concat(props, ["emitter", "step", "showWeekNumber", "formatWeeks"]),
+  emits: ["dodestroy", "pick"],
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      classes
+    });
+  }
+});
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/lib/pc.js

@@ -0,0 +1,403 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/date-range/vue';
+import { defineComponent, directive, props, setup } from '@opentinyvue/vue-common';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import Time from '@opentinyvue/vue-time';
+import DateTable from '@opentinyvue/vue-date-table';
+import Input from '@opentinyvue/vue-input';
+import Button from '@opentinyvue/vue-button';
+import { iconDoubleRight, iconDoubleLeft, iconChevronLeft, iconChevronRight } from '@opentinyvue/vue-icon';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script = defineComponent({
+  directives: directive({
+    Clickoutside
+  }),
+  components: {
+    TimePicker: Time,
+    DateTable,
+    TinyInput: Input,
+    TinyButton: Button,
+    IconDoubleRight: iconDoubleRight(),
+    IconDoubleLeft: iconDoubleLeft(),
+    IconChevronLeft: iconChevronLeft(),
+    IconChevronRight: iconChevronRight()
+  },
+  props: [].concat(props, ["emitter", "step", "showWeekNumber", "formatWeeks", "timeEditable"]),
+  emits: ["dodestroy", "pick"],
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("transition", {
+    attrs: {
+      "name": "tiny-zoom-in-top"
+    },
+    on: {
+      "after-leave": function afterLeave($event) {
+        return _vm.$emit("dodestroy");
+      }
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.visible,
+      expression: "state.visible"
+    }],
+    ref: "refDateRange",
+    staticClass: "tiny-picker-panel tiny-date-range-picker tiny-popper",
+    class: [{
+      "has-sidebar": _vm.slots.sidebar || _vm.state.shortcuts,
+      "has-time": _vm.state.showTime
+    }, _vm.state.popperClass]
+  }, [_c("div", {
+    staticClass: "tiny-picker-panel__body-wrapper"
+  }, [_vm._t("sidebar"), _vm.state.shortcuts ? _c("div", {
+    ref: "shortcut",
+    staticClass: "tiny-picker-panel__sidebar"
+  }, _vm._l(_vm.state.shortcuts, function(shortcut, key) {
+    return _c("button", {
+      key,
+      staticClass: "tiny-picker-panel__shortcut",
+      class: {
+        "tiny-picker-panel__shortcut-selected": _vm.state.singleSelect && shortcut.type === _vm.state.shortcutType && shortcut.text === _vm.state.shortcutText
+      },
+      attrs: {
+        "type": "button",
+        "title": shortcut.text
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.handleShortcutClick(shortcut);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(shortcut.text) + " ")]);
+  }), 0) : _vm._e(), _c("div", {
+    staticClass: "tiny-picker-panel__body"
+  }, [_vm.state.showTime ? _c("div", {
+    staticClass: "tiny-date-range-picker__time-header"
+  }, [_c("span", {
+    staticClass: "tiny-date-range-picker__editors-wrap"
+  }, [_c("span", {
+    staticClass: "tiny-date-range-picker__time-picker-wrap"
+  }, [_c("tiny-input", {
+    ref: "minInput",
+    staticClass: "tiny-date-range-picker__editor",
+    attrs: {
+      "size": "small",
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.startDate"),
+      "modelValue": _vm.state.minVisibleDate
+    },
+    on: {
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleDateInput(val, "min");
+      },
+      "change": function change(val) {
+        return _vm.handleDateChange(val, "min");
+      }
+    }
+  })], 1), _c("span", {
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: _vm.handleMinTimeClose,
+      expression: "handleMinTimeClose"
+    }],
+    staticClass: "tiny-date-range-picker__time-picker-wrap"
+  }, [_c("tiny-input", {
+    staticClass: "tiny-date-range-picker__editor",
+    attrs: {
+      "size": "small",
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.startTime"),
+      "modelValue": _vm.state.minVisibleTime,
+      "readonly": !_vm.timeEditable
+    },
+    on: {
+      "focus": function focus($event) {
+        _vm.state.minTimePickerVisible = true;
+      },
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleTimeInput(val, "min");
+      },
+      "change": function change(val) {
+        return _vm.handleTimeChange(val, "min");
+      }
+    }
+  }), _c("time-picker", {
+    ref: "minTimePicker",
+    attrs: {
+      "step": _vm.step,
+      "time-arrow-control": _vm.state.arrowControl,
+      "show": _vm.state.minTimePickerVisible,
+      "value": _vm.state.minDate
+    },
+    on: {
+      "pick": _vm.handleMinTimePick
+    }
+  })], 1)]), _c("span", {
+    staticClass: "tiny-icon-arrow-right"
+  }), _c("span", {
+    staticClass: "tiny-date-range-picker__editors-wrap is-right"
+  }, [_c("span", {
+    staticClass: "tiny-date-range-picker__time-picker-wrap"
+  }, [_c("tiny-input", {
+    staticClass: "tiny-date-range-picker__editor",
+    attrs: {
+      "size": "small",
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.endDate"),
+      "modelValue": _vm.state.maxVisibleDate,
+      "readonly": !_vm.state.minDate
+    },
+    on: {
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleDateInput(val, "max");
+      },
+      "change": function change(val) {
+        return _vm.handleDateChange(val, "max");
+      }
+    }
+  })], 1), _c("span", {
+    directives: [{
+      name: "clickoutside",
+      rawName: "v-clickoutside",
+      value: _vm.handleMaxTimeClose,
+      expression: "handleMaxTimeClose"
+    }],
+    staticClass: "tiny-date-range-picker__time-picker-wrap"
+  }, [_c("tiny-input", {
+    staticClass: "tiny-date-range-picker__editor",
+    attrs: {
+      "size": "small",
+      "disabled": _vm.state.rangeState.selecting,
+      "placeholder": _vm.t("ui.datepicker.endTime"),
+      "modelValue": _vm.state.maxVisibleTime,
+      "readonly": !_vm.state.minDate || !_vm.timeEditable
+    },
+    on: {
+      "focus": function focus($event) {
+        _vm.state.minDate && (_vm.state.maxTimePickerVisible = true);
+      },
+      "update:modelValue": function updateModelValue(val) {
+        return _vm.handleTimeInput(val, "max");
+      },
+      "change": function change(val) {
+        return _vm.handleTimeChange(val, "max");
+      }
+    }
+  }), _c("time-picker", {
+    ref: "maxTimePicker",
+    attrs: {
+      "step": _vm.step,
+      "time-arrow-control": _vm.state.arrowControl,
+      "show": _vm.state.maxTimePickerVisible,
+      "value": _vm.state.maxDate
+    },
+    on: {
+      "pick": _vm.handleMaxTimePick
+    }
+  })], 1)])]) : _vm._e(), _c("div", {
+    staticClass: "tiny-picker-panel__content tiny-date-range-picker__content is-left"
+  }, [_c("div", {
+    staticClass: "tiny-date-range-picker__header"
+  }, [_c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-d-arrow-left",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.leftPrevYear
+    }
+  }, [_c("icon-double-left")], 1), _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-arrow-left",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.leftPrevMonth
+    }
+  }, [_c("icon-chevron-left")], 1), _vm.state.unlinkPanels ? _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-d-arrow-right",
+    class: {
+      "is-disabled": !_vm.state.enableYearArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableYearArrow
+    },
+    on: {
+      "click": _vm.leftNextYear
+    }
+  }, [_c("icon-double-right")], 1) : _vm._e(), _vm.state.unlinkPanels ? _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-arrow-right",
+    class: {
+      "is-disabled": !_vm.state.enableMonthArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableMonthArrow
+    },
+    on: {
+      "click": _vm.leftNextMonth
+    }
+  }, [_c("icon-chevron-right")], 1) : _vm._e(), _c("div", [_vm._v(_vm._s(_vm.state.leftLabel))])]), _c("div", {
+    staticClass: "tiny-date-range-picker__table"
+  }, [_c("date-table", {
+    attrs: {
+      "selection-mode": "range",
+      "date": _vm.state.leftDate,
+      "default-value": _vm.state.defaultValue,
+      "min-date": _vm.state.minDate,
+      "max-date": _vm.state.maxDate,
+      "range-state": _vm.state.rangeState,
+      "disabled-date": _vm.state.disabledDate,
+      "cell-class-name": _vm.state.cellClassName,
+      "first-day-of-week": _vm.state.firstDayOfWeek,
+      "show-week-number": _vm.showWeekNumber,
+      "format-weeks": _vm.formatWeeks
+    },
+    on: {
+      "changerange": _vm.handleChangeRange,
+      "pick": _vm.handleRangePick
+    }
+  })], 1)]), _c("div", {
+    staticClass: "tiny-picker-panel__content tiny-date-range-picker__content is-right"
+  }, [_c("div", {
+    staticClass: "tiny-date-range-picker__header"
+  }, [_vm.state.unlinkPanels ? _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-d-arrow-left",
+    class: {
+      "is-disabled": !_vm.state.enableYearArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableYearArrow
+    },
+    on: {
+      "click": _vm.rightPrevYear
+    }
+  }, [_c("icon-double-left")], 1) : _vm._e(), _vm.state.unlinkPanels ? _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-arrow-left",
+    class: {
+      "is-disabled": !_vm.state.enableMonthArrow
+    },
+    attrs: {
+      "type": "button",
+      "disabled": !_vm.state.enableMonthArrow
+    },
+    on: {
+      "click": _vm.rightPrevMonth
+    }
+  }, [_c("icon-chevron-left")], 1) : _vm._e(), _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-d-arrow-right",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.rightNextYear
+    }
+  }, [_c("icon-double-right")], 1), _c("button", {
+    staticClass: "tiny-picker-panel__icon-btn tiny-icon-arrow-right",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.rightNextMonth
+    }
+  }, [_c("icon-chevron-right")], 1), _c("div", [_vm._v(_vm._s(_vm.state.rightLabel))])]), _c("div", {
+    staticClass: "tiny-date-range-picker__table"
+  }, [_c("date-table", {
+    attrs: {
+      "selection-mode": "range",
+      "date": _vm.state.rightDate,
+      "default-value": _vm.state.defaultValue,
+      "min-date": _vm.state.minDate,
+      "max-date": _vm.state.maxDate,
+      "range-state": _vm.state.rangeState,
+      "disabled-date": _vm.state.disabledDate,
+      "cell-class-name": _vm.state.cellClassName,
+      "first-day-of-week": _vm.state.firstDayOfWeek,
+      "show-week-number": _vm.showWeekNumber,
+      "format-weeks": _vm.formatWeeks
+    },
+    on: {
+      "changerange": _vm.handleChangeRange,
+      "pick": _vm.handleRangePick
+    }
+  })], 1)])])], 2), _vm.state.showTime ? _c("div", {
+    staticClass: "tiny-picker-panel__footer"
+  }, [_c("tiny-button", {
+    staticClass: "tiny-picker-panel__link-btn",
+    attrs: {
+      "type": "text"
+    },
+    on: {
+      "click": _vm.handleClear
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.datepicker.clear")) + " ")]), _c("tiny-button", {
+    staticClass: "tiny-picker-panel__link-btn",
+    attrs: {
+      "plain": _vm.state.confirmButtonProps.plain,
+      "type": _vm.state.confirmButtonProps.type,
+      "disabled": _vm.state.btnDisabled
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.handleConfirm(false);
+      }
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.datepicker.confirm")) + " ")])], 1) : _vm._e()])]);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@opentinyvue/vue-date-range",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-input": "~2.21.0",
+    "@opentinyvue/vue-button": "~2.21.0",
+    "@opentinyvue/vue-time": "~2.21.0",
+    "@opentinyvue/vue-date-table": "~2.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobile-first.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/token.d.ts

@@ -0,0 +1,22 @@
+export declare const classes: {
+    'picker-panel': string;
+    'date-range-picker': string;
+    sidebar: string;
+    shortcut: string;
+    'shortcut-selected': string;
+    body: string;
+    'time-header': string;
+    content: string;
+    header: string;
+    'icon-btn': string;
+    'is-disabled': string;
+    'arrow-left': string;
+    'arrow-right': string;
+    'editors-wrap': string;
+    'is-left': string;
+    'is-right': string;
+    'time-picker-wrap': string;
+    'time-picker-wrap-left': string;
+    editor: string;
+    footer: string;
+};