@bagelink/vue 1.2.18 → 1.2.22

package/dist/index.cjs

@@ -633,16 +633,15 @@ function closePopover(state2) {
   state2.showPopover.value = false;
   state2.activeEvent.value = null;
 }
-const _hoisted_1$W = { class: "day-view" };
-const _hoisted_2$H = { class: "day-header" };
-const _hoisted_3$B = { class: "events-column" };
-const _hoisted_4$o = { class: "date-header" };
-const _hoisted_5$n = { class: "time-column" };
-const _hoisted_6$k = { class: "events-column" };
-const _hoisted_7$g = ["onClick"];
-const _hoisted_8$8 = { class: "event-content" };
-const _hoisted_9$7 = { class: "event-title" };
-const _hoisted_10$6 = { class: "event-time" };
+const _hoisted_1$W = { class: "w-100p overflow-hidden m_overflow h-100p grid" };
+const _hoisted_2$H = { class: "border-bottom me-1 txt-center p-05 dayGrid" };
+const _hoisted_3$B = { class: "overflow h-100p pe-05" };
+const _hoisted_4$o = { class: "time-column" };
+const _hoisted_5$n = { class: "events-column" };
+const _hoisted_6$k = ["onClick"];
+const _hoisted_7$g = { class: "event-content" };
+const _hoisted_8$8 = { class: "white-space ellipsis-1" };
+const _hoisted_9$7 = { class: "event-time opacity-8" };
 const slotHeight$1 = 60;
 const slotDuration$1 = 60;
 const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
@@ -784,62 +783,60 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
       const _directive_click_outside = vue.resolveDirective("click-outside");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
         vue.createElementVNode("div", _hoisted_2$H, [
-          _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "time-column" }, [
-            vue.createElementVNode("div", { class: "time-slot" })
-          ], -1)),
-          vue.createElementVNode("div", _hoisted_3$B, [
-            vue.createElementVNode("div", _hoisted_4$o, vue.toDisplayString(vue.unref(formatDate)(_ctx.startDate)), 1)
-          ])
+          _cache[0] || (_cache[0] = vue.createElementVNode("div", null, null, -1)),
+          vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(formatDate)(_ctx.startDate)), 1)
         ]),
