@weitutech/by-components 1.1.213 → 1.1.215

package/lib/by-components.common.js

@@ -26680,7 +26680,7 @@ module.exports = function (key) {
 
 var aSet = __webpack_require__(7080);
 var SetHelpers = __webpack_require__(4402);
-var clone = __webpack_require__(6905);
+var clone = __webpack_require__(9286);
 var size = __webpack_require__(5170);
 var getSetRecord = __webpack_require__(3789);
 var iterateSet = __webpack_require__(8469);
@@ -27201,7 +27201,7 @@ $({ target: 'Iterator', proto: true, real: true, forced: someWithoutClosingOnEar
 
 var aSet = __webpack_require__(7080);
 var SetHelpers = __webpack_require__(4402);
-var clone = __webpack_require__(6905);
+var clone = __webpack_require__(9286);
 var getSetRecord = __webpack_require__(3789);
 var iterateSimple = __webpack_require__(507);
 
@@ -29473,7 +29473,7 @@ module.exports = function (it) {
 
 var aSet = __webpack_require__(7080);
 var add = (__webpack_require__(4402).add);
-var clone = __webpack_require__(6905);
+var clone = __webpack_require__(9286);
 var getSetRecord = __webpack_require__(3789);
 var iterateSimple = __webpack_require__(507);
 
@@ -43489,28 +43489,6 @@ var global = module.exports = typeof window != 'undefined' && window.Math == Mat
 if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
 
 
-/***/ }),
-
-/***/ 6905:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-
-var SetHelpers = __webpack_require__(4402);
-var iterate = __webpack_require__(8469);
-
-var Set = SetHelpers.Set;
-var add = SetHelpers.add;
-
-module.exports = function (set) {
-  var result = new Set();
-  iterate(set, function (it) {
-    add(result, it);
-  });
-  return result;
-};
-
-
 /***/ }),
 
 /***/ 6935:
@@ -65863,6 +65841,28 @@ module.exports = function (it) {
   return pl;
 });
 
+/***/ }),
+
+/***/ 9286:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var SetHelpers = __webpack_require__(4402);
+var iterate = __webpack_require__(8469);
+
+var Set = SetHelpers.Set;
+var add = SetHelpers.add;
+
+module.exports = function (set) {
+  var result = new Set();
+  iterate(set, function (it) {
+    add(result, it);
+  });
+  return result;
+};
+
+
 /***/ }),
 
 /***/ 9294:
@@ -78756,8 +78756,8 @@ var pair_number_input_component = normalizeComponent(
 )
 
 /* harmony default export */ var pair_number_input = (pair_number_input_component.exports);
-;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=template&id=6ccfc0f6
-var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=template&id=1db670fe
+var custom_date_pickervue_type_template_id_1db670fe_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -78790,8 +78790,18 @@ var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
         }
       }
     }, [_vm._v(" " + _vm._s(item.label) + " ")]);
-  }), 0)] : _c('el-date-picker', _vm._b({
+  }), 0)] : _c('div', {
+    ref: "panelInputWrap",
+    staticClass: "b-picker__panel-input-wrap",
+    class: {
+      'is-clearable': _vm.dateOptions.clearable !== false
+    }
+  }, [_c('el-date-picker', _vm._b({
     ref: "panelDatePicker",
+    class: {
+      'has-shortcut-tag': !!_vm.activeShortcutLabel,
+      'has-shortcut-tag--vertical': !!_vm.activeShortcutLabel && _vm.shortcutTagVertical
+    },
     attrs: {
       "value": _vm.value,
       "popper-class": _vm.panelPopperClass
@@ -78799,10 +78809,28 @@ var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
     on: {
       "input": _vm.handleChange,
       "focus": _vm.handlePanelOpen
+    },
+    nativeOn: {
+      "click": function ($event) {
+        return _vm.handlePanelOpen.apply(null, arguments);
+      }
+    }
+  }, 'el-date-picker', _vm.panelDateOptions, false)), _vm.activeShortcutLabel ? _c('span', {
+    staticClass: "b-picker__shortcut-tag",
+    class: {
+      'is-vertical': _vm.shortcutTagVertical
+    },
+    attrs: {
+      "title": _vm.activeShortcutLabel
     }
-  }, 'el-date-picker', _vm.panelDateOptions, false))], 2);
+  }, [_vm.shortcutTagVertical ? _vm._l(_vm.activeShortcutChars, function (char, index) {
+    return _c('i', {
+      key: index,
+      staticClass: "b-picker__shortcut-tag-char"
+    }, [_vm._v(" " + _vm._s(char) + " ")]);
+  }) : [_vm._v(_vm._s(_vm.activeShortcutLabel))]], 2) : _vm._e()], 1)], 2);
 };
