@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/dist/runtime/components/WCombobox/WCombobox.vue

@@ -0,0 +1,405 @@
+<template>
+<!-- reka's filter does not work well, specially with lowercase/uppercase, e.g. A !== A but a === A ??? -->
+<ComboboxRoot
+	:ignore-filter="true"
+	:class="twMerge(`combobox-root relative`, $attrs?.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	:reset-search-term-on-select="true"
+	:reset-search-term-on-blur="true"
+	:open-on-click="true"
+	ref="comboboxRootComponent"
+	v-model:open="open"
+	v-model="modelValue"
+>
+	<ComboboxAnchor
+		class="combobox-anchor justify-between flex"
+	>
+		<div
+			:class="twMerge(
+  `
+				combobox--input-wrapper
+				flex
+				items-center
+				justify-between
+				rounded-sm
+				px-1
+				leading-none
+				fg-inherit
+				bg-inherit
+				outlined-within:border-accent-500
+				gap-2
+				focus-outline-none
+				focus-outline-hidden
+				w-full
+				min-w-0
+			`,
+  errorMessage !== false && `!border-danger-500`,
+  border && `
+					border
+					border-neutral-300
+					dark:border-neutral-700
+					bg-white
+					dark:bg-neutral-800/50
+					focus:bg-bg
+					dark:focus:bg-neutral-800
+					dark:focus:border-accent-500
+					focus-within:border-accent-500
+					dark:focus-within:border-accent-500
+					has-[input:invalid]:border-danger-500
+					invalid:border-danger-500
+				`,
+  filtered.length > 0 && open && popupSide === 'top' && `rounded-tl-none rounded-tr-none`,
+  filtered.length > 0 && open && popupSide === 'bottom' && `rounded-bl-none rounded-br-none`
+)"
+		>
+			<!-- @vue-expect-error aria/keydown can be defined -->
+			<ComboboxInput
+				:id="id"
+				:display-value="display"
+				spellcheck="false"
+				:aria-invalid="errorMessage !== false"
+				:aria-busy="loading"
+				:aria-errormessage="ariaDescribedBy"
+				:class="twMerge(
+  `
+					combobox--input
+					bg-transparent
+					min-w-[70px]
+					w-full
+					outline-hidden
+					px-1
+				`,
+  inputProps?.class
+)"
+				v-bind="{ ...inputProps, class: void 0 }"
+				:aria-describedby="ariaDescribedBy"
+				v-model="searchTerm"
+				@keydown.enter="save"
+			/>
+			<Transition>
+				<slot
+					v-if="showLoadingIndicator"
+					name="loading-indicator"
+				>
+					<WIcon
+						v-if="showLoadingIndicator"
+						aria-label="Loading suggestions"
+						class="
+						combobox--loading-indicator
+						animate-spin
+						text-neutral-500
+						-mr-1
+					"
+					>
+						<i-lucide-loader-circle/>
+					</WIcon>
+				</slot>
+			</Transition>
+			<slot name="right"/>
+			<ComboboxTrigger
+				:as-child="true"
+			>
+				<slot
+					name="trigger"
+					v-bind="{ open }"
+				>
+					<WButton
+						:border="false"
+						class="combobox--toggle p-0 text-neutral-800 dark:text-neutral-200"
+						:aria-label="open ? 'Close' : 'Open'"
+					>
+						<slot
+							name="toggle"
+							:is-open="open"
+						>
+							<WIcon
+								:class="twMerge(`combobox--toggle scale-150`, open && `rotate-180`)"
+							>
+								<i-lucide-chevron-down/>
+							</WIcon>
+						</slot>
+					</WButton>
+				</slot>
+			</ComboboxTrigger>
+		</div>
+	</ComboboxAnchor>
+	<ComboboxPortal :to="to">
+		<ComboboxContent
+			v-if="showEmptyLabel || filtered.length > 0 || errorMessage !== false"
+			:style="contentStyle"
+			:class="twMerge(`
+					combobox--content
+					z-100
+					w-[var(--reka-combobox-trigger-width)]
+					align-end
+					bg-white
+					dark:bg-neutral-900
+					will-change-[opacity,transform]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					border-neutral-300
+					dark:border-neutral-700
+					border
+					rounded-sm
+					shadow-lg
+					shadow-black/50
+					data-[side=bottom]:border-t-0
+					data-[side=top]:border-b-0
+					dark:data-[side=bottom]:border-t-0
+					dark:data-[side=top]:border-b-0
+					data-[side=bottom]:rounded-tl-none
+					data-[side=bottom]:rounded-tr-none
+					data-[side=top]:rounded-bl-none
+					data-[side=top]:rounded-br-none
+					max-h-[500px]
+					overflow-y-auto
+				`, contentProps?.class)"
+			ref="contentComponent"
+			v-bind="{
+  side: 'bottom',
+  position: 'popper',
+  avoidCollisions: true,
+  prioritizePosition: true,
+  ...contentProps,
+  class: void 0
+}"
+		>
+			<ComboboxViewport
+
+				class="combobox--viewport flex flex-col"
+			>
+				<Transition>
+					<div
+						v-if="useSlots()['header']"
+						:id="`${id}-instruction`"
+						class="
+							combobox--popup-header
+							px-2
+							flex
+							items-center
+							justify-center
+						"
+					>
+						<slot
+							:filtered="filtered"
+							:is-showing-empty-label="showEmptyLabel"
+							name="header"
+							class="
+								text-neutral-800
+								dark:text-neutral-200
+								combobox--popup-label
+								text-ellipsis
+								overflow-hidden
+								whitespace-nowrap
+							"
+						/>
+					</div>
+				</Transition>
+				<slot
+					v-if="errorMessage !== false"
+					name="invalid"
+					v-bind="{ searchTerm, errorMessage, id: `${id}-error`, role: 'alert' }"
+				>
+					<div
+						:id="`${id}-error`"
+						role="alert"
+						class="
+							combobox--error-message
+							text-danger-500
+							dark:text-danger-500
+							text-sm
+							px-2
+							py-1
+							bg-danger-100
+							dark:bg-danger-800
+							flex
+							items-center
+							justify-center
+						"
+					>
+						{{ errorMessage }}
+					</div>
+				</slot>
+				<ComboboxEmpty
+					v-if="showEmptyLabel"
+					class="
+						combobox--empty
+						px-2
+						text-center
+						text-neutral-800
+						dark:text-neutral-200
+						bg-neutral-100
+						dark:bg-neutral-800
+					"
+				>
+					{{ emptyLabel }}
+				</ComboboxEmpty>
+				<slot
+					name="suggestions"
+					v-bind="{ filtered, display, searchTerm }"
+				>
+					<div
+						class="
+						combobox--suggestions
+						flex-col
+						flex
+						max-h-[500px]
+						overflow-y-auto
+					"
+					>
+						<ComboboxItem
+							class="
+								combobox--suggestion
+								flex
+								justify-between
+								gap-2
+								px-2
+								cursor-pointer
+								data-[highlighted]:outline-hidden
+								data-[highlighted]:bg-accent-200
+								data-[highlighted]:text-accent-800
+								dark:data-[highlighted]:bg-accent-800
+								dark:data-[highlighted]:text-accent-200
+							"
+							:value="suggestion"
+							v-for="(suggestion, index) in filtered"
+							:key="index"
+						>
+							<slot
+								name="suggestion-icon"
+								v-bind="{ suggestion }"
+							/>
+							<slot
+								name="suggestion"
+								v-bind="{
+  suggestion,
+  suggestionText: display(suggestion)
+}"
+							>
+								<div
+									class="
+									combobox--suggestion-label
+								"
+								>
+									{{ display(suggestion) }}
+								</div>
+							</slot>
+						</ComboboxItem>
+					</div>
+				</slot>
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
+</ComboboxRoot>
+</template>
+
+<script setup>
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+  useFilter
+} from "reka-ui";
+import { computed, nextTick, ref, useAttrs, useSlots, useTemplateRef, watch } from "vue";
+import ILucideChevronDown from "~icons/lucide/chevron-down";
+import ILucideLoaderCircle from "~icons/lucide/loader-circle";
+import { useDelayedLoadingIndicator } from "../../composables/useDelayedLoadingIndicator.js";
+import { useDisplayForReka } from "../../composables/useDisplayForReka.js";
+import { useFallbackId } from "../../composables/useFallbackId.js";
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
+const $attrs = useAttrs();
+const emit = defineEmits(["save", "new"]);
+const props = defineProps({
+  displayKey: { type: String, required: false },
+  displayValue: { type: Function, required: false },
+  displayEntry: { type: Function, required: false },
+  constrainWidthTo: { type: [Number, String, null], required: false },
+  constrainHeightTo: { type: [Number, String, null], required: false },
+  id: { type: String, required: false },
+  border: { type: Boolean, required: false, default: true },
+  to: { type: String, required: false, default: "#root" },
+  isValid: { type: Function, required: false, default: (_) => true },
+  suggestions: { type: Array, required: true },
+  emptyLabel: { type: String, required: false, default: void 0 },
+  contentProps: { type: Object, required: false },
+  ignoreFilter: { type: Boolean, required: false, default: false },
+  restrictToSuggestions: { type: Boolean, required: false, default: false },
+  inputProps: { type: Object, required: false }
+});
+const finalId = useFallbackId(props);
+const contentStyle = usePopupConstrainToStyle("combobox-content", props, [props?.contentProps?.style]);
+const modelValue = defineModel({ type: null, ...{ required: false, default: "" } });
+usePreHydrationValue(finalId, modelValue);
+const open = defineModel("open", { type: Boolean, ...{ required: false, default: false } });
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const display = useDisplayForReka(props);
+const { contains } = useFilter();
+const filtered = computed(() => {
+  const f = props.ignoreFilter ? props.suggestions : props.suggestions.filter((v) => {
+    return contains(display(v), searchTerm.value);
+  });
+  if ((f?.length ?? 0) === 0 && props.restrictToSuggestions) {
+    return props.suggestions;
+  } else {
+    return f;
+  }
+});
+const errorMessage = computed(() => {
+  if (searchTerm.value === "") return false;
+  const isExactMatch = filtered.value.find((v) => display(v) === searchTerm.value);
+  if (!props.restrictToSuggestions && isExactMatch) return false;
+  const validation = props.isValid(searchTerm.value);
+  if (validation === true) return false;
+  return validation;
+});
+watch(searchTerm, () => {
+  const isExactMatch = filtered.value.find((v) => display(v) === searchTerm.value);
+  if (isExactMatch) {
+    modelValue.value = isExactMatch;
+  }
+});
+function save(e) {
+  if (errorMessage.value !== false || searchTerm.value === "") {
+    open.value = false;
+    return;
+  }
+  e.preventDefault();
+  emit("save", searchTerm.value);
+  open.value = false;
+}
+const loading = defineModel("loading", { type: Boolean, ...{ default: false } });
+const showLoadingIndicator = useDelayedLoadingIndicator(loading);
+const showEmptyLabel = computed(() => {
+  return errorMessage.value === false && !props.restrictToSuggestions && searchTerm.value !== "" && props.emptyLabel !== "" && !props.suggestions.some((s) => display(s) === searchTerm.value);
+});
+const ariaDescribedBy = computed(() => {
+  const ids = [];
+  if (open.value) ids.push(`${props.id}-instruction`);
+  if (errorMessage.value !== false) ids.push(`${props.id}-error`);
+  if ("ariaDescribedby" in $attrs) ids.push($attrs.ariaDescribedby);
+  return ids.join(" ") || void 0;
+});
+const contentComp = useTemplateRef("contentComponent");
+const popupSide = ref(void 0);
+watch(open, () => {
+  nextTick(() => {
+    if (open.value && contentComp.value?.$el) {
+      popupSide.value = contentComp.value.$el.getAttribute("data-side");
+    } else {
+      popupSide.value = void 0;
+    }
+  });
+});
+</script>

package/dist/runtime/components/WCombobox/WCombobox.vue.d.ts

@@ -0,0 +1,111 @@
+import type { AcceptableValue, ComboboxContentEmits, ComboboxContentProps, ComboboxInputEmits, ComboboxInputProps } from "reka-ui";
+import type { EmitsToProps, HTMLAttributes, InputHTMLAttributes } from "vue";
+import { type SuggestionsDisplayProps } from "../../composables/useDisplayForReka.js";
+import type { PopupConstrainToProps } from "../../types/index.js";
+declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(__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<(SuggestionsDisplayProps<TSuggestion> & PopupConstrainToProps & {
+        id?: string;
+        border?: boolean;
+        to?: string;
+        /**
+         * Validates the input, return true if valid, otherwise return an error message.
+         *
+         * If the input is invalid, modelValue is not updated. Empty inputs are visually valid, but they cannot trigger saves or or any setting of modelValue.
+         *
+         * If restrictToSuggestions is true, the input will be invalid if there is no exact match.
+         *
+         * `save` will not be emitted when the input is invalid.
+         *
+         * To show an error message, return a string from the function.
+         */
+        isValid?: (searchTerm: string) => true | string;
+        suggestions: TSuggestion[];
+        /** Shown in the popup when the search term is valid, not empty, not already selected, there are no suggestions, and restrictToSuggestions is false. Defaults to undefined. */
+        emptyLabel?: string;
+        /** The popup can't be styled via the regular class attr because it's teleported. You can also pass any reka ComboboxContent options. */
+        contentProps?: {
+            class?: string;
+            to?: string;
+        } & HTMLAttributes & ComboboxContentProps & EmitsToProps<ComboboxContentEmits>;
+        /** Disables the filter. */
+        ignoreFilter?: boolean;
+        /** If false, modelValue is set to the search term (so long as it's valid). */
+        restrictToSuggestions?: boolean;
+        /** Input attributes or reka-ui ComboboxInput props. */
+        inputProps?: Omit<InputHTMLAttributes, "class"> & {
+            class?: string;
+        } & HTMLAttributes & ComboboxInputProps & EmitsToProps<ComboboxInputEmits>;
+    } & {
+        modelValue?: TSuggestion;
+        open?: boolean;
+        searchTerm?: string;
+        loading?: boolean;
+    }) & {
+        "onUpdate:modelValue"?: ((value: TSuggestion) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        "onUpdate:loading"?: ((value: boolean) => any) | undefined;
+        onNew?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'loading-indicator'?: (props: {}) => any;
+    } & {
+        right?: (props: {}) => any;
+    } & {
+        trigger?: (props: {
+            open: boolean;
+        }) => any;
+    } & {
+        toggle?: (props: {
+            isOpen: boolean;
+        }) => any;
+    } & {
+        header?: (props: {
+            class: string;
+            filtered: TSuggestion[];
+            isShowingEmptyLabel: boolean;
+        }) => any;
+    } & {
+        invalid?: (props: {
+            searchTerm: string;
+            errorMessage: string;
+            id: string;
+            role: string;
+        }) => any;
+    } & {
+        suggestions?: (props: {
+            filtered: TSuggestion[];
+            display: (value: TSuggestion, options?: {
+                isForEmit?: boolean;
+            }) => string;
+            searchTerm: string;
+        }) => any;
+    } & {
+        'suggestion-icon'?: (props: {
+            suggestion: Exclude<TSuggestion, any[]>;
+        }) => any;
+    } & {
+        suggestion?: (props: {
+            suggestion: Exclude<TSuggestion, any[]>;
+            suggestionText: string;
+        }) => any;
+    };
+    emit: {
+        (e: "save", value: string): void;
+        (e: "new", value: string): void;
+    } & (((event: "update:modelValue", value: TSuggestion) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:searchTerm", value: string) => void) & ((event: "update:loading", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/WCombobox/storyPlays.d.ts

@@ -0,0 +1,18 @@
+export declare const playBasic: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;
+export declare const playBasicKeyboardSelect: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;
+export declare const playBasicClickSelect: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+    args: any;
+}) => Promise<void>;
+export declare const playValidation: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+}) => Promise<void>;
+export declare const playAllowNewValues: ({ canvasElement }: {
+    canvasElement: HTMLElement;
+}) => Promise<void>;

package/dist/runtime/components/WCombobox/storyPlays.js

@@ -0,0 +1,68 @@
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+export const playBasic = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole("combobox");
+  await userEvent.clear(input);
+  await userEvent.type(input, "A");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("A");
+  await userEvent.clear(input);
+  await userEvent.type(input, "[Esc]");
+  await expect(canvas.getByTestId("search-term")).toHaveTextContent("");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("A");
+};
+export const playBasicKeyboardSelect = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole("combobox");
+  await userEvent.clear(input);
+  await userEvent.type(input, "A");
+  await expect(canvas.getByRole("listbox")).toBeInTheDocument();
+  await userEvent.keyboard("{ArrowDown}");
+  const options = canvas.getAllByRole("option");
+  await expect(options[1]).toHaveAttribute("data-highlighted");
+  await userEvent.keyboard("{Enter}");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent(options[0].textContent?.trim() ?? "");
+};
+export const playBasicClickSelect = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole("combobox");
+  await userEvent.clear(input);
+  await userEvent.click(input);
+  const option = canvas.getByRole("option", { name: "AB" });
+  await userEvent.click(option);
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent("AB");
+  await waitFor(() => {
+    expect(canvas.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+};
+export const playValidation = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole("combobox");
+  await userEvent.clear(input);
+  await userEvent.type(input, "Invalid");
+  await userEvent.click(input);
+  const body = within(document.body);
+  await waitFor(() => {
+    expect(body.getByRole("alert")).toBeInTheDocument();
+  });
+};
+export const playAllowNewValues = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole("combobox");
+  await userEvent.clear(input);
+  const newValue = "New Custom Value";
+  await userEvent.type(input, newValue);
+  const body = within(document.body);
+  await waitFor(() => {
+    expect(body.getByText(/Press Enter to Add Value/i)).toBeInTheDocument();
+  });
+  await userEvent.keyboard("{Enter}");
+  await expect(canvas.getByTestId("model-value")).toHaveTextContent(newValue);
+  await userEvent.clear(input);
+  await userEvent.type(input, newValue);
+  expect(body.queryByText(/Press Enter to Add Value/i)).not.toBeInTheDocument();
+  await userEvent.clear(input);
+  await userEvent.type(input, "New");
+  await waitFor(() => {
+    expect(body.getByRole("option", { name: newValue })).toBeInTheDocument();
+  });
+};

package/dist/runtime/components/{LibDarkModeSwitcher/LibDarkModeSwitcher.d.vue.ts → WDarkModeSwitcher/WDarkModeSwitcher.d.vue.ts}

@@ -1,23 +1,18 @@
 import { type ButtonHTMLAttributes } from "vue";
-import type { TailwindClassProp } from "../shared/props.js";
-declare const _default: typeof __VLS_export;
-export default _default;
-type RealProps = {
-    showLabel?: boolean;
-};
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = Pick<BaseInteractiveProps, "border"> & {
     disabled?: boolean;
     unstyle?: boolean;
-}>, RealProps {
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    showLabel?: boolean;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:darkMode": (value: boolean) => any;
     "update:darkModeState": (value: "system" | "dark" | "light") => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:darkMode"?: ((value: boolean) => any) | undefined;
     "onUpdate:darkModeState"?: ((value: "system" | "dark" | "light") => any) | undefined;
 }>, {
     showLabel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;