@witchcraft/ui 0.4.0 → 0.4.1

package/dist/runtime/composables/useSuggestions.js

@@ -1,263 +0,0 @@
-import { isBlank } from "@alanscodelog/utils/isBlank";
-import { isObject } from "@alanscodelog/utils/isObject";
-import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { computed, ref, toRaw, watch } from "vue";
-export function useSuggestions($inputValue, $modelValue, $open, 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 activeSuggestion = ref(-1);
-  watch(activeSuggestion, (val) => {
-    emit("update:activeSuggestion", val);
-  });
-  if (opts.suggestions) {
-    for (const suggestion of opts.suggestions) {
-      suggestionLabelGuard(suggestion, opts.suggestionLabel);
-    }
-  }
-  const getSuggestionLabel = (item) => {
-    suggestionLabelGuard(item, opts.suggestionLabel);
-    if (isObject(item)) {
-      return opts.suggestionLabel(item);
-    }
-    return item;
-  };
-  const defaultSuggestionsFilter = (input, items) => input === "" ? [...items] : items.filter((item) => {
-    if (Array.isArray($modelValue.value)) {
-      if ($modelValue.value.includes(getSuggestionLabel(item))) return true;
-    }
-    return getSuggestionLabel(item).toLowerCase().includes(input.toLowerCase());
-  });
-  const suggestionsFilter = computed(() => opts.suggestionsFilter ?? defaultSuggestionsFilter);
-  const suggestionsList = computed(() => {
-    if (opts.suggestions) {
-      const suggestions = [...opts.suggestions];
-      if (Array.isArray($modelValue.value) && !opts.showSelectedValues) {
-        pushIfNotIn(suggestions, $modelValue.value);
-      }
-      const res = suggestionsFilter.value($inputValue.value, 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;
-      return res;
-    }
-    return void 0;
-  });
-  function setValue(val) {
-    if (Array.isArray($modelValue.value)) {
-      if ($modelValue.value.includes(val)) {
-        removeIfIn($modelValue.value, val);
-        return true;
-      } else {
-        pushIfNotIn($modelValue.value, [val]);
-      }
-    } else {
-      $modelValue.value = val;
-    }
-    return false;
-  }
-  function closeSuggestions() {
-    if (!opts.canClose) return;
-    if (debug) console.log("closeSuggestions");
-    $open.value = false;
-    activeSuggestion.value = -1;
-  }
-  function 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;
-      }
-    }
-    $open.value = true;
-  }
-  function enterSuggestion(num, doClose = true) {
-    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 = getSuggestionLabel(suggestion);
-    const wasRemoved = setValue(val);
-    $inputValue.value = Array.isArray($modelValue.value) ? "" : getSuggestionLabel(suggestion);
-    if (doClose) {
-      closeSuggestions();
-    }
-    emit("submit", val, toRaw(suggestion), wasRemoved);
-  }
-  function enterSelected(doClose = true) {
-    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, doClose);
-  }
-  function 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;
-    }
-  }
-  function toggleSuggestions() {
-    $open.value ? closeSuggestions() : openSuggestions();
-  }
-  function prevSuggestion() {
-    if (!filteredSuggestions.value) return;
-    if (activeSuggestion.value > 0) {
-      activeSuggestion.value--;
-    } else if (filteredSuggestions.value) {
-      activeSuggestion.value = filteredSuggestions.value.length - 1;
-    }
-  }
-  function nextSuggestion() {
-    if (!filteredSuggestions.value) return;
-    if (activeSuggestion.value >= filteredSuggestions.value.length - 1) {
-      activeSuggestion.value = 0;
-    } else {
-      activeSuggestion.value++;
-    }
-  }
-  function firstSuggestion() {
-    selectSuggestion(0);
-  }
-  function lastSuggestion() {
-    selectSuggestion(Infinity);
-  }
-  function cancel() {
-    if (Array.isArray($modelValue.value)) {
-      $inputValue.value = "";
-      return;
-    }
-    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, () => {
-    if (Array.isArray($modelValue.value)) {
-      $inputValue.value = "";
-    } else {
-      $inputValue.value = getSuggestionLabel($modelValue.value);
-    }
-    if (debug) console.log("modelValue changed");
-  });
-  function 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 (!Array.isArray($modelValue.value) && getSuggestionLabel($modelValue.value) === $inputValue.value) return;
-    if (suggestionAvailable.value) {
-      if (debug) console.log("input changed, suggestion available, opening suggestions");
-      openSuggestions();
-    }
-    if (!opts.restrictToSuggestions && !Array.isArray($modelValue.value)) {
-      if (debug) console.log("input changed, unrestricted, setting modelValue");
-      setValue($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,
-    $open,
-    open: openSuggestions,
-    close: closeSuggestions,
-    enterSelected,
-    enterIndex: enterSuggestion,
-    toggle: toggleSuggestions,
-    cancel,
-    select: selectSuggestion,
-    prev: prevSuggestion,
-    next: nextSuggestion,
-    first: firstSuggestion,
-    last: lastSuggestion
-  };
-}
-export function useSuggestionsInputAria(id, $open, 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 ? $open.value : void 0,
-    "aria-activedescendant": $open.value ? `suggestion-${id.value}-${activeSuggestion.value}` : void 0
-  }));
-  return ariaInputProps;
-}
-export function suggestionLabelGuard(item, suggestionLabeler) {
-  if (isObject(item)) {
-    if (!suggestionLabeler) {
-      throw new Error("`suggestionLabel` must be passed if suggestions are objects.");
-    }
-  }
-}

