@weitutech/by-components-v3 1.1.25 → 1.1.26

package/dist/by-component-v3.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, mergeProps, Fragment, renderList, normalizeClass, toDisplayString, createTextVNode, computed, nextTick, onBeforeUnmount, createBlock, createCommentVNode, withCtx, renderSlot, useAttrs as useAttrs$1, unref, useSlots, toRefs, isVNode, reactive, inject, provide, h as h$2, onUnmounted, TransitionGroup, Teleport as Teleport$1, onActivated, onDeactivated, getCurrentInstance, readonly, getCurrentScope, onScopeDispose, shallowRef, watchEffect, customRef, isRef, warn as warn$1, normalizeStyle, toRef, Transition, withDirectives, resolveDynamicComponent, vShow, withModifiers, onUpdated, cloneVNode, Text as Text$2, Comment, onBeforeMount, withKeys, createSlots, normalizeProps, guardReactiveProps, toRaw, vModelCheckbox, vModelRadio, onBeforeUpdate, vModelText, toHandlers, markRaw, effectScope, resolveDirective, toHandlerKey, render, createApp, shallowReactive } from "vue";
+import { defineComponent, getCurrentInstance, ref, computed, onMounted, nextTick, watch, onBeforeUnmount, resolveComponent, createElementBlock, openBlock, normalizeClass, Fragment, createVNode, createElementVNode, mergeProps, renderList, toDisplayString, createCommentVNode, createTextVNode, createBlock, withCtx, renderSlot, useAttrs as useAttrs$1, unref, useSlots, toRefs, isVNode, reactive, inject, provide, h as h$2, onUnmounted, TransitionGroup, Teleport as Teleport$1, onActivated, onDeactivated, readonly, getCurrentScope, onScopeDispose, shallowRef, watchEffect, customRef, isRef, warn as warn$1, normalizeStyle, toRef, Transition, withDirectives, resolveDynamicComponent, vShow, withModifiers, onUpdated, cloneVNode, Text as Text$2, Comment, onBeforeMount, withKeys, createSlots, normalizeProps, guardReactiveProps, toRaw, vModelCheckbox, vModelRadio, onBeforeUpdate, vModelText, toHandlers, markRaw, effectScope, resolveDirective, toHandlerKey, render, createApp, shallowReactive } from "vue";
 function cloneDeep$1(obj) {
   if (obj === null || typeof obj !== "object") {
     return obj;
@@ -17,6 +17,294 @@ function cloneDeep$1(obj) {
   }
   return clone2;
 }
+function getDefaultExportFromCjs(x2) {
+  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
+}
+var dayjs_min$1 = { exports: {} };
+var dayjs_min = dayjs_min$1.exports;
+var hasRequiredDayjs_min;
+function requireDayjs_min() {
+  if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+  hasRequiredDayjs_min = 1;
+  (function(module2, exports2) {
+    !function(t2, e) {
+      module2.exports = e();
+    }(dayjs_min, function() {
+      var t2 = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s2 = "minute", u2 = "hour", a2 = "day", o2 = "week", c2 = "month", f2 = "quarter", h2 = "year", d2 = "date", l2 = "Invalid Date", $2 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M2 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t3) {
+        var e2 = ["th", "st", "nd", "rd"], n2 = t3 % 100;
+        return "[" + t3 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
+      } }, m2 = function(t3, e2, n2) {
+        var r2 = String(t3);
+        return !r2 || r2.length >= e2 ? t3 : "" + Array(e2 + 1 - r2.length).join(n2) + t3;
+      }, v2 = { s: m2, z: function(t3) {
+        var e2 = -t3.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
+        return (e2 <= 0 ? "+" : "-") + m2(r2, 2, "0") + ":" + m2(i2, 2, "0");
+      }, m: function t3(e2, n2) {
+        if (e2.date() < n2.date()) return -t3(n2, e2);
+        var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, c2), s3 = n2 - i2 < 0, u3 = e2.clone().add(r2 + (s3 ? -1 : 1), c2);
+        return +(-(r2 + (n2 - i2) / (s3 ? i2 - u3 : u3 - i2)) || 0);
+      }, a: function(t3) {
+        return t3 < 0 ? Math.ceil(t3) || 0 : Math.floor(t3);
+      }, p: function(t3) {
+        return { M: c2, y: h2, w: o2, d: a2, D: d2, h: u2, m: s2, s: i, ms: r, Q: f2 }[t3] || String(t3 || "").toLowerCase().replace(/s$/, "");
+      }, u: function(t3) {
+        return void 0 === t3;
+      } }, g2 = "en", D2 = {};
+      D2[g2] = M2;
+      var p2 = "$isDayjsObject", S2 = function(t3) {
+        return t3 instanceof _2 || !(!t3 || !t3[p2]);
+      }, w2 = function t3(e2, n2, r2) {
+        var i2;
+        if (!e2) return g2;
+        if ("string" == typeof e2) {
+          var s3 = e2.toLowerCase();
+          D2[s3] && (i2 = s3), n2 && (D2[s3] = n2, i2 = s3);
+          var u3 = e2.split("-");
+          if (!i2 && u3.length > 1) return t3(u3[0]);
+        } else {
+          var a3 = e2.name;
+          D2[a3] = e2, i2 = a3;
+        }
+        return !r2 && i2 && (g2 = i2), i2 || !r2 && g2;
+      }, O2 = function(t3, e2) {
+        if (S2(t3)) return t3.clone();
+        var n2 = "object" == typeof e2 ? e2 : {};
+        return n2.date = t3, n2.args = arguments, new _2(n2);
+      }, b2 = v2;
+      b2.l = w2, b2.i = S2, b2.w = function(t3, e2) {
+        return O2(t3, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
+      };
+      var _2 = function() {
+        function M3(t3) {
+          this.$L = w2(t3.locale, null, true), this.parse(t3), this.$x = this.$x || t3.x || {}, this[p2] = true;
+        }
+        var m3 = M3.prototype;
+        return m3.parse = function(t3) {
+          this.$d = function(t4) {
+            var e2 = t4.date, n2 = t4.utc;
+            if (null === e2) return /* @__PURE__ */ new Date(NaN);
+            if (b2.u(e2)) return /* @__PURE__ */ new Date();
+            if (e2 instanceof Date) return new Date(e2);
+            if ("string" == typeof e2 && !/Z$/i.test(e2)) {
+              var r2 = e2.match($2);
+              if (r2) {
+                var i2 = r2[2] - 1 || 0, s3 = (r2[7] || "0").substring(0, 3);
+                return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3);
+              }
+            }
+            return new Date(e2);
+          }(t3), this.init();
+        }, m3.init = function() {
+          var t3 = this.$d;
+          this.$y = t3.getFullYear(), this.$M = t3.getMonth(), this.$D = t3.getDate(), this.$W = t3.getDay(), this.$H = t3.getHours(), this.$m = t3.getMinutes(), this.$s = t3.getSeconds(), this.$ms = t3.getMilliseconds();
+        }, m3.$utils = function() {
+          return b2;
+        }, m3.isValid = function() {
+          return !(this.$d.toString() === l2);
+        }, m3.isSame = function(t3, e2) {
+          var n2 = O2(t3);
+          return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
+        }, m3.isAfter = function(t3, e2) {
+          return O2(t3) < this.startOf(e2);
+        }, m3.isBefore = function(t3, e2) {
+          return this.endOf(e2) < O2(t3);
+        }, m3.$g = function(t3, e2, n2) {
+          return b2.u(t3) ? this[e2] : this.set(n2, t3);
+        }, m3.unix = function() {
+          return Math.floor(this.valueOf() / 1e3);
+        }, m3.valueOf = function() {
+          return this.$d.getTime();
+        }, m3.startOf = function(t3, e2) {
+          var n2 = this, r2 = !!b2.u(e2) || e2, f3 = b2.p(t3), l3 = function(t4, e3) {
+            var i2 = b2.w(n2.$u ? Date.UTC(n2.$y, e3, t4) : new Date(n2.$y, e3, t4), n2);
+            return r2 ? i2 : i2.endOf(a2);
+          }, $3 = function(t4, e3) {
+            return b2.w(n2.toDate()[t4].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
+          }, y2 = this.$W, M4 = this.$M, m4 = this.$D, v3 = "set" + (this.$u ? "UTC" : "");
+          switch (f3) {
+            case h2:
+              return r2 ? l3(1, 0) : l3(31, 11);
+            case c2:
+              return r2 ? l3(1, M4) : l3(0, M4 + 1);
+            case o2:
+              var g3 = this.$locale().weekStart || 0, D3 = (y2 < g3 ? y2 + 7 : y2) - g3;
+              return l3(r2 ? m4 - D3 : m4 + (6 - D3), M4);
+            case a2:
+            case d2:
+              return $3(v3 + "Hours", 0);
+            case u2:
+              return $3(v3 + "Minutes", 1);
+            case s2:
+              return $3(v3 + "Seconds", 2);
+            case i:
+              return $3(v3 + "Milliseconds", 3);
+            default:
+              return this.clone();
+          }
+        }, m3.endOf = function(t3) {
+          return this.startOf(t3, false);
+        }, m3.$set = function(t3, e2) {
+          var n2, o3 = b2.p(t3), f3 = "set" + (this.$u ? "UTC" : ""), l3 = (n2 = {}, n2[a2] = f3 + "Date", n2[d2] = f3 + "Date", n2[c2] = f3 + "Month", n2[h2] = f3 + "FullYear", n2[u2] = f3 + "Hours", n2[s2] = f3 + "Minutes", n2[i] = f3 + "Seconds", n2[r] = f3 + "Milliseconds", n2)[o3], $3 = o3 === a2 ? this.$D + (e2 - this.$W) : e2;
+          if (o3 === c2 || o3 === h2) {
+            var y2 = this.clone().set(d2, 1);
+            y2.$d[l3]($3), y2.init(), this.$d = y2.set(d2, Math.min(this.$D, y2.daysInMonth())).$d;
+          } else l3 && this.$d[l3]($3);
+          return this.init(), this;
+        }, m3.set = function(t3, e2) {
+          return this.clone().$set(t3, e2);
+        }, m3.get = function(t3) {
+          return this[b2.p(t3)]();
+        }, m3.add = function(r2, f3) {
+          var d3, l3 = this;
+          r2 = Number(r2);
+          var $3 = b2.p(f3), y2 = function(t3) {
+            var e2 = O2(l3);
+            return b2.w(e2.date(e2.date() + Math.round(t3 * r2)), l3);
+          };
+          if ($3 === c2) return this.set(c2, this.$M + r2);
+          if ($3 === h2) return this.set(h2, this.$y + r2);
+          if ($3 === a2) return y2(1);
+          if ($3 === o2) return y2(7);
+          var M4 = (d3 = {}, d3[s2] = e, d3[u2] = n, d3[i] = t2, d3)[$3] || 1, m4 = this.$d.getTime() + r2 * M4;
+          return b2.w(m4, this);
+        }, m3.subtract = function(t3, e2) {
+          return this.add(-1 * t3, e2);
+        }, m3.format = function(t3) {
+          var e2 = this, n2 = this.$locale();
+          if (!this.isValid()) return n2.invalidDate || l2;
+          var r2 = t3 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b2.z(this), s3 = this.$H, u3 = this.$m, a3 = this.$M, o3 = n2.weekdays, c3 = n2.months, f3 = n2.meridiem, h3 = function(t4, n3, i3, s4) {
+            return t4 && (t4[n3] || t4(e2, r2)) || i3[n3].slice(0, s4);
+          }, d3 = function(t4) {
+            return b2.s(s3 % 12 || 12, t4, "0");
+          }, $3 = f3 || function(t4, e3, n3) {
+            var r3 = t4 < 12 ? "AM" : "PM";
+            return n3 ? r3.toLowerCase() : r3;
+          };
+          return r2.replace(y, function(t4, r3) {
+            return r3 || function(t5) {
+              switch (t5) {
+                case "YY":
+                  return String(e2.$y).slice(-2);
+                case "YYYY":
+                  return b2.s(e2.$y, 4, "0");
+                case "M":
+                  return a3 + 1;
+                case "MM":
+                  return b2.s(a3 + 1, 2, "0");
+                case "MMM":
+                  return h3(n2.monthsShort, a3, c3, 3);
+                case "MMMM":
+                  return h3(c3, a3);
+                case "D":
+                  return e2.$D;
+                case "DD":
+                  return b2.s(e2.$D, 2, "0");
+                case "d":
+                  return String(e2.$W);
+                case "dd":
+                  return h3(n2.weekdaysMin, e2.$W, o3, 2);
+                case "ddd":
+                  return h3(n2.weekdaysShort, e2.$W, o3, 3);
+                case "dddd":
+                  return o3[e2.$W];
+                case "H":
+                  return String(s3);
+                case "HH":
+                  return b2.s(s3, 2, "0");
+                case "h":
+                  return d3(1);
+                case "hh":
+                  return d3(2);
+                case "a":
+                  return $3(s3, u3, true);
+                case "A":
+                  return $3(s3, u3, false);
+                case "m":
+                  return String(u3);
+                case "mm":
+                  return b2.s(u3, 2, "0");
+                case "s":
+                  return String(e2.$s);
+                case "ss":
+                  return b2.s(e2.$s, 2, "0");
+                case "SSS":
+                  return b2.s(e2.$ms, 3, "0");
+                case "Z":
+                  return i2;
+              }
+              return null;
+            }(t4) || i2.replace(":", "");
+          });
+        }, m3.utcOffset = function() {
+          return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
+        }, m3.diff = function(r2, d3, l3) {
+          var $3, y2 = this, M4 = b2.p(d3), m4 = O2(r2), v3 = (m4.utcOffset() - this.utcOffset()) * e, g3 = this - m4, D3 = function() {
+            return b2.m(y2, m4);
+          };
+          switch (M4) {
+            case h2:
+              $3 = D3() / 12;
+              break;
+            case c2:
+              $3 = D3();
+              break;
+            case f2:
+              $3 = D3() / 3;
+              break;
+            case o2:
+              $3 = (g3 - v3) / 6048e5;
+              break;
+            case a2:
+              $3 = (g3 - v3) / 864e5;
+              break;
+            case u2:
+              $3 = g3 / n;
+              break;
+            case s2:
+              $3 = g3 / e;
+              break;
+            case i:
+              $3 = g3 / t2;
+              break;
+            default:
+              $3 = g3;
+          }
+          return l3 ? $3 : b2.a($3);
+        }, m3.daysInMonth = function() {
+          return this.endOf(c2).$D;
+        }, m3.$locale = function() {
+          return D2[this.$L];
+        }, m3.locale = function(t3, e2) {
+          if (!t3) return this.$L;
+          var n2 = this.clone(), r2 = w2(t3, e2, true);
+          return r2 && (n2.$L = r2), n2;
+        }, m3.clone = function() {
+          return b2.w(this.$d, this);
+        }, m3.toDate = function() {
+          return new Date(this.valueOf());
+        }, m3.toJSON = function() {
+          return this.isValid() ? this.toISOString() : null;
+        }, m3.toISOString = function() {
+          return this.$d.toISOString();
+        }, m3.toString = function() {
+          return this.$d.toUTCString();
+        }, M3;
+      }(), k = _2.prototype;
+      return O2.prototype = k, [["$ms", r], ["$s", i], ["$m", s2], ["$H", u2], ["$W", a2], ["$M", c2], ["$y", h2], ["$D", d2]].forEach(function(t3) {
+        k[t3[1]] = function(e2) {
+          return this.$g(e2, t3[0], t3[1]);
+        };
+      }), O2.extend = function(t3, e2) {
+        return t3.$i || (t3(e2, _2, O2), t3.$i = true), O2;
+      }, O2.locale = w2, O2.isDayjs = S2, O2.unix = function(t3) {
+        return O2(1e3 * t3);
+      }, O2.en = D2[g2], O2.Ls = D2, O2.p = {}, O2;
+    });
+  })(dayjs_min$1);
+  return dayjs_min$1.exports;
+}
+var dayjs_minExports = requireDayjs_min();
+const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 //! moment.js
 //! version : 2.30.1
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
@@ -4011,9 +4299,9 @@ hooks$a.HTML5_FMT = {
   MONTH: "YYYY-MM"
   // <input type="month" />
 };