-var custom_date_pickervue_type_template_id_6ccfc0f6_staticRenderFns = [];
+var custom_date_pickervue_type_template_id_1db670fe_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/moment/moment.js
 var moment = __webpack_require__(9412);
@@ -78853,7 +78881,15 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
   },
   data() {
     return {
-      shortcuts: [{
+      active: '',
+      panelHighlightTimer: null,
+      shortcutTagVertical: false,
+      shortcutTagResizeObserver: null
+    };
+  },
+  computed: {
+    shortcuts() {
+      return [{
         label: '上月',
         start_time: moment_default()().subtract(1, 'months').startOf('month').format('YYYY-MM-DD'),
         end_time: moment_default()().subtract(1, 'months').endOf('month').format('YYYY-MM-DD'),
@@ -78878,11 +78914,8 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
         start_time: moment_default()().startOf('month').format('YYYY-MM-DD'),
         end_time: moment_default()().endOf('month').format('YYYY-MM-DD'),
         key: 'month'
-      }],
-      active: ''
-    };
-  },
-  computed: {
+      }];
+    },
     dateOptions() {
       return {
         startPlaceholder: '开始时间',
@@ -78919,12 +78952,21 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
     },
     panelPopperClass() {
       return `by-custom-date-picker-panel by-custom-date-picker-panel--${this._uid}`;
+    },
+    activeShortcutLabel() {
+      if (!this.active) return '';
+      const item = this.shortcuts.find(shortcut => shortcut.key === this.active);
+      return item ? item.label : '';
+    },
+    activeShortcutChars() {
+      return this.activeShortcutLabel.split('');
     }
   },
   watch: {
     active() {
       if (this.shortcutLayout === 'panel') {
         this.schedulePanelShortcutHighlight();
+        this.updateShortcutTagLayout();
       }
     },
     value: {
@@ -78934,9 +78976,18 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
       immediate: true
     }
   },
