@shwfed/nuxt 0.10.14 → 0.11.0

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.vue

@@ -7,7 +7,11 @@ import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { cn } from "../../../utils/cn";
 import { Button } from "../button";
-import { ButtonConfigC, ButtonsStyleC } from "../buttons/schema";
+import {
+  ButtonBodyC,
+  ButtonConfigC,
+  ButtonsStyleC
+} from "../buttons/schema";
 import { Checkbox } from "../checkbox";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog";
 import { IconPicker } from "../icon-picker";
@@ -492,15 +496,19 @@ function buildDraftConfig() {
     selectedItemId.value = "general";
     return;
   }
-  const result = ButtonConfigC.safeParse({
+  const bodyResult = ButtonBodyC.safeParse({
     gap: draftGap.value,
     style: generalStyleResult.data,
     groups: materializeButtonConfiguratorTree(draftTree.value)
   });
-  if (!result.success) {
+  if (!bodyResult.success) {
     return;
   }
-  return result.data;
+  return ButtonConfigC.parse({
+    ...bodyResult.data,
+    kind: props.config.kind,
+    compatibilityDate: props.config.compatibilityDate
+  });
 }
 function getValidDraftConfig(errorMessage) {
   const config = buildDraftConfig();

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.vue.d.ts

@@ -24,6 +24,19 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -42,10 +55,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any;
@@ -67,6 +95,19 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -85,10 +126,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;

package/dist/runtime/components/ui/buttons/Buttons.d.vue.ts

@@ -1,11 +1,12 @@
 import { Effect } from 'effect';
-import { type ButtonConfig } from './schema.js';
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from './schema.js';
-export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonGroup, ButtonGroupItem } from './schema.js';
+import { type ButtonConfigInput } from './schema.js';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './schema.js';
+export { ButtonBodyC, ButtonBodyInputC, CURRENT_COMPATIBILITY_DATE, KIND, SUPPORTED_COMPATIBILITY_DATES, createButtonConfig, } from './schema.js';
+export type { ButtonAction, ButtonBody, ButtonBodyInput, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonDropdownAction, ButtonGroup, ButtonGroupItem, ButtonModal, } from './schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
-    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+    config: Effect.Effect<ButtonConfigInput | undefined>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
         groups: readonly Readonly<{
@@ -23,6 +24,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -41,15 +55,30 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+    config: Effect.Effect<ButtonConfigInput | undefined>;
 }> & Readonly<{
     "onUpdate:config"?: ((args_0: Readonly<{
         groups: readonly Readonly<{
@@ -67,6 +96,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -85,10 +127,25 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;

package/dist/runtime/components/ui/buttons/Buttons.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { useNuxtApp } from "#app";
-import { useAttrs, computed, ref, watch } from "vue";
+import { useAttrs, computed, onBeforeUnmount, ref, useSlots, watch } from "vue";
 import { computedAsync } from "@vueuse/core";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { useI18n } from "vue-i18n";
 import { useCheating } from "#imports";
+import { provideOverlay, useOverlay } from "../../../composables/useOverlay";
 import { getLocalizedText, hasVisibleLocaleValue } from "../../../utils/coders";
 import { cn } from "../../../utils/cn";
 import ButtonConfiguratorDialog from "../button-configurator/ButtonConfiguratorDialog.vue";
@@ -14,7 +15,10 @@ import { ButtonGroup } from "../button-group";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu";
 import { Skeleton } from "../skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
-import { ButtonConfigC, normalizeButtonConfigInput } from "./schema";
+import {
+  ButtonConfigC,
+  createButtonConfig
+} from "./schema";
 defineOptions({
   inheritAttrs: false
 });
@@ -22,19 +26,22 @@ const props = defineProps({
   config: { type: null, required: true }
 });
 const emit = defineEmits(["update:config"]);
-const defaultConfig = {
+const defaultConfig = createButtonConfig({
   gap: 4,
   groups: []
-};
+});
 const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
 const attrs = useAttrs();
+const slots = useSlots();
 const { locale, t } = useI18n();
 const { $dsl } = useNuxtApp();
+const overlay = useOverlay();
 const isCheating = useCheating();
 const isConfiguratorOpen = ref(false);
 const pendingIds = ref([]);
+const overlayOwnerId = crypto.randomUUID();
 const currentConfig = computedAsync(
-  async () => ButtonConfigC.parse(normalizeButtonConfigInput(await props.config.pipe(Effect.runPromise)))
+  async () => ButtonConfigC.parse(await props.config.pipe(Effect.runPromise) ?? defaultConfig)
 );
 const displayConfig = ref(defaultConfig);
 watch(currentConfig, (value) => {
@@ -42,6 +49,43 @@ watch(currentConfig, (value) => {
     displayConfig.value = value;
   }
 }, { immediate: true });
+const modalDefinitions = computed(() => {
+  const nextDefinitions = [];
+  for (const group of displayConfig.value.groups) {
+    for (const item of group.items) {
+      if (isDropdownItem(item)) {
+        for (const child of item.items) {
+          const render2 = slots[child.id];
+          if (render2) {
+            nextDefinitions.push({
+              definitionId: child.id,
+              ownerId: overlayOwnerId,
+              render: render2,
+              shell: getModalShell(child.modal)
+            });
+          }
+        }
+        continue;
+      }
+      const render = slots[item.id];
+      if (render) {
+        nextDefinitions.push({
+          definitionId: item.id,
+          ownerId: overlayOwnerId,
+          render,
+          shell: getModalShell(item.modal)
+        });
+      }
+    }
+  }
+  return nextDefinitions;
+});
+watch(modalDefinitions, (definitions) => {
+  overlay.syncDefinitions(overlayOwnerId, definitions);
+}, { immediate: true });
+onBeforeUnmount(() => {
+  overlay.syncDefinitions(overlayOwnerId, []);
+});
 const actionIds = computed(() => displayConfig.value.groups.flatMap((group) => group.items.flatMap((item) => {
   if ("items" in item) {
     return item.items.map((child) => child.id);
@@ -92,6 +136,18 @@ function getDropdownLabel(dropdown) {
 function getButtonTooltip(button) {
   return getLocalizedText(button.tooltip, locale.value);
 }
+function getModalShell(modal) {
+  if (!modal) {
+    return void 0;
+  }
+  return {
+    title: getLocalizedText(modal.title, locale.value),
+    description: getLocalizedText(modal.description, locale.value),
+    showCloseButton: modal.showCloseButton,
+    breakpoint: modal.breakpoint,
+    dismissible: modal.dismissible
+  };
+}
 function getButtonEffect(buttonId) {
   return Reflect.get(attrs, buttonId);
 }
@@ -120,7 +176,7 @@ async function runButton(buttonId) {
   }
   pendingIds.value = [...pendingIds.value, buttonId];
   try {
-    await Effect.runPromise(Effect.scoped(effect));
+    await Effect.runPromise(provideOverlay(Effect.scoped(effect), overlay));
   } finally {
     pendingIds.value = pendingIds.value.filter((id) => id !== buttonId);
   }
@@ -146,7 +202,15 @@ function hasLeadingPrimaryGap(items, itemIndex) {
 </script>
 
 <script>
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from "./schema";
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from "./schema";
+export {
+  ButtonBodyC,
+  ButtonBodyInputC,
+  CURRENT_COMPATIBILITY_DATE,
+  KIND,
+  SUPPORTED_COMPATIBILITY_DATES,
+  createButtonConfig
+} from "./schema";
 </script>
 
 <template>

package/dist/runtime/components/ui/buttons/Buttons.vue.d.ts

@@ -1,11 +1,12 @@
 import { Effect } from 'effect';
-import { type ButtonConfig } from './schema.js';
-export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from './schema.js';
-export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonGroup, ButtonGroupItem } from './schema.js';
+import { type ButtonConfigInput } from './schema.js';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './schema.js';
+export { ButtonBodyC, ButtonBodyInputC, CURRENT_COMPATIBILITY_DATE, KIND, SUPPORTED_COMPATIBILITY_DATES, createButtonConfig, } from './schema.js';
+export type { ButtonAction, ButtonBody, ButtonBodyInput, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonDropdownAction, ButtonGroup, ButtonGroupItem, ButtonModal, } from './schema.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
-    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+    config: Effect.Effect<ButtonConfigInput | undefined>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:config": (args_0: Readonly<{
         groups: readonly Readonly<{
@@ -23,6 +24,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -41,15 +55,30 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+    config: Effect.Effect<ButtonConfigInput | undefined>;
 }> & Readonly<{
     "onUpdate:config"?: ((args_0: Readonly<{
         groups: readonly Readonly<{
@@ -67,6 +96,19 @@ declare const __VLS_export: import("vue").DefineComponent<{
                 icon?: string | undefined;
                 variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
                 hideTitle?: boolean | undefined;
+                modal?: Readonly<{
+                    title?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    description?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    showCloseButton?: boolean | undefined;
+                    breakpoint?: string | undefined;
+                    dismissible?: boolean | undefined;
+                }> | undefined;
             }> | Readonly<{
                 id: string;
                 title: readonly {
@@ -85,10 +127,25 @@ declare const __VLS_export: import("vue").DefineComponent<{
                     }[] | undefined;
                     icon?: string | undefined;
                     variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                    modal?: Readonly<{
+                        title?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        description?: readonly {
+                            locale: "zh" | "ja" | "en" | "ko";
+                            message: string;
+                        }[] | undefined;
+                        showCloseButton?: boolean | undefined;
+                        breakpoint?: string | undefined;
+                        dismissible?: boolean | undefined;
+                    }> | undefined;
                 }>[];
                 icon?: string | undefined;
             }>)[];
         }>[];
+        kind: string;
+        compatibilityDate: string;
         gap?: number | undefined;
         style?: string | undefined;
     }>) => any) | undefined;