fds-vue-core 4.0.1 → 4.1.0

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

@@ -546,7 +546,7 @@ const icons = {
       </defs>
     </svg>`
 };
-const _hoisted_1$p = ["innerHTML"];
+const _hoisted_1$q = ["innerHTML"];
 const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsIcon",
   props: {
@@ -580,7 +580,7 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
         class: "flex items-center justify-center align-middle",
         style: { width: pixelSize.value, height: pixelSize.value }
-      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$p);
+      }, rootAttrs.value, { innerHTML: svgHtml.value }), null, 16, _hoisted_1$q);
     };
   }
 });
@@ -644,7 +644,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$o = { class: "flex items-start gap-2" };
+const _hoisted_1$p = { class: "flex items-start gap-2" };
 const _hoisted_2$j = { class: "h-7 flex items-center" };
 const _hoisted_3$c = { class: "leading-7" };
 const _hoisted_4$b = { class: "relative h-7" };
@@ -708,7 +708,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
               key: 0,
               class: vue.normalizeClass(["font-bold w-full justify-between items-start flex gap-2", { "mb-2": (isExpanded.value || !__props.collapsable) && vue.unref(hasSlot) }])
             }, [
-              vue.createElementVNode("div", _hoisted_1$o, [
+              vue.createElementVNode("div", _hoisted_1$p, [
                 vue.createElementVNode("div", _hoisted_2$j, [
                   vue.createVNode(_sfc_main$y, {
                     name: "alert",
@@ -748,7 +748,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$n = ["id"];
+const _hoisted_1$o = ["id"];
 const _hoisted_2$i = {
   key: 0,
   class: "flex items-start justify-between gap-4 mb-4"
@@ -813,7 +813,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", _hoisted_5$9, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
-      ], 16, _hoisted_1$n);
+      ], 16, _hoisted_1$o);
     };
   }
 });
@@ -865,7 +865,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "leading-6 w-full flex justify-between gap-4" };
+const _hoisted_1$n = { class: "leading-6 w-full flex justify-between gap-4" };
 const _hoisted_2$h = {
   key: 0,
   class: "flex items-center mr-4"
@@ -947,7 +947,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("span", {
             class: vue.normalizeClass(buttonRowClasses.value)
           }, [
-            vue.createElementVNode("span", _hoisted_1$m, [
+            vue.createElementVNode("span", _hoisted_1$n, [
               vue.createElementVNode("span", {
                 class: vue.normalizeClass({ "inline-flex items-start": __props.preIcon })
               }, [
@@ -998,7 +998,7 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$l = ["id"];
+const _hoisted_1$m = ["id"];
 const _hoisted_2$g = {
   key: 0,
   class: "flex items-start gap-4"
@@ -1098,11 +1098,11 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ]))
-      ], 16, _hoisted_1$l);
+      ], 16, _hoisted_1$m);
     };
   }
 });
-const _hoisted_1$k = { class: "mb-0-last-child" };
+const _hoisted_1$l = { class: "mb-0-last-child" };
 const _hoisted_2$f = {
   key: 0,
   class: "flex items-end"
@@ -1215,7 +1215,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(slotWrapperClasses.value)
               }, [
-                vue.createElementVNode("div", _hoisted_1$k, [
+                vue.createElementVNode("div", _hoisted_1$l, [
                   vue.renderSlot(_ctx.$slots, "default")
                 ]),
                 vue.unref(hasStickerSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
@@ -1236,7 +1236,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$j = ["aria-label"];
+const _hoisted_1$k = ["aria-label"];
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSpinner",
   props: {
@@ -1317,11 +1317,11 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           class: vue.normalizeClass(__props.labelPosition === "bottom" ? "font-bold" : "")
         }, vue.toDisplayString(__props.label), 3)) : vue.createCommentVNode("", true)
-      ], 16, _hoisted_1$j);
+      ], 16, _hoisted_1$k);
     };
   }
 });
-const _hoisted_1$i = ["aria-disabled"];
+const _hoisted_1$j = ["aria-disabled"];
 const _hoisted_2$e = { class: "pt-0.5" };
 const elBase$2 = "box-border appearance-none inline-flex items-start justify-center w-fit shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
@@ -1423,11 +1423,11 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "target", "rel", "data-testid", "class"]))
-      ], 10, _hoisted_1$i);
+      ], 10, _hoisted_1$j);
     };
   }
 });
-const _hoisted_1$h = {
+const _hoisted_1$i = {
   key: 0,
   class: "flex items-center gap-2 h-7"
 };
@@ -1493,7 +1493,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return isCopied.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+      return isCopied.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
         vue.createVNode(_sfc_main$y, { name: "bigSuccess" }),
         vue.createElementVNode("span", null, vue.toDisplayString(props.copiedText), 1)
       ])) : (vue.openBlock(), vue.createBlock(_sfc_main$p, {
@@ -4131,7 +4131,7 @@ function useDownload() {
     isDownloading
   };
 }
-const _hoisted_1$g = ["disabled", "aria-disabled"];
+const _hoisted_1$h = ["disabled", "aria-disabled"];
 const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsButtonDownload",
   props: {
@@ -4240,11 +4240,11 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["class"])
         ], 2),
         vue.createTextVNode(" " + vue.toDisplayString(__props.text), 1)
-      ], 16, _hoisted_1$g);
+      ], 16, _hoisted_1$h);
     };
   }
 });
-const _hoisted_1$f = ["aria-disabled"];
+const _hoisted_1$g = ["aria-disabled"];
 const _hoisted_2$d = { key: 2 };
 const elBase$1 = "fds-button-primary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses$1 = "bg-red-600 border border-red-700 text-white hover:bg-red-700 active:bg-red-800 active:border-red-800";
@@ -4346,11 +4346,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$f);
+      ], 10, _hoisted_1$g);
     };
   }
 });
-const _hoisted_1$e = ["aria-disabled"];
+const _hoisted_1$f = ["aria-disabled"];
 const _hoisted_2$c = { key: 2 };
 const elBase = "fds-button-secondary box-border appearance-none inline-flex items-center justify-center select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500";
 const variantClasses = "bg-white border-2 border-blue-500 text-blue-600 hover:bg-blue_t-100 hover:border-blue-500 hover:text-blue-600 active:bg-blue_t-200 active:border-blue-500 active:text-blue-600";
@@ -4453,7 +4453,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 16, ["type", "disabled", "data-testid", "class"]))
-      ], 10, _hoisted_1$e);
+      ], 10, _hoisted_1$f);
     };
   }
 });
@@ -4482,7 +4482,46 @@ function useDevMode() {
   }
   return devModeInstance;
 }
-const _hoisted_1$d = { class: "flex justify-between mb-4" };
+const breakpoints = [
+  { key: "2xs", min: 320 },
+  { key: "xs", min: 360 },
+  { key: "sm", min: 480 },
+  { key: "md", min: 588 },
+  { key: "lg", min: 824 },
+  { key: "xl", min: 920 },
+  { key: "2xl", min: 964 },
+  { key: "3xl", min: 1068 },
+  { key: "4xl", min: 1268 },
+  { key: "5xl", min: 1436 }
+];
+function useViewportBreakpoint() {
+  const currentBreakpoint = vue.ref(null);
+  const windowWidth = vue.ref(0);
+  const updateBreakpoint = () => {
+    if (typeof window === "undefined") return;
+    windowWidth.value = window.innerWidth;
+    let activeBreakpoint = null;
+    for (const bp of breakpoints) {
+      if (windowWidth.value >= bp.min) {
+        activeBreakpoint = bp.key;
+      }
+    }
+    currentBreakpoint.value = activeBreakpoint;
+  };
+  vue.onMounted(() => {
+    updateBreakpoint();
+    window.addEventListener("resize", updateBreakpoint);
+  });
+  vue.onUnmounted(() => {
+    window.removeEventListener("resize", updateBreakpoint);
+  });
+  return {
+    currentBreakpoint,
+    windowWidth,
+    breakpoints
+  };
+}
+const _hoisted_1$e = { class: "flex justify-between mb-4" };
 const _hoisted_2$b = { class: "mb-0-last-child" };
 const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsModal",
@@ -4672,7 +4711,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
             }, ["stop"]))
           }), [
-            vue.createElementVNode("div", _hoisted_1$d, [
+            vue.createElementVNode("div", _hoisted_1$e, [
               vue.createElementVNode("h3", {
                 tabindex: "-1",
                 class: vue.normalizeClass(headerTitleClasses.value)
@@ -4855,7 +4894,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "space-y-6" };
+const _hoisted_1$d = { class: "space-y-6" };
 const _hoisted_2$a = {
   key: 0,
   class: "text-sm text-gray-600"
@@ -5078,7 +5117,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         "onUpdate:open": handleOpenChange
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1$c, [
+          vue.createElementVNode("div", _hoisted_1$d, [
             vue.createVNode(_sfc_main$j, { variant: "primary" }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_sfc_main$i, {
@@ -5347,6 +5386,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _hoisted_1$c = ["title"];
 const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsDevMode",
   props: {
@@ -5355,6 +5395,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const { isDevMode, toggleDevMode } = useDevMode();
+    const { currentBreakpoint, windowWidth } = useViewportBreakpoint();
     const hideEnvBanner = vue.ref(false);
     const isStorageModalOpen = vue.ref(false);
     const environmentKey = vue.computed(() => props.environment ?? null);
@@ -5416,6 +5457,11 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           class: vue.normalizeClass(["fixed bottom-0 right-12 font-bold m-6 px-3 py-1 rounded-xl z-50 flex items-center gap-1", envBannerClasses.value])
         }, [
+          vue.unref(currentBreakpoint) ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: "mx-1 px-2 py-1 rounded text-xs font-mono bg-white bg-opacity-20 text-black",
+            title: `${vue.unref(windowWidth)}px`
+          }, vue.toDisplayString(vue.unref(currentBreakpoint)), 9, _hoisted_1$c)) : vue.createCommentVNode("", true),
           vue.createElementVNode("span", null, vue.toDisplayString(environmentText.value), 1),
           vue.createElementVNode("button", {
             onClick: _cache[0] || (_cache[0] = //@ts-ignore
@@ -8737,7 +8783,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       maxlength.value ? "" : "w-full",
       inputPaddingRight.value,
       "focus:outline-2 focus:outline-blue-500 -outline-offset-2 focus:border-transparent",
-      props.disabled ? "text-gray-600 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
+      props.disabled ? "text-gray-800 outline-dashed outline-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white",
       isInvalid.value && "outline-2 outline-red-600",
       props.inputClass
     ]);
@@ -11133,7 +11179,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       "block w-full rounded-md border border-gray-500 px-3 py-2 pr-10 h-12",
       "focus:outline-2 focus:outline-blue-500 focus:border-transparent",
       "appearance-none",
-      disabled.value ? "outline-dashed text-gray-600 outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white cursor-pointer",
+      disabled.value ? "outline-dashed text-gray-800 outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent" : "bg-white cursor-pointer",
       isInvalid.value && !disabled.value && "outline-2 -outline-offset-2 outline-red-600 text-red-600",
       props.inputClass
     ]);
@@ -11268,7 +11314,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     const inputClasses = vue.computed(() => [
       "block w-full rounded-md border border-gray-500 px-3 py-2",
       "focus:outline-2 focus:outline-blue-500 focus:border-transparent",
-      disabled.value ? "text-gray-600 outline-dashed outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50" : "bg-white",
+      disabled.value ? "text-gray-800 outline-dashed outline-2 -outline-offset-2 outline-gray-400 cursor-not-allowed border-transparent bg-gray-50" : "bg-white",
       isInvalid.value && "outline-2 -outline-offset-2 outline-red-600",
       props.inputClass
     ]);
@@ -11689,4 +11735,5 @@ exports.useFileSizeValidation = useFileSizeValidation;
 exports.useFileValidation = useFileValidation;
 exports.useIsPid = useIsPid;
 exports.useTreeState = useTreeState;
+exports.useViewportBreakpoint = useViewportBreakpoint;
 //# sourceMappingURL=fds-vue-core.cjs.js.map