fds-vue-core 8.0.4 → 8.0.5

package/dist/components/FdsDevMode/FdsDevMode.vue.d.ts

@@ -7,19 +7,38 @@ type __VLS_Props = {
 };
 type __VLS_PublicProps = {
     'toggleChecked'?: Record<string, boolean>;
+    'toggleSelected'?: Record<string, string>;
 } & __VLS_Props;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (payload: {
+        key: string;
+        group: string;
+        value: string;
+    }) => any;
     toggle: (payload: {
         key: string;
         value: boolean;
     }) => any;
+    action: (payload: {
+        key: string;
+    }) => any;
     "update:toggleChecked": (value: Record<string, boolean>) => any;
+    "update:toggleSelected": (value: Record<string, string>) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((payload: {
+        key: string;
+        group: string;
+        value: string;
+    }) => any) | undefined;
     onToggle?: ((payload: {
         key: string;
         value: boolean;
     }) => any) | undefined;
+    onAction?: ((payload: {
+        key: string;
+    }) => any) | undefined;
     "onUpdate:toggleChecked"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:toggleSelected"?: ((value: Record<string, string>) => any) | undefined;
 }>, {
     environment: DevModeEnvironmentKey | null;
     toggles: DevModeToggle[];

package/dist/components/FdsDevMode/FdsDevModeOverlay.vue.d.ts

@@ -5,15 +5,31 @@ type __VLS_Props = {
     toggles?: DevModeOverlayToggle[];
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (payload: {
+        key: string;
+        group: string;
+        value: string;
+    }) => any;
     toggle: (payload: {
         key: string;
         value: boolean;
     }) => any;
+    action: (payload: {
+        key: string;
+    }) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((payload: {
+        key: string;
+        group: string;
+        value: string;
+    }) => any) | undefined;
     onToggle?: ((payload: {
         key: string;
         value: boolean;
     }) => any) | undefined;
+    onAction?: ((payload: {
+        key: string;
+    }) => any) | undefined;
 }>, {
     environment: DevModeEnvironmentKey | null;
     toggles: DevModeOverlayToggle[];

package/dist/components/FdsDevMode/types.d.ts

@@ -1,9 +1,35 @@
-export type DevModeToggle = {
-    /** Unique key – must match key in `toggle-checked`. */
+export type DevModeQuickSettingType = 'check' | 'radio' | 'button';
+type DevModeQuickSettingBase = {
+    /** Unique key for this quick setting. */
     key: string;
     /** fds-vue-core i18n key. Defaults to `FdsDevMode.overlay.toggles.{key}`. */
     labelKey?: string;
 };
+export type DevModeCheckToggle = DevModeQuickSettingBase & {
+    type?: 'check';
+    onToggle?: (value: boolean) => void;
+    onSelect?: never;
+    onAction?: never;
+    group?: never;
+    value?: never;
+};
+export type DevModeRadioToggle = DevModeQuickSettingBase & {
+    type: 'radio';
+    group: string;
+    value: string;
+    onSelect?: (value: string) => void;
+    onToggle?: never;
+    onAction?: never;
+};
+export type DevModeButtonToggle = DevModeQuickSettingBase & {
+    type: 'button';
+    onAction?: () => void;
+    onToggle?: never;
+    onSelect?: never;
+    group?: never;
+    value?: never;
+};
+export type DevModeToggle = DevModeCheckToggle | DevModeRadioToggle | DevModeButtonToggle;
 export type DevModeOverlayToggle = DevModeToggle & {
     checked: boolean;
 };
@@ -11,6 +37,14 @@ export type DevModeToggleEvent = {
     key: string;
     value: boolean;
 };
+export type DevModeSelectEvent = {
+    key: string;
+    group: string;
+    value: string;
+};
+export type DevModeActionEvent = {
+    key: string;
+};
 export type DevModeActionInput = {
     placeholder?: string;
     defaultValue?: string;
@@ -22,3 +56,4 @@ export type DevModeAction = {
     action: (inputValue?: string) => void;
     input?: DevModeActionInput;
 };
+export {};

package/dist/composables/useDevModeToggles.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { DevModeToggle } from '../components/FdsDevMode/types';
+export type DevModeRegisteredToggle = DevModeToggle;
+type DevModeTogglesApi = {
+    toggles: Ref<DevModeRegisteredToggle[]>;
+    toggleChecked: Ref<Record<string, boolean>>;
+    toggleSelected: Ref<Record<string, string>>;
+    register: (toggle: DevModeRegisteredToggle) => void;
+    unregister: (key: string) => void;
+};
+/** Register DevMode quick-setting toggles from anywhere in the consumer app. */
+export declare function useDevModeToggles(): DevModeTogglesApi;
+export {};

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

@@ -852,7 +852,7 @@ const _hoisted_1$z = { class: "flex items-start gap-2" };
 const _hoisted_2$r = { class: "h-7 flex items-center" };
 const _hoisted_3$l = { class: "leading-7" };
 const _hoisted_4$j = { class: "relative h-7" };
-const _hoisted_5$g = {
+const _hoisted_5$h = {
   key: 1,
   class: "fds-block-alert-slot mb-0-last-child"
 };
@@ -943,7 +943,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
                 }), null, 16, ["class"])) : vue.createCommentVNode("", true)
               ])
             ], 2)) : vue.createCommentVNode("", true),
