@g1cloud/bluesea 5.0.0-beta.3 → 5.0.0-beta.4

package/dist/bluesea.umd.cjs

@@ -583,7 +583,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     waitDuring,
     tryUntil
   };
-  const _hoisted_1$1G = ["data-popup-id"];
+  const _hoisted_1$1F = ["data-popup-id"];
   const ADJUST_OFFSET = 8;
   const _sfc_main$1Z = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPopup",
@@ -768,7 +768,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 onKeydown: _cache[1] || (_cache[1] = ($event) => emit("keydown", $event))
               }, [
                 vue.renderSlot(_ctx.$slots, "default")
-              ], 46, _hoisted_1$1G)
+              ], 46, _hoisted_1$1F)
             ]),
             _: 3
           })
@@ -810,7 +810,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
     };
   };
-  const _hoisted_1$1F = {
+  const _hoisted_1$1E = {
     key: 0,
     class: "popup-search pa-4"
   };
@@ -975,7 +975,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           onKeydown: vue.withKeys(vue.withModifiers(handleKeyboard, ["stop", "prevent"]), ["enter", "down", "up"])
         }, {
           default: vue.withCtx(() => [
-            actualShowSearch.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1F, [
+            actualShowSearch.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1E, [
               vue.withDirectives(vue.createElementVNode("input", {
                 type: "text",
                 onInput: setSearchKeyword,
@@ -1370,7 +1370,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return this.isModified(this.valueProvider.getCurrentValue());
     }
   }
-  const _hoisted_1$1E = { key: 0 };
+  const _hoisted_1$1D = { key: 0 };
   const _sfc_main$1X = /* @__PURE__ */ vue.defineComponent({
     __name: "ValidationErrors",
     props: {
@@ -1379,7 +1379,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return !_ctx.hideErrorMessage && _ctx.errors && _ctx.errors.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1E, [
+        return !_ctx.hideErrorMessage && _ctx.errors && _ctx.errors.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1D, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.errors, (error) => {
             return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
               key: error.code,
@@ -1426,7 +1426,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     return defaultKey(item);
   };
-  const _hoisted_1$1D = ["tabindex", "onKeydown"];
+  const _hoisted_1$1C = ["tabindex", "onKeydown"];
   const _hoisted_2$1f = { key: 0 };
   const _hoisted_3$M = {
     key: 0,
@@ -1619,7 +1619,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               "hide-error-message": _ctx.hideErrorMessage
             }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
           ], 64))
-        ], 42, _hoisted_1$1D)), [
+        ], 42, _hoisted_1$1C)), [
           [vue.unref(vClickOutside), () => togglePopup(false)]
         ]);
       };
@@ -1722,7 +1722,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const createContextMenuPlugin = () => {
     return new BSContextMenuPlugin();
   };
-  const _hoisted_1$1C = ["data-menu-id"];
+  const _hoisted_1$1B = ["data-menu-id"];
   const _hoisted_2$1e = ["href", "target"];
   const _hoisted_3$L = ["data-menu-id"];
   const _hoisted_4$v = ["data-menu-id", "onMouseenter", "onClick"];
@@ -1808,7 +1808,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }, null, 8, _hoisted_2$1e), [
                     [vue.unref(vT), menu.caption]
                   ])
-                ], 8, _hoisted_1$1C)) : menu.type === "route" ? (vue.openBlock(), vue.createElementBlock("div", {
+                ], 8, _hoisted_1$1B)) : menu.type === "route" ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 3,
                   "data-menu-id": menu.menuId,
                   class: "menu no-padding",
