@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/grid/cells/DateCell.vue.d.ts

@@ -57,7 +57,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -252,7 +252,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/grid/cells/ImageCell.vue.d.ts

@@ -68,7 +68,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -274,7 +274,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/grid/cells/LinkCell.vue.d.ts

@@ -65,7 +65,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -268,7 +268,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/internal/core/ButtonElement.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonHTMLAttributes, DefineComponent } from 'vue';
+export declare const ButtonElement: DefineComponent<Omit<ButtonHTMLAttributes, "onSelect">>;

package/dist/internal/core/ButtonElement.mjs

@@ -0,0 +1,8 @@
+import { defineComponent, h } from "vue";
+export const ButtonElement = defineComponent({
+  name: "KButtonElement",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => h("button", attrs, slots.default?.());
+  }
+});

package/dist/internal/data/tree.d.ts

@@ -0,0 +1,8 @@
+import type { TreeMove, TreeNode } from '../../components/data/types';
+type NodeId = TreeNode['id'];
+interface TreeShape<T> {
+    id: NodeId;
+    children?: T[];
+}
+export declare function applyTreeMove<T extends TreeShape<T>>(nodes: T[], move: TreeMove): T[];
+export {};

package/dist/internal/data/tree.mjs

@@ -0,0 +1,41 @@
+function withoutNode(nodes, id) {
+  let removed;
+  const result = [];
+  for (const node of nodes) {
+    if (node.id === id) {
+      removed = node;
+      continue;
+    }
+    if (!removed && node.children?.length) {
+      const [children, found] = withoutNode(node.children, id);
+      if (found) {
+        removed = found;
+        result.push({ ...node, children });
+        continue;
+      }
+    }
+    result.push(node);
+  }
+  return [result, removed];
+}
+function insertNode(nodes, parent, index, node) {
+  if (parent === null) {
+    const next = [...nodes];
+    next.splice(Math.max(0, Math.min(index, next.length)), 0, node);
+    return next;
+  }
+  return nodes.map((entry) => {
+    if (entry.id === parent) {
+      const children = [...entry.children ?? []];
+      children.splice(Math.max(0, Math.min(index, children.length)), 0, node);
+      return { ...entry, children };
+    }
+    if (!entry.children?.length) return entry;
+    return { ...entry, children: insertNode(entry.children, parent, index, node) };
+  });
+}
+export function applyTreeMove(nodes, move) {
+  const [rest, node] = withoutNode(nodes, move.node.id);
+  if (!node) return nodes;
+  return insertNode(rest, move.to.parent, move.to.index, node);
+}

package/dist/internal/forms/files.d.ts

@@ -1,5 +1,14 @@
+import type { DroppedTree } from '../../composables/useFileDrop';
 export declare function parseAccept(accept: string | string[] | undefined): string[];
 export declare function matchesAccept(file: File, accept: string[]): boolean;
 export declare function formatBytes(bytes: number, locale?: string): string;
 export declare function isImageFile(file: File): boolean;
+export declare function setFilePath(file: File, path: string): void;
+export declare function filePath(file: File): string;
 export declare function fileKey(file: File): string;
+export declare function isHiddenName(name: string): boolean;
+export declare function isHiddenPath(path: string): boolean;
+export declare function directoriesOf(paths: Iterable<string>): string[];
+export declare function filesTree(files: Iterable<File>, options?: {
+    skipHidden?: boolean;
+}): DroppedTree;

package/dist/internal/forms/files.mjs