-            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$g, [
+            isExpanded.value || !__props.collapsable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$h, [
               vue.renderSlot(_ctx.$slots, "default")
             ])) : vue.createCommentVNode("", true)
           ])
@@ -959,7 +959,7 @@ const _hoisted_2$q = {
 };
 const _hoisted_3$k = { class: "flex items-center gap-3" };
 const _hoisted_4$i = { class: "flex items-start gap-3 leading-8" };
-const _hoisted_5$f = { class: "mb-0-last-child" };
+const _hoisted_5$g = { class: "mb-0-last-child" };
 const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsBlockContent",
   props: {
@@ -1014,7 +1014,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "headerInfo")
           ])
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_5$f, [
+        vue.createElementVNode("div", _hoisted_5$g, [
           vue.renderSlot(_ctx.$slots, "default")
         ])
       ], 16, _hoisted_1$y);
@@ -1076,11 +1076,11 @@ const _hoisted_2$p = {
 };
 const _hoisted_3$j = { class: "inline-flex items-center" };
 const _hoisted_4$h = { class: "flex items-center gap-2" };
-const _hoisted_5$e = {
+const _hoisted_5$f = {
   key: 0,
   class: "w-full flex mt-2"
 };
-const _hoisted_6$a = ["aria-hidden"];
+const _hoisted_6$b = ["aria-hidden"];
 const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -1188,7 +1188,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
               ])
             ])
           ], 2),
-          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$e, [
+          vue.unref(hasExtraRowSlot) && !isOpen.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$f, [
             vue.renderSlot(_ctx.$slots, "extra-row")
           ])) : vue.createCommentVNode("", true)
         ], 16),
@@ -1197,7 +1197,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
           class: "mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white"
         }, [
           vue.renderSlot(_ctx.$slots, "default")
-        ], 8, _hoisted_6$a), [
+        ], 8, _hoisted_6$b), [
           [vue.vShow, isOpen.value]
         ])
       ], 16);
@@ -1214,8 +1214,8 @@ const _hoisted_4$g = {
   key: 0,
   class: "mb-1"
 };