@@ -2022,7 +2022,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1B = {
+  const _hoisted_1$1A = {
     key: 0,
     class: "view-mode"
   };
@@ -2187,7 +2187,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           class: vue.normalizeClass([{ required: _ctx.required, disabled: _ctx.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-text-input"]),
           style: vue.normalizeStyle({ width: _ctx.width })
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1B, [
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1A, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getPrefixSuffixList(_ctx.prefix), (item) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                 item.type === "text" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
@@ -2290,7 +2290,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1A = { class: "bs-link bs-layout-horizontal-inline flex-align-center" };
+  const _hoisted_1$1z = { class: "bs-link bs-layout-horizontal-inline flex-align-center" };
   const _hoisted_2$1c = ["href", "target"];
   const _sfc_main$1R = /* @__PURE__ */ vue.defineComponent({
     __name: "BSLink",
@@ -2301,7 +2301,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1A, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1z, [
           _cache[0] || (_cache[0] = vue.createElementVNode("span", { class: "font-icon mr-4" }, "link", -1)),
           vue.withDirectives(vue.createElementVNode("a", {
             href: _ctx.path,
@@ -2314,7 +2314,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   });
   const BSLink = /* @__PURE__ */ _export_sfc(_sfc_main$1R, [["__scopeId", "data-v-29df56e5"]]);
-  const _hoisted_1$1z = {
+  const _hoisted_1$1y = {
     key: 0,
     class: "show-percent",
     style: { "left": "100%" }
@@ -2353,7 +2353,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             style: vue.normalizeStyle({ width: calculateProgress.value + "%" }),
             class: "inner-progressbar"
           }, [
-            calculateProgress.value !== void 0 && calculateProgress.value < 50 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1z, vue.toDisplayString(calculatePercent.value) + "% ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1b, vue.toDisplayString(calculatePercent.value) + "% ", 1))
+            calculateProgress.value !== void 0 && calculateProgress.value < 50 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1y, vue.toDisplayString(calculatePercent.value) + "% ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1b, vue.toDisplayString(calculatePercent.value) + "% ", 1))
           ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$J, _cache[0] || (_cache[0] = [
             vue.createElementVNode("div", { class: "in-box" }, null, -1)
           ])))
@@ -2383,9 +2383,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   });
   const BSConsole = /* @__PURE__ */ _export_sfc(_sfc_main$1P, [["__scopeId", "data-v-f33a4477"]]);
   const _sfc_main$1O = {};
-  const _hoisted_1$1y = { class: "bs-loading-icon" };
+  const _hoisted_1$1x = { class: "bs-loading-icon" };
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1y, _cache[0] || (_cache[0] = [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1x, _cache[0] || (_cache[0] = [
       vue.createElementVNode("span", { class: "font-icon" }, "progress_activity", -1)
     ]));
   }
@@ -2660,7 +2660,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return tmp.textContent || tmp.innerText;
     }
   };
-  const _hoisted_1$1x = { class: "bs-date" };
+  const _hoisted_1$1w = { class: "bs-date" };
   const _sfc_main$1N = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDate",
     props: {
@@ -2672,11 +2672,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const props = __props;
       const formatted = vue.computed(() => formatUtil.formatDateString(props.value, props.format, props.timeZone));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1x, vue.toDisplayString(formatted.value), 1);
+        return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1w, vue.toDisplayString(formatted.value), 1);
       };
     }
   });
-  const _hoisted_1$1w = { class: "page-navigation" };
+  const _hoisted_1$1v = { class: "page-navigation" };
   const _hoisted_2$1a = ["data-page", "onClick"];
   const _sfc_main$1M = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPageNavigation",
@@ -2738,7 +2738,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1w, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1v, [
           vue.createElementVNode("span", {
             class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "font-icon first"]),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => !isFirstSet.value && goToPage(1), ["prevent"]))
@@ -2767,7 +2767,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1v = { class: "bs-calendar bs-layout-vertical-inline" };
+  const _hoisted_1$1u = { class: "bs-calendar bs-layout-vertical-inline" };
   const _hoisted_2$19 = { class: "bs-layout-horizontal justify-content-between align-items-center gap-8" };
   const _hoisted_3$I = { class: "year-month bs-layout-horizontal gap-4" };
   const _hoisted_4$t = { class: "timezone" };