-        vue.createElementVNode("div", {
-          class: "time-slots",
-          onMousedown: handleMouseDown
-        }, [
-          vue.createElementVNode("div", _hoisted_5$n, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(timeSlots.value, (slot) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: slot.time,
-                class: "time-slot txt-light txt-12 color-gray",
-                style: vue.normalizeStyle({ height: `${slotHeight$1}px` })
-              }, vue.toDisplayString(slot.time), 5);
-            }), 128))
-          ]),
-          vue.createElementVNode("div", _hoisted_6$k, [
-            isToday.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        vue.createElementVNode("div", _hoisted_3$B, [
+          vue.createElementVNode("div", {
+            class: "time-slots dayGrid border-end relative",
+            onMousedown: handleMouseDown
+          }, [
+            vue.createElementVNode("div", _hoisted_4$o, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(timeSlots.value, (slot) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: slot.time,
+                  class: "time-slot txt-light txt-12 color-gray bg-gray-light border-start",
+                  style: vue.normalizeStyle({ height: `${slotHeight$1}px` })
+                }, vue.toDisplayString(slot.time), 5);
+              }), 128))
+            ]),
+            vue.createElementVNode("div", _hoisted_5$n, [
+              isToday.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: "absolute end w-100p z-2 flex pointer-events-none",
+                style: vue.normalizeStyle({ top: `${currentTimeTop.value}px` })
+              }, _cache[1] || (_cache[1] = [
+                vue.createElementVNode("div", { class: "current-time-dot h-10px aspect-ratio-1 round bg-primary" }, null, -1),
+                vue.createElementVNode("div", { class: "current-time-line w-100p bg-primary" }, null, -1)
+              ]), 4)) : vue.createCommentVNode("", true),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(processedEvents.value, (event) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: event.id,
+                  class: "event absolute radius-05 overflow-hidden pointer transition z-1",
+                  style: vue.normalizeStyle({
+                    top: `${event.top}px`,
+                    height: `${event.height}px`,
+                    backgroundColor: event.color || "var(--bgl-primary)"
+                  }),
+                  onClick: vue.withModifiers(($event) => vue.unref(slots).eventContent ? openPopover$1(event, $event) : emit2("eventClick", event), ["stop"])
+                }, [
+                  vue.createElementVNode("div", _hoisted_7$g, [
+                    vue.createElementVNode("div", _hoisted_8$8, vue.toDisplayString(event.title), 1),
+                    vue.createElementVNode("div", _hoisted_9$7, vue.toDisplayString(vue.unref(formatDate)(new Date(event.start_time))), 1)
+                  ])
+                ], 12, _hoisted_6$k);
+              }), 128))
+            ]),
+            dragState.value.isDragging && dragState.value.start && dragState.value.end ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "current-time-indicator",
-              style: vue.normalizeStyle({ top: `${currentTimeTop.value}px` })
-            }, _cache[1] || (_cache[1] = [
-              vue.createElementVNode("div", { class: "current-time-dot" }, null, -1),
-              vue.createElementVNode("div", { class: "current-time-line" }, null, -1)
-            ]), 4)) : vue.createCommentVNode("", true),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(processedEvents.value, (event) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: event.id,
-                class: "event",
-                style: vue.normalizeStyle({
-                  top: `${event.top}px`,
-                  height: `${event.height}px`,
-                  backgroundColor: event.color || "var(--bgl-primary)"
-                }),
-                onClick: vue.withModifiers(($event) => vue.unref(slots).eventContent ? openPopover$1(event, $event) : emit2("eventClick", event), ["stop"])
-              }, [
-                vue.createElementVNode("div", _hoisted_8$8, [
-                  vue.createElementVNode("div", _hoisted_9$7, vue.toDisplayString(event.title), 1),
-                  vue.createElementVNode("div", _hoisted_10$6, vue.toDisplayString(vue.unref(formatDate)(new Date(event.start_time))), 1)
-                ])
-              ], 12, _hoisted_7$g);
-            }), 128))
-          ]),
-          dragState.value.isDragging && dragState.value.start && dragState.value.end ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "drag-preview",
-            style: vue.normalizeStyle({
-              top: `${Math.min(dragState.value.start.y, dragState.value.end.y)}px`,
-              height: `${Math.abs(dragState.value.end.y - dragState.value.start.y)}px`
-            })
-          }, null, 4)) : vue.createCommentVNode("", true)
-        ], 32),
+              class: "drag-preview absolute bg-primary pointer-events-none",
+              style: vue.normalizeStyle({
+                top: `${Math.min(dragState.value.start.y, dragState.value.end.y)}px`,
+                height: `${Math.abs(dragState.value.end.y - dragState.value.start.y)}px`
+              })
+            }, null, 4)) : vue.createCommentVNode("", true)
+          ], 32)
+        ]),
         showPopover.value && activeEvent.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           ref_key: "popoverRef",
@@ -854,12 +851,13 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
           vue.renderSlot(_ctx.$slots, "eventContent", { event: activeEvent.value }, void 0, true)
         ], 4)), [
           [_directive_click_outside, closePopover$1]
-        ]) : vue.createCommentVNode("", true)
+        ]) : vue.createCommentVNode("", true),
+        _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "border-bottom me-1" }, null, -1))
       ]);
     };
   }
 });
-const DayView = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-fdbceae7"]]);
+const DayView = /* @__PURE__ */ _export_sfc(_sfc_main$14, [["__scopeId", "data-v-8aa8e541"]]);
 const _hoisted_1$V = { class: "month-view" };
 const _hoisted_2$G = { class: "month-header" };
 const _hoisted_3$A = { class: "month-grid" };