+  mounted() {
+    if (this.shortcutLayout === 'panel') {
+      this.initShortcutTagLayout();
+    }
+  },
+  beforeDestroy() {
+    this.clearPanelHighlightTimer();
+    this.destroyShortcutTagObserver();
+  },
   methods: {
     syncActiveFromValue(newValue) {
-      if (newValue && newValue.length) {
+      if (Array.isArray(newValue) && newValue.length) {
         const start = moment_default()(newValue[0]).format('YYYY-MM-DD');
         const end = moment_default()(newValue[1]).format('YYYY-MM-DD');
         let matchedKey = '';
@@ -78993,55 +79044,95 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
       this.syncActiveFromValue(this.value);
       this.schedulePanelShortcutHighlight();
     },
+    clearPanelHighlightTimer() {
+      if (this.panelHighlightTimer) {
+        clearTimeout(this.panelHighlightTimer);
+        this.panelHighlightTimer = null;
+      }
+    },
     getPanelElement() {
       const datePicker = this.$refs.panelDatePicker;
-      if (!datePicker || !datePicker.picker) return null;
-      return datePicker.picker.$el || null;
+      if (!datePicker) return null;
+      if (datePicker.picker && datePicker.picker.$el) {
+        return datePicker.picker.$el;
+      }
+      if (datePicker.$el) {
+        const panelInRoot = datePicker.$el.querySelector('.by-custom-date-picker-panel');
+        if (panelInRoot) return panelInRoot;
+      }
+      return document.querySelector(`.by-custom-date-picker-panel--${this._uid}`);
     },
     schedulePanelShortcutHighlight(retry = 0) {
+      this.clearPanelHighlightTimer();
       this.$nextTick(() => {
         const updated = this.updatePanelShortcutHighlight();
-        if (!updated && retry < 8) {
-          setTimeout(() => {
+        if (!updated && retry < 15) {
+          this.panelHighlightTimer = setTimeout(() => {
             this.schedulePanelShortcutHighlight(retry + 1);
           }, 50);
         }
       });
     },
     updatePanelShortcutHighlight() {
-      const panel = this.getPanelElement() || document.querySelector(`.by-custom-date-picker-panel--${this._uid}`);
+      const panel = this.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 = this.shortcuts.find(shortcut => shortcut.label === label);
-        el.classList.toggle('is-active', !!(item && item.key === this.active));
+        const isActive = !!(item && item.key === this.active);
+        el.classList.toggle('active', isActive);
+        el.classList.toggle('is-active', isActive);
       });
       return true;
+    },
+    initShortcutTagLayout() {
+      this.destroyShortcutTagObserver();
+      this.$nextTick(() => {
+        const wrap = this.$refs.panelInputWrap;
+        if (!wrap) return;
+        if (typeof ResizeObserver !== 'undefined') {
+          this.shortcutTagResizeObserver = new ResizeObserver(() => {
+            this.updateShortcutTagLayout();
+          });
+          this.shortcutTagResizeObserver.observe(wrap);
+        }
+        this.updateShortcutTagLayout();
+      });
+    },
+    updateShortcutTagLayout() {
+      const wrap = this.$refs.panelInputWrap;
+      if (!wrap || !this.activeShortcutLabel) {
+        this.shortcutTagVertical = false;
+        return;
+      }
+
+      // 宽度较窄时改为纵向展示，避免挤压日期区域（阈值越小越不易触发纵向）
+      this.shortcutTagVertical = wrap.clientWidth < 250;
+    },
+    destroyShortcutTagObserver() {
+      if (this.shortcutTagResizeObserver) {
+        this.shortcutTagResizeObserver.disconnect();
+        this.shortcutTagResizeObserver = null;
+      }
     }
   }
 });
 ;// ./src/components/form/comps/custom-date-picker.vue?vue&type=script&lang=js
  /* harmony default export */ var comps_custom_date_pickervue_type_script_lang_js = (custom_date_pickervue_type_script_lang_js); 
-;// ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=style&index=0&id=6ccfc0f6&prod&lang=scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/components/form/comps/custom-date-picker.vue?vue&type=style&index=0&id=6ccfc0f6&prod&lang=scss
-
 ;// ./src/components/form/comps/custom-date-picker.vue
 
 
 
-;
 
 
 /* normalize component */
-
+;
 var custom_date_picker_component = normalizeComponent(
   comps_custom_date_pickervue_type_script_lang_js,
-  custom_date_pickervue_type_template_id_6ccfc0f6_render,
-  custom_date_pickervue_type_template_id_6ccfc0f6_staticRenderFns,
+  custom_date_pickervue_type_template_id_1db670fe_render,
+  custom_date_pickervue_type_template_id_1db670fe_staticRenderFns,
   false,
   null,
   null,

package/lib/by-components.css

@@ -1 +1 @@
-.by-custom-date-picker-panel{--by-date-panel-primary:#409eff;--by-date-panel-primary-light:#e8f3ff;--by-date-panel-sidebar-bg:#f7f8fa;--by-date-panel-border:#ebeef5;--by-date-panel-text:#606266;--by-date-panel-text-secondary:#909399;border:1px solid var(--by-date-panel-border)!important;border-radius:8px!important;box-shadow:0 8px 24px rgba(31,45,61,.12)!important;overflow:hidden}.by-custom-date-picker-panel.el-date-range-picker.has-sidebar{width:712px}.by-custom-date-picker-panel .el-picker-panel__body-wrapper{background:#fff}.by-custom-date-picker-panel .el-picker-panel__sidebar{width:80px;padding:10px 6px;background:var(--by-date-panel-sidebar-bg);border-right:1px solid var(--by-date-panel-border);box-sizing:border-box}.by-custom-date-picker-panel .el-picker-panel__sidebar+.el-picker-panel__body{margin-left:80px}.by-custom-date-picker-panel .el-picker-panel__shortcut{display:block;width:auto;margin:2px 0;padding:0 8px;border:0;border-radius:6px;background-color:transparent;line-height:32px;font-size:13px;color:var(--by-date-panel-text);text-align:left;transition:color .2s ease,background-color .2s ease}.by-custom-date-picker-panel .el-picker-panel__shortcut:hover{color:var(--by-date-panel-primary);background-color:#eef1f6}.by-custom-date-picker-panel .el-picker-panel__shortcut.is-active{color:var(--by-date-panel-primary)!important;font-weight:500;background-color:var(--by-date-panel-primary-light)}.by-custom-date-picker-panel .el-picker-panel__body{min-width:auto}.by-custom-date-picker-panel .el-date-range-picker__content{padding:12px 14px 14px}.by-custom-date-picker-panel .el-date-range-picker__content.is-left{border-right-color:var(--by-date-panel-border)}.by-custom-date-picker-panel .el-date-range-picker__header{height:32px;line-height:32px;margin-bottom:4px}.by-custom-date-picker-panel .el-date-range-picker__header div{font-size:15px;font-weight:500;color:#303133}.by-custom-date-picker-panel .el-picker-panel__icon-btn{margin-top:4px;border-radius:4px;transition:color .2s ease,background-color .2s ease}.by-custom-date-picker-panel .el-picker-panel__icon-btn:hover{color:var(--by-date-panel-primary);background-color:#f2f6fc}.by-custom-date-picker-panel .el-date-table th{color:var(--by-date-panel-text-secondary);font-weight:500;border-bottom-color:var(--by-date-panel-border)}.by-custom-date-picker-panel .el-date-table td.available:hover{color:var(--by-date-panel-primary)}.by-custom-date-picker-panel .el-date-table td.in-range div{background-color:#f0f7ff}.by-custom-date-picker-panel .el-date-table td.end-date div,.by-custom-date-picker-panel .el-date-table td.start-date div{color:#fff}.by-custom-date-picker-panel .el-date-table td.end-date span,.by-custom-date-picker-panel .el-date-table td.start-date span{background-color:var(--by-date-panel-primary);color:#fff}.by-custom-date-picker-panel .el-date-table td.today span{color:var(--by-date-panel-primary);font-weight:600}.by-custom-date-picker-panel .el-date-table td.today.end-date span,.by-custom-date-picker-panel .el-date-table td.today.start-date span{color:#fff;font-weight:500}.b-form .header[data-v-1fc1d18e]{margin-bottom:20px}.b-form .footer[data-v-1fc1d18e]{margin-top:20px}
+.b-form .header[data-v-1fc1d18e]{margin-bottom:20px}.b-form .footer[data-v-1fc1d18e]{margin-top:20px}

package/lib/by-components.umd.js

@@ -78766,8 +78766,8 @@ var pair_number_input_component = normalizeComponent(
 )
 
 /* harmony default export */ var pair_number_input = (pair_number_input_component.exports);
-;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=template&id=6ccfc0f6
-var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
+;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=template&id=1db670fe
+var custom_date_pickervue_type_template_id_1db670fe_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -78800,8 +78800,18 @@ var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
         }
       }
     }, [_vm._v(" " + _vm._s(item.label) + " ")]);
