@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/components/layout/Sidebar.vue.d.ts

@@ -20,7 +20,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     label?: string;
     collapsible?: boolean;
     collapseLabel?: string;
-    expandLabel?: string;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;
@@ -217,7 +216,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     label?: string;
     collapsible?: boolean;
     collapseLabel?: string;
-    expandLabel?: string;
     innerHTML?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     style?: import("vue").StyleValue;

package/dist/components/layout/SidebarNav.vue

@@ -5,42 +5,21 @@
       :label="section.label"
    >
       <template v-for="(item, index) in section.items" :key="itemKey(item, index)">
-         <div
+         <NavGroup
             v-if="item.children?.length"
-            class="k-navgroup"
-            :class="{ 'is-open': isOpen(item, sectionIndex, index) }"
+            :item="item"
+            :open="isOpen(item, sectionIndex, index)"
+            :rail="rail"
+            :child-active="hasActiveChild(item)"
+            :panel-id="groupId(sectionIndex, index)"
+            @toggle="toggleGroup(sectionIndex, index)"
          >
-            <button
-               type="button"
-               class="k-navlink k-navgroup-trigger"
-               :class="{ 'is-child-active': hasActiveChild(item), 'is-disabled': item.disabled }"
-               :disabled="item.disabled"
-               :aria-expanded="isOpen(item, sectionIndex, index) ? 'true' : 'false'"
-               :aria-controls="groupId(sectionIndex, index)"
-               :title="shell?.collapsed.value ? item.label : void 0"
-               @click="toggleGroup(sectionIndex, index)"
-            >
-               <span v-if="item.icon" class="k-navlink-icon" aria-hidden="true">
-                  <Icon :name="item.icon" />
-               </span>
-               <span class="k-navlink-label">{{ item.label }}</span>
-               <span v-if="hasBadge(item)" class="k-navlink-badge">{{ item.badge }}</span>
-               <Icon name="chevron-right" class="k-navgroup-chevron" />
-            </button>
-            <div
-               :id="groupId(sectionIndex, index)"
-               class="k-navgroup-panel"
-               :inert="isOpen(item, sectionIndex, index) ? void 0 : true"
-            >
-               <div class="k-navgroup-list">
-                  <NavLink
-                     v-for="(child, childIndex) in item.children"
-                     :key="itemKey(child, childIndex)"
-                     v-bind="linkProps(child)"
-                  />
-               </div>
-            </div>
-         </div>
+            <NavLink
+               v-for="(child, childIndex) in item.children"
+               :key="itemKey(child, childIndex)"
+               v-bind="linkProps(child)"
+            />
+         </NavGroup>
          <NavLink v-else v-bind="linkProps(item)" />
       </template>
    </SidebarSection>
@@ -51,7 +30,7 @@ import { computed, ref, useId, watch } from "vue";
 import { useAppShell } from "../../composables/useAppShell";
 import { isNavItemActive, navTarget, toNavSections } from "../../internal/layout/navigation";
 import { useCurrentPath } from "../../internal/layout/route";