@@ -1231,7 +1229,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(timeSlots.value, (slot) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: slot.time,
-                  class: "txt-light txt-12 color-gray flex justify-content-center",
+                  class: "txt-light txt-12 color-gray flex justify-content-center bg-gray-light border-start",
                   style: vue.normalizeStyle({ height: `${slotHeight}px` })
                 }, vue.toDisplayString(slot.time), 5);
               }), 128))
@@ -1306,7 +1304,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-b31e0d33"]]);
+const WeekView = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["__scopeId", "data-v-f774fc40"]]);
 const _hoisted_1$T = { class: "calendar" };
 const _hoisted_2$E = { class: "flex m_block m_pb-1" };
 const _hoisted_3$y = { class: "txt-light my-0" };
@@ -13529,8 +13527,49 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     const computedSchema = vue.computed(
       () => useBglSchema({ schema: props2.schema })
     );
-    const numberOfSteps = vue.computed(() => computedSchema.value.length);
-    const currentStepSchema = vue.computed(() => [computedSchema.value[currentStep.value]]);
+    const filteredSchema = vue.computed(() => {
+      const schema = computedSchema.value;
+      return schema.filter((step, index2) => {
+        if (step.vIf !== void 0 || step["v-if"] !== void 0) {
+          const condition = step.vIf ?? step["v-if"];
+          if (typeof condition === "function") {
+            return condition(void 0, formData.value);
+          }
+          if (typeof condition === "boolean") {
+            return condition;
+          }
+          if (typeof condition === "string") {
+            return !!condition;
+          }
+        }
+        return true;
+      });
+    });
+    const numberOfSteps = vue.computed(() => filteredSchema.value.length);
+    const schemaIndexMap = vue.computed(() => {
+      const map3 = [];
+      computedSchema.value.forEach((step, index2) => {
+        const vIfCondition = step.vIf ?? step["v-if"];
+        let shouldInclude = true;
+        if (vIfCondition !== void 0) {
+          if (typeof vIfCondition === "function") {
+            shouldInclude = vIfCondition(void 0, formData.value);
+          } else if (typeof vIfCondition === "boolean") {
+            shouldInclude = vIfCondition;
+          } else if (typeof vIfCondition === "string") {
+            shouldInclude = !!vIfCondition;
+          }
+        }
+        if (shouldInclude) {
+          map3.push(index2);
+        }
+      });
+      return map3;
+    });
+    const currentStepSchema = vue.computed(() => {
+      const actualIndex = schemaIndexMap.value[currentStep.value];
+      return [computedSchema.value[actualIndex]];
+    });
     const isStepping = vue.ref(false);
     let isSteppingTO;
     const slideDirection = vue.ref(props2.rtl ? "right" : "left");
@@ -13586,6 +13625,11 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
       validatedSteps.value = [];
       currentStep.value = 0;
     }
