@xleddyl/443-components-vue 0.3.0 → 0.5.0

package/dist/components/overlays/HoverCard.vue

@@ -17,7 +17,7 @@
 
 <script setup>
 import { useTemplateRef } from "vue";
-import FieldBoundary from "../../internal/overlays/FieldBoundary";
+import FieldBoundary from "../core/FieldBoundary.vue";
 import { useHoverTrigger } from "../../internal/overlays/hover";
 import { ARROW_OFFSET, syncOpenModel, useFloatingLayer } from "../../internal/floating/layer";
 import { useSlotTrigger } from "../../internal/floating/trigger";

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

@@ -206,7 +206,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -408,7 +408,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {

package/dist/components/overlays/Popover.vue

@@ -21,7 +21,7 @@
 
 <script setup>
 import { useId, useTemplateRef, watch } from "vue";
-import FieldBoundary from "../../internal/overlays/FieldBoundary";
+import FieldBoundary from "../core/FieldBoundary.vue";
 import { focusFirst } from "../../internal/overlays/focus";
 import { ARROW_OFFSET, syncOpenModel, useFloatingLayer } from "../../internal/floating/layer";
 import { setAttributes, useInvoker, useSlotTrigger } from "../../internal/floating/trigger";

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

@@ -209,7 +209,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }, {
     show: () => void;
     hide: () => void;
@@ -415,7 +415,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {

package/dist/components/overlays/Toaster.vue

@@ -79,7 +79,7 @@
                         variant="ghost"
                         tone="neutral"
                         :aria-label="dismissText"
-                        @click="dismiss(entry.id)"
+                        @click="dismissFromToast(entry.id)"
                      />
                   </div>
                   <span
@@ -122,6 +122,7 @@ const props = defineProps({
   position: { type: String, required: false, default: "bottom-right" },
   max: { type: Number, required: false, default: 4 },
   duration: { type: Number, required: false, default: 4e3 },
+  actionDuration: { type: Number, required: false, default: 1e4 },
   gap: { type: Number, required: false, default: 8 },
   expand: { type: Boolean, required: false },
   progress: { type: Boolean, required: false },
@@ -274,7 +275,8 @@ function syncEntries() {
 }
 const timers = /* @__PURE__ */ new Map();
 function durationOf(item) {
-  return item.duration ?? props.duration;
+  if (item.duration !== void 0) return item.duration;
+  return item.action ? Math.max(props.duration, props.actionDuration) : props.duration;
 }
 function hasTimer(item) {
   const duration = durationOf(item);
@@ -343,8 +345,15 @@ function resumeTimers() {
   for (const [id, timer] of timers) if (timer.handle === void 0) run(id, timer);
 }
 watch(paused, (value) => value ? pauseTimers() : resumeTimers());
+function actionHint(item) {
+  if (!item.action || !props.hotkey) return "";
+  return t("toaster.actionHint", {
+    hotkey: ariaKeyShortcuts(props.hotkey, false),
+    action: item.action.label
+  });
+}
 function announce(item) {
-  const text = [item.title, ...descriptionLines(item)].filter(Boolean).join(". ");
+  const text = [item.title, ...descriptionLines(item), actionHint(item)].filter(Boolean).join(". ");
   const target = item.tone === "danger" ? assertiveMessage : politeMessage;
   target.value = "";
   nextTick(() => target.value = text);
@@ -408,9 +417,29 @@ watch(active, async (value) => {
 function dismiss(id) {
   toast.dismiss(id);
 }
+let returnFocus = null;
+function focusInToaster() {
+  const active2 = document.activeElement;
+  return Boolean(active2 && toasterRef.value?.contains(active2));
+}
+function restoreFocus() {
+  const target = returnFocus;
+  returnFocus = null;
+  const next = toasterRef.value?.querySelector(
+    '.k-toast[data-visible="true"]:not([data-removed="true"]) button'
+  );
+  if (target?.isConnected) target.focus({ preventScroll: true });
+  else if (next) next.focus({ preventScroll: true });
+  if (!focusInToaster()) focusInside.value = false;
+}
+function dismissFromToast(id) {
+  const hadFocus = focusInToaster();
+  dismiss(id);
+  if (hadFocus) nextTick(restoreFocus);
+}
 function runAction(item, event) {
   item.action?.onClick(event);
-  if (!item.action?.keepOpen) dismiss(item.id);
+  if (!item.action?.keepOpen) dismissFromToast(item.id);
 }
 function onPointerEnter(event) {
   if (event.pointerType === "mouse") hovered.value = true;
@@ -451,6 +480,8 @@ function onVisibilityChange() {
 useHotkey(
   () => props.hotkey ? [props.hotkey] : [],
   () => {
+    if (!focusInToaster())
+      returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const first = toasterRef.value?.querySelector(
       '.k-toast[data-visible="true"] button'
     );

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

@@ -3,6 +3,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -214,6 +215,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -426,6 +428,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     duration: number;
     position: ToasterPosition;
     gap: number;
+    actionDuration: number;
     hotkey: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -10,6 +10,7 @@ export interface ToasterOptions {
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -60,7 +61,7 @@ export interface MenuSeparator {
 export type MenuItem = MenuActionItem | MenuCheckboxItem | MenuRadioItem;
 export type MenuEntry = MenuItem | MenuLabel | MenuSeparator;
 export type MenuItems = MenuEntry[] | MenuEntry[][];
-export interface CommandItem {
+export interface CommandItem<T = unknown> {
     id: string;
     label: string;
     description?: string;
@@ -70,11 +71,14 @@ export interface CommandItem {
     to?: LinkTarget;
     href?: string;
     disabled?: boolean;
-    onSelect?: (item: CommandItem) => void;
+    data?: T;
+    onSelect?: (item: CommandItem<T>) => void;
 }
-export interface CommandGroup {
+export interface CommandGroup<T = unknown> {
     id: string;
     label?: string;
     description?: string;
-    items: CommandItem[];
+    items: CommandItem<T>[];
 }
+export type CommandSearch<T = unknown> = (query: string, signal: AbortSignal) => CommandGroup<T>[] | Promise<CommandGroup<T>[]>;
+export type CommandEmptyText = string | ((query: string) => string);

package/dist/components/templates/DashboardLayout.vue

@@ -45,12 +45,17 @@
                      :search="searchFunction"
                      :placeholder="searchProps?.placeholder ?? searchPlaceholderText"
                   >
-                     <template
-                        v-for="entry in searchSlots"
-                        :key="entry.source"
-                        #[entry.target]="scope"
-                     >
-                        <slot :name="entry.source" v-bind="scope" />
+                     <template v-if="$slots['search-item']" #item="scope">
+                        <slot name="search-item" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-empty']" #empty="scope">
+                        <slot name="search-empty" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-group-label']" #group-label="scope">
+                        <slot name="search-group-label" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-after-results']" #after-results="scope">
+                        <slot name="search-after-results" v-bind="scope" />
                      </template>
                   </CommandPalette>
                </slot>
@@ -138,6 +143,9 @@
             :title="settingsTitleText"
             :on-sign-out="onSignOut"
          >
+            <template v-if="$slots['settings-account-fields']" #account-fields="scope">
+               <slot name="settings-account-fields" v-bind="scope" />
+            </template>
             <template v-for="entry in settingsSlots" :key="entry.source" #[entry.target]="scope">
                <slot :name="entry.source" v-bind="scope" />
             </template>
@@ -147,7 +155,7 @@
 </template>
 
 <script setup>
-import { computed, ref, useSlots, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import { navCommands, toNavSections } from "../../internal/layout/navigation";
 import { matchesSearch } from "../../internal/core/text";
@@ -200,6 +208,7 @@ const props = defineProps({
   themeLabel: { type: String, required: false }
 });
 const emit = defineEmits(["accountSelect"]);
+const slots = defineSlots();
 const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const settingsOpen = defineModel("settingsOpen", { type: Boolean, ...{ default: false } });
@@ -212,7 +221,6 @@ const searchPlaceholderText = computed(
 const navigationGroupLabel = computed(
   () => props.searchNavigationLabel ?? t("dashboardLayout.pages")
 );
-const slots = useSlots();
 const shell = useTemplateRef("shell");
 const searchOpen = ref(false);
 const hasDesktopTopbar = computed(
@@ -228,21 +236,16 @@ const hasSidebarFooter = computed(
 const hasSettings = computed(
   () => props.accountAction === "settings" && Boolean(props.account || props.settingsSections)
 );
-const SETTINGS_SLOT_PREFIX = "settings-";
+const SETTINGS_SLOT_PATTERN = /^settings-(section|actions)-./;
 const settingsSlots = computed(
-  () => Object.keys(slots).filter((name) => name.startsWith(SETTINGS_SLOT_PREFIX)).map((name) => ({
+  () => Object.keys(slots).filter((name) => SETTINGS_SLOT_PATTERN.test(name)).map((name) => ({
     source: name,
-    target: name.slice(SETTINGS_SLOT_PREFIX.length)
+    target: name.slice("settings-".length)
   }))
 );
-const SEARCH_SLOT_PREFIX = "search-";
-const searchSlots = computed(
-  () => Object.keys(slots).filter((name) => name.startsWith(SEARCH_SLOT_PREFIX)).map((name) => ({
-    source: name,
-    target: name.slice(SEARCH_SLOT_PREFIX.length)
-  }))
+const navigationCommands = computed(
+  () => navCommands(toNavSections(props.navigation))
 );
-const navigationCommands = computed(() => navCommands(toNavSections(props.navigation)));
 const searchFunction = computed(() => {
   const search = props.search;
   if (typeof search !== "function") return void 0;