@witchcraft/ui 0.0.1

package/dist/runtime/composables/useScrollNearContainerEdges.js

@@ -0,0 +1,116 @@
+import { reactive, ref } from "vue";
+export const useScrollNearContainerEdges = ({
+  containerEl,
+  scrollMargin = 10,
+  outerScrollMargin,
+  fastPixelMultiplier = 4,
+  fastPixelAmount,
+  useTimer = true,
+  timerInterval = 1
+}) => {
+  fastPixelMultiplier = fastPixelAmount !== void 0 ? fastPixelAmount * 2 : fastPixelMultiplier;
+  const scrollIndicator = reactive({ left: false, right: false, down: false, up: false });
+  const isScrolling = ref(false);
+  const resetScrollIndicator = () => {
+    scrollIndicator.right = false;
+    scrollIndicator.left = false;
+    scrollIndicator.up = false;
+    scrollIndicator.down = false;
+    isScrolling.value = false;
+  };
+  let timer;
+  const scrollContainerRelative = (x, y) => {
+    const el = containerEl.value;
+    if (!el) return;
+    const leftSpace = el.scrollLeft;
+    const topSpace = el.scrollTop;
+    el.scroll(leftSpace + x, topSpace + y);
+  };
+  const move = { x: 0, y: 0 };
+  const resetMove = () => {
+    move.x = 0;
+    move.y = 0;
+  };
+  const m = scrollMargin;
+  const M = outerScrollMargin ?? 0;
+  const tryScrollContainer = (x, y) => {
+    const el = containerEl.value;
+    if (!el) return;
+    const box = el.getBoundingClientRect();
+    const leftLimit = box.x;
+    const rightLimit = box.x + box.width;
+    const topLimit = box.y;
+    const bottomLimit = box.y + box.height;
+    const leftLeftLimit = leftLimit - M;
+    const leftRightLimit = leftLimit + m;
+    const rightLeftLimit = rightLimit - M;
+    const rightRightLimit = rightLimit + m;
+    const topTopLimit = topLimit - M;
+    const topBottomLimit = topLimit + m;
+    const bottomTopLimit = bottomLimit - m;
+    const bottomBottomLimit = bottomLimit + M;
+    const t = m + M;
+    resetScrollIndicator();
+    resetMove();
+    if (x > leftLeftLimit && x < leftRightLimit) {
+      const leftSpace = el.scrollLeft;
+      if (leftSpace > 0) {
+        const edgeOffset = (leftLimit + m - x) / t;
+        move.x = -edgeOffset * fastPixelMultiplier;
+      }
+    } else if (x > rightLeftLimit && x < rightRightLimit) {
+      const rightSpace = el.scrollWidth - el.scrollLeft - Math.round(box.width);
+      if (rightSpace > 0) {
+        const edgeOffset = (x - (rightLimit - m)) / t;
+        move.x = edgeOffset * fastPixelMultiplier;
+      }
+    }
+    if (y > topTopLimit && y < topBottomLimit) {
+      const topSpace = el.scrollTop;
+      if (topSpace > 0) {
+        const edgeOffset = (topLimit + m - y) / t;
+        move.y = -edgeOffset * fastPixelMultiplier;
+      }
+    } else if (y > bottomTopLimit && y < bottomBottomLimit) {
+      const bottomSpace = el.scrollHeight - el.scrollTop - Math.round(box.height);
+      if (bottomSpace > 0) {
+        const edgeOffset = (y - (bottomLimit - m)) / t;
+        move.y = edgeOffset * fastPixelMultiplier;
+      }
+    }
+    if (move.x !== 0 || move.y !== 0) {
+      isScrolling.value = true;
+      scrollIndicator.right = move.x > 0;
+      scrollIndicator.left = move.x < 0;
+      scrollIndicator.up = move.y < 0;
+      scrollIndicator.down = move.y > 0;
+      scrollContainerRelative(move.x, move.y);
+    }
+  };
+  const clearScrollInterval = () => {
+    clearInterval(timer);
+  };
+  const scrollEdges = (clientX, clientY, overrideUseTimer) => {
+    clearInterval(timer);
+    tryScrollContainer(clientX, clientY);
+    if (overrideUseTimer ? overrideUseTimer : useTimer) {
+      timer = setInterval(() => {
+        tryScrollContainer(clientX, clientY);
+      }, timerInterval);
+    }
+  };
+  const endScroll = () => {
+    clearScrollInterval();
+    resetScrollIndicator();
+    resetMove();
+  };
+  return {
+    scrollEdges,
+    scrollIndicator,
+    resetScrollIndicator,
+    clearScrollInterval,
+    isScrolling,
+    endScroll
+    /* resetMove does not need to be returned since the user cannot call the timer interval manually and the scrollContainer function resets it before starting. */
+  };
+};