+    vue.watch(() => formData.value, () => {
+      if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
+        currentStep.value = 0;
+      }
+    }, { deep: true });
     __expose({
       submit: handleSubmit,
       validateForm: reportValidity,
@@ -13700,7 +13744,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BglMultiStepForm = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-f90b1af3"]]);
+const BglMultiStepForm = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-06c34cf2"]]);
 const _hoisted_1$K = {
   key: 0,
   class: "label mb-05"
@@ -14695,17 +14739,15 @@ const _hoisted_8$5 = {
   key: 1,
   class: "month-grid grid gap-05 p-05"
 };
-const _hoisted_9$4 = ["disabled", "onClick"];
-const _hoisted_10$4 = {
+const _hoisted_9$4 = {
   key: 2,
   class: "year-grid grid gap-05 p-0"
 };
-const _hoisted_11$4 = ["disabled", "onClick"];
-const _hoisted_12$3 = {
+const _hoisted_10$4 = {
   key: 0,
   class: "time-picker border-start flex column gap-1 w-120px px-025"
 };
-const _hoisted_13$2 = { class: "flex gap-025" };
+const _hoisted_11$4 = { class: "flex gap-025" };
 const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: {
@@ -14764,7 +14806,15 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
       const currentMonthDays2 = vue.computed(() => {
         const year = currentMonth.value.getFullYear();
         const month = currentMonth.value.getMonth();
-        return time.getCalendarMonthSplitInWeeks(year, month).flat();
+        const weeksInMonth = time.getCalendarMonthSplitInWeeks(year, month);
+        while (weeksInMonth.length < 6) {
+          const lastWeek = weeksInMonth[weeksInMonth.length - 1];
+          const lastDay = lastWeek[lastWeek.length - 1];
+          const nextDay = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() + 1);
+          const nextWeek = time.getCalendarWeekDateObjects(nextDay);
+          weeksInMonth.push(nextWeek);
+        }
+        return weeksInMonth.flat();
       });
       const currentMonthValue2 = vue.computed(() => ({
         month: currentMonth.value.getMonth(),
@@ -14914,12 +14964,14 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
             currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.createVNode(vue.unref(Btn), {
                 flat: "",
+                thin: "",
                 icon: "chevron_left",
                 onClick: vue.unref(previousMonth)
               }, null, 8, ["onClick"]),
               vue.createElementVNode("div", _hoisted_4$f, [
                 vue.createVNode(vue.unref(Btn), {
                   flat: "",
+                  thin: "",
                   class: "month-btn",
                   onClick: _cache[0] || (_cache[0] = ($event) => currentView.value = "months")
                 }, {
@@ -14930,6 +14982,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
                 }),
                 vue.createVNode(vue.unref(Btn), {
                   flat: "",
+                  thin: "",
                   class: "year-btn",
                   onClick: _cache[1] || (_cache[1] = ($event) => currentView.value = "years")
                 }, {
@@ -14941,18 +14994,21 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.createVNode(vue.unref(Btn), {
                 flat: "",
+                thin: "",
                 icon: "chevron_right",
                 onClick: vue.unref(nextMonth)
               }, null, 8, ["onClick"])
             ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createVNode(vue.unref(Btn), {
                 flat: "",
+                thin: "",
                 icon: "chevron_left",
                 onClick: vue.unref(previousYear)
               }, null, 8, ["onClick"]),
               vue.createElementVNode("span", _hoisted_5$f, vue.toDisplayString(vue.unref(currentMonthValue).formatted.year), 1),
               vue.createVNode(vue.unref(Btn), {
                 flat: "",
+                thin: "",
                 icon: "chevron_right",
                 onClick: vue.unref(nextYear)
               }, null, 8, ["onClick"])
@@ -14981,32 +15037,30 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
             }), 128))
           ])) : currentView.value === "months" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(months), (month) => {
-              return vue.openBlock(), vue.createElementBlock("button", {
+              return vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: month.value,
-                class: vue.normalizeClass(["month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none", {
-                  selected: month.value === vue.unref(currentMonthValue).month,
-                  disabled: month.disabled
-                }]),
+                thin: "",
+                flat: month.value !== vue.unref(currentMonthValue).month,
                 disabled: month.disabled,
+                value: month.name,
                 onClick: ($event) => vue.unref(selectMonth)(month.value)
-              }, vue.toDisplayString(month.name), 11, _hoisted_9$4);
+              }, null, 8, ["flat", "disabled", "value", "onClick"]);
             }), 128))
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$4, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$4, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(years), (year) => {
-              return vue.openBlock(), vue.createElementBlock("button", {
+              return vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: year.value,
-                class: vue.normalizeClass(["year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none", {
-                  selected: year.value === vue.unref(currentMonthValue).year,
-                  disabled: year.disabled
-                }]),
+                thin: "",
+                flat: year.value !== vue.unref(currentMonthValue).year,
                 disabled: year.disabled,
+                value: year.value.toString(),
                 onClick: ($event) => vue.unref(selectYear)(year.value)
-              }, vue.toDisplayString(year.value), 11, _hoisted_11$4);
+              }, null, 8, ["flat", "disabled", "value", "onClick"]);
             }), 128))
           ]))
         ]),
