@opentiny/vue-renderless 3.26.0 → 3.27.0

package/color-select-panel/linear-gradient/index.js

@@ -0,0 +1,131 @@
+import "../../chunk-G2ADBYYC.js";
+import { ColorPoint } from "../utils/color-points";
+import { getClientXY } from "../utils/getClientXY";
+import { Color } from "../utils/color";
+import { draggable } from "../utils/use-drag";
+import { isNullOrEmpty } from "@opentiny/utils";
+const LINEAR_GRADIENT_BAR = "linearGradientBar";
+const THUMB = "thumb";
+const useLinearGradient = (state, hooks, utils, context) => {
+  const { vm } = utils;
+  const { nextTick } = hooks;
+  const activePoint = context.activeColor;
+  const addPoint = (point) => {
+    context.colorPoints.value.push(point);
+  };
+  const getPos = (event) => {
+    if (!vm) {
+      return 0;
+    }
+    const el = vm.$refs[LINEAR_GRADIENT_BAR];
+    const rect = el.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    return Math.min(Math.max(clientX - rect.left, 0), rect.width);
+  };
+  const onDrag = (event) => {
+    if (!vm) {
+      return 0;
+    }
+    activePoint.value.cursorLeft = getPos(event);
+  };
+  const getActivePoint = () => {
+    return activePoint;
+  };
+  const onClickBar = (event) => {
+    const active = getActivePoint();
+    const newPoint = new ColorPoint(
+      new Color({
+        enableAlpha: active.value.color.enableAlpha,
+        format: active.value.color.format,
+        value: active.value.color.value
+      }),
+      active.value.cursorLeft
+    );
+    const left = getPos(event);
+    newPoint.cursorLeft = left;
+    addPoint(newPoint);
+    setActivePoint(newPoint);
+    nextTick(() => {
+      const lastColorPointElement = vm.$refs[THUMB].at(-1);
+      if (!lastColorPointElement) {
+        return;
+      }
+      draggable(lastColorPointElement, {
+        drag(event2) {
+          onDrag(event2);
+        },
+        end(event2) {
+          onDrag(event2);
+        }
+      });
+    });
+  };
+  const setActivePoint = (point) => {
+    activePoint.value = point;
+  };
+  const onThumbMouseDown = (event, point) => {
+    setActivePoint(point);
+    const el = event.target;
+    draggable(el, {
+      drag(event2) {
+        onDrag(event2);
+      },
+      end(event2) {
+        onDrag(event2);
+      }
+    });
+  };
+  const getRelativePos = (points) => {
+    const bar = vm.$refs[LINEAR_GRADIENT_BAR];
+    if (!bar) {
+      return 0;
+    }
+    const rect = bar.getBoundingClientRect();
+    return Number.parseInt((points.cursorLeft / rect.width * 100).toFixed(0));
+  };
+  const toString = () => {
+    const colors = context.colorPoints.value.map((point) => {
+      return [point.color.value, getRelativePos(point)];
+    }).sort((a, b) => a[1] - b[1]).map(([colorValue, pos]) => {
+      return [colorValue, `${pos}%`].join(" ");
+    }).join(",");
+    return `linear-gradient(${context.deg.value}deg, ${colors})`;
+  };
+  hooks.watchEffect(() => {
+    if (isNullOrEmpty(context.deg.value)) {
+      return;
+    }
+    context.linearGardientValue.value = toString();
+    state.linearGradientBarBackground = toString().replace(`${context.deg.value}deg`, "90deg");
+  });
+  hooks.onMounted(() => {
+    const elements = vm.$refs[THUMB];
+    if (!elements || !elements.length) {
+      return;
+    }
+    elements.forEach((el) => {
+      draggable(el, {
+        drag(event) {
+          onDrag(event);
+        },
+        end(event) {
+          onDrag(event);
+        }
+      });
+    });
+    context.bar.value = vm.$refs[LINEAR_GRADIENT_BAR];
+  });
+  return { onClickBar, onThumbMouseDown, toString };
+};
+const initState = (hooks) => {
+  const { ref, reactive } = hooks;
+  const linearGradientBarBackground = ref("");
+  const state = reactive({ linearGradientBarBackground });
+  return state;
+};
+export {
+  LINEAR_GRADIENT_BAR,
+  THUMB,
+  initState,
+  useLinearGradient
+};

package/color-select-panel/linear-gradient/vue.js