-const _hoisted_1$8 = { class: "b-picker wrapper" };
-const _hoisted_2$6 = { class: "btn" };
-const _hoisted_3$6 = ["onClick"];
+const _hoisted_1$8 = { class: "btn" };
+const _hoisted_2$6 = ["onClick"];
+const _hoisted_3$6 = ["title"];
 const _sfc_main$2K = /* @__PURE__ */ defineComponent({
   __name: "datePicker",
   props: {
@@ -4021,14 +4309,17 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
     startPlaceholder: { default: "开始时间" },
     endPlaceholder: { default: "结束时间" },
     type: { default: "daterange" },
-    rangeSeparator: { default: "至" },
+    rangeSeparator: { default: "~" },
     size: { default: "" },
-    active: { default: "" }
+    active: { default: "" },
+    shortcutLayout: { default: "external" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    var _a2;
     const props2 = __props;
     const emit = __emit;
+    const instanceUid = ((_a2 = getCurrentInstance()) == null ? void 0 : _a2.uid) ?? 0;
     const shortcuts = ref([
       {
         label: "上月",
@@ -4062,6 +4353,61 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
       }
     ]);
     const active = ref("");
+    const panelInputWrapRef = ref();
+    const panelHighlightTimer = ref(null);
+    const shortcutTagVertical = ref(false);
+    const shortcutTagResizeObserver = ref(null);
+    const activeShortcutLabel = computed(() => {
+      if (!active.value) return "";
+      const item = shortcuts.value.find((shortcut) => shortcut.key === active.value);
+      return item ? item.label : "";
+    });
+    const activeShortcutChars = computed(() => activeShortcutLabel.value.split(""));
+    const panelPopperClass = computed(
+      () => `by-custom-date-picker-panel by-custom-date-picker-panel--${instanceUid}`
+    );
+    const panelShortcuts = computed(
+      () => shortcuts.value.map((item) => ({
+        text: item.label,
+        onClick: ({ emit: pickerEmit }) => {
+          active.value = item.key;
+          pickerEmit("pick", [dayjs(item.start_time), dayjs(item.end_time)]);
+          schedulePanelShortcutHighlight();
+        }
+      }))
+    );
+    const panelDatePickerProps = computed(() => {
+      const rest = { ...props2 };
+      delete rest.shortcutLayout;
+      delete rest.active;
+      delete rest.modelValue;
+      return {
+        ...rest,
+        // panel 模式默认用 ~；业务可通过 rangeSeparator 覆盖
+        rangeSeparator: props2.rangeSeparator === "至" ? "~" : props2.rangeSeparator,
+        shortcuts: panelShortcuts.value,
+        popperClass: panelPopperClass.value
+      };
+    });
+    const syncActiveFromValue = (newValue) => {
+      if (Array.isArray(newValue) && newValue.length) {
+        const start = hooks$a(newValue[0]).format("YYYY-MM-DD");
+        const end = hooks$a(newValue[1]).format("YYYY-MM-DD");
+        let matchedKey = "";
+        shortcuts.value.forEach((item2) => {
+          if (item2.start_time === start && item2.end_time === end) {
+            matchedKey = item2.key;
+          }
+        });
+        active.value = matchedKey;
+        return;
+      }
+      active.value = props2.active;
+      const item = shortcuts.value.find((shortcut) => shortcut.key === props2.active) || {};
+      if (item.start_time && item.end_time) {
+        handleClick(item);
+      }
+    };
     const handleClick = (item) => {
       active.value = item.key;
       emit("update:modelValue", [item.start_time, item.end_time]);
@@ -4080,6 +4426,9 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
           handleClick(item);
         }
       }
+      if (props2.shortcutLayout === "panel") {
+        initShortcutTagLayout();
+      }
     });
     const handleChange = (e) => {
       if (!e) {
@@ -4092,6 +4441,83 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
       }
       active.value = "";
     };
+    const handlePanelChange = (e) => {
+      if (!e) {
+        emit("update:modelValue", []);
+        active.value = "";
+      } else {
+        const formattedDates = e.map((item) => hooks$a(item).format("YYYY-MM-DD"));
+        emit("update:modelValue", formattedDates);
+        syncActiveFromValue(formattedDates);
+      }
+    };
+    const handlePanelOpen = () => {
+      if (props2.shortcutLayout !== "panel") return;
+      syncActiveFromValue(props2.modelValue);
+      schedulePanelShortcutHighlight();
+    };
+    const clearPanelHighlightTimer = () => {
+      if (panelHighlightTimer.value) {
+        clearTimeout(panelHighlightTimer.value);
+        panelHighlightTimer.value = null;
+      }
+    };
+    const getPanelElement = () => {
+      return document.querySelector(`.by-custom-date-picker-panel--${instanceUid}`);
+    };
+    const updatePanelShortcutHighlight = () => {
+      const panel = getPanelElement();
+      if (!panel) return false;
+      const shortcutEls = panel.querySelectorAll(".el-picker-panel__shortcut");
+      if (!shortcutEls.length) return false;
+      shortcutEls.forEach((el) => {
+        const label = (el.textContent || "").trim();
+        const item = shortcuts.value.find((shortcut) => shortcut.label === label);
+        const isActive = !!(item && item.key === active.value);
+        el.classList.toggle("active", isActive);
+        el.classList.toggle("is-active", isActive);
+      });
+      return true;
+    };
+    const schedulePanelShortcutHighlight = (retry = 0) => {
+      clearPanelHighlightTimer();
+      nextTick(() => {
+        const updated = updatePanelShortcutHighlight();
+        if (!updated && retry < 15) {
+          panelHighlightTimer.value = setTimeout(() => {
+            schedulePanelShortcutHighlight(retry + 1);
+          }, 50);
+        }
+      });
+    };
+    const initShortcutTagLayout = () => {
+      destroyShortcutTagObserver();
+      nextTick(() => {
+        const wrap = panelInputWrapRef.value;
+        if (!wrap) return;
+        if (typeof ResizeObserver !== "undefined") {
+          shortcutTagResizeObserver.value = new ResizeObserver(() => {
+            updateShortcutTagLayout();
+          });
+          shortcutTagResizeObserver.value.observe(wrap);
+        }
+        updateShortcutTagLayout();
+      });
+    };
+    const updateShortcutTagLayout = () => {
+      const wrap = panelInputWrapRef.value;
+      if (!wrap || !activeShortcutLabel.value) {
+        shortcutTagVertical.value = false;
+        return;
+      }
+      shortcutTagVertical.value = wrap.clientWidth < 250;
+    };
+    const destroyShortcutTagObserver = () => {
+      if (shortcutTagResizeObserver.value) {
+        shortcutTagResizeObserver.value.disconnect();
+        shortcutTagResizeObserver.value = null;
+      }
+    };
     watch(
       () => props2.modelValue,
       (newValue) => {
@@ -4109,23 +4535,68 @@ const _sfc_main$2K = /* @__PURE__ */ defineComponent({
         deep: true
       }
     );
+    watch(active, () => {
+      if (props2.shortcutLayout === "panel") {
+        schedulePanelShortcutHighlight();
+        updateShortcutTagLayout();
+      }
+    });
+    onBeforeUnmount(() => {
+      clearPanelHighlightTimer();
+      destroyShortcutTagObserver();
+    });
     return (_ctx, _cache) => {
       const _component_el_date_picker = resolveComponent("el-date-picker");
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
-        createVNode(_component_el_date_picker, mergeProps({ style: { "width": "70%" } }, props2, {
-          modelValue: props2.modelValue,
-          "onUpdate:modelValue": handleChange
-        }), null, 16, ["modelValue"]),
-        createElementVNode("div", _hoisted_2$6, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(shortcuts.value, (item) => {
-            return openBlock(), createElementBlock("span", {
-              key: item.key,
-              class: normalizeClass(["item", { item_active: item.key === active.value }]),
-              onClick: ($event) => handleClick(item)
-            }, toDisplayString(item.label), 11, _hoisted_3$6);
-          }), 128))
-        ])
-      ]);
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["b-picker wrapper", { "b-picker--panel-shortcuts": _ctx.shortcutLayout === "panel" }])
+      }, [
+        _ctx.shortcutLayout === "external" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(_component_el_date_picker, mergeProps({ style: { "width": "70%" } }, props2, {
+            modelValue: props2.modelValue,
+            "onUpdate:modelValue": handleChange
+          }), null, 16, ["modelValue"]),
+          createElementVNode("div", _hoisted_1$8, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(shortcuts.value, (item) => {
+              return openBlock(), createElementBlock("span", {
+                key: item.key,
+                class: normalizeClass(["item", { item_active: item.key === active.value }]),
+                onClick: ($event) => handleClick(item)
+              }, toDisplayString(item.label), 11, _hoisted_2$6);
+            }), 128))
+          ])
+        ], 64)) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "panelInputWrapRef",
+          ref: panelInputWrapRef,
+          class: "b-picker__panel-input-wrap"
+        }, [
+          createVNode(_component_el_date_picker, mergeProps({
+            class: {
+              "has-shortcut-tag": !!activeShortcutLabel.value,
+              "has-shortcut-tag--vertical": !!activeShortcutLabel.value && shortcutTagVertical.value
+            }
+          }, panelDatePickerProps.value, {
+            modelValue: props2.modelValue,
+            "onUpdate:modelValue": handlePanelChange,
+            onFocus: handlePanelOpen,
+            onVisibleChange: _cache[0] || (_cache[0] = (visible) => visible && handlePanelOpen())
+          }), null, 16, ["class", "modelValue"]),
+          activeShortcutLabel.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["b-picker__shortcut-tag", { "is-vertical": shortcutTagVertical.value }]),
+            title: activeShortcutLabel.value
+          }, [
+            shortcutTagVertical.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(activeShortcutChars.value, (char, index) => {
+              return openBlock(), createElementBlock("i", {
+                key: index,
+                class: "b-picker__shortcut-tag-char"
+              }, toDisplayString(char), 1);
+            }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(activeShortcutLabel.value), 1)
+            ], 64))
+          ], 10, _hoisted_3$6)) : createCommentVNode("", true)
+        ], 512))
+      ], 2);
     };
   }
 });