-  }), 0)] : _c('el-date-picker', _vm._b({
+  }), 0)] : _c('div', {
+    ref: "panelInputWrap",
+    staticClass: "b-picker__panel-input-wrap",
+    class: {
+      'is-clearable': _vm.dateOptions.clearable !== false
+    }
+  }, [_c('el-date-picker', _vm._b({
     ref: "panelDatePicker",
+    class: {
+      'has-shortcut-tag': !!_vm.activeShortcutLabel,
+      'has-shortcut-tag--vertical': !!_vm.activeShortcutLabel && _vm.shortcutTagVertical
+    },
     attrs: {
       "value": _vm.value,
       "popper-class": _vm.panelPopperClass
@@ -78809,10 +78819,28 @@ var custom_date_pickervue_type_template_id_6ccfc0f6_render = function render() {
     on: {
       "input": _vm.handleChange,
       "focus": _vm.handlePanelOpen
+    },
+    nativeOn: {
+      "click": function ($event) {
+        return _vm.handlePanelOpen.apply(null, arguments);
+      }
     }
-  }, 'el-date-picker', _vm.panelDateOptions, false))], 2);
+  }, 'el-date-picker', _vm.panelDateOptions, false)), _vm.activeShortcutLabel ? _c('span', {
+    staticClass: "b-picker__shortcut-tag",
+    class: {
+      'is-vertical': _vm.shortcutTagVertical
+    },
+    attrs: {
+      "title": _vm.activeShortcutLabel
+    }
+  }, [_vm.shortcutTagVertical ? _vm._l(_vm.activeShortcutChars, function (char, index) {
+    return _c('i', {
+      key: index,
+      staticClass: "b-picker__shortcut-tag-char"
+    }, [_vm._v(" " + _vm._s(char) + " ")]);
+  }) : [_vm._v(_vm._s(_vm.activeShortcutLabel))]], 2) : _vm._e()], 1)], 2);
 };
