@das-fed/upf-ui 6.4.0-dev.313 → 6.4.0-dev.315

package/packages/components/select-list/style.css

@@ -1 +1 @@
-.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.das-ui-select-list .selected-number-header[data-v-5bc0f5d8]{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.das-ui-select-list .selected-number-header .selected-num[data-v-5bc0f5d8]{font-size:12px;color:var(--upf-text-secondary, var(--das-ui-color-secondary, #666666));letter-spacing:0;font-weight:400;display:flex;align-items:center}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]{height:100%}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar{width:var(--das-ui-scrollbar-thumb-size);height:var(--das-ui-scrollbar-thumb-size)}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar-thumb,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar-thumb{background:transparent}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]:hover::-webkit-scrollbar-thumb,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]:hover::-webkit-scrollbar-thumb{background:var(--upf-text-disabled, var(--das-ui-scrollbar-thumb-color, #b2b2b2))}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar-thumb:hover,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar-thumb:hover{background:var(--upf-text-secondary, var(--das-ui-scrollbar-thumb-hover-color, #999999))}.das-ui-select-list .selected-container[data-v-5bc0f5d8]{width:100%;height:calc(100% - 32px)}.das-ui-select-list .selected-container.hide-header[data-v-5bc0f5d8]{height:100%}.das-ui-select-list .selected-container .selected-group[data-v-5bc0f5d8]{width:100%}.das-ui-select-list .selected-container .selected-item[data-v-5bc0f5d8]{box-sizing:border-box;height:var(--16d1ef20);width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.das-ui-select-list .selected-container .selected-item .drag-icon[data-v-5bc0f5d8]{visibility:hidden}.das-ui-select-list .selected-container .selected-item .hide-drag-icon[data-v-5bc0f5d8]{opacity:0}.das-ui-select-list .selected-container .selected-item.enable:hover .drag-icon[data-v-5bc0f5d8]{visibility:visible}.das-ui-select-list .selected-container .selected-item.active[data-v-5bc0f5d8]:not(.disabled){color:var(--upf-color-primary, var(--das-ui-select-list-active-font-color, #5582f3));background-color:var(--upf-color-primary-bg, var(--das-ui-select-list-active-bg-color, #e3ebff))}.das-ui-select-list .selected-container .selected-item.disableDrag[data-v-5bc0f5d8]{cursor:initial}.das-ui-select-list .selected-container .selected-item[data-v-5bc0f5d8]:hover{background-color:var(--upf-bg-secondary, var(--das-ui-select-list-hover-bg, #f2f2f2))}.das-ui-select-list .selected-container .selected-item:hover .close-icon[data-v-5bc0f5d8]{visibility:visible}.das-ui-select-list .selected-container .selected-item.disabled[data-v-5bc0f5d8]{cursor:not-allowed}.das-ui-select-list .selected-container .selected-item.disabled .close-icon[data-v-5bc0f5d8]{visibility:hidden}.das-ui-select-list .selected-container .selected-item .name[data-v-5bc0f5d8]{flex:1;font-size:12px;color:var(--upf-text-primary, var(--das-ui-color-normal, #212121));letter-spacing:0;min-width:0;text-align:left}.das-ui-select-list .selected-container .selected-item .close-icon[data-v-5bc0f5d8]{margin-left:8px;visibility:hidden;cursor:pointer}.das-ui-select-list .selected-container .selected-item .close-icon[data-v-5bc0f5d8]:hover{fill:var(--upf-color-primary, var(--das-ui-select-list-close-btn-hover, #5582f3))}
+.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.das-ui-select-list .selected-number-header[data-v-5bc0f5d8]{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.das-ui-select-list .selected-number-header .selected-num[data-v-5bc0f5d8]{font-size:12px;color:var(--upf-text-secondary, var(--das-ui-color-secondary, #666666));letter-spacing:0;font-weight:400;display:flex;align-items:center}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]{height:100%}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar{width:var(--das-ui-scrollbar-thumb-size);height:var(--das-ui-scrollbar-thumb-size)}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar-thumb,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar-thumb{background:transparent}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]:hover::-webkit-scrollbar-thumb,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]:hover::-webkit-scrollbar-thumb{background:var(--upf-text-disabled, var(--das-ui-scrollbar-thumb-color, #b2b2b2))}.das-ui-select-list .virtual-list[data-v-5bc0f5d8]::-webkit-scrollbar-thumb:hover,.das-ui-select-list .selected-page-container[data-v-5bc0f5d8]::-webkit-scrollbar-thumb:hover{background:var(--upf-text-secondary, var(--das-ui-scrollbar-thumb-hover-color, #999999))}.das-ui-select-list .selected-container[data-v-5bc0f5d8]{width:100%;height:calc(100% - 32px)}.das-ui-select-list .selected-container.hide-header[data-v-5bc0f5d8]{height:100%}.das-ui-select-list .selected-container .selected-group[data-v-5bc0f5d8]{width:100%}.das-ui-select-list .selected-container .selected-item[data-v-5bc0f5d8]{box-sizing:border-box;height:var(--v16d1ef20);width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.das-ui-select-list .selected-container .selected-item .drag-icon[data-v-5bc0f5d8]{visibility:hidden}.das-ui-select-list .selected-container .selected-item .hide-drag-icon[data-v-5bc0f5d8]{opacity:0}.das-ui-select-list .selected-container .selected-item.enable:hover .drag-icon[data-v-5bc0f5d8]{visibility:visible}.das-ui-select-list .selected-container .selected-item.active[data-v-5bc0f5d8]:not(.disabled){color:var(--upf-color-primary, var(--das-ui-select-list-active-font-color, #5582f3));background-color:var(--upf-color-primary-bg, var(--das-ui-select-list-active-bg-color, #e3ebff))}.das-ui-select-list .selected-container .selected-item.disableDrag[data-v-5bc0f5d8]{cursor:initial}.das-ui-select-list .selected-container .selected-item[data-v-5bc0f5d8]:hover{background-color:var(--upf-bg-secondary, var(--das-ui-select-list-hover-bg, #f2f2f2))}.das-ui-select-list .selected-container .selected-item:hover .close-icon[data-v-5bc0f5d8]{visibility:visible}.das-ui-select-list .selected-container .selected-item.disabled[data-v-5bc0f5d8]{cursor:not-allowed}.das-ui-select-list .selected-container .selected-item.disabled .close-icon[data-v-5bc0f5d8]{visibility:hidden}.das-ui-select-list .selected-container .selected-item .name[data-v-5bc0f5d8]{flex:1;font-size:12px;color:var(--upf-text-primary, var(--das-ui-color-normal, #212121));letter-spacing:0;min-width:0;text-align:left}.das-ui-select-list .selected-container .selected-item .close-icon[data-v-5bc0f5d8]{margin-left:8px;visibility:hidden;cursor:pointer}.das-ui-select-list .selected-container .selected-item .close-icon[data-v-5bc0f5d8]:hover{fill:var(--upf-color-primary, var(--das-ui-select-list-close-btn-hover, #5582f3))}

package/packages/components/special-range-picker-month/index.js

@@ -1,6 +1,6 @@
 import { withInstall as ae } from "@das-fed/upf-utils/with-install/index";
 import { t as N, setI18nRule as te } from "@das-fed/upf-web/packages/i18n/index";
-import { ref as b, computed as _, defineComponent as oe, onMounted as re, openBlock as M, createElementBlock as w, normalizeStyle as L, unref as e, createElementVNode as m, normalizeClass as C, createVNode as B, withCtx as W, toDisplayString as I, withDirectives as Y, Fragment as P, renderList as ne, createTextVNode as le, createBlock as se, Teleport as ie, createCommentVNode as Z } from "vue";
+import { ref as m, computed as V, defineComponent as ne, onMounted as oe, openBlock as k, createElementBlock as y, normalizeStyle as L, unref as e, createElementVNode as f, normalizeClass as I, createVNode as B, withCtx as Y, toDisplayString as x, withDirectives as Z, Fragment as P, renderList as re, createTextVNode as le, createBlock as se, Teleport as ie, createCommentVNode as _ } from "vue";
 import { ElPopover as ue, ClickOutside as de } from "element-plus";
 import { vDasTooltip as ce } from "@das-fed/upf-ui/packages/components/text-tooltip/index";
 import { DasIconDate as ve } from "@das-fed/upf-ui/packages/icons/date/index";
@@ -10,59 +10,59 @@ import "@das-fed/upf-ui/packages/global/theme"
 import '@das-fed/upf-ui/packages/components/special-range-picker-month/style.css';
 ;
 const j = () => ({ getDateTime: (r) => {
-  const n = `2020/03/${r}`;
-  return new Date(n).getTime();
+  const l = `2020/03/${r}`;
+  return new Date(l).getTime();
 }, formatDateStr: (r) => {
-  const n = Number(r);
-  return n >= 10 ? n : "0" + n;
-} }), ge = (u, s, t, r, n) => {
-  const a = b({ begin: "", end: "" }), d = b(""), { getDateTime: l, formatDateStr: f } = j();
+  const l = Number(r);
+  return l >= 10 ? l : "0" + l;
+} }), ge = (t, i, n, r, l) => {
+  const a = m({ begin: "", end: "" }), d = m(""), { getDateTime: s, formatDateStr: g } = j();
   return {
     popClickData: a,
     isInRange: (v) => {
       if (!a.value.begin || !a.value.end) return !1;
-      const o = l(`${f(v)}`), g = l(a.value.begin), h = l(a.value.end);
-      return o <= h && o >= g;
+      const o = s(`${g(v)}`), p = s(a.value.begin), D = s(a.value.end);
+      return o <= D && o >= p;
     },
     isInHoverRange: (v) => {
-      if (!u.value[0] || !u.value[1]) return !1;
-      const o = l(`${f(v)}`), g = l(`${u.value[0]}`), h = l(`${u.value[1]}`);
-      return o <= h && o >= g;
+      if (!t.value[0] || !t.value[1]) return !1;
+      const o = s(`${g(v)}`), p = s(`${t.value[0]}`), D = s(`${t.value[1]}`);
+      return o <= D && o >= p;
     },
     isInNewRange: (v) => {
       if (!a.value.begin || !a.value.end || !d.value) return !1;
-      const o = l(`${f(v)}`), g = l(d.value);
-      let h = l(a.value.begin), x = l(a.value.end);
-      return s.value === "begin" ? (g > h && (h = g), o <= x && o >= h) : (g < x && (x = g), o <= x && o >= h);
+      const o = s(`${g(v)}`), p = s(d.value);
+      let D = s(a.value.begin), C = s(a.value.end);
+      return i.value === "begin" ? (p > D && (D = p), o <= C && o >= D) : (p < C && (C = p), o <= C && o >= D);
     },
     outBeginDate: (v) => {
       if (!a.value.begin) return !1;
-      const o = l(`${f(v)}`), g = l(a.value.begin);
-      return t.value === 1 && s.value === "end" && o < g;
+      const o = s(`${g(v)}`), p = s(a.value.begin);
+      return n.value === 1 && i.value === "end" && o < p;
     },
     outEndDate: (v) => {
       if (!a.value.end) return !1;
-      const o = l(`${f(v)}`), g = l(a.value.end);
-      return t.value === 1 && s.value === "begin" && o > g;
+      const o = s(`${g(v)}`), p = s(a.value.end);
+      return n.value === 1 && i.value === "begin" && o > p;
     },
     clickData: (v) => {
-      t.value++;
-      const o = `${f(v)}`;
-      s.value === "begin" ? a.value.begin = o : a.value.end = o, t.value === 1 ? s.value = s.value === "begin" ? "end" : "begin" : n();
+      n.value++;
+      const o = `${g(v)}`;
+      i.value === "begin" ? a.value.begin = o : a.value.end = o, n.value === 1 ? i.value = i.value === "begin" ? "end" : "begin" : l();
     },
     mouseEnter: (v) => {
-      const o = `${f(v)}`;
-      d.value = o, s.value === "begin" ? u.value[0] = o : u.value[1] = o;
+      const o = `${g(v)}`;
+      d.value = o, i.value === "begin" ? t.value[0] = o : t.value[1] = o;
     },
     mouseLeave: () => {
-      d.value = "", s.value === "begin" ? u.value[0] = `${r.value[0]}` : u.value[1] = `${r.value[1]}`;
+      d.value = "", i.value === "begin" ? t.value[0] = `${r.value[0]}` : t.value[1] = `${r.value[1]}`;
     }
   };
-}, fe = (u) => {
-  const s = b(), t = b(!1), r = b(0), n = b({
+}, fe = (t) => {
+  const i = m(), n = m(!1), r = m(0), l = m({
     x: 0,
     y: 0
-  }), a = _(() => ({
+  }), a = V(() => ({
     fontSize: "12px",
     // 错误浮层直接消费新主题根变量，保持悬浮提示与表单错误态一致。
     backgroundColor: "var(--upf-message-error-bg, var(--upf-bg-primary))",
@@ -70,43 +70,43 @@ const j = () => ({ getDateTime: (r) => {
     borderRadius: "var(--upf-border-radius, 4px)",
     padding: "2px 8px",
     boxSizing: "border-box",
-    zIndex: u.errorModelZIndex
-  })), d = _(() => ({
+    zIndex: t.errorModelZIndex
+  })), d = V(() => ({
     ...a.value,
     width: r.value + "px",
     position: "fixed",
     visibility: "visible",
-    top: n.value.y + "px",
-    left: n.value.x + "px"
-  })), l = b({
+    top: l.value.y + "px",
+    left: l.value.x + "px"
+  })), s = m({
     display: "block",
     textAlign: "left",
     color: "var(--upf-message-error-text, var(--upf-color-error))",
     whiteSpace: "break-spaces"
     // 'word-break': 'break-all',
-  }), f = () => {
-    var R, y, k;
-    r.value = (R = s.value) == null ? void 0 : R.clientWidth;
-    const { top: $ = 0, left: z = 0 } = ((y = s.value) == null ? void 0 : y.getBoundingClientRect()) ?? {}, E = (k = s.value) == null ? void 0 : k.clientHeight;
-    n.value.x = z, n.value.y = $ + E;
+  }), g = () => {
+    var R, M, h;
+    r.value = (R = i.value) == null ? void 0 : R.clientWidth;
+    const { top: $ = 0, left: z = 0 } = ((M = i.value) == null ? void 0 : M.getBoundingClientRect()) ?? {}, E = (h = i.value) == null ? void 0 : h.clientHeight;
+    l.value.x = z, l.value.y = $ + E;
   };
   return {
-    $dasSpecialRangeMonthPicker: s,
-    isHoverInInput: t,
+    $dasSpecialRangeMonthPicker: i,
+    isHoverInInput: n,
     errorModalBaseSyle: a,
     errorModelStyle: d,
-    errorLabelStyle: l,
+    errorLabelStyle: s,
     errorModalInputMouseEnter: () => {
-      f(), t.value = !0;
+      g(), n.value = !0;
     },
     errorModallInputMouseLeave: () => {
-      t.value = !1;
+      n.value = !1;
     }
   };
 }, me = { class: "date-container" }, be = { class: "month-container" }, De = { class: "month-container left-month-container" }, he = ["onMouseenter", "onClick"], ke = { class: "item-text" }, Me = {
   key: 0,
   class: "das-special-range-picker-error-label-content"
-}, ye = "var(--das-ui-color-normal)", we = "var(--das-ui-special-range-picker-close-btn)", Ie = /* @__PURE__ */ oe({
+}, ye = "var(--das-ui-color-normal)", xe = "var(--das-ui-special-range-picker-close-btn)", we = /* @__PURE__ */ ne({
   __name: "Index",
   props: {
     modelValue: {},
@@ -122,275 +122,180 @@ const j = () => ({ getDateTime: (r) => {
     errorModelZIndex: { default: 2e3 }
   },
   emits: ["update:modelValue", "change", "update:error", "show-popover"],
-  setup(u, { emit: s }) {
-    const t = u, r = s, n = b(!1), a = F(t, "modelValue"), d = b(["", ""]), l = F(t, "error"), f = b([]), D = b(void 0);
+  setup(t, { emit: i }) {
+    const n = t, r = i, l = m(!1), a = F(n, "modelValue"), d = m(["", ""]), s = F(n, "error"), g = m([]), b = m(void 0);
     let S = !0;
-    const $ = b(0), z = _(() => !t.disabled && !t.isView && a.value[0] && a.value[1]), E = (p, c) => {
-      t.disabled || t.isView || (S = !1, n.value = !0, D.value = c, $.value = 0, d.value = [a.value[0], a.value[1]], r("show-popover"));
+    const $ = m(0), z = V(() => !n.disabled && !n.isView && a.value[0] && a.value[1]), E = (w, c) => {
+      n.disabled || n.isView || (S = !1, l.value = !0, b.value = c, $.value = 0, d.value = [a.value[0], a.value[1]], r("show-popover"));
     }, R = () => {
-      D.value = void 0;
-      const p = k.value;
-      r("update:modelValue", [p.begin, p.end]), r("change", [p.begin, p.end]), r("update:error", !1), n.value = !1;
-    }, { formatDateStr: y } = j(), {
-      popClickData: k,
+      b.value = void 0;
+      const w = h.value;
+      r("update:modelValue", [w.begin, w.end]), r("change", [w.begin, w.end]), r("update:error", !1), l.value = !1;
+    }, { formatDateStr: M } = j(), {
+      popClickData: h,
       isInRange: v,
       isInHoverRange: o,
-      isInNewRange: g,
-      outBeginDate: h,
-      outEndDate: x,
+      isInNewRange: p,
+      outBeginDate: D,
+      outEndDate: C,
       clickData: q,
       mouseEnter: G,
-      mouseLeave: V
-    } = ge(d, D, $, a, R), {
+      mouseLeave: O
+    } = ge(d, b, $, a, R), {
       $dasSpecialRangeMonthPicker: J,
-      isHoverInInput: O,
+      isHoverInInput: H,
       errorModalBaseSyle: K,
       errorModelStyle: Q,
-      errorLabelStyle: H,
-      errorModalInputMouseEnter: T,
-      errorModallInputMouseLeave: A
-    } = fe(t), U = () => {
+      errorLabelStyle: T,
+      errorModalInputMouseEnter: A,
+      errorModallInputMouseLeave: W
+    } = fe(n), U = () => {
       setTimeout(() => {
         if (!S) {
           S = !0;
           return;
         }
-        d.value = ["", ""], k.value = { begin: a.value[0], end: a.value[1] }, D.value = void 0, n.value = !1;
+        d.value = ["", ""], h.value = { begin: a.value[0], end: a.value[1] }, b.value = void 0, l.value = !1;
       }, 50);
     }, X = () => {
       r("update:modelValue", [null, null]), r("update:error", !1), r("change", [null, null]);
     };
-    return re(() => {
-      f.value = Array.from({ length: 31 }, (p, c) => c + 1), k.value = { begin: a.value[0], end: a.value[1] };
-    }), (p, c) => (M(), w(
-      "div",
-      {
-        ref_key: "$dasSpecialRangeMonthPicker",
-        ref: J,
-        style: L({ width: p.width, position: "relative" }),
-        onMouseenter: c[3] || (c[3] = //@ts-ignore
-        (...i) => e(T) && e(T)(...i)),
-        onMouseleave: c[4] || (c[4] = //@ts-ignore
-        (...i) => e(A) && e(A)(...i))
-      },
-      [
-        m(
-          "div",
-          {
-            class: C(["das-ui-special-range-picker-month-container", [
-              p.borderType,
-              t.disabled ? "disabled" : "",
-              t.isView ? "readonly" : "",
-              { active: D.value !== void 0 },
-              e(l) ? "is-error" : "",
-              p.size
-            ]])
-          },
-          [
-            B(e(ue), {
-              visible: n.value,
-              placement: "bottom-start",
-              "popper-class": "das-special-range-picker-month-container",
-              width: 280,
-              trigger: "click"
-            }, {
-              reference: W(() => [
-                m("div", me, [
-                  m(
-                    "div",
-                    {
-                      class: C(["left-date", {
-                        placeholder: !e(a)[0] || D.value === "begin" && d.value[0],
-                        active: D.value === "begin"
-                      }]),
-                      onClick: c[0] || (c[0] = (i) => E(e(a)[0], "begin"))
-                    },
-                    I(d.value[0] || e(a)[0] || e(N)("das-special-range-picker-begin-date")) + I(d.value[0] || e(a)[0] ? e(N)("das-special-range-picker-date") : ""),
-                    3
-                    /* TEXT, CLASS */
-                  ),
-                  c[5] || (c[5] = m(
-                    "div",
-                    { class: "separator" },
-                    "~",
-                    -1
-                    /* CACHED */
-                  )),
-                  m(
-                    "div",
-                    {
-                      class: C(["right-date", {
-                        placeholder: !e(a)[1] || D.value === "end" && d.value[1],
-                        active: D.value === "end"
-                      }]),
-                      onClick: c[1] || (c[1] = (i) => E(e(a)[1], "end"))
-                    },
-                    I(d.value[1] || e(a)[1] || e(N)("das-special-range-picker-end-date")) + I(d.value[1] || e(a)[1] ? e(N)("das-special-range-picker-date") : ""),
-                    3
-                    /* TEXT, CLASS */
-                  ),
-                  m(
-                    "div",
-                    {
-                      class: C({ "is-view": t.isView }),
-                      style: { width: "16px" }
-                    },
-                    [
-                      B(e(ve), {
-                        class: C(["icon-date", { "has-data": z.value }]),
-                        size: "medium",
-                        "icon-color": ye
-                      }, null, 8, ["class"]),
-                      B(e(pe), {
-                        class: C(["icon-delete", { "has-data": z.value }]),
-                        size: "medium",
-                        "icon-color": we,
-                        onClick: X
-                      }, null, 8, ["class"])
-                    ],
-                    2
-                    /* CLASS */
-                  )
-                ])
-              ]),
-              default: W(() => [
-                Y((M(), w("div", be, [
-                  m("div", De, [
-                    m(
-                      "div",
-                      {
-                        class: "date-container-popover left-date-container",
-                        onMouseleave: c[2] || (c[2] = //@ts-ignore
-                        (...i) => e(V) && e(V)(...i))
-                      },
-                      [
-                        (M(!0), w(
-                          P,
-                          null,
-                          ne(f.value, (i) => (M(), w("div", {
-                            class: C(["item", {
-                              "in-range": e(v)(i) || e(o)(i),
-                              "new-range": e(g)(i),
-                              "range-start": e(y)(e(k).begin) === e(y)(i),
-                              "range-end": e(y)(e(k).end) === e(y)(i),
-                              "out-range": e(h)(i) || e(x)(i)
-                            }]),
-                            onMouseenter: (ee) => e(G)(i),
-                            onClick: (ee) => e(q)(i)
-                          }, [
-                            m(
-                              "div",
-                              ke,
-                              I(i),
-                              1
-                              /* TEXT */
-                            )
-                          ], 42, he))),
-                          256
-                          /* UNKEYED_FRAGMENT */
-                        ))
-                      ],
-                      32
-                      /* NEED_HYDRATION */
-                    )
-                  ])
-                ])), [
-                  [e(de), U]
-                ])
-              ]),
-              _: 1
-              /* STABLE */
-            }, 8, ["visible"])
-          ],
-          2
-          /* CLASS */
-        ),
-        e(l) && p.errorLabel ? (M(), w(
-          P,
-          { key: 0 },
-          [
-            p.errorMode === "default" ? Y((M(), w("div", Me, [
-              le(
-                I(p.errorLabel),
-                1
-                /* TEXT */
-              )
-            ])), [
-              [e(ce)]
-            ]) : e(O) ? (M(), w(
-              P,
-              { key: 1 },
-              [
-                e(O) ? (M(), se(ie, {
-                  key: 0,
-                  to: "body"
+    return oe(() => {
+      g.value = Array.from({ length: 31 }, (w, c) => c + 1), h.value = { begin: a.value[0], end: a.value[1] };
+    }), (w, c) => (k(), y("div", {
+      ref_key: "$dasSpecialRangeMonthPicker",
+      ref: J,
+      style: L({ width: t.width, position: "relative" }),
+      onMouseenter: c[3] || (c[3] = //@ts-ignore
+      (...u) => e(A) && e(A)(...u)),
+      onMouseleave: c[4] || (c[4] = //@ts-ignore
+      (...u) => e(W) && e(W)(...u))
+    }, [
+      f("div", {
+        class: I(["das-ui-special-range-picker-month-container", [
+          t.borderType,
+          n.disabled ? "disabled" : "",
+          n.isView ? "readonly" : "",
+          { active: b.value !== void 0 },
+          e(s) ? "is-error" : "",
+          t.size
+        ]])
+      }, [
+        B(e(ue), {
+          visible: l.value,
+          placement: "bottom-start",
+          "popper-class": "das-special-range-picker-month-container",
+          width: 280,
+          trigger: "click"
+        }, {
+          reference: Y(() => [
+            f("div", me, [
+              f("div", {
+                class: I(["left-date", {
+                  placeholder: !e(a)[0] || b.value === "begin" && d.value[0],
+                  active: b.value === "begin"
+                }]),
+                onClick: c[0] || (c[0] = (u) => E(e(a)[0], "begin"))
+              }, x(d.value[0] || e(a)[0] || e(N)("das-special-range-picker-begin-date")) + x(d.value[0] || e(a)[0] ? e(N)("das-special-range-picker-date") : ""), 3),
+              c[5] || (c[5] = f("div", { class: "separator" }, "~", -1)),
+              f("div", {
+                class: I(["right-date", {
+                  placeholder: !e(a)[1] || b.value === "end" && d.value[1],
+                  active: b.value === "end"
+                }]),
+                onClick: c[1] || (c[1] = (u) => E(e(a)[1], "end"))
+              }, x(d.value[1] || e(a)[1] || e(N)("das-special-range-picker-end-date")) + x(d.value[1] || e(a)[1] ? e(N)("das-special-range-picker-date") : ""), 3),
+              f("div", {
+                class: I({ "is-view": n.isView }),
+                style: { width: "16px" }
+              }, [
+                B(e(ve), {
+                  class: I(["icon-date", { "has-data": z.value }]),
+                  size: "medium",
+                  "icon-color": ye
+                }, null, 8, ["class"]),
+                B(e(pe), {
+                  class: I(["icon-delete", { "has-data": z.value }]),
+                  size: "medium",
+                  "icon-color": xe,
+                  onClick: X
+                }, null, 8, ["class"])
+              ], 2)
+            ])
+          ]),
+          default: Y(() => [
+            Z((k(), y("div", be, [
+              f("div", De, [
+                f("div", {
+                  class: "date-container-popover left-date-container",
+                  onMouseleave: c[2] || (c[2] = //@ts-ignore
+                  (...u) => e(O) && e(O)(...u))
                 }, [
-                  m(
-                    "div",
-                    {
-                      style: L(e(Q))
-                    },
-                    [
-                      m(
-                        "span",
-                        {
-                          style: L(e(H))
-                        },
-                        I(p.errorLabel),
-                        5
-                        /* TEXT, STYLE */
-                      )
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ])) : (M(), w(
-                  "div",
-                  {
-                    key: 1,
-                    style: L(e(K)),
-                    class: "das-special-range-picker-overlay-error-label-content"
-                  },
-                  [
-                    m(
-                      "span",
-                      {
-                        style: L(e(H))
-                      },
-                      I(p.errorLabel),
-                      5
-                      /* TEXT, STYLE */
-                    )
-                  ],
-                  4
-                  /* STYLE */
-                ))
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            )) : Z("v-if", !0)
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        )) : Z("v-if", !0)
-      ],
-      36
-      /* STYLE, NEED_HYDRATION */
-    ));
+                  (k(!0), y(P, null, re(g.value, (u) => (k(), y("div", {
+                    class: I(["item", {
+                      "in-range": e(v)(u) || e(o)(u),
+                      "new-range": e(p)(u),
+                      "range-start": e(M)(e(h).begin) === e(M)(u),
+                      "range-end": e(M)(e(h).end) === e(M)(u),
+                      "out-range": e(D)(u) || e(C)(u)
+                    }]),
+                    onMouseenter: (ee) => e(G)(u),
+                    onClick: (ee) => e(q)(u)
+                  }, [
+                    f("div", ke, x(u), 1)
+                  ], 42, he))), 256))
+                ], 32)
+              ])
+            ])), [
+              [e(de), U]
+            ])
+          ]),
+          _: 1
+        }, 8, ["visible"])
+      ], 2),
+      e(s) && t.errorLabel ? (k(), y(P, { key: 0 }, [
+        t.errorMode === "default" ? Z((k(), y("div", Me, [
+          le(x(t.errorLabel), 1)
+        ])), [
+          [e(ce)]
+        ]) : e(H) ? (k(), y(P, { key: 1 }, [
+          e(H) ? (k(), se(ie, {
+            key: 0,
+            to: "body"
+          }, [
+            f("div", {
+              style: L(e(Q))
+            }, [
+              f("span", {
+                style: L(e(T))
+              }, x(t.errorLabel), 5)
+            ], 4)
+          ])) : (k(), y("div", {
+            key: 1,
+            style: L(e(K)),
+            class: "das-special-range-picker-overlay-error-label-content"
+          }, [
+            f("span", {
+              style: L(e(T))
+            }, x(t.errorLabel), 5)
+          ], 4))
+        ], 64)) : _("", !0)
+      ], 64)) : _("", !0)
+    ], 36));
   }
-}), Ce = (u, s) => {
-  const t = u.__vccOpts || u;
-  for (const [r, n] of s)
-    t[r] = n;
-  return t;
-}, xe = /* @__PURE__ */ Ce(Ie, [["__scopeId", "data-v-2a5f3408"]]), Se = {
+}), Ie = (t, i) => {
+  const n = t.__vccOpts || t;
+  for (const [r, l] of i)
+    n[r] = l;
+  return n;
+}, Ce = /* @__PURE__ */ Ie(we, [["__scopeId", "data-v-2a5f3408"]]), Se = {
   "das-special-range-picker-begin-date": { "zh-CN": "开始日期", en: "Start Date", "zh-MO": "開始日期", _appCode: "framework" },
   "das-special-range-picker-end-date": { "zh-CN": "结束日期", en: "End Date", "zh-MO": "結束日期", _appCode: "framework" },
   "das-special-range-picker-month": { "zh-CN": "月", en: "Month", "zh-MO": "月", _appCode: "framework" },
   "das-special-range-picker-date": { "zh-CN": "日", en: "Day", "zh-MO": "日", _appCode: "framework" }
-}, Oe = ae(xe);
+}, He = ae(Ce);
 te(Se);
 export {
-  Oe as DasSpecialRangePickerMonth,
-  Oe as default
+  He as DasSpecialRangePickerMonth,
+  He as default
 };