-        _ctx.enableTime && currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$3, [
-          vue.createElementVNode("div", _hoisted_13$2, [
+        _ctx.enableTime && currentView.value === "days" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$4, [
+          vue.createElementVNode("div", _hoisted_11$4, [
             vue.createVNode(vue.unref(NumberInput), {
               center: "",
               modelValue: vue.unref(hours),
@@ -15034,7 +15088,7 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-d1e1ff1f"]]);
+const DatePicker = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-9c8816c6"]]);
 const _hoisted_1$E = ["title"];
 const _hoisted_2$s = { key: 0 };
 const _hoisted_3$o = {
@@ -15247,7 +15301,7 @@ const _hoisted_11$3 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_12$2 = {
+const _hoisted_12$3 = {
   key: 1,
   class: "bgl-single-preview"
 };
@@ -15596,7 +15650,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
                 ]);
               }), 128))
             ])) : vue.createCommentVNode("", true),
-            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [
+            !_ctx.multiple && (storageFiles.value.length > 0 || fileQueue.value.length > 0) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$3, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(storageFiles.value, (file) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: file.id,
@@ -27040,7 +27094,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.createElementVNode("label", { for: _ctx.id }, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
-          !_ctx.multiline && !_ctx.autoheight && !_ctx.code ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+          !_ctx.multiline && !_ctx.autoheight && !_ctx.code && inputRows.value < 2 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
             key: 0,
             id: _ctx.id,
             ref_key: "input",
@@ -27104,7 +27158,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-6dfc73c3"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-da1189c6"]]);
 const _hoisted_1$n = ["title"];
 const _hoisted_2$d = ["id", "required"];
 const _hoisted_3$b = ["for"];
@@ -27211,7 +27265,7 @@ const _hoisted_11$2 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_12$1 = {
+const _hoisted_12$2 = {
   key: 1,
   class: "bgl-single-preview"
 };
@@ -27472,7 +27526,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
                   ], 6)
                 ], 2);
               }), 128))
-            ])) : pathKeys.value.length > 0 || fileQueue.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
+            ])) : pathKeys.value.length > 0 || fileQueue.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pathKeys.value, (path_key) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: path_key,
@@ -33498,23 +33552,24 @@ function _sfc_render$2(_ctx, _cache) {
   });
 }
 const RouterWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