@@ -0,0 +1,21 @@
+import "../../chunk-G2ADBYYC.js";
+import { useContext } from "../utils/context";
+import { initState, useLinearGradient } from ".";
+const api = ["context", "onClickBar", "onThumbMouseDown", "state"];
+const renderless = (_, hooks, utils) => {
+  const { reactive } = hooks;
+  const context = useContext(hooks);
+  const state = initState(hooks);
+  const { onClickBar, onThumbMouseDown } = useLinearGradient(state, hooks, utils, context);
+  const api2 = reactive({
+    state,
+    context,
+    onClickBar,
+    onThumbMouseDown
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/color-select-panel/sv-select/index.js

@@ -1,12 +1,15 @@
 import "../../chunk-G2ADBYYC.js";
 import { getClientXY } from "../utils/getClientXY";
-const initState = (props, { ref, computed, reactive }) => {
+import { useContext } from "../utils/context";
+const initState = (props, hooks) => {
+  const { ref, computed, reactive } = hooks;
+  const context = useContext(hooks);
   const cursorTop = ref(0);
   const cursorLeft = ref(0);
   const bg = ref("hsl(0, 100%, 50%)");
   const colorValue = computed(() => {
-    const hue = props.color.get("hue");
-    const value = props.color.get("value");
+    const hue = context.activeColor.value.color.get("hue");
+    const value = context.activeColor.value.color.get("value");
     return { hue, value };
   });
   const state = reactive({
@@ -17,21 +20,21 @@ const initState = (props, { ref, computed, reactive }) => {
   });
   return state;
 };
-const useUpdate = (state, props, wrapper) => {
+const useUpdate = (state, props, wrapper, context) => {
   return () => {
     const el = wrapper.value;
     if (!el) {
       return;
     }
-    const sat = props.color.get("sat");
-    const value = props.color.get("value");
+    const sat = context.activeColor.value.color.get("sat");
+    const value = context.activeColor.value.color.get("value");
     const { clientWidth: width, clientHeight: height } = el;
     state.cursorLeft = sat * width / 100;
     state.cursorTop = (100 - value) * height / 100;
-    state.bg = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+    state.bg = `hsl(${context.activeColor.value.color.get("hue")}, 100%, 50%)`;
   };
 };
-const useDrag = (state, wrapper, props, { emit }) => {
+const useDrag = (state, wrapper, props, { emit }, context) => {
   return (event) => {
     const el = wrapper.value;
     const rect = el.getBoundingClientRect();
@@ -47,7 +50,7 @@ const useDrag = (state, wrapper, props, { emit }) => {
     const s = left / rect.width * 100;
     const v = 100 - top / rect.height * 100;
     emit("svUpdate", { s, v });
-    props.color.set({
+    context.activeColor.value.color.set({
       sat: s,
       value: v
     });

package/color-select-panel/sv-select/vue.js

@@ -1,14 +1,16 @@
 import "../../chunk-G2ADBYYC.js";
 import { draggable } from "../utils/use-drag";
 import { initState, initWatch, useDrag, useUpdate } from "./index";
+import { useContext } from "../utils/context";
 const api = ["state", "wrapper", "cursor"];
 const renderless = (props, hooks, utils) => {
+  const ctx = useContext(hooks);
   const state = initState(props, hooks);
   const { ref, onMounted } = hooks;
   const { emit } = utils;
   const wrapper = ref();
-  const update = useUpdate(state, props, wrapper);
-  const onDrag = useDrag(state, wrapper, props, utils);
+  const update = useUpdate(state, props, wrapper, ctx);
+  const onDrag = useDrag(state, wrapper, props, utils, ctx);
   initWatch(state, update, hooks);
   onMounted(() => {
     const drag = {

package/color-select-panel/utils/color-map.js

@@ -0,0 +1,154 @@
+import "../../chunk-G2ADBYYC.js";
+var color_map_default = {
+  "black": "#000000",
+  "silver": "#c0c0c0",
+  "gray": "#808080",
+  "white": "#ffffff",
+  "maroon": "#800000",
+  "red": "#ff0000",
+  "purple": "#800080",
+  "fuchsia": "#ff00ff",
+  "green": "#008000",
+  "lime": "#00ff00",
+  "olive": "#808000",
+  "yellow": "#ffff00",
+  "navy": "#000080",
+  "blue": "#0000ff",
+  "teal": "#008080",
+  "aqua": "#00ffff",
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "blanchedalmond": "#ffebcd",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "cornflowerblue": "#6495ed",
+  "cornsilk": "#fff8dc",
+  "crimson": "#dc143c",
+  "cyan": "#00ffff",
+  "darkblue": "#00008b",
+  "darkcyan": "#008b8b",
+  "darkgoldenrod": "#b8860b",
+  "darkgray": "#a9a9a9",
+  "darkgreen": "#006400",
+  "darkgrey": "#a9a9a9",
+  "darkkhaki": "#bdb76b",
+  "darkmagenta": "#8b008b",
+  "darkolivegreen": "#556b2f",
+  "darkorange": "#ff8c00",
+  "darkorchid": "#9932cc",
+  "darkred": "#8b0000",
+  "darksalmon": "#e9967a",
+  "darkseagreen": "#8fbc8f",
+  "darkslateblue": "#483d8b",
+  "darkslategray": "#2f4f4f",
+  "darkslategrey": "#2f4f4f",
+  "darkturquoise": "#00ced1",
+  "darkviolet": "#9400d3",
+  "deeppink": "#ff1493",
+  "deepskyblue": "#00bfff",
+  "dimgray": "#696969",
+  "dimgrey": "#696969",
+  "dodgerblue": "#1e90ff",
+  "firebrick": "#b22222",
+  "floralwhite": "#fffaf0",
+  "forestgreen": "#228b22",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "gold": "#ffd700",
+  "goldenrod": "#daa520",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavender": "#e6e6fa",
+  "lavenderblush": "#fff0f5",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "mediumaquamarine": "#66cdaa",
+  "mediumblue": "#0000cd",
+  "mediumorchid": "#ba55d3",
+  "mediumpurple": "#9370db",
+  "mediumseagreen": "#3cb371",
+  "mediumslateblue": "#7b68ee",
+  "mediumspringgreen": "#00fa9a",
+  "mediumturquoise": "#48d1cc",
+  "mediumvioletred": "#c71585",
+  "midnightblue": "#191970",
+  "mintcream": "#f5fffa",
+  "mistyrose": "#ffe4e1",
+  "moccasin": "#ffe4b5",
+  "navajowhite": "#ffdead",
+  "oldlace": "#fdf5e6",
+  "olivedrab": "#6b8e23",
+  "orange": "#ffa500",
+  "orangered": "#ff4500",
+  "orchid": "#da70d6",
+  "palegoldenrod": "#eee8aa",
+  "palegreen": "#98fb98",
+  "paleturquoise": "#afeeee",
+  "palevioletred": "#db7093",
+  "papayawhip": "#ffefd5",
+  "peachpuff": "#ffdab9",
+  "peru": "#cd853f",
+  "pink": "#ffc0cb",
+  "plum": "#dda0dd",
+  "powderblue": "#b0e0e6",
+  "rebeccapurple": "#663399",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "whitesmoke": "#f5f5f5",
+  "yellowgreen": "#9acd32"
+};
+export {
+  color_map_default as default
+};

package/color-select-panel/utils/color-points.js

@@ -0,0 +1,86 @@
+import "../../chunk-G2ADBYYC.js";
+import { draggable } from "./use-drag";
+import { getClientXY } from "./getClientXY";
+class ColorPoint {
+  constructor(color, cursorLeft) {
+    this.color = color;
+    this.cursorLeft = cursorLeft;
+  }
+}
+const useColorPoints = (props, hooks, ctx) => {
+  const { ref, watch, readonly } = hooks;
+  const points = ctx.colorPoints;
+  const actviePoint = ctx.activeColor;
+  const deg = ref(45);
+  const linearGradientValue = ref("");
+  const addPoint = (point) => {
+    points.value.push(point);
+  };
+  const removePoint = (point) => {
+    points.value = points.value.filter((curPoint) => curPoint !== point);
+  };
+  const updateDeg = (_deg) => {
+    deg.value = _deg;
+  };
+  const onDrag = (wrapper, event) => {
+    const wrapperEl = wrapper.value;
+    if (!wrapperEl) {
+      return;
+    }
+    const rect = wrapperEl.getBoundingClientRect();
+    const { clientX } = getClientXY(event);
+    actviePoint.value.cursorLeft = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+  };
+  const onClick = (element, point) => {
+    const el = element;
+    actviePoint.value = point;
+    draggable(el, {
+      drag(event) {
+        onDrag(props.wrapper, event);
+      },
+      end(event) {
+        onDrag(props.wrapper, event);
+      }
+    });
+  };
+  const getRelativePos = (wrapper, point) => {
+    const wrapperEl = wrapper.value;
+    const rect = wrapperEl.getBoundingClientRect();
+    return (point.cursorLeft / rect.width * 100).toFixed(0);
+  };
+  const setActivePoint = (point) => {
+    actviePoint.value = point;
+  };
+  const getActviePoint = () => actviePoint;
+  const toString = () => {
+    const colroString = points.value.map(
+      (point) => [point.color.value, `${getRelativePos(props.wrapper, point)}%`].join(" ")
+    );
+    linearGradientValue.value = `linear-gradient(${deg.value}deg, ${colroString.join(",")})`;
+  };
+  watch(deg, toString, { deep: true });
+  watch(
+    actviePoint,
+    () => {
+      if (!props.wrapper.value) {
+        return;
+      }
+      toString();
+    },
+    { deep: true }
+  );
+  return {
+    onClick,
+    linearGradientValue: readonly(linearGradientValue),
+    updateDeg,
+    removePoint,
+    addPoint,
+    setActivePoint,
+    getActviePoint,
+    onDrag
+  };
+};
+export {
+  ColorPoint,
+  useColorPoints
+};

package/color-select-panel/utils/color.js

@@ -241,7 +241,7 @@ class Color {
     } else {
       this._alpha = 100;
     }
-    if (parent.length >= 3) {
+    if (parts.length >= 3) {
       const { h, s, v } = hsl2hsv({
         hue: parts[0],
         sat: parts[1],

package/color-select-panel/utils/context.js

@@ -0,0 +1,14 @@
+import "../../chunk-G2ADBYYC.js";
+const ContextKey = Symbol("");
+const createContext = (data, hooks) => {
+  hooks.provide(ContextKey, data);
+  return data;
+};
+const useContext = (hooks) => {
+  return hooks.inject(ContextKey);
+};
+export {
+  ContextKey,
+  createContext,
+  useContext
+};

package/color-select-panel/vue.js

@@ -16,8 +16,8 @@ const api = [
   "onHistoryClick",
   "onClickOutside"
 ];
-const renderless = (props, hooks, utils) => {
-  const state = initState(props, hooks);
+const renderless = (props, hooks, utils, ext) => {
+  const state = initState(props, hooks, utils, ext);
   const {
     open,
     close,
@@ -32,7 +32,7 @@ const renderless = (props, hooks, utils) => {
     onPredefineColorClick,
     onHistoryClick,
     onClickOutside
-  } = initApi(props, state, utils);
+  } = initApi(props, state, utils, hooks, ext);
   const api2 = {
     state,
     open,

package/common/deps/infinite-scroll.js

@@ -24,7 +24,7 @@ const parseAttrValue = (attrVal, type, defaultVal) => {
 const computeScrollOptions = (el, instance) => Object.entries(attrs).reduce((accumulator, [name, option]) => {
   const { type, default: defaultValue } = option;
   const attrKey = `infinite-scroll-${name}`;
-  const $attrValue = instance.$el.getAttribute(attrKey);
+  const $attrValue = (instance == null ? void 0 : instance.$el) && typeof instance.$el.getAttribute === "function" ? instance.$el.getAttribute(attrKey) : null;
   const attrValue = el.getAttribute(attrKey);
   let value;
   if (isNull(attrValue) && isNull($attrValue) || !isNull(attrValue)) {

package/dialog-box/index.js

@@ -129,14 +129,14 @@ const handleClose = ({
   if (typeof props.beforeClose === "function" && props.beforeClose(type) === false) {
     return;
   }
+  if (!emitEvent(emit, "before-close", api.hide)) {
+    return;
+  }
   const el = parent.$el;
   if (props.rightSlide) {
     const dialogBoxDom = el.querySelector(constants.DIALOG_BOX_CLASS) || el;
     dialogBoxDom.style.left = "";
   }
-  if (!emitEvent(emit, "before-close", api.hide)) {
-    return;
-  }
   api.hide(type);
 };
 const hide = ({ api, emit, state, props }) => (cancel) => {

package/dialog-box/vue.js

@@ -27,6 +27,7 @@ const api = [
   "afterEnter",
   "afterLeave",
   "handleClose",
+  "hide",
   "handleWrapperClick",
   "useMouseEventDown",
   "useMouseEventUp",

package/file-upload/index.js

@@ -291,10 +291,11 @@ const properFileSize = ({
   if ([void 0, null].includes(file.size))
     return true;
   let maxSize = 0;
+  state.singleMaxSize = props.edm.singleFileMaxSize || state.singleMaxSize || 200;
   if (Array.isArray(props.fileSize) && props.fileSize[1]) {
-    maxSize = state.isEdm ? Math.min(state.singleMaxSize, props.fileSize[1] / 1024) : Math.max(props.fileSize[0] / 1024, props.fileSize[1] / 1024);
+    maxSize = state.isEdm ? Math.min(state.singleMaxSize, Number(props.fileSize[1]) / 1024) : Math.max(Number(props.fileSize[0]) / 1024, Number(props.fileSize[1]) / 1024);
   } else {
-    maxSize = state.isEdm ? Math.min(state.singleMaxSize) : props.fileSize / 1024;
+    maxSize = state.isEdm ? Math.min(state.singleMaxSize) : Number(props.fileSize) / 1024;
   }
   if (state.isEdm || Array.isArray(props.fileSize) && props.fileSize[1]) {
     if (!isNaN(Number(maxSize)) && file.size > maxSize * 1024 * 1024) {

package/form-item/vue.js

@@ -98,7 +98,7 @@ const initState = ({
     validateIcon: computed(() => api2.computedValidateIcon()),
     isErrorInline: computed(() => api2.computedIsErrorInline()),
     isErrorBlock: computed(() => api2.computedIsErrorBlock()),
-    disabled: computed(() => state.formInstance.disabled),
+    disabled: computed(() => state.formInstance.disabled || props.disabled),
     tooltipType: computed(() => state.formInstance.state.tooltipType),
     // 标记表单项下是否有多个子节点
     isMultiple: false

package/guide/index.js

@@ -1,7 +1,7 @@
 import "../chunk-G2ADBYYC.js";
 import { xss } from "@opentiny/utils";
 const createShepherd = ({ state, props, Shepherd, offset, designConfig }) => () => {
-  const tour = newTour(state, Shepherd, offset, designConfig);
+  const tour = newTour(state, Shepherd, offset, designConfig, props);
   state.tour = tour;
   const result = {};
   const deepCopy = getItemCopy(props, tour, result);
@@ -68,10 +68,10 @@ const getItemCopy = (props, tour, result) => {
   });
   return result;
 };
-const newTour = (state, Shepherd, offset, designConfig) => {
+const newTour = (state, Shepherd, offset, designConfig, props) => {
   var _a, _b;
   const tour = new Shepherd.Tour({
-    useModalOverlay: (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.isUseModalOverlay) != null ? _b : false,
+    useModalOverlay: (_b = props.mask) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.isUseModalOverlay,
     defaultStepOptions: {
       modalOverlayOpeningPadding: state.modalOverlayOpeningPadding,
       modalOverlayOpeningRadius: state.modalOverlayOpeningRadius,

package/input/vue.js

@@ -41,6 +41,7 @@ import {
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
 import { on, off } from "@opentiny/utils";
+import { debounce } from "@opentiny/utils";
 const api = [
   "blur",
   "showBox",
@@ -221,7 +222,7 @@ const mergeApi = ({
     }),
     handleFocus: handleFocus({ api: api2, emit, state }),
     handleInput: handleInput({ api: api2, emit, nextTick, state }),
-    resizeTextarea: resizeTextarea({ api: api2, parent, vm, state, props }),
+    resizeTextarea: debounce(200, resizeTextarea({ api: api2, parent, vm, state, props })),
     updateIconOffset: updateIconOffset(api2),
     calcTextareaHeight: calcTextareaHeight({
       api: api2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.26.0",
-    "@opentiny/vue-hooks": "~3.26.0",
+    "@opentiny/utils": "~3.27.0",
+    "@opentiny/vue-hooks": "~3.27.0",
     "color": "4.2.3"
   },
   "devDependencies": {

package/picker/vue.js

@@ -150,6 +150,10 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     ),
     showSeconds: computed(
       () => (state.format || props.pickerOptions && props.pickerOptions.format || "ss").includes("ss")
+    ),
+    innerWidth: 0,
+    breakLine: computed(
+      () => (state.innerWidth < 230 && state.type === "daterange" || state.innerWidth < 335 && state.type === "datetimerange") && state.displayValue && state.displayValue[1]
     )
   });
   return state;
@@ -271,8 +275,13 @@ const renderless = (props, hooks, vnode, others) => {
   initApi({ api: api2, props, hooks, state, vnode, others, utils, parent, isPCMode });
   initWatch({ api: api2, state, props, watch, markRaw });
   api2.initGlobalTimezone();
+  const resizeHandler = () => {
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+  };
   onMounted(() => {
     api2.setInputPaddingLeft();
+    state.innerWidth = vm.$refs.reference.offsetWidth;
+    window.addEventListener("resize", resizeHandler);
   });
   parent.$on("handle-clear", (event) => {
     state.showClose = true;
@@ -280,6 +289,7 @@ const renderless = (props, hooks, vnode, others) => {
   });
   onBeforeUnmount(() => {
     api2.destroyPopper("remove");
+    window.removeEventListener("resize", resizeHandler);
     state.popperElm = null;
     state.picker = null;
   });