package/src/runtime/components/Aria/Aria.vue

@@ -1,26 +0,0 @@
-<template>
-<div tabindex="0">
-	{{ value }}
-</div>
-</template>
-
-<script  setup lang="ts">
-defineOptions({ name: "Aria" })
-defineProps<{
-
-	value: string
-}>()
-</script>
-
-<style scoped>
-div {
-	position: absolute;
-	height: 1px;
-	width: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-}
-</style>

package/src/runtime/components/LibButton/LibButton.stories.ts

@@ -1,106 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { capitalize } from "@alanscodelog/utils/capitalize"
-import type { Meta, StoryObj } from "@storybook/vue3"
-
-import IconFaSolidBell from "~icons/fa-solid/bell"
-
-import * as components from "../index.js"
-
-const meta: Meta<typeof components.LibButton> = {
-	component: components.LibButton,
-	title: "Components/Button",
-	args: {
-		label: "Label",
-		// @ts-expect-error - custom prop for story
-		_iconAfter: true
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof components.LibButton>
-
-export const Primary: Story = {
-	render: (args: any) => ({
-		components: {
-			...components,
-			IconFaSolidBell
-		},
-		setup: () => ({ args, capitalize }),
-		template: `
-		<div class="flex gap-4 justify-center">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary' ]">
-				<lib-button v-bind="{...args, color: type, label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false')}">
-					<template #icon>
-						<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-					</template>
-				</lib-button>
-			</template>
-		</div>
-		<div class="flex flex-col gap-4 pt-10">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
-				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
-					${args._iconAfter
-			? `
-						<template #icon-after>
-							<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-						</template>
-					`
-			: ``}
-				</lib-button>
-			</template>
-		</div>
-		`
-	})
-}
-
-export const IconAfter: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		// @ts-expect-error - .
-		_iconAfter: true
-	}
-}
-
-export const OnlyIcon: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		label: undefined
-	}
-}
-export const Disabled: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		disabled: true
-	}
-}
-export const Borderless: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		border: false
-	}
-}
-export const BorderlessDisabled: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		border: false,
-		disabled: true
-	}
-}
-export const WithDivInside: Story = {
-	render: (args: any) => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-		<div class="flex gap-4 justify-center">
-			<lib-button v-bind="{...args}">
-				<div>Div inside button still has a pointer cursor.</div>
-			</lib-button>
-		</div>
-		`
-	})
-}

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,129 +0,0 @@
-<template>
-<div
-	:class="twMerge(`
-		checkbox--wrapper
-		flex
-		items-center
-		gap-1
-	`,
-		($.wrapperAttrs as any)?.class
-	)"
-	v-bind="{ ...$.wrapperAttrs, class: undefined }"
-	ref="el"
->
-	<slot name="left"/>
-	<label
-		:class="twMerge(`
-			checkbox--label
-			flex
-			items-center
-			gap-1
-		`,
-			($.labelAttrs as any)?.class
-		)"
-		v-bind="{ ...$.labelAttrs, class: undefined }"
-		:for="id ?? fallbackId"
-	>
-		<input
-			:id="id ?? fallbackId"
-			:class="!($attrs as any).unstyle && twMerge(`
-				checkbox
-				focus-outline-no-offset
-				m-0
-				p-[0.4em]
-				bg-bg
-				dark:bg-fg
-				appearance-none
-				border
-				border-neutral-500
-				focus:border-accent-600
-				rounded-sm
-				aspect-square
-				relative
-				checked:after:content
-				checked:after:absolute
-				checked:after:w-full
-				checked:after:h-full
-				checked:after:border-2
-				checked:after:border-bg
-				dark:checked:after:border-fg
-				checked:after:rounded-sm
-				checked:after:top-0
-				checked:after:left-0
-				checked:after:bg-accent-700
-				disabled:border-neutral-500
-				disabled:checked:after:bg-neutral-700
-			`, !disabled && `cursor-pointer`,
-				($.attrs as any).class
-			)"
-			type="checkbox"
-			:disabled="disabled"
-			ref="inputEl"
-			v-model="$value"
-			v-bind="{ ...$.attrs, class: undefined }"
-		>
-		<slot/> {{ label }}
-	</label>
-</div>
-</template>
-
-<script setup  lang="ts">
-import { type HTMLAttributes, type InputHTMLAttributes, ref } from "vue"
-
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
-
-defineOptions({
-	name: "LibCheckbox",
-	inheritAttrs: false
-})
-
-const $ = useDivideAttrs(["label", "wrapper"])
-/* todo multi states */
-
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props>(), {
-	unstyle: false, disabled: false, readonly: false, border: true
-})
-
-/* const emits =  */defineEmits<{
-	/* User presses enter. */
-	(e: "submit", val: boolean): void
-}>()
-
-const el = ref<null | HTMLElement>(null)
-const inputEl = ref<null | HTMLElement>(null)
-const $value = defineModel<boolean>("modelValue", { default: false })
-
-usePreHydrationValue(props.id ?? fallbackId, $value)
-</script>
-
-<script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"label", HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-type RealProps
-
-	= & LinkableByIdProps
-		& LabelProps
-		& BaseInteractiveProps
-		& {
-			unstyle?: boolean
-		}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		"class" | "readonly" | "disabled" | "onSumbit"
-	> & TailwindClassProp>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
-</script>