-const _hoisted_1$4 = {
+const _hoisted_1$4 = { class: "stickyTop" };
+const _hoisted_2$2 = {
   key: 0,
   class: "row-number-header bg-white"
 };
-const _hoisted_2$2 = { class: "th-content" };
-const _hoisted_3$2 = ["onClick"];
-const _hoisted_4$2 = ["onMousedown"];
-const _hoisted_5$2 = ["onClick"];
-const _hoisted_6$2 = ["tabindex", "onMousedown", "onMouseover", "onFocusin", "onDblclick", "onKeydown"];
-const _hoisted_7$2 = ["value", "onInput"];
-const _hoisted_8$1 = { class: "spreadsheet-cell spreadsheetCellPlaceHolder" };
-const _hoisted_9$1 = {
+const _hoisted_3$2 = { class: "th-content" };
+const _hoisted_4$2 = ["onClick"];
+const _hoisted_5$2 = ["onMousedown"];
+const _hoisted_6$2 = ["onClick"];
+const _hoisted_7$2 = ["tabindex", "onMousedown", "onMouseover", "onFocusin", "onDblclick", "onKeydown"];
+const _hoisted_8$1 = ["value", "onInput"];
+const _hoisted_9$1 = { class: "spreadsheet-cell spreadsheetCellPlaceHolder" };
+const _hoisted_10$1 = {
   key: 0,
   class: "h40px w-100p flex align-items-center justify-content-center overflow-hidden"
 };
-const _hoisted_10$1 = ["src", "alt"];
-const _hoisted_11$1 = {
+const _hoisted_11$1 = ["src", "alt"];
+const _hoisted_12$1 = {
   key: 2,
   class: "spreadsheet-cell"
 };
@@ -33531,7 +33586,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     selectionStart: {},
     selectionEnd: {},
     editingCell: {},
-    baseColumnIndex: {}
+    baseColumnIndex: {},
+    wrapText: { type: Boolean }
   },
   emits: ["sortColumn", "resizeStart", "selectRow", "cellMouseDown", "cellMouseOver", "cellEditStart", "cellKeyDown", "updateCell", "stopEditing", "setInputRef"],
   setup(__props) {
@@ -33586,18 +33642,18 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("table", {
         class: vue.normalizeClass({ "fixed-columns": _ctx.isFixed, "w-100p": !_ctx.isFixed })
       }, [
-        vue.createElementVNode("thead", null, [
+        vue.createElementVNode("thead", _hoisted_1$4, [
           vue.createElementVNode("tr", null, [
-            _ctx.showRowNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_1$4)) : vue.createCommentVNode("", true),
+            _ctx.showRowNumbers ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_2$2)) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
               return vue.openBlock(), vue.createElementBlock("th", {
                 key: col.key,
                 style: vue.normalizeStyle({ width: _ctx.columnWidths.get(col.key) ? `${_ctx.columnWidths.get(col.key)}px` : col.width })
               }, [
-                vue.createElementVNode("div", _hoisted_2$2, [
+                vue.createElementVNode("div", _hoisted_3$2, [
                   vue.createElementVNode("span", {
                     onClick: ($event) => col.sortable && _ctx.$emit("sortColumn", col.key)
-                  }, vue.toDisplayString(col.label || col.key), 9, _hoisted_3$2),
+                  }, vue.toDisplayString(col.label || col.key), 9, _hoisted_4$2),
                   _ctx.sortColumn === col.key ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$s), {
                     key: 0,
                     class: vue.normalizeClass(["line-height-0 transition-400", { "rotate-180": _ctx.sortDirection === "desc" }]),
@@ -33606,7 +33662,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                   vue.createElementVNode("div", {
                     class: "resize-handle",
                     onMousedown: vue.withModifiers(($event) => _ctx.$emit("resizeStart", $event, col.key), ["stop"])
-                  }, null, 40, _hoisted_4$2)
+                  }, null, 40, _hoisted_5$2)
                 ])
               ], 4);
             }), 128))
@@ -33619,13 +33675,14 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                 key: 0,
                 class: "row-number txt-center hover user-select-none pointer txt12 regular",
                 onClick: ($event) => _ctx.$emit("selectRow", rowIndex)
-              }, vue.toDisplayString(rowIndex + 1), 9, _hoisted_5$2)) : vue.createCommentVNode("", true),
+              }, vue.toDisplayString(rowIndex + 1), 9, _hoisted_6$2)) : vue.createCommentVNode("", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col, colIndex) => {
                 return vue.openBlock(), vue.createElementBlock("td", {
                   key: col.key,
                   class: vue.normalizeClass({
-                    selected: isCellSelected(rowIndex, colIndex),
-                    locked: !isCellEditable(col.key)
+                    "selected": isCellSelected(rowIndex, colIndex),
+                    "locked": !isCellEditable(col.key),
+                    "wrap-text": _ctx.wrapText
                   }),
                   style: vue.normalizeStyle({ width: _ctx.columnWidths.get(col.key) ? `${_ctx.columnWidths.get(col.key)}px` : col.width }),
                   tabindex: col.hidden ? void 0 : 0,
@@ -33650,15 +33707,15 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                       ],
                       onMousedown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
                       }, ["stop"]))