package/dist/runtime/composables/useScrollNearContainerEdges.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryObj } from "@storybook/vue3";
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;

package/dist/runtime/composables/useScrollNearContainerEdges.stories.js

@@ -0,0 +1,85 @@
+import { onMounted, ref } from "vue";
+import { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
+import { twMerge } from "../utils/twMerge.js";
+const meta = {
+  title: "Composables/ScrollNearContainerEdges"
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    setup: () => {
+      const containerEl = ref(null);
+      const {
+        resetScrollIndicator,
+        scrollEdges,
+        endScroll,
+        scrollIndicator,
+        isScrolling
+      } = useScrollNearContainerEdges({
+        containerEl,
+        scrollMargin: 20,
+        outerScrollMargin: 20
+      });
+      const pos = ref({ x: 0, y: 0 });
+      onMounted(() => {
+        pos.value.x = containerEl.value.getBoundingClientRect().left;
+        pos.value.y = containerEl.value.getBoundingClientRect().top;
+      });
+      const moveDrag = (e) => {
+        pos.value.x = e.clientX;
+        pos.value.y = e.clientY;
+        scrollEdges(e.clientX, e.clientY);
+      };
+      const endDrag = (_e) => {
+        endScroll();
+        document.removeEventListener("mousemove", moveDrag);
+        document.removeEventListener("mouseup", endDrag);
+      };
+      const startDrag = (_e) => {
+        document.addEventListener("mousemove", moveDrag);
+        document.addEventListener("mouseup", endDrag);
+      };
+      return {
+        args,
+        containerEl,
+        resetScrollIndicator,
+        scrollEdges,
+        endScroll,
+        startDrag,
+        scrollIndicator,
+        isScrolling,
+        twMerge,
+        pos
+      };
+    },
+    template: `
+		<div>
+			<p>Scroll the container by dragging the red box (which represents the dragging mouse position).</p>
+			<p>It should drag slow, then faster as the mouse nears the edges and scroll indicators should appear on the scrolling edges.</p>
+		</div>
+		<div 
+			:class="twMerge(
+				'relative flex flex-col max-h-[300px] max-w-[300px] border-2 border-red-500',
+				isScrolling && 'after:content-[\\'\\'] after:absolute after:inset-0 after:border-transparent after:border-[15px]', 
+				scrollIndicator.right && 'after:border-r-accent-500/60',
+				scrollIndicator.down && 'after:border-b-accent-500/60',
+				scrollIndicator.left && 'after:border-l-accent-500/60',
+				scrollIndicator.up && 'after:border-t-accent-500/60',
+			)"
+			
+		>
+			<div 
+				class="overflow-auto"
+				ref="containerEl"
+			>
+				<div class="h-[1000px] w-[1000px]"/>
+				<div
+					@mousedown="startDrag" 
+					:style="\`top:\${pos.y}px; left:\${pos.x}px;\`"
+					class="h-[20px] w-[20px] -ml-[10px] -mt-[10px] bg-red-500 cursor-move fixed"
+				></div>
+			</div>
+		</div>
+		`
+  })
+};

package/dist/runtime/composables/useSetupDarkMode.d.ts

@@ -0,0 +1,12 @@
+import { useDarkMode } from "./useDarkMode.js.js";
+/**
+ * A composable for setting up dark mode that automatically takes care of saving the user's preference.
+ *
+ * See the returned utilities for more details.
+ *
+ * Use it's twin, `useInjectedDarkMode` for accessing the injected state and commands in components
+ *
+ * Note that this should only be called once at the root of the app.
+ *
+ */
+export declare function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode>;

package/dist/runtime/composables/useSetupDarkMode.js

@@ -0,0 +1,4 @@
+import { useDarkMode } from "./useDarkMode.js";
+export function useSetupDarkMode(...args) {
+  return useDarkMode(...args);
+}

package/dist/runtime/composables/useSetupI18n.d.ts

