@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/shared/props.d.ts

@@ -1,4 +1,5 @@
 import { type PropType } from "vue";
+import type { PopupPositioner, PopupPositionModifier } from "../../types/index.js";
 export interface LinkableByIdProps {
     /**
      * The id for the input. Uses vue's useId if none provided.
@@ -8,6 +9,11 @@ export interface LinkableByIdProps {
     id?: string;
 }
 export declare const getFallbackId: () => string;
+export interface ButtonProps {
+    border?: boolean;
+    color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    autoTitleFromAria?: boolean;
+}
 export interface LabelProps {
     /** For the label. Note the component might or might not support an actual label element. If none is supported, this is used for the `aria-label`. */
     label?: string;
@@ -53,6 +59,8 @@ export type SuggestionsProps<T = any> = {
     allowOpenEmpty?: boolean;
     /** Whether the suggestions dropdown can be opened. Default is true. */
     canOpen?: boolean;
+    /** Whether the suggestions dropdown can be closed. Default is true. */
+    canClose?: boolean;
     /** Whether the input is valid. Default is true. */
     isValid?: boolean;
     /**
@@ -61,12 +69,81 @@ export type SuggestionsProps<T = any> = {
      * You can implement custom behavior here like fuzzy matching. Note that an exactly matching selection is always picked (the function will not be called).
      */
     suggestionSelector?: (suggestions: T[], input: string) => number;
+    /** In the case modelValue is an array of values, whether to show the selected values in the suggestions list. Default is true so users can deselect from the list as well. If false, the checkboxes will also not be shown. */
+    showSelectedValues?: boolean;
 };
-export type SuggestionsOptions<T> = SuggestionsProps<T> & MultiValueProps;
-export interface SuggestionsEmits {
-    (e: "submit", val: string, suggestion?: any): void;
+export type SuggestionsOptions<T> = SuggestionsProps<T>;
+export interface SuggestionsEmits<TMultivalue extends boolean = false> {
+    (e: "submit", val: string, suggestion?: any, wasRemoved?: boolean): void;
     (e: "update:isOpen", val: boolean): void;
-    (e: "update:activeSuggestion", val: number): void;
+    (e: "update:activeSuggestion", val: TMultivalue extends true ? number[] : number): void;
+}
+export interface PopupProps {
+    /**
+     * Whether to use the dialog element instead of a regular backdrop. While using the dialog element would be ideal, css variables won't be applied to it, tailwind themes will fail, etc, if the css variables are not applied to `::backdrop`.
+     *
+     * Using a div ends up easier to setup.
+     *
+     * The default is now false.
+     */
+    useDialogForBackdrop?: false;
+    /** Wether to use a backdrop (clicking it will close the popup), or not (use is allowed to click elsewhere. */
+    useBackdrop?: boolean;
+    /**
+     * The preferred horizontal positioning of the popup. The first position in the array to fit is used.
+     *
+     * All elements need to have box-sizing: border-box set. Also note that while the component should work with dynamic popup sizes, in practice there's issues with the positioning being slightly off. Giving the popup element a static size is better. If you need margins around the popup, this can be done with a wrapper element + padding.
+     *
+     * The positions `right`/`left`/`top`/`bottom` are relative to the opposite side of the button element so as to try not to cover the triggering button.
+     *
+     * So positioning `right` and `left` look like this:
+     *
+     * ```
+     * // right
+     *         [button]
+     *         [----popup----]
+     *
+     * // left
+     *         [button]
+     *  [----popup----]
+     * ```
+     *
+     * Positions `*-most` try to position the popup as close to that side of the screen as possible, otherwise limiting the popup to that edge. For example:
+     *
+     * ```
+     * [--------------screen---------------]
+     * // right-most
+     *           [button]
+     *                   [----popup----]
+     * // near the edge:
+     *                 [button]
+     *                      [----popup----]
+     * ```
+     *
+     * There is also the `center-screen` position, which centers the popup on the screen.
+     *
+     * These last two (`*-most` and `center-screen`) are greedy, they will always find a position that fits. Positions listed after are ignored.
+     *
+     * You can also specify a function instead which is given some additional information regarding the space around the button reference element. It should a number for the x position (or y, if preferredVertical).
+     *
+     * If you only need to slightly modify	the position, you can use the `modifyPosition` option instead.
+     */
+    preferredHorizontal?: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner;
+    /** See `preferredHorizontal`. */
+    preferredVertical?: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner;
+    /**
+     * When the user scrolls or resizes, normally the entire popup position is recomputed, taking into account the preferred positioning.
+     *
+     * This can cause it to shift around.
+     *
+     * Set this to true to only shift the popup depending on how much the button element moved and avoid recalculating the best position.
+     */
+    avoidRepositioning?: boolean;
+    /**
+     * Allows modifying the calculated position, to for example, clamp it.
+     */
+    modifyPosition?: PopupPositionModifier;
+    canClose?: boolean;
 }
 export declare const baseInteractiveProps: {
     readonly unstyle: {
@@ -106,18 +183,6 @@ export declare const baseInteractivePropsDefaults: {
     border: boolean;
     unstyle: boolean;
 };
-export type MultiValueProps = {
-    /**
-     * If values is used, for components that handle multiple values, prevents adding of duplicate values.
-     *
-     * For other components, it prevents suggesting values that have already been added.
-     *
-     * Default is true.
-     */
-    preventDuplicateValues?: boolean;
-    /** The selected values.*/
-    values?: string[];
-};
 /**
     * @internal
     *  For easily typing attributes created by useDivideAttrs. See readme.

package/dist/runtime/components/shared/storyHelpers/playInput.js

@@ -14,13 +14,13 @@ export const playMultipleValues = async ({ canvasElement, args }) => {
   await userEvent.type(input, "A");
   await expect(canvas.getByTestId("model-value")).toHaveTextContent("A");
   await userEvent.keyboard("{Enter}");
-  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A"].join(", "));
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues].join(", "));
   await expect(canvas.getByTestId("model-value")).toBeEmptyDOMElement();
-  await userEvent.type(input, "B");
-  await expect(canvas.getByTestId("model-value")).toHaveTextContent("B");
+  await userEvent.type(input, "D");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("D");
   await userEvent.keyboard("{Enter}");
-  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A", "B"].join(", "));
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "D"].join(", "));
   await userEvent.clear(input);
   await userEvent.keyboard("{Enter}");
-  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "A", "B"].join(", "));
+  await expect(canvas.getByTestId("values").textContent).toBe([...initialValues, "D"].join(", "));
 };

package/dist/runtime/components/shared/storyHelpers/playSuggestions.js

@@ -18,7 +18,7 @@ export const playBasicSelect = async ({ canvasElement, args }) => {
   await expect(canvas.queryByRole("option", { selected: true })).toBeInTheDocument();
   await userEvent.clear(input);
   await userEvent.type(input, "unmatched");
-  if (!args.suggestionsFilter) {
+  if (!args.suggestionsFilter && !args.values) {
     await expect(canvas.queryAllByRole("option", { selected: true })).toEqual([]);
   }
   await userEvent.clear(input);
@@ -32,7 +32,9 @@ export const playBasicSelect = async ({ canvasElement, args }) => {
   }
   await userEvent.clear(input);
   await userEvent.keyboard("AB{Escape}");
-  await expect(canvas.queryByRole("listbox")).toBeNull();
+  if (!args.values) {
+    await expect(canvas.queryByRole("listbox")).toBeNull();
+  }
   if (args.values === void 0) {
     if (args.restrictToSuggestions) {
       await expect(canvas.getByTestId("model-value").textContent).toBe("A");
@@ -50,16 +52,24 @@ export const playBasicKeyboardSelect = async ({ canvasElement, args }) => {
   await userEvent.keyboard("{ArrowUp}");
   await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
   await userEvent.keyboard("{ArrowUp}");
-  await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument();
+  await expect(canvas.queryByRole("option", {
+    name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    selected: true
+  })).toBeInTheDocument();
   await userEvent.keyboard("{ArrowDown}");
   await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
   await userEvent.keyboard("{PageDown}");
-  await expect(canvas.queryByRole("option", { name: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", selected: true })).toBeInTheDocument();
+  await expect(canvas.queryByRole("option", {
+    name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    selected: true
+  })).toBeInTheDocument();
   await userEvent.keyboard("{PageUp}");
   await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument();
   const testOpen = async (key) => {
     await userEvent.keyboard("{Escape}");
-    await expect(canvas.queryByRole("listbox")).toBeNull();
+    if (!args.values) {
+      await expect(canvas.queryByRole("listbox")).toBeNull();
+    }
     await userEvent.keyboard(`{${key}}`);
     await expect(canvas.queryByRole("listbox")).toBeInTheDocument();
   };
@@ -74,10 +84,4 @@ export const playBasicClickSelect = async ({ canvasElement, args }) => {
   await userEvent.clear(input);
   await userEvent.type(input, "A");
   await userEvent.click(canvas.getByRole("option", { name: "AB" }));
-  if (args.values === void 0) {
-    await expect(canvas.getByTestId("model-value").textContent).toBe("AB");
-    await expect(canvas.queryByRole("listbox")).toBeNull();
-  } else {
-    await expect(canvas.getByTestId("values")).toHaveTextContent(/AB$/);
-  }
 };

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

@@ -1,10 +1,15 @@
+export { languageLocaleInjectionKey } from "./useSetupLocale.js.js";
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js.js";
 export { useAriaLabel } from "./useAriaLabel.js.js";
 export { useDarkMode } from "./useDarkMode.js.js";
 export { useDivideAttrs } from "./useDivideAttrs.js.js";
+export { useDragWithThreshold } from "./useDragWithThreshold.js.js";
 export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js.js";
 export { useInjectedDarkMode } from "./useInjectedDarkMode.js.js";
+export { useInjectedI18n } from "./useInjectedI18n.js.js";
+export { useInjectedLocale } from "./useInjectedLocale.js.js";
 export { useNotificationHandler } from "./useNotificationHandler.js.js";
+export { usePreHydrationValue } from "./usePreHydrationValue.js.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js.js";

package/dist/runtime/composables/index.js

@@ -1,10 +1,15 @@
+export { languageLocaleInjectionKey } from "./useSetupLocale.js";
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
 export { useAriaLabel } from "./useAriaLabel.js";
 export { useDarkMode } from "./useDarkMode.js";
 export { useDivideAttrs } from "./useDivideAttrs.js";
+export { useDragWithThreshold } from "./useDragWithThreshold.js";
 export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js";
 export { useInjectedDarkMode } from "./useInjectedDarkMode.js";
+export { useInjectedI18n } from "./useInjectedI18n.js";
+export { useInjectedLocale } from "./useInjectedLocale.js";
 export { useNotificationHandler } from "./useNotificationHandler.js";
+export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";

package/dist/runtime/composables/useDivideAttrs.js

@@ -8,6 +8,7 @@ export const useDivideAttrs = (divisionKeys) => computed(() => {
     res[`${key}Attrs`] = {};
     for (let i = 0; i < unseen.length; i++) {
       const attrKey = unseen[i];
+      if (!attrKey) continue;
       if (attrKey.startsWith(`${key}-`)) {
         res[`${key}Attrs`][attrKey.slice(key.length + 1)] = attrs[attrKey];
         unseen.splice(i, 1);

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

@@ -0,0 +1,71 @@
+import { type Ref } from "vue";
+import type { Point } from "../types/index.js.js";
+/**
+ * A composable for dragging items only after a certain threshold of movement has been reached.
+ *
+ * What to do with the actual pointer coordinates is up to you.
+ *
+ * The is compatible with the `useScrollNearContainerEdges` composable as well.
+ *
+ * ```ts
+ * const {
+ * 	pointerCoords,
+ * 	passedDragThreshold,
+ * 	startDragThresholdCheck,
+ * 	endDragThresholdCheck,
+ * 	checkDragThreshold,
+ * } = useDragWithThreshold({ threshold: ref(5) })
+ *
+ * function grabPointerDown(e: PointerEvent): void {
+ * 	startDragThresholdCheck(e)
+ * 	e.preventDefault()
+ *
+ * 	document.addEventListener("pointermove", grabPointerMove)
+ * 	document.addEventListener("pointerup", grabPointerUp)
+ * 	document.addEventListener("keyup", escapeDrag)
+ * }
+ * function grabPointerMove(e: PointerEvent): void {
+ * 	e.preventDefault()
+ * 	checkDragThreshold(e)
+ * 	if (passedDragThreshold.value) {
+ *
+ * 	}
+ * }
+ * function grabPointerUp(e: PointerEvent): void {
+ * 	if (passedDragThreshold.value) {
+ *			// drag
+ * 	} else  {
+ * 		// handleAsClick(e)
+ * 	}
+ * 	stopDrag()
+ * }
+ *
+ * function stopDrag(): void {
+ * 	endDragThresholdCheck()
+ * 	document.removeEventListener("keyup", escapeDrag)
+ * 	document.removeEventListener("pointermove", grabPointerMove)
+ * 	document.removeEventListener("pointerup", grabPointerUp)
+ * }
+ *
+ * function escapeDrag(e: KeyboardEvent): void {
+ * 	if (e.code === "Escape") stopDrag()
+ * }
+ * ```
+ */
+export declare const useDragWithThreshold: ({ initialOffset, pointerCoords, threshold, }?: {
+    initialOffset?: Ref<Point | undefined>;
+    pointerCoords?: Ref<Point | undefined>;
+    threshold?: Ref<number>;
+}) => {
+    initialOffset: Ref<Point | undefined, Point | undefined>;
+    pointerCoords: Ref<Point | undefined, Point | undefined>;
+    threshold: Ref<number, number>;
+    passedDragThreshold: Ref<boolean, boolean>;
+    getEventCoords: (e: {
+        clientX: number;
+        clientY: number;
+    }) => Point;
+    checkDragThreshold: (e: PointerEvent) => void;
+    startDragThresholdCheck: (e: PointerEvent) => void;
+    endDragThresholdCheck: () => void;
+};

package/dist/runtime/composables/useDragWithThreshold.js

@@ -0,0 +1,40 @@
+import { ref } from "vue";
+export const useDragWithThreshold = ({
+  initialOffset = ref({ x: 0, y: 0 }),
+  pointerCoords = ref({ x: 0, y: 0 }),
+  threshold = ref(10)
+} = {}) => {
+  const passedDragThreshold = ref(false);
+  function getDistance(p1, p2) {
+    const xDiff = p2.x - p1.x;
+    const yDiff = p2.y - p1.y;
+    return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+  }
+  function getEventCoords(e) {
+    return { x: e.clientX, y: e.clientY };
+  }
+  function checkDragThreshold(e) {
+    pointerCoords.value = getEventCoords(e);
+    passedDragThreshold.value ||= initialOffset.value !== void 0 && getDistance(initialOffset.value, pointerCoords.value) >= threshold.value;
+  }
+  function startDragThresholdCheck(e) {
+    passedDragThreshold.value = false;
+    initialOffset.value = getEventCoords(e);
+    pointerCoords.value = getEventCoords(e);
+  }
+  function endDragThresholdCheck() {
+    passedDragThreshold.value = false;
+    initialOffset.value = void 0;
+    pointerCoords.value = void 0;
+  }
+  return {
+    initialOffset,
+    pointerCoords,
+    threshold,
+    passedDragThreshold,
+    getEventCoords,
+    checkDragThreshold,
+    startDragThresholdCheck,
+    endDragThresholdCheck
+  };
+};

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

@@ -0,0 +1,12 @@
+import { type Ref } from "vue";
+/**
+ *
+ * This takes the value of the element at the given id (onBeforeMount, i.e. pre-hydration if available), and sets the given ref to that value onMounted.
+ *
+ * This should be compatible with both nuxt and vue.
+ *
+ * Nore that while it's generic, you will need to provide a transform function to convert the string to the desired type.
+ *
+ * @experimental
+ */
+export declare function usePreHydrationValue<T>(id: string, refVal: Ref<T>, transform?: (val: string) => T): void;

package/dist/runtime/composables/usePreHydrationValue.js

@@ -0,0 +1,15 @@
+import { onBeforeMount, onMounted } from "vue";
+export function usePreHydrationValue(id, refVal, transform = (val) => val) {
+  let temp = "";
+  onBeforeMount(() => {
+    const el = document.getElementById(id);
+    if (el?.value) {
+      temp = el.value;
+    }
+  });
+  onMounted(() => {
+    if (temp) {
+      refVal.value = transform(temp);
+    }
+  });
+}

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

@@ -6,6 +6,8 @@ export type TranslationFunction = (key: string, replacements?: Record<string, an
  * 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}.
+ *
+ * To avoid hydration errors, on the server, the message loading is awaited.
  */
 export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyMessageSetWhileLoading, translationFunction, }: {
     locale: Ref<string>;

package/dist/runtime/composables/useSetupI18n.js

@@ -40,7 +40,11 @@ export async function useSetupI18n({
         messages.value = newMessages;
       }
     }
-    void loadMessageSet(locale.value);
+    if (import.meta.server) {
+      await loadMessageSet(locale.value);
+    } else {
+      void loadMessageSet(locale.value);
+    }
     watch(locale, async () => {
       void loadMessageSet(locale.value);
     });

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

@@ -1,3 +1,4 @@
+import { type AnyFunction } from "@alanscodelog/utils";
 import { type Ref } from "vue";
 import { type SuggestionsEmits, type SuggestionsOptions } from "../components/shared/props.js.js";
 /**
@@ -5,7 +6,7 @@ import { type SuggestionsEmits, type SuggestionsOptions } from "../components/sh
  *
  * 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): {
+export declare function useSuggestions<TSuggestion, TMultivalue extends boolean = false>($inputValue: Ref<string>, $modelValue: Ref<TMultivalue extends true ? string[] : string>, $open: Ref<boolean>, emit: SuggestionsEmits, opts: SuggestionsOptions<TSuggestion>, debug?: boolean): {
     list: import("vue").ComputedRef<any[] | undefined>;
     filtered: import("vue").ComputedRef<any[] | undefined>;
     active: Ref<number, number>;
@@ -16,11 +17,11 @@ export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $m
     hasValidSuggestion: import("vue").ComputedRef<boolean>;
     openable: import("vue").ComputedRef<boolean | undefined>;
     getLabel: (item: any) => string;
-    isOpen: Ref<boolean, boolean>;
+    $open: Ref<boolean, boolean>;
     open: () => void;
     close: () => void;
-    enterSelected: () => void;
-    enterSuggestion: (num: number) => void;
+    enterSelected: (doClose?: boolean) => void;
+    enterIndex: (num: number, doClose?: boolean) => void;
     toggle: () => void;
     cancel: () => void;
     select: (num: number) => void;
@@ -29,10 +30,11 @@ export declare function useSuggestions<TSuggestion>($inputValue: Ref<string>, $m
     first: () => void;
     last: () => void;
 };
-export declare function useSuggestionsInputAria(id: Ref<string>, isOpen: Ref<boolean>, activeSuggestion: Ref<number>, suggestions: Ref<any | undefined>): import("vue").ComputedRef<{
+export declare function useSuggestionsInputAria(id: Ref<string>, $open: 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;
 }>;
+export declare function suggestionLabelGuard<TFunction extends AnyFunction>(item: any, suggestionLabeler: TFunction | undefined): asserts suggestionLabeler is TFunction;