-                    }, null, 40, _hoisted_7$2),
-                    vue.createElementVNode("span", _hoisted_8$1, vue.toDisplayString(formatCellValue(row[col.key], col.format)), 1)
+                    }, null, 40, _hoisted_8$1),
+                    vue.createElementVNode("span", _hoisted_9$1, vue.toDisplayString(formatCellValue(row[col.key], col.format)), 1)
                   ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                    col.format === "image" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$1, [
+                    col.format === "image" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
                       vue.createElementVNode("img", {
                         class: "w-100p h-100p contain radius-05",
                         src: row[col.key],
                         alt: col.label || col.key
-                      }, null, 8, _hoisted_10$1)
+                      }, null, 8, _hoisted_11$1)
                     ])) : col.format === "boolean" ? (vue.openBlock(), vue.createBlock(vue.unref(CheckInput), {
                       key: 1,
                       modelValue: !!row[col.key],
@@ -33666,9 +33723,9 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                       "onUpdate:modelValue": (value) => _ctx.$emit("updateCell", rowIndex, col.key, !!value),
                       onMousedown: _cache[4] || (_cache[4] = vue.withModifiers(() => {
                       }, ["stop"]))
-                    }, null, 8, ["modelValue", "disabled", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_11$1, vue.toDisplayString(formatCellValue(row[col.key], col.format)), 1))
+                    }, null, 8, ["modelValue", "disabled", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_12$1, vue.toDisplayString(formatCellValue(row[col.key], col.format)), 1))
                   ], 64))
-                ], 46, _hoisted_6$2);
+                ], 46, _hoisted_7$2);
               }), 128))
             ]);
           }), 128))