@@ -0,0 +1,20 @@
+import { type InjectionKey, type Ref } from "vue";
+export type TranslationFunction = (key: string, replacements?: Record<string, any>) => string;
+/**
+ * A composable for providing a translation function + messages for the library. Note the Root component already takes care of setting this up with defaults, disable it via it's `useBuiltinTranslations` option.
+ *
+ * Should be called only once. You can choose to await it or not (see the `useDummyMessageSetWhileLoading` option).
+ *
+ * A default function is available, see {@link defaultTranslationFunction}.
+ */
+export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyMessageSetWhileLoading, translationFunction, }: {
+    locale: Ref<string>;
+    /** Will asynchronously load the built-in translations for the current locale (watching and updating if needed). If you don't use this, you'll need to provide a custom translation function. */
+    useBuiltinTranslations?: boolean;
+    /** To avoid having to wrap the component in a Suspense component because of the await on `useSetupI18n`, we can provide a dummy message proxy that just returns empty text until the messages are loaded. */
+    useDummyMessageSetWhileLoading?: boolean;
+    /** A	custom translation function. The default requires the `useBuiltinTranslations` option to be true. */
+    translationFunction?: TranslationFunction;
+}): Promise<void>;
+export declare const i18nInjectionKey: InjectionKey<TranslationFunction>;
+export declare const translationMessagesInjectionKey: InjectionKey<Ref<Record<string, any>, Record<string, any>>>;

package/dist/runtime/composables/useSetupI18n.js

@@ -0,0 +1,50 @@
+import {
+  provide,
+  ref,
+  watch
+} from "vue";
+import { defaultTranslationFunction } from "../helpers/defaultTranslationFunction.js";
+const _i18nInjectionKey = Symbol("witchcraftUiI18n");
+const _translationMessagesInjectionKey = Symbol("witchcraftUiI18nMessages");
+const messagesGlob = import.meta.glob("../assets/locales/*.json");
+const loaded = {};
+const dummyLibraryMessages = new Proxy({}, {
+  get() {
+    return "...";
+  }
+});
+const dummyMessageSet = new Proxy({}, {
+  get(_, key) {
+    if (key === "witchcraft-ui") {
+      return dummyLibraryMessages;
+    } else return void 0;
+  }
+});
+export async function useSetupI18n({
+  locale,
+  useBuiltinTranslations = false,
+  useDummyMessageSetWhileLoading = true,
+  translationFunction = defaultTranslationFunction
+}) {
+  provide(_i18nInjectionKey, translationFunction);
+  if (useBuiltinTranslations) {
+    const messages = ref(useDummyMessageSetWhileLoading ? dummyMessageSet : {});
+    provide(_translationMessagesInjectionKey, messages);
+    async function loadMessageSet(l) {
+      const isLoaded = loaded[l];
+      if (isLoaded) {
+        messages.value = loaded[l];
+      } else {
+        const newMessages = (await messagesGlob[`../assets/locales/${l}.json`]()).default;
+        loaded[l] = newMessages;
+        messages.value = newMessages;
+      }
+    }
+    void loadMessageSet(locale.value);
+    watch(locale, async () => {
+      void loadMessageSet(locale.value);
+    });
+  }
+}
+export const i18nInjectionKey = _i18nInjectionKey;
+export const translationMessagesInjectionKey = _translationMessagesInjectionKey;

package/dist/runtime/composables/useSetupLocale.d.ts

@@ -0,0 +1,9 @@
+import { type InjectionKey, type Ref } from "vue";
+export declare const languageLocaleInjectionKey: InjectionKey<Ref<string>>;
+export declare const timeLocaleInjectionKey: InjectionKey<Ref<string>>;
+export declare function useSetupLocale(): {
+    languageLocale: Ref<string>;
+    timeLocale: Ref<string>;
+    setLanguageLocale: (value: string) => void;
+    setTimeLocale: (value: string) => void;
+};

package/dist/runtime/composables/useSetupLocale.js

@@ -0,0 +1,21 @@
+import { provide, ref } from "vue";
+export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale");
+export const timeLocaleInjectionKey = Symbol("witchcraftUiTimeLocale");
+export function useSetupLocale() {
+  const languageLocale = ref("en");
+  const timeLocale = ref("en-GB");
+  function setLanguageLocale(value) {
+    languageLocale.value = value;
+  }
+  function setTimeLocale(value) {
+    timeLocale.value = value;
+  }
+  provide(languageLocaleInjectionKey, languageLocale);
+  provide(timeLocaleInjectionKey, timeLocale);
+  return {
+    languageLocale,
+    timeLocale,
+    setLanguageLocale,
+    setTimeLocale
+  };
+}

package/dist/runtime/composables/useShowDevOnlyKey.d.ts

