fds-vue-core 4.4.1 → 4.4.4

package/dist/fds-vue-core.cjs.js

@@ -1332,6 +1332,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     state: { default: void 0 },
     icon: { default: void 0 },
     iconPos: { default: "left" },
+    iconSize: { default: 24 },
     size: {},
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
@@ -1410,8 +1411,8 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(_sfc_main$D, {
                 class: vue.normalizeClass(iconFillClass2.value),
                 name: __props.icon,
-                size: 24
-              }, null, 8, ["class", "name"])
+                size: __props.iconSize
+              }, null, 8, ["class", "name", "size"])
             ], 2)) : vue.createCommentVNode("", true),
             vue.createElementVNode("span", _hoisted_2$f, vue.toDisplayString(__props.text), 1)
           ]),
@@ -4256,6 +4257,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     state: { default: void 0 },
     icon: { default: void 0 },
     iconPos: { default: "left" },
+    iconSize: { default: 24 },
     size: { default: "md" },
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
@@ -4333,8 +4335,8 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(_sfc_main$D, {
                 class: vue.normalizeClass(iconFillClass$1),
                 name: __props.icon,
-                size: 24
-              }, null, 8, ["name"])
+                size: __props.iconSize
+              }, null, 8, ["name", "size"])
             ], 2)) : vue.createCommentVNode("", true),
             __props.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$e, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
           ]),
@@ -4362,6 +4364,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     state: { default: void 0 },
     icon: { default: void 0 },
     iconPos: { default: "left" },
+    iconSize: { default: 24 },
     size: { default: "md" },
     textSelection: { type: Boolean, default: false },
     as: { default: "button" },
@@ -4440,8 +4443,8 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(_sfc_main$D, {
                 class: vue.normalizeClass(iconFillClass),
                 name: __props.icon,
-                size: 24
-              }, null, 8, ["name"])
+                size: __props.iconSize
+              }, null, 8, ["name", "size"])
             ], 2)) : vue.createCommentVNode("", true),
             __props.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d, vue.toDisplayString(__props.text), 1)) : vue.createCommentVNode("", true)
           ]),
@@ -4580,6 +4583,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
 });
 const MIN_WIDTH = 288;
 const MIN_HEIGHT = 200;
