@shwfed/nuxt 0.10.13 → 0.10.15

package/dist/runtime/components/ui/app/App.vue.d.ts

@@ -1,13 +1,15 @@
 import type { Scope } from 'effect';
 import { Effect } from 'effect';
+import { type OverlayService as OverlayRuntimeService } from '../../../composables/useOverlay.js';
 import { type Sidebar as SidebarType } from '../../../composables/useNavigationTabs.js';
+type UiCommandEffect = Effect.Effect<void, never, Scope.Scope | OverlayRuntimeService>;
 type ProfileCommandInputItem = Readonly<{
     id: string | number;
     title: string;
     icon?: string;
     hidden?: boolean;
     disabled?: boolean;
-    effect?: Effect.Effect<void>;
+    effect?: UiCommandEffect;
     keywords?: Array<string>;
 }>;
 type ProfileCommandInputGroup = Readonly<{
@@ -67,13 +69,13 @@ type __VLS_Props = {
      */
     commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
 };
-declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
+declare var __VLS_113: {}, __VLS_129: {}, __VLS_352: {};
 type __VLS_Slots = {} & {
-    menu?: (props: typeof __VLS_108) => any;
+    menu?: (props: typeof __VLS_113) => any;
 } & {
-    profile?: (props: typeof __VLS_124) => any;
+    profile?: (props: typeof __VLS_129) => any;
 } & {
-    default?: (props: typeof __VLS_347) => any;
+    default?: (props: typeof __VLS_352) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ui/app/OverlayHost.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/app/OverlayHost.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed, defineComponent } from "vue";
+import ShwfedModal from "../../modal.vue";
+import { useOverlay } from "../../../composables/useOverlay";
+const overlay = useOverlay();
+const OverlayBody = defineComponent({
+  name: "OverlayBody",
+  props: {
+    render: {
+      type: Function,
+      required: true
+    },
+    slotProps: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => props.render(props.slotProps);
+  }
+});
+function handleOpenUpdate(sessionId, open) {
+  if (open) {
+    return;
+  }
+  overlay.closeSync(sessionId, {
+    _tag: "OverlayAborted",
+    reason: "dismiss"
+  });
+}
+const renderedSessions = computed(() => {
+  const nextSessions = [];
+  for (const session of overlay.sessions) {
+    const definition = overlay.definitions[session.definitionId];
+    if (!definition) {
+      continue;
+    }
+    nextSessions.push({
+      sessionId: session.sessionId,
+      definitionId: session.definitionId,
+      shell: session.shell,
+      props: session.props,
+      definition
+    });
+  }
+  return nextSessions;
+});
+</script>
+
+<template>
+  <template
+    v-for="session in renderedSessions"
+    :key="session.sessionId"
+  >
+    <ShwfedModal
+      :open="true"
+      :breakpoint="session.shell.breakpoint"
+      :show-close-button="session.shell.showCloseButton"
+      :dismissible="session.shell.dismissible"
+      @update:open="handleOpenUpdate(session.sessionId, $event)"
+    >
+      <template
+        v-if="session.shell.title"
+        #title
+      >
+        {{ session.shell.title }}
+      </template>
+
+      <template
+        v-if="session.shell.description"
+        #description
+      >
+        {{ session.shell.description }}
+      </template>
+
+      <template #default="modalSlotProps">
+        <OverlayBody
+          :render="session.definition.render"
+          :slot-props="{
+  props: session.props,
+  shell: session.shell,
+  sessionId: session.sessionId,
+  close: (value) => overlay.closeSync(session.sessionId, value),
+  patch: (nextProps) => overlay.patchSync(session.sessionId, { props: nextProps }),
+  isDesktop: modalSlotProps.isDesktop
+}"
+        />
+      </template>
+    </ShwfedModal>
+  </template>
+</template>

package/dist/runtime/components/ui/app/OverlayHost.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.d.vue.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,6 +55,19 @@ 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;
             }>)[];
@@ -67,6 +93,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,6 +124,19 @@ 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;
             }>)[];

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,6 +55,19 @@ 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;
             }>)[];
@@ -67,6 +93,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,6 +124,19 @@ 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;
             }>)[];

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

@@ -1,7 +1,7 @@
 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';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './schema.js';
+export type { ButtonAction, 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<{
@@ -23,6 +23,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,6 +54,19 @@ 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;
             }>)[];
@@ -67,6 +93,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,6 +124,19 @@ 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;
             }>)[];

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";
@@ -28,11 +29,14 @@ const defaultConfig = {
 };
 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)))
 );
@@ -42,6 +46,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 +133,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 +173,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 +199,7 @@ 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";
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 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';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonModalC, ButtonsStyleC } from './schema.js';
+export type { ButtonAction, 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<{
@@ -23,6 +23,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,6 +54,19 @@ 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;
             }>)[];
@@ -67,6 +93,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,6 +124,19 @@ 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;
             }>)[];