@@ -0,0 +1,7 @@
+/**
+    * For nuxt only.
+    *
+    * Communicates with the dev only component to show/hide it depending on a keypress (single key, no modifiers, `F1` by default). 	*
+    */
+export declare function useShowDevOnlyKey(key?: string): void;
+export declare const showDevOnlyInjectionKey: symbol;

package/dist/runtime/composables/useShowDevOnlyKey.js

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, onMounted, provide, ref } from "vue";
+const injectionKey = Symbol("showDevOnly");
+export function useShowDevOnlyKey(key = "F1") {
+  if (!import.meta.dev) return;
+  const showDevOnly = ref(false);
+  provide(injectionKey, showDevOnly);
+  const listener = (e) => {
+    if (e.key === key && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      showDevOnly.value = !showDevOnly.value;
+      e.preventDefault();
+    }
+  };
+  onMounted(() => {
+    document.addEventListener("keydown", listener);
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", listener);
+  });
+}
+export const showDevOnlyInjectionKey = injectionKey;

package/dist/runtime/composables/useSuggestions.d.ts

@@ -0,0 +1,38 @@
+import { type Ref } from "vue";
+import { type SuggestionsEmits, type SuggestionsOptions } from "../components/shared/props.js.js";
+/**
+ * The logic for the suggestions component.
+ *
+ * Note that while object suggestions are supported, the `suggestionLabel` prop is required and $inputModel and $modelValue will still be string values (as returned by the suggestionLabel function).
+ */
+export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $modelValue: Ref<string>, emit: SuggestionsEmits, opts: SuggestionsOptions<TSuggestion>, debug?: boolean): {
+    list: import("vue").ComputedRef<any[] | undefined>;
+    filtered: import("vue").ComputedRef<any[] | undefined>;
+    active: Ref<number, number>;
+    available: import("vue").ComputedRef<boolean>;
+    moreThanOneAvailable: import("vue").ComputedRef<boolean>;
+    hasExactlyMatching: import("vue").ComputedRef<TSuggestion | undefined>;
+    /** Whether there is a valid suggestion that can be submitted. If `restrictToSuggestions` is true, this will be true if isValid is true, otherwise this is considered to be true if suggestions are available. */
+    hasValidSuggestion: import("vue").ComputedRef<boolean>;
+    openable: import("vue").ComputedRef<boolean | undefined>;
+    getLabel: (item: any) => string;
+    isOpen: Ref<boolean, boolean>;
+    open: () => void;
+    close: () => void;
+    enterSelected: () => void;
+    enterSuggestion: (num: number) => void;
+    toggle: () => void;
+    cancel: () => void;
+    select: (num: number) => void;
+    prev: () => void;
+    next: () => void;
+    first: () => void;
+    last: () => void;
+};
+export declare function useSuggestionsInputAria(id: Ref<string>, isOpen: Ref<boolean>, activeSuggestion: Ref<number>, suggestions: Ref<any | undefined>): import("vue").ComputedRef<{
+    "aria-autocomplete": "both" | undefined;
+    "aria-controls": string | undefined;
+    role: string | undefined;
+    "aria-expanded": boolean | undefined;
+    "aria-activedescendant": string | undefined;
+}>;

package/dist/runtime/composables/useSuggestions.js