-const _hoisted_5$d = { class: "flex items-start justify-between gap-4" };
-const _hoisted_6$9 = { class: "m-0 text-base font-main font-bold tracking-wide" };
+const _hoisted_5$e = { class: "flex items-start justify-between gap-4" };
+const _hoisted_6$a = { class: "m-0 text-base font-main font-bold tracking-wide" };
 const _hoisted_7$9 = { class: "flex items-start gap-3" };
 const _hoisted_8$6 = {
   key: 1,
@@ -1269,8 +1269,8 @@ const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, ["name"]),
           vue.createElementVNode("div", _hoisted_3$i, [
             __props.heading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$g, [
-              vue.createElementVNode("header", _hoisted_5$d, [
-                vue.createElementVNode("h3", _hoisted_6$9, vue.toDisplayString(__props.heading), 1),
+              vue.createElementVNode("header", _hoisted_5$e, [
+                vue.createElementVNode("h3", _hoisted_6$a, vue.toDisplayString(__props.heading), 1),
                 vue.createElementVNode("div", _hoisted_7$9, [
                   vue.renderSlot(_ctx.$slots, "headerInfo")
                 ])
@@ -5155,6 +5155,42 @@ function useDevModeEnvironment(environment) {
     isBannerEnvironment
   };
 }
+const getToggleType = (toggle) => toggle.type ?? "check";
+let devModeTogglesInstance = null;
+function createDevModeToggles() {
+  const toggles = vue.ref([]);
+  const toggleChecked = vue.ref({});
+  const toggleSelected = vue.ref({});
+  const register = (toggle) => {
+    if (toggles.value.some((entry) => entry.key === toggle.key)) return;
+    toggles.value = [...toggles.value, toggle];
+    const type = getToggleType(toggle);
+    if (type === "check" && !(toggle.key in toggleChecked.value)) {
+      toggleChecked.value = { ...toggleChecked.value, [toggle.key]: false };
+    }
+    if (toggle.type === "radio" && !(toggle.group in toggleSelected.value)) {
+      toggleSelected.value = { ...toggleSelected.value, [toggle.group]: toggle.value };
+    }
+  };
+  const unregister = (key) => {
+    toggles.value = toggles.value.filter((entry) => entry.key !== key);
+    const { [key]: _removed, ...rest } = toggleChecked.value;
+    toggleChecked.value = rest;
+  };
+  return {
+    toggles,
+    toggleChecked,
+    toggleSelected,
+    register,
+    unregister
+  };
+}
+function useDevModeToggles() {
+  if (!devModeTogglesInstance) {
+    devModeTogglesInstance = createDevModeToggles();
+  }
+  return devModeTogglesInstance;
+}
 const breakpoints = [
   { key: "2xs", min: 320 },
   { key: "xs", min: 360 },
@@ -5683,6 +5719,11 @@ const _hoisted_2$h = {
 };
 const _hoisted_3$h = { class: "flex flex-col gap-2" };
 const _hoisted_4$f = { key: 0 };
+const _hoisted_5$d = {
+  key: 1,
+  class: "flex flex-col gap-1"
+};
+const _hoisted_6$9 = { key: 2 };
 const OVERLAY_OPEN_KEY = "devModeOverlayOpen";
 const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsDevModeOverlay",
@@ -5690,7 +5731,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     environment: { default: null },
     toggles: { default: () => [] }
   },
-  emits: ["toggle"],
+  emits: ["toggle", "select", "action"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -5735,7 +5776,21 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
       return current === candidate;
     };
     const toggleLabelKey = (toggle) => toggle.labelKey ?? `FdsDevMode.overlay.toggles.${toggle.key}`;
-    const hasContent = vue.computed(() => props.toggles.length > 0 || canToggleI18nKeys.value || showLocaleSwitcher.value);
+    const getToggleType2 = (toggle) => toggle.type ?? "check";
+    const isRadioToggle = (toggle) => toggle.type === "radio";
+    const checkToggles = vue.computed(() => props.toggles.filter((toggle) => getToggleType2(toggle) === "check"));
+    const radioToggles = vue.computed(() => props.toggles.filter(isRadioToggle));
+    const buttonToggles = vue.computed(() => props.toggles.filter((toggle) => toggle.type === "button"));
+    const handleRadioChange = (toggle) => {
+      emit("select", {
+        key: toggle.key,
+        group: toggle.group,
+        value: toggle.value
+      });
+    };
+    const hasContent = vue.computed(
+      () => checkToggles.value.length > 0 || radioToggles.value.length > 0 || buttonToggles.value.length > 0 || canToggleI18nKeys.value || showLocaleSwitcher.value
+    );
     return (_ctx, _cache) => {
       return hasContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
         isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
@@ -5752,7 +5807,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                 ]),
                 _: 1
               }, 8, ["checked", "onChange"])) : vue.createCommentVNode("", true),
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.toggles, (toggle) => {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(checkToggles.value, (toggle) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   key: `${toggle.key}-${toggle.checked}`,
                   checked: toggle.checked,
@@ -5766,7 +5821,35 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
                 }, 1032, ["checked", "onChange"]);
               }), 128))
             ]),