@@ -33677,7 +33734,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ad70b6cd"]]);
+const SpreadsheetTable = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-857ccb8b"]]);
 const _hoisted_1$3 = { class: "flex gap-05 py-05 justify-content-end m_flex-wrap" };
 const _hoisted_2$1 = {
   key: 0,
@@ -33687,7 +33744,7 @@ const _hoisted_3$1 = { class: "flex gap-075" };
 const _hoisted_4$1 = { class: "p-05" };
 const _hoisted_5$1 = { class: "flex space-between" };
 const _hoisted_6$1 = { class: "flex w-100p relative" };
-const _hoisted_7$1 = { class: "flex-shrink flex-grow overflow-x" };
+const _hoisted_7$1 = { class: "flex-shrink flex-grow" };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
@@ -33841,6 +33898,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     const isSelecting = vue.ref(false);
     const selectionStart = vue.ref(null);
     const selectionEnd = vue.ref(null);
+    const wrapText = localRef("wrapText", false);
     const editingCell = vue.ref(null);
     const editInputRef = vue.ref(/* @__PURE__ */ new Map());
     function setInputRef(el, key) {
@@ -34156,16 +34214,15 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       return columns.value.filter((col) => !col.hidden);
     });
     return (_ctx, _cache) => {
-      const _directive_tooltip = vue.resolveDirective("tooltip");
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: "w-100p overflow-hidden",
+        class: "w-100p",
         tabindex: "-1",
         onKeydown: handleSpreadsheetKeyDown
       }, [
         vue.createElementVNode("div", _hoisted_1$3, [
           _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$1, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_3$1, [
-            vue.createVNode(_sfc_main$W, {
+            vue.createVNode(vue.unref(_sfc_main$W), {
               flat: "",
               thin: "",
               icon: "view_column"
@@ -34213,44 +34270,42 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
               placeholder: "Search",
               class: "m-0 max-w200px"
             }, null, 8, ["modelValue"]),
-            vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-              flat: "",
-              thin: "",
-              round: "",
-              icon: "paste",
-              onClick: pasteSelection
-            }, null, 512), [
-              [_directive_tooltip, "Paste"]
-            ]),
-            vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-              flat: "",
-              thin: "",
-              round: "",
-              icon: "copy",
-              onClick: copySelection
-            }, null, 512), [
-              [_directive_tooltip, "copy"]
-            ]),
-            vue.withDirectives(vue.createVNode(vue.unref(Btn), {
-              flat: "",
-              thin: "",
-              round: "",
-              icon: "undo",
-              disabled: !canUndo.value,
-              onClick: undo
-            }, null, 8, ["disabled"]), [
-              [_directive_tooltip, "Undo"]
-            ]),
-            vue.withDirectives(vue.createVNode(vue.unref(Btn), {
+            vue.createVNode(vue.unref(_sfc_main$W), {
               flat: "",
               thin: "",
-              round: "",
-              icon: "redo",
-              disabled: !canRedo.value,
-              onClick: redo
-            }, null, 8, ["disabled"]), [
-              [_directive_tooltip, "Redo"]
-            ])
+              icon: "more_vert"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(_sfc_main$h), {
+                  title: "Paste",
+                  icon: "paste",
+                  onClick: pasteSelection
+                }),
+                vue.createVNode(vue.unref(_sfc_main$h), {
+                  title: "copy",
+                  icon: "copy",
+                  onClick: copySelection
+                }),
+                vue.createVNode(vue.unref(_sfc_main$h), {
+                  title: "Undo",
+                  icon: "undo",
+                  disabled: !canUndo.value,
+                  onClick: undo
+                }, null, 8, ["disabled"]),
+                vue.createVNode(vue.unref(_sfc_main$h), {
+                  title: "Redo",
+                  icon: "redo",
+                  disabled: !canRedo.value,
+                  onClick: redo
+                }, null, 8, ["disabled"]),
+                vue.createVNode(vue.unref(ToggleInput), {
+                  modelValue: vue.unref(wrapText),
+                  "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => vue.isRef(wrapText) ? wrapText.value = $event : null),
+                  label: "Wrap Text"
+                }, null, 8, ["modelValue"])
+              ]),
+              _: 1
+            })
           ])
         ]),
         vue.createElementVNode("div", {
@@ -34271,6 +34326,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
               "selection-end": selectionEnd.value,
               "editing-cell": editingCell.value,
               "base-column-index": 0,
+              "wrap-text": vue.unref(wrapText),
               class: "sticky z-2 start-0 bg-white",
               onSortColumn: sortByColumn,
               onResizeStart: handleResizeStart,
@@ -34282,7 +34338,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
               onUpdateCell: updateCell,
               onStopEditing: handleStopEditingAndBlur,
               onSetInputRef: setInputRef
-            }, null, 8, ["columns", "rows", "column-widths", "sort-column", "sort-direction", "selection-start", "selection-end", "editing-cell"])) : vue.createCommentVNode("", true),
+            }, null, 8, ["columns", "rows", "column-widths", "sort-column", "sort-direction", "selection-start", "selection-end", "editing-cell", "wrap-text"])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_7$1, [
               vue.createVNode(SpreadsheetTable, {
                 columns: scrollableColumns.value,
@@ -34296,6 +34352,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                 "selection-end": selectionEnd.value,
                 "editing-cell": editingCell.value,
                 "base-column-index": fixedColumns.value.length,
+                "wrap-text": vue.unref(wrapText),
                 onSortColumn: sortByColumn,
                 onResizeStart: handleResizeStart,
                 onSelectRow: selectEntireRow,
@@ -34306,7 +34363,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                 onUpdateCell: updateCell,
                 onStopEditing: handleStopEditingAndBlur,
                 onSetInputRef: setInputRef
-              }, null, 8, ["columns", "rows", "show-row-numbers", "column-widths", "sort-column", "sort-direction", "selection-start", "selection-end", "editing-cell", "base-column-index"])
+              }, null, 8, ["columns", "rows", "show-row-numbers", "column-widths", "sort-column", "sort-direction", "selection-start", "selection-end", "editing-cell", "base-column-index", "wrap-text"])
             ])
           ]),
           _ctx.allowAddRow ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
@@ -34324,7 +34381,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1e744d43"]]);
+const Index = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-a7d01d6e"]]);
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Title",
   props: {