@@ -4136,7 +4607,7 @@ const _export_sfc$1 = (sfc, props2) => {
   }
   return target;
 };
-const CustomDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$2K, [["__scopeId", "data-v-3d5f0e97"]]);
+const CustomDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$2K, [["__scopeId", "data-v-e33039d7"]]);
 const _hoisted_1$7 = { class: "drawer_query_btn b-fold-search" };
 const _sfc_main$2J = /* @__PURE__ */ defineComponent({
   __name: "foldSearch",
@@ -30617,9 +31088,6 @@ const VxeCore = {
   uiVersion: "",
   tableVersion: ""
 };
-function getDefaultExportFromCjs(x2) {
-  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
-}
 var setupDefaults_1;
 var hasRequiredSetupDefaults;
 function requireSetupDefaults() {
@@ -71892,291 +72360,6 @@ const ElButton = withInstall(Button$1, {
   ButtonGroup: ButtonGroup$1
 });
 const ElButtonGroup$1 = withNoopInstall(ButtonGroup$1);
-var dayjs_min$1 = { exports: {} };
-var dayjs_min = dayjs_min$1.exports;
-var hasRequiredDayjs_min;
-function requireDayjs_min() {
-  if (hasRequiredDayjs_min) return dayjs_min$1.exports;
-  hasRequiredDayjs_min = 1;
-  (function(module2, exports2) {
-    !function(t2, e) {
-      module2.exports = e();
-    }(dayjs_min, function() {
-      var t2 = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s2 = "minute", u2 = "hour", a2 = "day", o2 = "week", c2 = "month", f2 = "quarter", h2 = "year", d2 = "date", l2 = "Invalid Date", $2 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M2 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t3) {
-        var e2 = ["th", "st", "nd", "rd"], n2 = t3 % 100;
-        return "[" + t3 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
-      } }, m2 = function(t3, e2, n2) {
-        var r2 = String(t3);
-        return !r2 || r2.length >= e2 ? t3 : "" + Array(e2 + 1 - r2.length).join(n2) + t3;
-      }, v2 = { s: m2, z: function(t3) {
-        var e2 = -t3.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
-        return (e2 <= 0 ? "+" : "-") + m2(r2, 2, "0") + ":" + m2(i2, 2, "0");
-      }, m: function t3(e2, n2) {
-        if (e2.date() < n2.date()) return -t3(n2, e2);
-        var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, c2), s3 = n2 - i2 < 0, u3 = e2.clone().add(r2 + (s3 ? -1 : 1), c2);
-        return +(-(r2 + (n2 - i2) / (s3 ? i2 - u3 : u3 - i2)) || 0);
-      }, a: function(t3) {
-        return t3 < 0 ? Math.ceil(t3) || 0 : Math.floor(t3);
-      }, p: function(t3) {
-        return { M: c2, y: h2, w: o2, d: a2, D: d2, h: u2, m: s2, s: i, ms: r, Q: f2 }[t3] || String(t3 || "").toLowerCase().replace(/s$/, "");
-      }, u: function(t3) {
-        return void 0 === t3;
-      } }, g2 = "en", D2 = {};
-      D2[g2] = M2;
-      var p2 = "$isDayjsObject", S2 = function(t3) {
-        return t3 instanceof _2 || !(!t3 || !t3[p2]);
-      }, w2 = function t3(e2, n2, r2) {
-        var i2;
-        if (!e2) return g2;
-        if ("string" == typeof e2) {
-          var s3 = e2.toLowerCase();
-          D2[s3] && (i2 = s3), n2 && (D2[s3] = n2, i2 = s3);
-          var u3 = e2.split("-");
-          if (!i2 && u3.length > 1) return t3(u3[0]);
-        } else {
-          var a3 = e2.name;
-          D2[a3] = e2, i2 = a3;
-        }
-        return !r2 && i2 && (g2 = i2), i2 || !r2 && g2;
-      }, O2 = function(t3, e2) {
-        if (S2(t3)) return t3.clone();
-        var n2 = "object" == typeof e2 ? e2 : {};
-        return n2.date = t3, n2.args = arguments, new _2(n2);
-      }, b2 = v2;
-      b2.l = w2, b2.i = S2, b2.w = function(t3, e2) {
-        return O2(t3, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
-      };
-      var _2 = function() {
-        function M3(t3) {
-          this.$L = w2(t3.locale, null, true), this.parse(t3), this.$x = this.$x || t3.x || {}, this[p2] = true;
-        }
-        var m3 = M3.prototype;
-        return m3.parse = function(t3) {
-          this.$d = function(t4) {
-            var e2 = t4.date, n2 = t4.utc;
-            if (null === e2) return /* @__PURE__ */ new Date(NaN);
-            if (b2.u(e2)) return /* @__PURE__ */ new Date();
-            if (e2 instanceof Date) return new Date(e2);
-            if ("string" == typeof e2 && !/Z$/i.test(e2)) {
-              var r2 = e2.match($2);
-              if (r2) {
-                var i2 = r2[2] - 1 || 0, s3 = (r2[7] || "0").substring(0, 3);
-                return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s3);
-              }
-            }
-            return new Date(e2);
-          }(t3), this.init();
-        }, m3.init = function() {
-          var t3 = this.$d;
-          this.$y = t3.getFullYear(), this.$M = t3.getMonth(), this.$D = t3.getDate(), this.$W = t3.getDay(), this.$H = t3.getHours(), this.$m = t3.getMinutes(), this.$s = t3.getSeconds(), this.$ms = t3.getMilliseconds();
-        }, m3.$utils = function() {
-          return b2;
-        }, m3.isValid = function() {
-          return !(this.$d.toString() === l2);
-        }, m3.isSame = function(t3, e2) {
-          var n2 = O2(t3);
-          return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
-        }, m3.isAfter = function(t3, e2) {
-          return O2(t3) < this.startOf(e2);
-        }, m3.isBefore = function(t3, e2) {
-          return this.endOf(e2) < O2(t3);
-        }, m3.$g = function(t3, e2, n2) {
-          return b2.u(t3) ? this[e2] : this.set(n2, t3);
-        }, m3.unix = function() {
-          return Math.floor(this.valueOf() / 1e3);
-        }, m3.valueOf = function() {
-          return this.$d.getTime();
-        }, m3.startOf = function(t3, e2) {
-          var n2 = this, r2 = !!b2.u(e2) || e2, f3 = b2.p(t3), l3 = function(t4, e3) {
-            var i2 = b2.w(n2.$u ? Date.UTC(n2.$y, e3, t4) : new Date(n2.$y, e3, t4), n2);
-            return r2 ? i2 : i2.endOf(a2);
-          }, $3 = function(t4, e3) {
-            return b2.w(n2.toDate()[t4].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
-          }, y2 = this.$W, M4 = this.$M, m4 = this.$D, v3 = "set" + (this.$u ? "UTC" : "");
-          switch (f3) {
-            case h2:
-              return r2 ? l3(1, 0) : l3(31, 11);
-            case c2:
-              return r2 ? l3(1, M4) : l3(0, M4 + 1);
-            case o2:
-              var g3 = this.$locale().weekStart || 0, D3 = (y2 < g3 ? y2 + 7 : y2) - g3;
-              return l3(r2 ? m4 - D3 : m4 + (6 - D3), M4);
-            case a2:
-            case d2:
-              return $3(v3 + "Hours", 0);
-            case u2:
-              return $3(v3 + "Minutes", 1);
-            case s2:
-              return $3(v3 + "Seconds", 2);
-            case i:
-              return $3(v3 + "Milliseconds", 3);
-            default:
-              return this.clone();
-          }
-        }, m3.endOf = function(t3) {
-          return this.startOf(t3, false);
-        }, m3.$set = function(t3, e2) {
-          var n2, o3 = b2.p(t3), f3 = "set" + (this.$u ? "UTC" : ""), l3 = (n2 = {}, n2[a2] = f3 + "Date", n2[d2] = f3 + "Date", n2[c2] = f3 + "Month", n2[h2] = f3 + "FullYear", n2[u2] = f3 + "Hours", n2[s2] = f3 + "Minutes", n2[i] = f3 + "Seconds", n2[r] = f3 + "Milliseconds", n2)[o3], $3 = o3 === a2 ? this.$D + (e2 - this.$W) : e2;
-          if (o3 === c2 || o3 === h2) {
-            var y2 = this.clone().set(d2, 1);
-            y2.$d[l3]($3), y2.init(), this.$d = y2.set(d2, Math.min(this.$D, y2.daysInMonth())).$d;
-          } else l3 && this.$d[l3]($3);
-          return this.init(), this;
-        }, m3.set = function(t3, e2) {
-          return this.clone().$set(t3, e2);
-        }, m3.get = function(t3) {
-          return this[b2.p(t3)]();
-        }, m3.add = function(r2, f3) {
-          var d3, l3 = this;
-          r2 = Number(r2);
-          var $3 = b2.p(f3), y2 = function(t3) {
-            var e2 = O2(l3);
-            return b2.w(e2.date(e2.date() + Math.round(t3 * r2)), l3);
-          };
-          if ($3 === c2) return this.set(c2, this.$M + r2);
-          if ($3 === h2) return this.set(h2, this.$y + r2);
-          if ($3 === a2) return y2(1);
-          if ($3 === o2) return y2(7);
-          var M4 = (d3 = {}, d3[s2] = e, d3[u2] = n, d3[i] = t2, d3)[$3] || 1, m4 = this.$d.getTime() + r2 * M4;
-          return b2.w(m4, this);
-        }, m3.subtract = function(t3, e2) {
-          return this.add(-1 * t3, e2);
-        }, m3.format = function(t3) {
-          var e2 = this, n2 = this.$locale();
-          if (!this.isValid()) return n2.invalidDate || l2;
-          var r2 = t3 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b2.z(this), s3 = this.$H, u3 = this.$m, a3 = this.$M, o3 = n2.weekdays, c3 = n2.months, f3 = n2.meridiem, h3 = function(t4, n3, i3, s4) {
-            return t4 && (t4[n3] || t4(e2, r2)) || i3[n3].slice(0, s4);
-          }, d3 = function(t4) {
-            return b2.s(s3 % 12 || 12, t4, "0");
-          }, $3 = f3 || function(t4, e3, n3) {
-            var r3 = t4 < 12 ? "AM" : "PM";
-            return n3 ? r3.toLowerCase() : r3;
-          };
-          return r2.replace(y, function(t4, r3) {
-            return r3 || function(t5) {
-              switch (t5) {
-                case "YY":
-                  return String(e2.$y).slice(-2);
-                case "YYYY":
-                  return b2.s(e2.$y, 4, "0");
-                case "M":
-                  return a3 + 1;
-                case "MM":
-                  return b2.s(a3 + 1, 2, "0");
-                case "MMM":
-                  return h3(n2.monthsShort, a3, c3, 3);
-                case "MMMM":
-                  return h3(c3, a3);
-                case "D":
-                  return e2.$D;
-                case "DD":
-                  return b2.s(e2.$D, 2, "0");
-                case "d":
-                  return String(e2.$W);
-                case "dd":
-                  return h3(n2.weekdaysMin, e2.$W, o3, 2);
-                case "ddd":
-                  return h3(n2.weekdaysShort, e2.$W, o3, 3);
-                case "dddd":
-                  return o3[e2.$W];
-                case "H":
-                  return String(s3);
-                case "HH":
-                  return b2.s(s3, 2, "0");
-                case "h":
-                  return d3(1);
-                case "hh":
-                  return d3(2);
-                case "a":
-                  return $3(s3, u3, true);
-                case "A":
-                  return $3(s3, u3, false);
-                case "m":
-                  return String(u3);
-                case "mm":
-                  return b2.s(u3, 2, "0");
-                case "s":
-                  return String(e2.$s);
-                case "ss":
-                  return b2.s(e2.$s, 2, "0");
-                case "SSS":
-                  return b2.s(e2.$ms, 3, "0");
-                case "Z":
-                  return i2;
-              }
-              return null;
-            }(t4) || i2.replace(":", "");
-          });
-        }, m3.utcOffset = function() {
-          return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-        }, m3.diff = function(r2, d3, l3) {
-          var $3, y2 = this, M4 = b2.p(d3), m4 = O2(r2), v3 = (m4.utcOffset() - this.utcOffset()) * e, g3 = this - m4, D3 = function() {
-            return b2.m(y2, m4);
-          };
-          switch (M4) {
-            case h2:
-              $3 = D3() / 12;
-              break;
-            case c2:
-              $3 = D3();
-              break;
-            case f2:
-              $3 = D3() / 3;
-              break;
-            case o2:
-              $3 = (g3 - v3) / 6048e5;
-              break;
-            case a2:
-              $3 = (g3 - v3) / 864e5;
-              break;
-            case u2:
-              $3 = g3 / n;
-              break;
-            case s2:
-              $3 = g3 / e;
-              break;
-            case i:
-              $3 = g3 / t2;
-              break;
-            default:
-              $3 = g3;
-          }
-          return l3 ? $3 : b2.a($3);
-        }, m3.daysInMonth = function() {
-          return this.endOf(c2).$D;
-        }, m3.$locale = function() {
-          return D2[this.$L];
-        }, m3.locale = function(t3, e2) {
-          if (!t3) return this.$L;
-          var n2 = this.clone(), r2 = w2(t3, e2, true);
-          return r2 && (n2.$L = r2), n2;
-        }, m3.clone = function() {
-          return b2.w(this.$d, this);
-        }, m3.toDate = function() {
-          return new Date(this.valueOf());
-        }, m3.toJSON = function() {
-          return this.isValid() ? this.toISOString() : null;
-        }, m3.toISOString = function() {
-          return this.$d.toISOString();
-        }, m3.toString = function() {
-          return this.$d.toUTCString();
-        }, M3;
-      }(), k = _2.prototype;
-      return O2.prototype = k, [["$ms", r], ["$s", i], ["$m", s2], ["$H", u2], ["$W", a2], ["$M", c2], ["$y", h2], ["$D", d2]].forEach(function(t3) {
-        k[t3[1]] = function(e2) {
-          return this.$g(e2, t3[0], t3[1]);
-        };
-      }), O2.extend = function(t3, e2) {
-        return t3.$i || (t3(e2, _2, O2), t3.$i = true), O2;
-      }, O2.locale = w2, O2.isDayjs = S2, O2.unix = function(t3) {
-        return O2(1e3 * t3);
-      }, O2.en = D2[g2], O2.Ls = D2, O2.p = {}, O2;
-    });
-  })(dayjs_min$1);
-  return dayjs_min$1.exports;
-}
-var dayjs_minExports = requireDayjs_min();
-const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 const buildTimeList = (value, bound) => {
   return [
     value > 0 ? value - 1 : void 0,