-            showLocaleSwitcher.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, [
+            radioToggles.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(radioToggles.value, (toggle) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                  key: `${toggle.key}-${toggle.checked}`,
+                  name: toggle.group,
+                  value: toggle.value,
+                  checked: toggle.checked,
+                  class: "mb-0!",
+                  onChange: ($event) => handleRadioChange(toggle)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(vue.unref(tCore)(toggleLabelKey(toggle))), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["name", "value", "checked", "onChange"]);
+              }), 128))
+            ])) : vue.createCommentVNode("", true),
+            buttonToggles.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$d, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonToggles.value, (toggle) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$D, {
+                  key: toggle.key,
+                  size: "sm",
+                  block: "",
+                  text: vue.unref(tCore)(toggleLabelKey(toggle)),
+                  onClick: ($event) => emit("action", { key: toggle.key })
+                }, null, 8, ["text", "onClick"]);
+              }), 128))
+            ])) : vue.createCommentVNode("", true),
+            showLocaleSwitcher.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$9, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(localeOptions.value, (localeCode) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                   key: localeCode,
@@ -10646,14 +10729,18 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     toggles: { default: () => [] }
   }, {
     "toggleChecked": { default: () => ({}) },
-    "toggleCheckedModifiers": {}
+    "toggleCheckedModifiers": {},
+    "toggleSelected": { default: () => ({}) },
+    "toggleSelectedModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["toggle"], ["update:toggleChecked"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["toggle", "select", "action"], ["update:toggleChecked", "update:toggleSelected"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const toggleChecked = vue.useModel(__props, "toggleChecked");
+    const toggleSelected = vue.useModel(__props, "toggleSelected");
     const emit = __emit;
     const { isDevMode, toggleDevMode } = useDevMode();
+    const { toggles: registeredToggles, toggleChecked: registeredToggleChecked, toggleSelected: registeredToggleSelected } = useDevModeToggles();
     const { t } = useFdsI18n();
     const hideEnvBanner = vue.ref(false);
     const isStorageModalOpen = vue.ref(false);
@@ -10685,12 +10772,75 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       isStorageModalOpen.value = true;
     };
     const devModeButtonText = vue.computed(() => isDevMode.value ? t("FdsDevMode.toggle.on") : t("FdsDevMode.toggle.off"));
+    const propToggles = vue.computed(() => Array.isArray(props.toggles) ? props.toggles : []);
+    const allToggles = vue.computed(() => {
+      const propKeys = new Set(propToggles.value.map((toggle) => toggle.key));
+      const registeredOnly = registeredToggles.value.filter((toggle) => !propKeys.has(toggle.key));
+      return [...propToggles.value, ...registeredOnly];
+    });
+    const mergedToggleChecked = vue.computed(() => ({
+      ...registeredToggleChecked.value,
+      ...toggleChecked.value
+    }));
+    const mergedToggleSelected = vue.computed(() => ({
+      ...registeredToggleSelected.value,
+      ...toggleSelected.value
+    }));
     const overlayToggles = vue.computed(
-      () => props.toggles.map((toggle) => ({
-        ...toggle,
-        checked: toggleChecked.value[toggle.key] ?? false
-      }))
+      () => allToggles.value.map((toggle) => {
+        if (toggle.type === "radio") {
+          return {
+            ...toggle,
+            checked: mergedToggleSelected.value[toggle.group] === toggle.value
+          };
+        }
+        return {
+          ...toggle,
+          checked: mergedToggleChecked.value[toggle.key] ?? false
+        };
+      })
     );