-var custom_date_pickervue_type_template_id_6ccfc0f6_staticRenderFns = [];
+var custom_date_pickervue_type_template_id_1db670fe_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/moment/moment.js
 var moment = __webpack_require__(9618);
@@ -78863,7 +78891,15 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
   },
   data() {
     return {
-      shortcuts: [{
+      active: '',
+      panelHighlightTimer: null,
+      shortcutTagVertical: false,
+      shortcutTagResizeObserver: null
+    };
+  },
+  computed: {
+    shortcuts() {
+      return [{
         label: '上月',
         start_time: moment_default()().subtract(1, 'months').startOf('month').format('YYYY-MM-DD'),
         end_time: moment_default()().subtract(1, 'months').endOf('month').format('YYYY-MM-DD'),
@@ -78888,11 +78924,8 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
         start_time: moment_default()().startOf('month').format('YYYY-MM-DD'),
         end_time: moment_default()().endOf('month').format('YYYY-MM-DD'),
         key: 'month'
-      }],
-      active: ''
-    };
-  },
-  computed: {
+      }];
+    },
     dateOptions() {
       return {
         startPlaceholder: '开始时间',
@@ -78929,12 +78962,21 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
     },
     panelPopperClass() {
       return `by-custom-date-picker-panel by-custom-date-picker-panel--${this._uid}`;
+    },
+    activeShortcutLabel() {
+      if (!this.active) return '';
+      const item = this.shortcuts.find(shortcut => shortcut.key === this.active);
+      return item ? item.label : '';
+    },
+    activeShortcutChars() {
+      return this.activeShortcutLabel.split('');
     }
   },
   watch: {
     active() {
       if (this.shortcutLayout === 'panel') {
         this.schedulePanelShortcutHighlight();
+        this.updateShortcutTagLayout();
       }
     },
     value: {
@@ -78944,9 +78986,18 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
       immediate: true
     }
   },