+const getStorageKey = (key) => `fds-modal-${key}`;
 function useModalDragResize(options) {
   const isDragging = vue.ref(false);
   const isResizing = vue.ref(false);
@@ -4592,6 +4596,36 @@ function useModalDragResize(options) {
   const resizeStart = vue.ref({ x: 0, y: 0, width: 0, height: 0, left: 0, top: 0 });
   const lastInteractionEnd = vue.ref(0);
   const isCustomPositioned = vue.computed(() => hasBeenDragged.value || hasBeenResized.value);
+  const canPersist = () => (options.movable.value || options.resizable.value) && !!options.heading.value && typeof window !== "undefined";
+  const save = () => {
+    if (!canPersist()) return;
+    const data = {};
+    if (modalPosition.value) data.position = modalPosition.value;
+    if (modalSize.value) data.size = modalSize.value;
+    try {
+      window.localStorage.setItem(getStorageKey(options.heading.value), JSON.stringify(data));
+    } catch {
+    }
+  };
+  const restore = () => {
+    if (!canPersist()) return false;
+    try {
+      const raw = window.localStorage.getItem(getStorageKey(options.heading.value));
+      if (!raw) return false;
+      const data = JSON.parse(raw);
+      if (data.position) {
+        modalPosition.value = data.position;
+        hasBeenDragged.value = true;
+      }
+      if (data.size) {
+        modalSize.value = data.size;
+        hasBeenResized.value = true;
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  };
   const style = vue.computed(() => {
     if (!isCustomPositioned.value) return void 0;
     const s = {};
@@ -4647,6 +4681,7 @@ function useModalDragResize(options) {
     document.removeEventListener("selectstart", preventSelection);
     document.removeEventListener("mousemove", onDragMove);
     document.removeEventListener("mouseup", onDragEnd);
+    save();
   };
   const onResizeStart = (e, direction) => {
     if (!options.resizable.value) return;
@@ -4700,6 +4735,7 @@ function useModalDragResize(options) {
     document.removeEventListener("selectstart", preventSelection);
     document.removeEventListener("mousemove", onResizeMove);
     document.removeEventListener("mouseup", onResizeEnd);
+    save();
   };
   const reset = () => {
     hasBeenDragged.value = false;
@@ -4723,6 +4759,7 @@ function useModalDragResize(options) {
     onDragStart,
     onResizeStart,
     reset,
+    restore,
     cleanup,
     shouldBlockBackdropClick
   };
@@ -4762,17 +4799,20 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       onDragStart,
       onResizeStart,
       reset: resetDragResize,
+      restore: restoreDragResize,
       cleanup: cleanupDragResize,
       shouldBlockBackdropClick
     } = useModalDragResize({
       movable: vue.computed(() => props.movable),
       resizable: vue.computed(() => props.resizable),
-      elementRef: modalInnerRef
+      elementRef: modalInnerRef,
+      heading: vue.computed(() => props.heading)
     });
     const modalOuterClasses = vue.computed(() => ["fixed top-0 left-0 w-full h-full overflow-auto z-100"]);
     const modalInnerClasses = vue.computed(() => {
       const base = [
-        "bg-white rounded-lg overflow-auto z-[99999] shadow-lg px-6 pt-6.5",
+        "bg-white rounded-lg z-[99999] shadow-lg px-6 pt-6.5",
+        props.resizable ? "overflow-hidden flex flex-col" : "overflow-auto",
         props.stickyFooter ? "pb-0" : "pb-8"
       ];
       if (isCustomPositioned.value) {
@@ -4885,6 +4925,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         isOpen.value = newValue;
         if (newValue) {
           previouslyFocusedElement.value = document.activeElement;
+          restoreDragResize();
           if (props.lockScroll) {
             setHtmlOverflow("hidden");
           }
@@ -4909,6 +4950,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       document.addEventListener("keydown", handleKeyDown, true);
       if (props.open) {
         previouslyFocusedElement.value = document.activeElement;
+        restoreDragResize();
         if (props.lockScroll) {
           setHtmlOverflow("hidden");
         }
@@ -4951,36 +4993,40 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             onMousedown: _cache[10] || (_cache[10] = //@ts-ignore
             (...args) => vue.unref(onDragStart) && vue.unref(onDragStart)(...args))
           }), [
-            vue.createElementVNode("div", _hoisted_1$d, [
-              vue.createElementVNode("h3", {
-                tabindex: "-1",
-                class: vue.normalizeClass(headerTitleClasses.value)
-              }, [
-                iconName.value ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(__props.resizable ? "overflow-auto flex-1 min-h-0" : "")
+            }, [
+              vue.createElementVNode("div", _hoisted_1$d, [
+                vue.createElementVNode("h3", {
+                  tabindex: "-1",
+                  class: vue.normalizeClass(headerTitleClasses.value)
+                }, [
+                  iconName.value ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
+                    key: 0,
+                    name: iconName.value,
+                    size: 24,
+                    class: vue.normalizeClass(iconClasses.value)
+                  }, null, 8, ["name", "class"])) : vue.createCommentVNode("", true),
+                  vue.createTextVNode(" " + vue.toDisplayString(__props.heading), 1)
+                ], 2),
+                !__props.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$C, vue.mergeProps({
                   key: 0,
-                  name: iconName.value,
-                  size: 24,
-                  class: vue.normalizeClass(iconClasses.value)
-                }, null, 8, ["name", "class"])) : vue.createCommentVNode("", true),
-                vue.createTextVNode(" " + vue.toDisplayString(__props.heading), 1)
-              ], 2),
-              !__props.strict ? (vue.openBlock(), vue.createBlock(_sfc_main$C, vue.mergeProps({
+                  icon: "cross",
+                  size: 28,
+                  onClick: _cache[0] || (_cache[0] = ($event) => handleClose())
+                }, { "aria-label": closeLabel.value }, { class: "ml-4" }), null, 16)) : vue.createCommentVNode("", true)
+              ]),
+              vue.createElementVNode("div", _hoisted_2$c, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ]),
+              vue.unref(hasFooterSlot) ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
-                icon: "cross",
-                size: 28,
-                onClick: _cache[0] || (_cache[0] = ($event) => handleClose())
-              }, { "aria-label": closeLabel.value }, { class: "ml-4" }), null, 16)) : vue.createCommentVNode("", true)
-            ]),
-            vue.createElementVNode("div", _hoisted_2$c, [
-              vue.renderSlot(_ctx.$slots, "default")
-            ]),
-            vue.unref(hasFooterSlot) ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(footerClasses.value)
-            }, [
-              vue.renderSlot(_ctx.$slots, "modal-footer")
-            ], 2)) : vue.createCommentVNode("", true),
-            __props.resizable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                class: vue.normalizeClass(footerClasses.value)
+              }, [
+                vue.renderSlot(_ctx.$slots, "modal-footer")
+              ], 2)) : vue.createCommentVNode("", true)
+            ], 2),
+            __props.resizable ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.createElementVNode("div", {
                 class: "absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-100000",
                 onMousedown: _cache[1] || (_cache[1] = ($event) => vue.unref(onResizeStart)($event, "n"))
@@ -8362,7 +8408,8 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       return {};
     });
     const rightIconsContainerClasses = vue.computed(() => [
-      "absolute flex gap-2 right-4 top-1/2 -translate-y-1/2 flex items-center justify-end"
+      "absolute flex gap-2 top-1/2 -translate-y-1/2 items-center justify-end",
+      showClearButton.value ? "right-2" : "right-3"
     ]);
     const internalValue = vue.computed({
       get: () => modelValue.value !== void 0 ? modelValue.value : props.value ?? "",
@@ -8526,7 +8573,10 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
                 showClearButton.value ? (vue.openBlock(), vue.createBlock(_sfc_main$C, vue.mergeProps({
                   key: 3,
                   icon: "cross"
-                }, { "aria-label": clearButtonLabel.value }, { onClick: onClear }), null, 16)) : vue.createCommentVNode("", true),
+                }, { "aria-label": clearButtonLabel.value }, {
+                  onClick: onClear,
+                  size: 30
+                }), null, 16)) : vue.createCommentVNode("", true),
                 showPasswordToggle.value ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                   key: 4,
                   icon: showPassword.value ? "viewOff" : "viewOn",