+    const handleToggle = (payload) => {
+      const toggle = allToggles.value.find((entry) => entry.key === payload.key);
+      if (toggle?.type !== "radio" && toggle?.type !== "button") {
+        toggle?.onToggle?.(payload.value);
+      }
+      if (registeredToggles.value.some((entry) => entry.key === payload.key)) {
+        registeredToggleChecked.value = {
+          ...registeredToggleChecked.value,
+          [payload.key]: payload.value
+        };
+      }
+      toggleChecked.value = {
+        ...toggleChecked.value,
+        [payload.key]: payload.value
+      };
+      emit("toggle", payload);
+    };
+    const handleSelect = (payload) => {
+      const toggle = allToggles.value.find((entry) => entry.key === payload.key);
+      if (toggle?.type === "radio") {
+        toggle.onSelect?.(payload.value);
+      }
+      if (registeredToggles.value.some((entry) => entry.key === payload.key)) {
+        registeredToggleSelected.value = {
+          ...registeredToggleSelected.value,
+          [payload.group]: payload.value
+        };
+      }
+      toggleSelected.value = {
+        ...toggleSelected.value,
+        [payload.group]: payload.value
+      };
+      emit("select", payload);
+    };
+    const handleAction = (payload) => {
+      const toggle = allToggles.value.find((entry) => entry.key === payload.key);
+      if (toggle?.type === "button") {
+        toggle.onAction?.();
+      }
+      emit("action", payload);
+    };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         renderEnvBanner.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -10702,7 +10852,9 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
               key: 0,
               environment: __props.environment,
               toggles: overlayToggles.value,
-              onToggle: _cache[0] || (_cache[0] = ($event) => emit("toggle", $event))
+              onToggle: handleToggle,
+              onSelect: handleSelect,
+              onAction: handleAction
             }, null, 8, ["environment", "toggles"])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_2$d, [
               vue.createElementVNode("div", _hoisted_3$d, [
@@ -10711,7 +10863,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.createElementVNode("div", _hoisted_4$c, [
                 vue.createElementVNode("button", {
-                  onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                  onClick: _cache[0] || (_cache[0] = //@ts-ignore
                   (...args) => vue.unref(toggleDevMode) && vue.unref(toggleDevMode)(...args)),
                   class: "py-1 px-2 rounded text-xs font-bold bg-white bg-opacity-20 text-black hover:bg-opacity-30 min-w-[120px] cursor-pointer"
                 }, vue.toDisplayString(devModeButtonText.value), 1),
@@ -10733,7 +10885,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         ], 2)) : vue.createCommentVNode("", true),
         vue.createVNode(_sfc_main$o, {
           open: isStorageModalOpen.value,
-          "onUpdate:open": _cache[2] || (_cache[2] = ($event) => isStorageModalOpen.value = $event),
+          "onUpdate:open": _cache[1] || (_cache[1] = ($event) => isStorageModalOpen.value = $event),
           customActions: __props.customActions
         }, null, 8, ["open", "customActions"])
       ], 64);
@@ -20131,6 +20283,7 @@ exports.sortCountryOptionsByName = sortCountryOptionsByName;
 exports.useBoldQuery = useBoldQuery;
 exports.useDevMode = useDevMode;
 exports.useDevModeEnvironment = useDevModeEnvironment;
+exports.useDevModeToggles = useDevModeToggles;
 exports.useDownload = useDownload;
 exports.useExitConfirmationGuard = useExitConfirmationGuard;
 exports.useExitConfirmationGuardState = useExitConfirmationGuardState;