@@ -2957,7 +2957,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1v, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1u, [
           vue.createElementVNode("div", _hoisted_2$19, [
             vue.createElementVNode("div", _hoisted_3$I, [
               vue.createVNode(BSButton, {
@@ -3014,7 +3014,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               }), 128))
             ])
           ], 2),
-          _ctx.resolution === "HOUR" || _ctx.resolution === "MINUTE_10" || _ctx.resolution === "MINUTE" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [
+          ["HOUR", "MINUTE_10", "MINUTE", "SECOND"].includes(_ctx.resolution) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$5, [
             vue.createElementVNode("div", _hoisted_8$3, [
               vue.createVNode(_sfc_main$1W, {
                 disabled: _ctx.disabled,
@@ -3049,7 +3049,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1u = { class: "bs-calendar-range bs-layout-horizontal" };
+  const _hoisted_1$1t = { class: "bs-calendar-range bs-layout-horizontal" };
   const _hoisted_2$18 = { class: "bs-layout-vertical" };
   const _hoisted_3$H = { class: "bs-layout-horizontal align-items-center" };
   const _hoisted_4$s = {
@@ -3097,7 +3097,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
       const displayTimeZones = vue.computed(() => [actualTimeZone.value, ...blueseaConfig.getValidDisplayTimeZones()]);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1u, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1t, [
           vue.createElementVNode("div", _hoisted_2$18, [
             vue.createElementVNode("div", _hoisted_3$H, [
               vue.createVNode(_sfc_main$1L, {
@@ -3155,7 +3155,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1t = {
+  const _hoisted_1$1s = {
     key: 0,
     class: "view-mode"
   };
@@ -3278,7 +3278,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           class: vue.normalizeClass([{ required: _ctx.required, disabled: _ctx.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-number-input"]),
           style: vue.normalizeStyle({ width: _ctx.width })
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1t, [
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1s, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(componentUtil).toMultiLangTextArray(_ctx.prefix), (text) => {
               return vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
                 key: JSON.stringify(text),
@@ -3344,7 +3344,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1s = {
+  const _hoisted_1$1r = {
     key: 0,
     class: "view-mode"
   };
@@ -3476,7 +3476,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           class: vue.normalizeClass([{ required: _ctx.required, disabled: _ctx.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-price-input"]),
           style: vue.normalizeStyle({ width: _ctx.width })
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1s, [
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1r, [
             vue.createElementVNode("span", {
               class: "price mr-4",
               textContent: vue.toDisplayString(_ctx.formatInViewMode ? formattedStringValue.value : vue.unref(stringValue))
@@ -3701,7 +3701,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     yellow: "#FFFF00",
     yellowgreen: "#9ACD32"
   };
-  const _hoisted_1$1r = {
+  const _hoisted_1$1q = {
     key: 0,
     class: "bs-layout-horizontal gap-4 align-items-center view-mode"
   };
@@ -3802,7 +3802,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass([{ required: _ctx.required, disabled: _ctx.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-color-input bs-layout-vertical-inline"])
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1r, [
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1q, [
             vue.createElementVNode("span", {
               style: vue.normalizeStyle({ "background-color": vue.unref(stringValue) }),
               class: "color-preview"
@@ -3848,6 +3848,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const dateInputFormatByResolution = (resolution) => {
     if (resolution === "DAY") return "YYYYMMDD";
     else if (resolution === "HOUR") return "YYYYMMDDHH";
+    else if (resolution === "SECOND") return "YYYYMMDDHHmmss";
     else return "YYYYMMDDHHmm";
   };
   const convertInputToDateString = (str, inputFormat, endTime, resolution, inputTimeZone, minDateValue, maxDateValue) => {
@@ -3899,7 +3900,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const normalizeDateInput = (value) => {
     return value.replace(/[^\d-]/g, "");
   };
-  const _hoisted_1$1q = { class: "bs-layout-vertical px-16 py-8" };
+  const _hoisted_1$1p = { class: "bs-layout-vertical px-16 py-8" };
   const _hoisted_2$14 = { class: "bs-layout-horizontal justify-content-center align-items-center gap-8 mt-8 mb-8" };
   const _sfc_main$1G = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateInputPopup",
@@ -3938,7 +3939,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$1q, [
+            vue.createElementVNode("div", _hoisted_1$1p, [
               vue.createVNode(_sfc_main$1L, {
                 modelValue: date.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date.value = $event),
@@ -3969,7 +3970,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1p = {
+  const _hoisted_1$1o = {
     key: 0,
     class: "view-mode"
   };
@@ -4034,6 +4035,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         );
         return formatUtil.formatDateString(date, props.displayFormat, displayTimeZone);
       };
+      const viewModeValue = vue.computed(() => viewModeTimeZoneValue(actualTimeZone.value));
+      const viewModeTimeZoneValue = (displayTimeZone) => {
+        const date = convertInputToDateString(
+          props.modelValue,
+          "SECOND",
+          props.endTime,
+          "SECOND",
+          actualTimeZone.value,
+          props.minDateValue,
+          props.maxDateValue
+        );
+        return formatUtil.formatDateString(date, props.displayFormat, displayTimeZone);
+      };
       const maxlength = vue.computed(() => inputFormat.value.length);
       const rootRef = vue.useTemplateRef("root");
       const field = vue.ref();
@@ -4130,8 +4144,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           style: vue.normalizeStyle({ width: _ctx.width }),
           onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1p, [
-            vue.createElementVNode("span", null, vue.toDisplayString(formattedValue.value), 1)
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1o, [
+            vue.createElementVNode("span", null, vue.toDisplayString(viewModeValue.value), 1)
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$13, [
             vue.createElementVNode("span", {
               class: vue.normalizeClass([{ "bs-clickable": !_ctx.disabled }, "font-icon"]),
@@ -4195,7 +4209,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1o = { class: "bs-layout-vertical px-16 py-8" };
+  const _hoisted_1$1n = { class: "bs-layout-vertical px-16 py-8" };
   const _hoisted_2$12 = { class: "bs-layout-horizontal justify-content-end align-items-center gap-8 mt-16 mb-8" };
   const _sfc_main$1E = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateRangeInputPopup",
@@ -4235,7 +4249,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$1o, [
+            vue.createElementVNode("div", _hoisted_1$1n, [
               vue.createVNode(_sfc_main$1K, {
                 from: fromValue.value,
                 "onUpdate:from": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -4270,7 +4284,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1n = {
+  const _hoisted_1$1m = {
     key: 0,
     class: "view-mode"
   };
@@ -4324,7 +4338,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const emit = __emit;
       const rootRef = vue.useTemplateRef("root");
       const formattedDateRange = vue.computed(() => {
-        return `${formattedFrom.value} ~ ${formattedTo.value}`;
+        return `${viewModeFrom.value} ~ ${viewModeTo.value}`;
       });
       const actualTimeZone = vue.computed(() => props.timeZone || blueseaConfig.timeZone);
       const inputFormat = vue.computed(() => dateInputFormatByResolution(props.resolution));
@@ -4350,11 +4364,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const focusedTo = vue.ref(false);
       const formattedFrom = vue.computed(() => formattedTimeZoneFrom(actualTimeZone.value));
       const formattedTimeZoneFrom = (timeZone) => {
+        const resolution = props.resolution === "MINUTE_10" ? "MINUTE" : props.resolution;
         const date = convertInputToDateString(
           stringValueFrom.value,
           inputFormat.value,
           false,
-          props.resolution,
+          resolution,
           actualTimeZone.value,
           props.minDateValue,
           props.maxDateValue
@@ -4374,6 +4389,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         );
         return formatUtil.formatDateString(date, props.displayFormat, timeZone);
       };
+      const viewModeFrom = vue.computed(() => viewModeTimeZoneValue(props.fromValue, false, actualTimeZone.value));
+      const viewModeTo = vue.computed(() => viewModeTimeZoneValue(props.toValue, true, actualTimeZone.value));
+      const viewModeTimeZoneValue = (value, endTime, displayTimeZone) => {
+        const date = convertInputToDateString(
+          value,
+          "SECOND",
+          endTime,
+          "SECOND",
+          actualTimeZone.value,
+          props.minDateValue,
+          props.maxDateValue
+        );
+        return formatUtil.formatDateString(date, props.displayFormat, displayTimeZone);
+      };
       const maxlength = vue.computed(() => inputFormat.value.length);
       const disabled = vue.computed(() => props.disabledFrom && props.disabledTo);
       const fieldFrom = vue.ref();
@@ -4563,7 +4592,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           style: vue.normalizeStyle({ width: _ctx.width }),
           onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
         }, [
-          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1n, [
+          _ctx.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1m, [
             vue.createElementVNode("span", null, vue.toDisplayString(formattedDateRange.value), 1)
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$11, [
             vue.createElementVNode("span", {
@@ -4717,7 +4746,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const today = dayjs().tz(timeZone);
     return from ? today.add(-years, "year").startOf("year") : today.add(-years, "year").endOf("year");
   };
-  const _hoisted_1$1m = ["id", "checked", "disabled", "name", "tabindex"];
+  const _hoisted_1$1l = ["id", "checked", "disabled", "name", "tabindex"];
   const _hoisted_2$10 = ["for"];
   const _hoisted_3$B = {
     key: 0,
@@ -4771,7 +4800,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "",
             role: "radio",
             type: "radio"
-          }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_1$1m),
+          }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_1$1l),
           vue.createElementVNode("label", { for: _ctx.id }, [
             _ctx.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$B, vue.toDisplayString(_ctx.icon), 1)) : vue.createCommentVNode("", true),
             _ctx.label ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_4$o, null, 512)), [
@@ -4789,7 +4818,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1l = ["data-name"];
+  const _hoisted_1$1k = ["data-name"];
   const _hoisted_2$$ = { key: 0 };
   const _sfc_main$1B = /* @__PURE__ */ vue.defineComponent({
     __name: "BSRadioButtonGroup",
@@ -4899,7 +4928,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             errors: vue.unref(errors),
             "hide-error-message": _ctx.hideErrorMessage
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
-        ], 10, _hoisted_1$1l);
+        ], 10, _hoisted_1$1k);
       };
     }
   });
@@ -4957,7 +4986,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1k = ["id", "checked", "disabled", "name", "tabindex"];
+  const _hoisted_1$1j = ["id", "checked", "disabled", "name", "tabindex"];
   const _hoisted_2$_ = ["for"];
   const _hoisted_3$A = ["for"];
   const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
@@ -5016,7 +5045,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             tabindex: _ctx.tabindex,
             class: "",
             type: "checkbox"
-          }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_1$1k),
+          }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_1$1j),
           _ctx.label ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             for: _ctx.id,
@@ -5035,7 +5064,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1j = ["data-name"];
+  const _hoisted_1$1i = ["data-name"];
   const _hoisted_2$Z = { class: "items" };
   const _hoisted_3$z = ["textContent"];
   const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
@@ -5161,7 +5190,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             errors: vue.unref(errors),
             "hide-error-message": _ctx.hideErrorMessage
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
-        ], 10, _hoisted_1$1j);
+        ], 10, _hoisted_1$1i);
       };
     }
   });
@@ -5211,7 +5240,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1i = ["tabindex", "onKeydown"];
+  const _hoisted_1$1h = ["tabindex", "onKeydown"];
   const _hoisted_2$Y = { key: 0 };
   const _hoisted_3$y = {
     key: 0,
@@ -5413,7 +5442,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             errors: vue.unref(errors),
             "hide-error-message": _ctx.hideErrorMessage
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
-        ], 42, _hoisted_1$1i)), [
+        ], 42, _hoisted_1$1h)), [
           [vue.unref(vClickOutside), () => togglePopup(false)]
         ]);
       };
@@ -5574,7 +5603,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
   };
-  const _hoisted_1$1h = { class: "bs-tree-row" };
+  const _hoisted_1$1g = { class: "bs-tree-row" };
   const _hoisted_2$X = ["textContent"];
   const _hoisted_3$x = {
     key: 1,
@@ -5680,7 +5709,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
       return (_ctx, _cache) => {
         const _component_BSTreeRow = vue.resolveComponent("BSTreeRow", true);
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1g, [
           vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             ref: "row-caption",
             class: vue.normalizeClass([{ disabled: _ctx.disabledProvider && _ctx.disabledProvider(_ctx.row) }, "row-caption"])
@@ -5746,7 +5775,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$1g = { class: "tree-wrap pb-80" };
   const _sfc_main$1u = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTree",
     props: {
@@ -5763,7 +5791,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       multiSelect: { type: Boolean },
       showCheckbox: { type: Boolean },
       rowDisabledProvider: {},
-      contextMenuProvider: {}
+      contextMenuProvider: {},
+      bottomPadding: { default: "80px" }
     },
     emits: ["update:expandedRows", "before:selectedRows", "update:selectedRows", "rowMoved"],
     setup(__props, { emit: __emit }) {
@@ -5878,7 +5907,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           class: "bs-tree",
           onContextmenu: showOutsideContextMenu
         }, [
-          vue.createElementVNode("div", _hoisted_1$1g, [
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle({ "padding-bottom": _ctx.bottomPadding }),
+            class: "tree-wrap"
+          }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$1v, {
                 key: _ctx.keyProvider(item),
@@ -5900,7 +5932,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 onSelectRow: selectRow
               }, null, 8, ["children-provider", "disabled-provider", "enable-drag-and-drop", "icon-provider", "key-provider", "label-provider", "multi-select", "row", "show-checkbox", "show-move-button", "siblings"]);
             }), 128))
-          ])
+          ], 4)
         ], 32);
       };
     }
@@ -6562,7 +6594,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               }, ["stop"]))
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$1u, vue.mergeProps(vue.unref(treeHandler).tree, vue.toHandlers(vue.unref(treeHandler).treeEventListener)), null, 16)
+                vue.createVNode(_sfc_main$1u, vue.mergeProps({ "bottom-padding": "0" }, vue.unref(treeHandler).tree, vue.toHandlers(vue.unref(treeHandler).treeEventListener)), null, 16)
               ]),
               _: 1
             }, 8, ["base-element", "max-height", "popup-align", "popup-direction"])) : vue.createCommentVNode("", true),
@@ -6753,6 +6785,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_sfc_main$1u, vue.mergeProps({
+                  "bottom-padding": "0",
                   "multi-select": "",
                   "show-checkbox": ""
                 }, vue.unref(treeHandler).tree, vue.toHandlers(vue.unref(treeHandler).treeEventListener), {

package/dist/component/tree/BSTree.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: <T>(__VLS_props: {
     readonly "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;
     dontChangeDataWhenRowMoved?: boolean | undefined;
     rowDisabledProvider?: ((item: T) => boolean) | undefined;
+    bottomPadding?: string | undefined;
 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
     slots: {};
@@ -50,6 +51,7 @@ declare const _default: <T>(__VLS_props: {
         readonly "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;
         dontChangeDataWhenRowMoved?: boolean | undefined;
         rowDisabledProvider?: ((item: T) => boolean) | undefined;
+        bottomPadding?: string | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -83,6 +85,7 @@ declare const _default: <T>(__VLS_props: {
             readonly "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;
             dontChangeDataWhenRowMoved?: boolean | undefined;
             rowDisabledProvider?: ((item: T) => boolean) | undefined;
+            bottomPadding?: string | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;