-import Icon from "../core/Icon.vue";
+import NavGroup from "../../internal/layout/NavGroup.vue";
 import NavLink from "./NavLink.vue";
 import SidebarSection from "./SidebarSection.vue";
 const props = defineProps({
@@ -69,17 +48,15 @@ function itemKey(item, index) {
 function groupId(sectionIndex, index) {
   return `${baseId}-group-${sectionIndex}-${index}`;
 }
-function hasBadge(item) {
-  return item.badge !== void 0 && item.badge !== "";
-}
 function isActive(item) {
   return isNavItemActive(item, path.value);
 }
 function hasActiveChild(item) {
   return Boolean(item.children?.some((child) => isActive(child) === true || hasActiveChild(child)));
 }
+const rail = computed(() => Boolean(shell?.collapsed.value && !shell.mobile.value));
 function isOpen(item, sectionIndex, index) {
-  if (shell?.collapsed.value && !shell.mobile.value) return false;
+  if (rail.value) return false;
   const explicit = toggled.value.get(groupId(sectionIndex, index));
   return explicit ?? hasActiveChild(item);
 }
@@ -88,11 +65,6 @@ function toggleGroup(sectionIndex, index) {
   const section = sections.value[sectionIndex];
   const item = section?.items[index];
   if (!item) return;
-  if (shell?.collapsed.value && !shell.mobile.value) {
-    shell.toggleCollapsed();
-    toggled.value.set(id, true);
-    return;
-  }
   toggled.value.set(id, !isOpen(item, sectionIndex, index));
 }
 function linkProps(item) {

package/dist/components/layout/Stack.vue.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -179,7 +180,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -236,6 +236,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -395,7 +396,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];

package/dist/components/layout/Tabs.vue

@@ -23,9 +23,7 @@
             role="tab"
             class="k-tab"
             :aria-selected="isSelected(item) ? 'true' : 'false'"
-            :aria-controls="
-  singlePanel ? isSelected(item) ? singlePanelId : void 0 : panelId(index)
-"
+            :aria-controls="controlsId(item, index)"
             :tabindex="index === focusIndex ? 0 : -1"
             :disabled="item.disabled"
             @click="select(item)"
@@ -75,16 +73,8 @@
 </template>
 
 <script setup>
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useId,
-  useTemplateRef,
-  watch
-} from "vue";
+import { computed, nextTick, onMounted, ref, useId, useTemplateRef, warn, watch } from "vue";
+import { useResizeObserver } from "../../internal/core/resize";
 import Icon from "../core/Icon.vue";
 import { rovingIndex } from "../../internal/core/roving";
 const props = defineProps({
@@ -140,6 +130,10 @@ function tabId(index) {
 function panelId(index) {
   return `${baseId}-panel-${index}`;
 }
+function controlsId(item, index) {
+  if (singlePanel.value) return isSelected(item) ? singlePanelId : void 0;
+  return !props.lazy || visited.value.has(item.value) ? panelId(index) : void 0;
+}
 function tabElement(index) {
   return list.value?.querySelector(`#${CSS.escape(tabId(index))}`) ?? null;
 }
@@ -170,12 +164,10 @@ function measure() {
   if (!tab || !list.value) return;
   indicator.value = { x: tab.offsetLeft, width: tab.offsetWidth };
 }
-let observer;
 onMounted(() => {
+  if (!props.label && !list.value?.hasAttribute("aria-labelledby"))
+    warn("[@xleddyl/443-components-vue] Tabs needs a label to name the tab list.");
   measure();
-  if (typeof ResizeObserver === "undefined" || !list.value) return;
-  observer = new ResizeObserver(() => measure());
-  observer.observe(list.value);
 });
-onBeforeUnmount(() => observer?.disconnect());
+useResizeObserver(() => [list.value], measure);
 </script>

package/dist/components/layout/Tabs.vue.d.ts

@@ -29,6 +29,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -184,7 +185,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -235,6 +235,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -390,7 +391,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/layout/Toolbar.vue

@@ -3,9 +3,9 @@
       ref="root"
       class="k-toolbar"
       :class="[`k-toolbar-${orientation}`, { 'is-bordered': bordered }]"
-      role="toolbar"
+      :role="roving ? 'toolbar' : 'group'"
       :aria-label="label"
-      :aria-orientation="orientation"
+      :aria-orientation="roving ? orientation : void 0"
       @keydown="onKeydown"
       @focusin="onFocusIn"
    >
@@ -14,14 +14,20 @@
 </template>
 
 <script setup>
-import { useTemplateRef } from "vue";
+import { onMounted, useAttrs, useTemplateRef, warn } from "vue";
 import { useRovingTabStops } from "../../internal/core/roving";
+import { hasNameAttrs } from "../../internal/forms/name";
 const props = defineProps({
   label: { type: String, required: false },
   orientation: { type: String, required: false, default: "horizontal" },
-  roving: { type: Boolean, required: false },
+  roving: { type: Boolean, required: false, default: true },
   bordered: { type: Boolean, required: false }
 });
+const attrs = useAttrs();
+onMounted(() => {
+  if (!props.label && !hasNameAttrs(attrs))
+    warn("[@xleddyl/443-components-vue] Toolbar needs a label (or aria-labelledby).");
+});
 const { onKeydown, onFocusIn } = useRovingTabStops(useTemplateRef("root"), {
   selector: "button:not(:disabled), a[href], input:not(:disabled), select:not(:disabled), [data-k-toolbar-item]",
   orientation: () => props.orientation,

package/dist/components/layout/Toolbar.vue.d.ts

@@ -398,6 +398,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";
+    roving: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -43,6 +43,7 @@ export type AccordionVariant = 'separated' | 'plain' | 'card' | 'outline';
 export type AccordionContentVariant = 'text' | 'neutral';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface AppShellContext {
+    sidebarId: string;
     collapsed: Readonly<{
         value: boolean;
     }>;

package/dist/components/overlays/CommandPalette.vue

@@ -137,7 +137,7 @@
             <span><Kbd size="sm">↵</Kbd> {{ selectText }}</span>
             <span><Kbd size="sm">Esc</Kbd> {{ closeText }}</span>
          </div>
-         <p class="k-visually-hidden" aria-live="polite">{{ status }}</p>
+         <LiveRegion :message="status" />
       </div>
    </dialog>
 </template>
@@ -153,6 +153,7 @@ import { matchesSearch } from "../../internal/core/text";
 import { readStorageJson, writeStorageJson } from "../../internal/core/storage";
 import { useRouterLike } from "../../internal/layout/route";
 import { ButtonElement } from "../../internal/core/ButtonElement";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 import Icon from "../core/Icon.vue";
 import Kbd from "../core/Kbd.vue";
 import Spinner from "../core/Spinner.vue";
@@ -287,8 +288,11 @@ const search = useAsyncSearch({
   onResults: (groups) => remote.value = groups,
   onError: () => remote.value = []
 });
+function firstEnabled() {
+  return Math.max(0, nextEnabledIndex(flat.value.length, 0, 1, isDisabled));
+}
 watch(term, (value) => {
-  active.value = 0;
+  active.value = firstEnabled();
   if (!props.search) return;
   if (!value || value.length < props.minQueryLength) {
     search.cancel();
@@ -298,7 +302,7 @@ watch(term, (value) => {
   search.schedule(value, props.debounce);
 });
 watch(flat, (items) => {
-  if (active.value >= items.length) active.value = 0;
+  if (active.value >= items.length || isDisabled(active.value)) active.value = firstEnabled();
 });
 watch(active, (index) => {
   nextTick(() => {
@@ -370,7 +374,7 @@ const { present, onCancel, onClose, onPointerDown, onClick } = useModalDialog({
   dismissible: () => true,
   onOpen: () => {
     readRecent();
-    active.value = 0;
+    active.value = firstEnabled();
     inputRef.value?.select();
     emit("open");
   },

package/dist/components/overlays/CommandPalette.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CommandEmptyText, CommandGroup, CommandItem, CommandSearch } from './types';
+import type { CommandEmptyText, CommandGroup, CommandGroupLabelSlotProps, CommandItem, CommandSearch } from './types';
 declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         groups?: CommandGroup<T>[];
@@ -44,6 +44,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly results?: (string | number) | undefined;
         readonly placeholder?: string | undefined | undefined;
         readonly name?: string | undefined | undefined;
+        readonly dir?: string | undefined | undefined;
         readonly class?: import("vue").ClassValue;
         readonly role?: string | undefined | undefined;
         readonly 'aria-label'?: string | undefined | undefined;
@@ -196,7 +197,6 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         readonly accesskey?: string | undefined | undefined;
         readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         readonly contextmenu?: string | undefined | undefined;
-        readonly dir?: string | undefined | undefined;
         readonly draggable?: (boolean | "true" | "false") | undefined;
         readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -248,12 +248,7 @@ declare const __VLS_export: <T = unknown>(__VLS_props: NonNullable<Awaited<typeo
         empty?: (props: {
             query: string;
         }) => unknown;
-        'group-label'?: (props: {
-            group?: CommandGroup<T>;
-            label?: string;
-            description?: string;
-            recent: boolean;
-        }) => unknown;
+        'group-label'?: (props: CommandGroupLabelSlotProps<T>) => unknown;
         item?: (props: {
             item: CommandItem<T>;
             active: boolean;

package/dist/components/overlays/ConfirmDialog.vue

@@ -25,11 +25,13 @@
             </div>
          </div>
       </template>
-      <slot />
-      <p v-if="error" class="k-confirm-error" role="alert">
-         <Icon name="exclamation-circle" />
-         <span>{{ error }}</span>
-      </p>
+      <template #default="{ titleId }">
+         <slot :title-id="titleId" />
+         <p v-if="error" class="k-confirm-error" role="alert">
+            <Icon name="exclamation-circle" />
+            <span>{{ error }}</span>
+         </p>
+      </template>
       <template #footer>
          <Button
             v-if="!hideCancel"

package/dist/components/overlays/ConfirmDialog.vue.d.ts

@@ -2,9 +2,11 @@ import type { Tone } from '../core/types';
 import type { IconName } from '../../composables/useIcons';
 declare function confirm(): Promise<void>;
 declare function cancel(): void;
-declare var __VLS_17: {};
+declare var __VLS_18: {
+    titleId: string;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
@@ -19,10 +21,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     size?: import("./types.ts").ModalSize;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -178,7 +182,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -216,13 +219,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    onClose?: (() => any) | undefined;
     flush?: boolean;
+    onClose?: (() => any) | undefined;
     sheet?: boolean;
     onOpen?: (() => any) | undefined;
+    closeLabel?: string;
     rootClass?: unknown;
     hideClose?: boolean;
-    closeLabel?: string;
     beforeClose?: import("./types.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
 }, {
@@ -246,10 +249,12 @@ declare const __VLS_base: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    label?: string;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     size?: import("./types.ts").ModalSize;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -405,7 +410,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -443,13 +447,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
-    onClose?: (() => any) | undefined;
     flush?: boolean;
+    onClose?: (() => any) | undefined;
     sheet?: boolean;
     onOpen?: (() => any) | undefined;
+    closeLabel?: string;
     rootClass?: unknown;
     hideClose?: boolean;
-    closeLabel?: string;
     beforeClose?: import("./types.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
 }> & Readonly<{

package/dist/components/overlays/ConfirmHost.vue

@@ -15,26 +15,29 @@
       @resolve="onResolve"
       @after-leave="onAfterLeave"
    >
-      <component
-         :is="current.body"
-         v-if="current && current.kind !== 'prompt' && current.body"
-         @close="dialogRef?.cancel()"
-      />
-      <FormField
-         v-else-if="current?.kind === 'prompt'"
-         :label="current.label"
-         :required="current.required"
-         :error="promptError || void 0"
-      >
-         <Input
-            v-model="promptValue"
-            :type="current.type ?? 'text'"
-            :placeholder="current.placeholder"
-            autofocus
-            @keydown.enter.prevent="dialogRef?.confirm()"
-            @update:model-value="promptError = ''"
+      <template #default="{ titleId }">
+         <component
+            :is="current.body"
+            v-if="current && current.kind !== 'prompt' && current.body"
+            @close="dialogRef?.cancel()"
          />
-      </FormField>
+         <FormField
+            v-else-if="current?.kind === 'prompt'"
+            :label="current.label"
+            :required="current.required"
+            :error="promptError || void 0"
+         >
+            <Input
+               v-model="promptValue"
+               :type="current.type ?? 'text'"
+               :placeholder="current.placeholder"
+               :aria-labelledby="current.label ? void 0 : titleId"
+               autofocus
+               @keydown.enter.prevent="dialogRef?.confirm()"
+               @update:model-value="promptError = ''"
+            />
+         </FormField>
+      </template>
    </ConfirmDialog>
 </template>
 

package/dist/components/overlays/ConfirmHost.vue.d.ts

@@ -11,10 +11,12 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly key?: PropertyKey | undefined;
     readonly loading?: boolean | undefined;
     readonly prefix?: "k-modal" | "k-drawer" | undefined;
+    readonly label?: string | undefined;
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly size?: import("./types.ts").ModalSize | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -170,7 +172,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -208,13 +209,13 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly onClose?: (() => any) | undefined;
     readonly flush?: boolean | undefined;
+    readonly onClose?: (() => any) | undefined;
     readonly sheet?: boolean | undefined;
     readonly onOpen?: (() => any) | undefined;
+    readonly closeLabel?: string | undefined;
     readonly rootClass?: unknown;
     readonly hideClose?: boolean | undefined;
-    readonly closeLabel?: string | undefined;
     readonly beforeClose?: import("./types.ts").DialogBeforeClose | undefined;
     readonly closedby?: import("../../index.ts").DialogClosedBy | undefined;
     readonly onCancel?: (() => any) | undefined;
@@ -234,10 +235,12 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly key?: PropertyKey | undefined;
     readonly loading?: boolean | undefined;
     readonly prefix?: "k-modal" | "k-drawer" | undefined;
+    readonly label?: string | undefined;
     readonly style?: import("vue").StyleValue;
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly size?: import("./types.ts").ModalSize | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -393,7 +396,6 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -431,13 +433,13 @@ declare const __VLS_export: import("vue").DefineComponent<Partial<NonNullable<{
     readonly onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     readonly onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
-    readonly onClose?: (() => any) | undefined;
     readonly flush?: boolean | undefined;
+    readonly onClose?: (() => any) | undefined;
     readonly sheet?: boolean | undefined;
     readonly onOpen?: (() => any) | undefined;
+    readonly closeLabel?: string | undefined;
     readonly rootClass?: unknown;
     readonly hideClose?: boolean | undefined;
-    readonly closeLabel?: string | undefined;
     readonly beforeClose?: import("./types.ts").DialogBeforeClose | undefined;
     readonly closedby?: import("../../index.ts").DialogClosedBy | undefined;
     readonly onCancel?: (() => any) | undefined;

package/dist/components/overlays/ContextMenu.vue

@@ -18,14 +18,15 @@
       :offset="2"
       :label="menuText"
       manual-positioning
-      @open-change="onOpenChange"
+      @open-change="isOpen = $event"
       @select="(item, event) => emit('select', item, event)"
    />
 </template>
 
 <script setup>
-import { computed, ref, shallowRef, useTemplateRef, watch } from "vue";
+import { computed, ref, shallowRef, useTemplateRef } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { syncOpenModel } from "../../internal/floating/layer";
 import MenuList from "../../internal/overlays/MenuList.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -91,15 +92,12 @@ function onKeydown(event) {
     openFromElement(document.activeElement);
   }
 }
-function onOpenChange(value) {
-  isOpen.value = value;
-  if (open.value !== value) open.value = value;
-}
-watch(open, (value) => {
-  if (value === isOpen.value) return;
-  if (value) openFromElement(targetRef.value);
-  else menuRef.value?.hide();
-});
+syncOpenModel(
+  open,
+  isOpen,
+  () => openFromElement(targetRef.value),
+  () => menuRef.value?.hide()
+);
 defineExpose({
   openAt: (x, y) => openAt(pointAt(x, y), "first"),
   hide: () => menuRef.value?.hide()