+  mounted() {
+    if (this.shortcutLayout === 'panel') {
+      this.initShortcutTagLayout();
+    }
+  },
+  beforeDestroy() {
+    this.clearPanelHighlightTimer();
+    this.destroyShortcutTagObserver();
+  },
   methods: {
     syncActiveFromValue(newValue) {
-      if (newValue && newValue.length) {
+      if (Array.isArray(newValue) && newValue.length) {
         const start = moment_default()(newValue[0]).format('YYYY-MM-DD');
         const end = moment_default()(newValue[1]).format('YYYY-MM-DD');
         let matchedKey = '';
@@ -79003,55 +79054,95 @@ var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
       this.syncActiveFromValue(this.value);
       this.schedulePanelShortcutHighlight();
     },
+    clearPanelHighlightTimer() {
+      if (this.panelHighlightTimer) {
+        clearTimeout(this.panelHighlightTimer);
+        this.panelHighlightTimer = null;
+      }
+    },
     getPanelElement() {
       const datePicker = this.$refs.panelDatePicker;
-      if (!datePicker || !datePicker.picker) return null;
-      return datePicker.picker.$el || null;
+      if (!datePicker) return null;
+      if (datePicker.picker && datePicker.picker.$el) {
+        return datePicker.picker.$el;
+      }
+      if (datePicker.$el) {
+        const panelInRoot = datePicker.$el.querySelector('.by-custom-date-picker-panel');
+        if (panelInRoot) return panelInRoot;
+      }
+      return document.querySelector(`.by-custom-date-picker-panel--${this._uid}`);
     },
     schedulePanelShortcutHighlight(retry = 0) {
+      this.clearPanelHighlightTimer();
       this.$nextTick(() => {
         const updated = this.updatePanelShortcutHighlight();
-        if (!updated && retry < 8) {
-          setTimeout(() => {
+        if (!updated && retry < 15) {
+          this.panelHighlightTimer = setTimeout(() => {
             this.schedulePanelShortcutHighlight(retry + 1);
           }, 50);
         }
       });
     },
     updatePanelShortcutHighlight() {
-      const panel = this.getPanelElement() || document.querySelector(`.by-custom-date-picker-panel--${this._uid}`);
+      const panel = this.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 = this.shortcuts.find(shortcut => shortcut.label === label);
-        el.classList.toggle('is-active', !!(item && item.key === this.active));
+        const isActive = !!(item && item.key === this.active);
+        el.classList.toggle('active', isActive);
+        el.classList.toggle('is-active', isActive);
       });
       return true;
+    },
+    initShortcutTagLayout() {
+      this.destroyShortcutTagObserver();
+      this.$nextTick(() => {
+        const wrap = this.$refs.panelInputWrap;
+        if (!wrap) return;
+        if (typeof ResizeObserver !== 'undefined') {
+          this.shortcutTagResizeObserver = new ResizeObserver(() => {
+            this.updateShortcutTagLayout();
+          });
+          this.shortcutTagResizeObserver.observe(wrap);
+        }
+        this.updateShortcutTagLayout();
+      });
+    },
+    updateShortcutTagLayout() {
+      const wrap = this.$refs.panelInputWrap;
+      if (!wrap || !this.activeShortcutLabel) {
+        this.shortcutTagVertical = false;
+        return;
+      }
+
+      // 宽度较窄时改为纵向展示，避免挤压日期区域（阈值越小越不易触发纵向）
+      this.shortcutTagVertical = wrap.clientWidth < 250;
+    },
+    destroyShortcutTagObserver() {
+      if (this.shortcutTagResizeObserver) {
+        this.shortcutTagResizeObserver.disconnect();
+        this.shortcutTagResizeObserver = null;
+      }
     }
   }
 });
 ;// ./src/components/form/comps/custom-date-picker.vue?vue&type=script&lang=js
  /* harmony default export */ var comps_custom_date_pickervue_type_script_lang_js = (custom_date_pickervue_type_script_lang_js); 
-;// ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-64.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/form/comps/custom-date-picker.vue?vue&type=style&index=0&id=6ccfc0f6&prod&lang=scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/components/form/comps/custom-date-picker.vue?vue&type=style&index=0&id=6ccfc0f6&prod&lang=scss
-
 ;// ./src/components/form/comps/custom-date-picker.vue
 
 
 
-;
 
 
 /* normalize component */
-
+;
 var custom_date_picker_component = normalizeComponent(
   comps_custom_date_pickervue_type_script_lang_js,
-  custom_date_pickervue_type_template_id_6ccfc0f6_render,
-  custom_date_pickervue_type_template_id_6ccfc0f6_staticRenderFns,
+  custom_date_pickervue_type_template_id_1db670fe_render,
+  custom_date_pickervue_type_template_id_1db670fe_staticRenderFns,
   false,
   null,
   null,