@@ -0,0 +1,226 @@
+import { isBlank } from "@alanscodelog/utils/isBlank.js";
+import { isObject } from "@alanscodelog/utils/isObject.js";
+import { computed, ref, toRaw, watch } from "vue";
+export function useSuggestions($inputValue, $modelValue, emit, opts, debug = false) {
+  if (typeof opts.suggestions?.[0] === "object" && !opts.suggestionLabel && !opts.suggestionsFilter) {
+    throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.");
+  }
+  const isOpen = ref(false);
+  const activeSuggestion = ref(-1);
+  watch(isOpen, (val) => {
+    emit("update:isOpen", val);
+  });
+  watch(activeSuggestion, (val) => {
+    emit("update:activeSuggestion", val);
+  });
+  const suggestionKey = (item) => {
+    if (isObject(item)) {
+      if (opts.suggestionLabel) {
+        return opts.suggestionLabel(item);
+      }
+      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
+    }
+    return item;
+  };
+  const getSuggestionLabel = (item) => opts.suggestionLabel?.(item) ?? suggestionKey(item) ?? "";
+  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase()));
+  const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter);
+  const suggestionsList = computed(() => {
+    if (opts.suggestions) {
+      const res = suggestionsFilter.value($inputValue.value, opts.suggestions);
+      return res;
+    }
+    return void 0;
+  });
+  const suggestionAvailable = computed(() => (suggestionsList.value?.length ?? 0) > 0);
+  const moreThanOneSuggestionAvailable = computed(() => (suggestionsList.value?.length ?? 0) > 1);
+  const exactlyMatchingSuggestion = computed(() => opts.suggestions?.find((suggestion) => $inputValue.value === getSuggestionLabel(suggestion)));
+  const isValidSuggestion = computed(() => !opts.restrictToSuggestions && opts.isValid || suggestionAvailable.value);
+  const openable = computed(
+    () => opts.canOpen && (isBlank($inputValue.value) && opts.allowOpenEmpty || suggestionAvailable.value)
+  );
+  const filteredSuggestions = computed(() => {
+    if (opts.suggestions) {
+      const res = suggestionAvailable.value ? suggestionsList.value : opts.suggestions;
+      if (opts.restrictToSuggestions && !isValidSuggestion.value) return res;
+      if (opts.preventDuplicateValues && opts.values) {
+        return res.filter((suggestion) => !opts.values.includes(suggestionKey(suggestion)));
+      }
+      return res;
+    }
+    return void 0;
+  });
+  const closeSuggestions = () => {
+    if (debug) console.log("closeSuggestions");
+    isOpen.value = false;
+    activeSuggestion.value = -1;
+  };
+  const openSuggestions = () => {
+    if (debug) console.log("openSuggestions", { openable: openable.value });
+    if (!openable.value) return;
+    if (activeSuggestion.value === -1) {
+      if (exactlyMatchingSuggestion.value) {
+        activeSuggestion.value = suggestionsList.value?.indexOf(exactlyMatchingSuggestion.value) ?? -1;
+      } else {
+        activeSuggestion.value = 0;
+      }
+    }
+    isOpen.value = true;
+  };
+  function enterSuggestion(num) {
+    if (num < -1 || num > (filteredSuggestions.value?.length ?? 0)) return;
+    if (debug) console.log("enterSuggestion", num);
+    if (filteredSuggestions.value === void 0) return;
+    const suggestion = filteredSuggestions.value[num];
+    const val = suggestionKey(suggestion);
+    $modelValue.value = val;
+    $inputValue.value = getSuggestionLabel(suggestion);
+    closeSuggestions();
+    emit("submit", val, toRaw(suggestion));
+  }
+  const enterSelected = () => {
+    if (activeSuggestion.value === -1) {
+      if (!opts.restrictToSuggestions) {
+        if (debug) console.log("enterSelected, unrestricted, emitting submit");
+        emit("submit", $inputValue.value);
+      } else {
+        if (debug) console.log("enterSelected, no active suggestion, ignoring");
+      }
+      return;
+    }
+    if (debug) console.log("enterSelected");
+    enterSuggestion(activeSuggestion.value);
+  };
+  const selectSuggestion = (num) => {
+    if (debug) console.log("selectSuggestion", num);
+    if (num >= -1) {
+      activeSuggestion.value = num;
+    }
+    if (num === Infinity && (filteredSuggestions.value?.length ?? 0) > 0) {
+      activeSuggestion.value = filteredSuggestions.value.length - 1;
+    }
+  };
+  const toggleSuggestions = () => {
+    isOpen.value ? closeSuggestions() : openSuggestions();
+  };
+  const prevSuggestion = () => {
+    if (!filteredSuggestions.value) return;
+    if (activeSuggestion.value > 0) {
+      activeSuggestion.value--;
+    } else if (filteredSuggestions.value) {
+      activeSuggestion.value = filteredSuggestions.value.length - 1;
+    }
+  };
+  const nextSuggestion = () => {
+    if (!filteredSuggestions.value) return;
+    if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
+      activeSuggestion.value = 0;
+    } else {
+      activeSuggestion.value++;
+    }
+  };
+  const firstSuggestion = () => {
+    selectSuggestion(0);
+  };
+  const lastSuggestion = () => {
+    selectSuggestion(Infinity);
+  };
+  const cancel = () => {
+    if (debug) console.log("cancel");
+    $inputValue.value = getSuggestionLabel($modelValue.value);
+    closeSuggestions();
+  };
+  watch(() => opts.canOpen, (val) => {
+    if (!val) {
+      if (debug) console.log("canOpen changed to false, closing suggestions");
+      closeSuggestions();
+    }
+  });
+  watch(openable, (val) => {
+    if (!val) {
+      if (debug) console.log("openable changed to false, closing suggestions");
+      closeSuggestions();
+    }
+  });
+  watch(isValidSuggestion, () => {
+    if (!isValidSuggestion.value) {
+      if (debug) console.log("isValidSuggestion changed to false, opening suggestions");
+      openSuggestions();
+    }
+  });
+  watch($modelValue, () => {
+    $inputValue.value = getSuggestionLabel($modelValue.value);
+    if (debug) console.log("modelValue changed");
+  });
+  const defaultSuggestionSelector = (suggestions, input) => {
+    if (input.length === 0) return 0;
+    let longestMatch;
+    let ii = -1;
+    for (let i = 0; i < suggestions.length; i++) {
+      const suggestion = suggestions[i];
+      const label = getSuggestionLabel(suggestion);
+      const labelPart = label.slice(0, input.length);
+      if (labelPart === input) {
+        if (label.length > (longestMatch?.[0]?.length ?? 0)) {
+          longestMatch = label;
+          ii = i;
+        }
+      }
+    }
+    return ii;
+  };
+  watch($inputValue, () => {
+    if (debug) console.log("input changed:", $inputValue.value, "modelValue:", $modelValue.value);
+    if (getSuggestionLabel($modelValue.value) === $inputValue.value) return;
+    if (suggestionAvailable.value) {
+      if (debug) console.log("input changed, suggestion available, opening suggestions");
+      openSuggestions();
+    }
+    if (!opts.restrictToSuggestions) {
+      if (debug) console.log("input changed, unrestricted, setting modelValue");
+      $modelValue.value = $inputValue.value;
+    }
+    if (exactlyMatchingSuggestion.value && suggestionsList.value) {
+      if (debug) console.log("input changed, exactly matching, setting activeSuggestion");
+      selectSuggestion(suggestionsList.value.indexOf(exactlyMatchingSuggestion.value));
+    } else {
+      if (debug) console.log("input changed, not exactly matching, finding longest match");
+      const i = opts.suggestionSelector?.(filteredSuggestions.value ?? [], $inputValue.value) ?? defaultSuggestionSelector(filteredSuggestions.value ?? [], $inputValue.value);
+      selectSuggestion(i);
+    }
+  });
+  return {
+    list: suggestionsList,
+    filtered: filteredSuggestions,
+    active: activeSuggestion,
+    available: suggestionAvailable,
+    moreThanOneAvailable: moreThanOneSuggestionAvailable,
+    hasExactlyMatching: exactlyMatchingSuggestion,
+    /** Whether there is a valid suggestion that can be submitted. If `restrictToSuggestions` is true, this will be true if isValid is true, otherwise this is considered to be true if suggestions are available. */
+    hasValidSuggestion: isValidSuggestion,
+    openable,
+    getLabel: getSuggestionLabel,
+    isOpen,
+    open: openSuggestions,
+    close: closeSuggestions,
+    enterSelected,
+    enterSuggestion,
+    toggle: toggleSuggestions,
+    cancel,
+    select: selectSuggestion,
+    prev: prevSuggestion,
+    next: nextSuggestion,
+    first: firstSuggestion,
+    last: lastSuggestion
+  };
+}
+export function useSuggestionsInputAria(id, isOpen, activeSuggestion, suggestions) {
+  const ariaInputProps = computed(() => ({
+    "aria-autocomplete": suggestions !== void 0 ? "both" : void 0,
+    "aria-controls": suggestions !== void 0 ? `suggestions-${id.value}` : void 0,
+    role: suggestions ? "combobox" : void 0,
+    "aria-expanded": suggestions !== void 0 ? isOpen.value : void 0,
+    "aria-activedescendant": isOpen.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
+  }));
+  return ariaInputProps;
+}

package/dist/runtime/directives/index.d.ts

@@ -0,0 +1,4 @@
+export { vDetectFlex } from "./vDetectFlex.js.js";
+export { vExtractRootEl } from "./vExtractRootEl.js.js";
+export { vResizableCols } from "./vResizableCols.js.js";
+export { vResizeObserver } from "./vResizeObserver.js.js";

package/dist/runtime/directives/index.js

@@ -0,0 +1,4 @@
+export { vDetectFlex } from "./vDetectFlex.js";
+export { vExtractRootEl } from "./vExtractRootEl.js";
+export { vResizableCols } from "./vResizableCols.js";
+export { vResizeObserver } from "./vResizeObserver.js";

package/dist/runtime/directives/vDetectFlex.d.ts

@@ -0,0 +1,2 @@
+import type { Directive } from "vue";
+export declare const vDetectFlex: Directive;