@@ -27,6 +27,37 @@ export function formatBytes(bytes, locale) {
 export function isImageFile(file) {
   return file.type.startsWith("image/");
 }
+const filePaths = /* @__PURE__ */ new WeakMap();
+export function setFilePath(file, path) {
+  if (path && path !== file.name) filePaths.set(file, path);
+}
+export function filePath(file) {
+  return file.webkitRelativePath || filePaths.get(file) || file.name;
+}
 export function fileKey(file) {
-  return `${file.name}|${file.size}|${file.lastModified}`;
+  return `${filePath(file)}|${file.size}|${file.lastModified}`;
+}
+export function isHiddenName(name) {
+  return name.startsWith(".");
+}
+export function isHiddenPath(path) {
+  return path.split("/").some(isHiddenName);
+}
+export function directoriesOf(paths) {
+  const directories = /* @__PURE__ */ new Set();
+  for (const path of paths) {
+    const segments = path.split("/").filter(Boolean);
+    for (let depth = 1; depth < segments.length; depth++)
+      directories.add(segments.slice(0, depth).join("/"));
+  }
+  return [...directories];
+}
+export function filesTree(files, options = {}) {
+  const entries = [];
+  for (const file of files) {
+    const path = file.webkitRelativePath || file.name;
+    if (options.skipHidden && isHiddenPath(path)) continue;
+    entries.push({ file, path });
+  }
+  return { files: entries, directories: directoriesOf(entries.map((entry) => entry.path)) };
 }

package/dist/internal/forms/standard-schema.d.ts

@@ -24,3 +24,20 @@ export interface StandardSchemaV1<Input = unknown, Output = Input> {
 export declare function isStandardSchema(value: unknown): value is StandardSchemaV1;
 export declare function runStandardSchema(schema: StandardSchemaV1, value: unknown): Promise<readonly StandardSchemaIssue[]>;
 export declare function issuesByField(issues: ReadonlyArray<StandardSchemaIssue>): Record<string, string>;
+export type IssuePath = ReadonlyArray<PropertyKey>;
+export type IssueKeyResolver = (path: IssuePath) => string | ReadonlyArray<string> | undefined;
+export interface GroupedIssues {
+    fields: Record<string, string>;
+    root: string[];
+}
+export declare function issuePath(issue: StandardSchemaIssue): PropertyKey[];
+export declare function defaultIssueKey(path: IssuePath): string | string[] | undefined;
+export declare function keyPath(key: string): PropertyKey[];
+export declare function groupIssues(issues: ReadonlyArray<{
+    message: string;
+    path: IssuePath;
+}>, resolve?: IssueKeyResolver): GroupedIssues;
+export declare function schemaIssues(issues: ReadonlyArray<StandardSchemaIssue>): {
+    message: string;
+    path: PropertyKey[];
+}[];

package/dist/internal/forms/standard-schema.mjs

@@ -19,3 +19,43 @@ export function issuesByField(issues) {
   }
   return errors;
 }
+export function issuePath(issue) {
+  return (issue.path ?? []).map(
+    (segment) => typeof segment === "object" && segment !== null ? segment.key : segment
+  );
+}
+export function defaultIssueKey(path) {
+  const [first] = path;
+  if (first === void 0 || typeof first === "symbol") return void 0;
+  const head = String(first);
+  if (path.length === 1) return head;
+  if (path.some((segment) => typeof segment === "symbol")) return head;
+  return [head, path.map(String).join(".")];
+}
+export function keyPath(key) {
+  if (!key) return [];
+  return key.split(".").map((segment) => /^\d+$/.test(segment) ? Number(segment) : segment);
+}
+export function groupIssues(issues, resolve = defaultIssueKey) {
+  const fields = {};
+  const root = [];
+  const addRoot = (message) => {
+    if (message && !root.includes(message)) root.push(message);
+  };
+  for (const { message, path } of issues) {
+    if (!path.length) {
+      addRoot(message);
+      continue;
+    }
+    const resolved = resolve(path);
+    const keys = typeof resolved === "string" ? [resolved] : resolved ?? [];
+    for (const key of keys) {
+      if (key === "") addRoot(message);
+      else if (!(key in fields)) fields[key] = message;
+    }
+  }
+  return { fields, root };
+}
+export function schemaIssues(issues) {
+  return issues.map((issue) => ({ message: issue.message, path: issuePath(issue) }));
+}

package/dist/internal/keys.d.ts

@@ -1,5 +1,5 @@
 import type { Component, ComputedRef, InjectionKey, Ref } from 'vue';
-import type { FieldContext } from '../composables/useField';
+import type { FieldContext, FieldControlRole } from '../composables/useField';
 import type { FormContext } from '../composables/useForm';
 import type { IconRegistry } from '../composables/useIcons';
 import type { ThemePreference } from '../composables/useTheme';
@@ -11,6 +11,7 @@ export declare const THEME_KEY: InjectionKey<Ref<ThemePreference>>;
 export declare const PRESET_KEY: InjectionKey<Ref<ThemePreset>>;
 export declare const LINK_KEY: InjectionKey<Component>;
 export declare const FIELD_KEY: InjectionKey<FieldContext>;
+export declare const FIELD_ROLE_KEY: InjectionKey<FieldControlRole>;
 export declare const ROOT_KEY: InjectionKey<true>;
 export declare const FORM_KEY: InjectionKey<FormContext>;
 export declare const LOCALE_KEY: InjectionKey<ComputedRef<KLocale>>;

package/dist/internal/keys.mjs

@@ -4,6 +4,7 @@ export const THEME_KEY = Symbol("k-theme");
 export const PRESET_KEY = Symbol("k-preset");
 export const LINK_KEY = Symbol("k-link");
 export const FIELD_KEY = Symbol("k-field");
+export const FIELD_ROLE_KEY = Symbol("k-field-role");
 export const ROOT_KEY = Symbol("k-root");
 export const FORM_KEY = Symbol("k-form");
 export const LOCALE_KEY = Symbol("k-locale");

package/dist/internal/overlays/DialogFrame.vue

@@ -14,7 +14,13 @@
          <header v-if="hasHeader" :class="`${prefix}-header`">
             <slot name="header" :close="close" :title-id="titleId" :description-id="descriptionId">
                <div :class="`${prefix}-heading`">
-                  <h2 v-if="hasTitle" :id="titleId" :class="`${prefix}-title`">
+                  <div v-if="slots['title-trailing']" :class="`${prefix}-title-row`">
+                     <h2 v-if="hasTitle" :id="titleId" :class="`${prefix}-title`">
+                        <slot name="title">{{ title }}</slot>
+                     </h2>
+                     <slot name="title-trailing" />
+                  </div>
+                  <h2 v-else-if="hasTitle" :id="titleId" :class="`${prefix}-title`">
                      <slot name="title">{{ title }}</slot>
                   </h2>
                   <p v-if="hasDescription" :id="descriptionId" :class="`${prefix}-description`">
@@ -33,7 +39,7 @@
                   :disabled="loading"
                   :class="`${prefix}-close`"
                   :aria-label="closeText"
-                  @click="close"
+                  @click="requestClose('close-button')"
                />
             </div>
          </header>
@@ -51,6 +57,7 @@
 import { computed, useId, useTemplateRef } from "vue";
 import Button from "../../components/core/Button.vue";
 import { useLocale } from "../../composables/useLocale";
+import { provideFieldBoundary } from "../../composables/useFieldBoundary";
 import { useModalDialog } from "./dialog";
 const props = defineProps({
   prefix: { type: String, required: true },
@@ -61,8 +68,10 @@ const props = defineProps({
   hideClose: { type: Boolean, required: false },
   closeLabel: { type: String, required: false },
   flush: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false }
+  loading: { type: Boolean, required: false },
+  beforeClose: { type: Function, required: false }
 });
+provideFieldBoundary();
 const { t } = useLocale();
 const closeText = computed(() => props.closeLabel ?? t("common.close"));
 const slots = defineSlots();
@@ -78,21 +87,22 @@ const hasDescription = computed(() => Boolean(props.description || slots.descrip
 const showClose = computed(() => props.dismissible && !props.hideClose);
 const hasHeader = computed(
   () => Boolean(
-    hasTitle.value || hasDescription.value || slots.header || slots.actions || showClose.value
+    hasTitle.value || hasDescription.value || slots["title-trailing"] || slots.header || slots.actions || showClose.value
   )
 );
-const { present, onCancel, onClose, onPointerDown, onClick } = useModalDialog({
+const { present, requestClose, onCancel, onClose, onPointerDown, onClick } = useModalDialog({
   dialog: dialogRef,
   panel: panelRef,
   open,
   dismissible: () => props.dismissible && !props.loading,
+  beforeClose: () => props.beforeClose,
   onOpen: () => emit("open"),
   onClose: () => emit("close"),
   onAfterLeave: () => emit("afterLeave")
 });
 function close() {
-  if (props.loading) return;
-  open.value = false;
+  if (props.loading) return Promise.resolve(false);
+  return requestClose("action");
 }
 defineExpose({ close, el: dialogRef });
 </script>

package/dist/internal/overlays/DialogFrame.vue.d.ts

@@ -1,3 +1,4 @@
+import type { DialogBeforeClose } from '../../components/overlays/types';
 export interface DialogSlotScope {
     close: () => void;
     titleId: string;
@@ -9,6 +10,7 @@ export interface DialogFrameSlots {
     }) => unknown;
     header?: (props: DialogSlotScope) => unknown;
     title?: () => unknown;
+    'title-trailing'?: () => unknown;
     description?: () => unknown;
     actions?: (props: {
         close: () => void;
@@ -18,7 +20,7 @@ export interface DialogFrameSlots {
     }) => unknown;
 }
 type __VLS_Slots = DialogFrameSlots;
-declare function close(): void;
+declare function close(): Promise<boolean>;
 declare const __VLS_base: import("vue").DefineComponent<{
     prefix: "k-modal" | "k-drawer";
     rootClass: unknown;
@@ -29,12 +31,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     closeLabel?: string;
     flush?: boolean;
     loading?: boolean;
+    beforeClose?: DialogBeforeClose;
     open: boolean;
     key?: PropertyKey | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -147,7 +149,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -184,6 +186,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -240,12 +243,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     closeLabel?: string;
     flush?: boolean;
     loading?: boolean;
+    beforeClose?: DialogBeforeClose;
     open: boolean;
     key?: PropertyKey | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -358,7 +361,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -395,6 +398,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

package/dist/internal/overlays/MenuList.vue

@@ -120,7 +120,9 @@ import { ariaKeyShortcuts, formatHotkey } from "../../composables/useHotkey";
 import { useLinkResolver } from "../core/link";
 import { useFloatingLayer } from "../floating/layer";
 import { MENU_ROOT_KEY } from "./menu";
+import { provideFieldBoundary } from "../../composables/useFieldBoundary";
 import { useApplePlatform } from "../core/env";
+provideFieldBoundary();
 const props = defineProps({
   items: { type: Array, required: true },
   anchor: { type: Function, required: true },

package/dist/internal/overlays/MenuList.vue.d.ts

@@ -19,7 +19,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -130,7 +129,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -167,6 +166,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -230,7 +230,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -341,7 +340,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -378,6 +377,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -419,8 +419,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onOpenChange?: ((open: boolean) => any) | undefined;
 }>, {
     offset: number;
-    level: number;
     placement: Placement;
+    level: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/internal/overlays/OverlayView.vue

@@ -11,6 +11,7 @@
       :close-label="entry.options.closeLabel"
       :flush="entry.options.flush"
       :loading="entry.loading"
+      :before-close="entry.options.beforeClose"
       @close="emit('close')"
       @after-leave="emit('afterLeave')"
    >
@@ -28,6 +29,7 @@
       :close-label="entry.options.closeLabel"
       :flush="entry.options.flush"
       :loading="entry.loading"
+      :before-close="entry.options.beforeClose"
       @close="emit('close')"
       @after-leave="emit('afterLeave')"
    >

package/dist/internal/overlays/OverlayView.vue.d.ts

@@ -10,8 +10,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     description?: string;
     size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
-    ref?: import("vue").VNodeRef | undefined;
-    open?: boolean | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -161,6 +159,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -197,22 +196,24 @@ declare const __VLS_export: import("vue").DefineComponent<{
     exportparts?: string;
     part?: string;
     popover?: import("../../index.ts").PopoverMode | "" | boolean;
-    onCancel?: ((payload: Event) => void) | undefined;
+    dismissible?: boolean | undefined;
+    open?: boolean | undefined;
+    "onUpdate:open"?: (((value: boolean) => any) & ((value: boolean) => any)) | undefined;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onCancel?: ((payload: Event) => void) | undefined;
+    side?: import("../../index.ts").DrawerSide;
     flush?: boolean;
-    dismissible?: boolean | undefined;
-    "onUpdate:open"?: (((value: boolean) => any) & ((value: boolean) => any)) | undefined;
     sheet?: boolean;
-    side?: import("../../index.ts").DrawerSide;
     onOpen?: ((() => any) & (() => any)) | undefined;
     rootClass?: unknown;
     hideClose?: boolean;
     closeLabel?: string;
+    beforeClose?: import("../../index.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
@@ -229,8 +230,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     placeholder?: string | undefined;
     description?: string;
     size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
-    ref?: import("vue").VNodeRef | undefined;
-    open?: boolean | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -380,6 +379,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -416,22 +416,24 @@ declare const __VLS_export: import("vue").DefineComponent<{
     exportparts?: string;
     part?: string;
     popover?: import("../../index.ts").PopoverMode | "" | boolean;
-    onCancel?: ((payload: Event) => void) | undefined;
+    dismissible?: boolean | undefined;
+    open?: boolean | undefined;
+    "onUpdate:open"?: (((value: boolean) => any) & ((value: boolean) => any)) | undefined;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    onCancel?: ((payload: Event) => void) | undefined;
+    side?: import("../../index.ts").DrawerSide;
     flush?: boolean;
-    dismissible?: boolean | undefined;
-    "onUpdate:open"?: (((value: boolean) => any) & ((value: boolean) => any)) | undefined;
     sheet?: boolean;
-    side?: import("../../index.ts").DrawerSide;
     onOpen?: ((() => any) & (() => any)) | undefined;
     rootClass?: unknown;
     hideClose?: boolean;
     closeLabel?: string;
+    beforeClose?: import("../../index.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
 }> & Readonly<{
     onClose?: (() => any) | undefined;

package/dist/internal/overlays/dialog.d.ts

@@ -1,18 +1,21 @@
 import type { Ref } from 'vue';
+import type { DialogBeforeClose, DialogCloseReason } from '../../components/overlays/types';
 export declare const modalStack: import("vue").ShallowReactive<HTMLDialogElement[]>;
 export interface ModalDialogOptions {
     dialog: Readonly<Ref<HTMLDialogElement | null | undefined>>;
     panel: Readonly<Ref<HTMLElement | null | undefined>>;
     open: Ref<boolean>;
     dismissible: () => boolean;
+    beforeClose?: () => DialogBeforeClose | undefined;
     onOpen?: () => void;
     onClose?: () => void;
     onAfterLeave?: () => void;
 }
 export declare function useModalDialog(options: ModalDialogOptions): {
     present: Ref<boolean, boolean>;
+    requestClose: (reason: DialogCloseReason) => Promise<boolean>;
     onCancel: (event: Event) => void;
-    onClose: () => void;
+    onClose: () => Promise<void>;
     onPointerDown: (event: PointerEvent) => void;
     onClick: (event: MouseEvent) => void;
 };