@xleddyl/443-components-vue 0.3.0 → 0.4.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/types.d.ts

@@ -60,7 +60,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 +70,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;