@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/dist/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -2,35 +2,37 @@
 <div
 	v-if="$open"
 	:id="`suggestions-${id ?? fallbackId}`"
-	:class="twMerge(`
+	:class="twMerge(
+  `
 			suggestions
 			bg-bg
 			dark:bg-fg
 			dark:text-bg
 		`,
-		($.attrs as any)?.class
-	)"
+  $.attrs?.class
+)"
 	:data-open="$open"
 	role="listbox"
 	ref="el"
-	v-bind="{...$.attrs, class:undefined}"
+	v-bind="{ ...$.attrs, class: void 0 }"
 >
 	<!-- Click event is just in case, it should not really be triggered. We can do click selections via the blur handler. -->
 	<div :id="`suggestion-${id ?? fallbackId}-${index}`"
 		role="option"
-		:class="twMerge(`
+		:class="twMerge(
+  `
 			suggestions--item
 			user-select-none
 			cursor-pointer
 			px-2
 		`,
-			index=== suggestions.active && `
+  index === suggestions.active && `
 				bg-accent-200
 				dark:bg-accent-800/70
 			`,
-			($.itemAttrs as any)?.class
-		)"
-		v-bind="{...$.itemAttrs, class:undefined}"
+  $.itemAttrs?.class
+)"
+		v-bind="{ ...$.itemAttrs, class: void 0 }"
 		:aria-selected="index === suggestions.active ? true : false"
 		:aria-label="suggestions.getLabel(item)"
 		v-for="(item, index) in suggestions.filtered"
@@ -57,158 +59,118 @@
 </div>
 </template>
 
-
-<script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
-
-import { type HTMLAttributes,reactive, ref } from "vue"
-
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { useSuggestions } from "../../composables/useSuggestions.js"
-import { hasModifiers } from "../../helpers/hasModifiers.js"
-import { twMerge } from "../../utils/twMerge.js"
-import LibCheckbox from "../LibCheckbox/LibCheckbox.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
-
+<script setup>
+import { reactive, ref } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { useSuggestions } from "../../composables/useSuggestions.js";
+import { hasModifiers } from "../../helpers/hasModifiers.js";
+import { twMerge } from "../../utils/twMerge.js";
+import LibCheckbox from "../LibCheckbox/LibCheckbox.vue";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-suggestions",
-	inheritAttrs: false,
-})
-
-const $ = useDivideAttrs(["item"] as const)
-
-const emits = defineEmits<SuggestionsEmits>()
-
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
-	isValid: true,
-	canOpen: true,
-	filterKeydown: undefined,
-	...baseInteractivePropsDefaults
-})
-/**
- * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
- *
- * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
- */
-const $modelValue = defineModel<TValue>("modelValue", { required: true })
-/**
- * If the element is bound to an input, this is the value that the input should be sharing.
- *
- * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
- */
-const $inputValue = defineModel<string >("inputValue", { default: "" })
-
-const $open = defineModel<boolean>("open", { default: false })
-
-
+  name: "lib-suggestions",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["item"]);
+const emits = defineEmits(["submit", "update:isOpen", "update:activeSuggestion"]);
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false, default: false },
+  filterKeydown: { type: Function, required: false, default: void 0 },
+  filterBlur: { type: Function, required: false },
+  filterFocus: { type: Function, required: false },
+  suggestions: { type: Array, required: false },
+  suggestionLabel: { type: Function, required: false },
+  restrictToSuggestions: { type: Boolean, required: false },
+  updateOnlyOnSubmit: { type: Boolean, required: false },
+  suggestionsFilter: { type: Function, required: false },
+  allowOpenEmpty: { type: Boolean, required: false },
+  canOpen: { type: Boolean, required: false, default: true },
+  canClose: { type: Boolean, required: false },
+  isValid: { type: Boolean, required: false, default: true },
+  suggestionSelector: { type: Function, required: false },
+  showSelectedValues: { type: Boolean, required: false }
+});
+const $modelValue = defineModel("modelValue", { type: null, ...{ required: true } });
+const $inputValue = defineModel("inputValue", { type: String, ...{ default: "" } });
+const $open = defineModel("open", { type: Boolean, ...{ default: false } });
 if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
-	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
+  throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.");
 }
-
-const el = ref<HTMLElement | null>(null)
-
-const suggestions = reactive(useSuggestions<TSuggestion, TValue extends string[] ? true : false>(
-	$inputValue,
-	$modelValue as any,
-	$open,
-	emits,
-	props
-))
-
-const inputKeydownHandler = (e: KeyboardEvent): void => {
-	if (props.filterKeydown?.(e)) return
-	if (hasModifiers(e)) return
-	if (e.key === "Enter") {
-		suggestions.enterSelected(!Array.isArray($modelValue))
-		e.preventDefault()
-	} else if (e.key === "Escape") {
-		suggestions.cancel()
-		e.preventDefault()
-	} else if (!$open.value && ["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key) && suggestions.available) {
-		suggestions.open()
-		e.preventDefault()
-		if (e.key === "PageUp") {
-			suggestions.first()
-		} else if (e.key === "PageDown") {
-			suggestions.last()
-		}
-	} else if (e.key === "ArrowUp") {
-		suggestions.prev()
-		e.preventDefault()
-	} else if (e.key === "ArrowDown") {
-		suggestions.next()
-		e.preventDefault()
-	} else if (e.key === "PageUp") {
-		suggestions.first()
-		e.preventDefault()
-	} else if (e.key === "PageDown") {
-		suggestions.last()
-		e.preventDefault()
-	}
-}
-const inputBlurHandler = (e: MouseEvent): void => {
-	if (props.filterBlur?.(e)) return
-	
-	if (!$open.value) return
-
-	if (props.restrictToSuggestions) {
-		suggestions.cancel()
-	} else {
-		if (!Array.isArray($modelValue.value)) {
-			$modelValue.value = $inputValue.value as any
-		}
-	}
-	if ($open.value) {
-		suggestions.close()
-	}
-}
-const inputFocusHandler = (e: FocusEvent): void => {
-	if (props.filterFocus?.(e)) return
-	suggestions.open()
-}
-
+const el = ref(null);
+const suggestions = reactive(useSuggestions(
+  $inputValue,
+  $modelValue,
+  $open,
+  emits,
+  props
+));
+const inputKeydownHandler = (e) => {
+  if (props.filterKeydown?.(e)) return;
+  if (hasModifiers(e)) return;
+  if (e.key === "Enter") {
+    suggestions.enterSelected(!Array.isArray($modelValue));
+    e.preventDefault();
+  } else if (e.key === "Escape") {
+    suggestions.cancel();
+    e.preventDefault();
+  } else if (!$open.value && ["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key) && suggestions.available) {
+    suggestions.open();
+    e.preventDefault();
+    if (e.key === "PageUp") {
+      suggestions.first();
+    } else if (e.key === "PageDown") {
+      suggestions.last();
+    }
+  } else if (e.key === "ArrowUp") {
+    suggestions.prev();
+    e.preventDefault();
+  } else if (e.key === "ArrowDown") {
+    suggestions.next();
+    e.preventDefault();
+  } else if (e.key === "PageUp") {
+    suggestions.first();
+    e.preventDefault();
+  } else if (e.key === "PageDown") {
+    suggestions.last();
+    e.preventDefault();
+  }
+};
+const inputBlurHandler = (e) => {
+  if (props.filterBlur?.(e)) return;
+  if (!$open.value) return;
+  if (props.restrictToSuggestions) {
+    suggestions.cancel();
+  } else {
+    if (!Array.isArray($modelValue.value)) {
+      $modelValue.value = $inputValue.value;
+    }
+  }
+  if ($open.value) {
+    suggestions.close();
+  }
+};
+const inputFocusHandler = (e) => {
+  if (props.filterFocus?.(e)) return;
+  suggestions.open();
+};
 defineExpose({
-	suggestions,
-	el,
-	/** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
-	inputKeydownHandler,
-	/** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
-	inputBlurHandler,
-	/** A focus handler for the input that controls the component. */
-	inputFocusHandler,
-})
-
+  suggestions,
+  el,
+  /** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
+  inputKeydownHandler,
+  /** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
+  inputBlurHandler,
+  /** A focus handler for the input that controls the component. */
+  inputFocusHandler
+});
 </script>
 
-<script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		/** Return true to prevent the keydown event from being handled. */
-		filterKeydown?: (e: KeyboardEvent) => boolean
-		/** Return true to prevent the blur event from being handled. */
-		filterBlur?: (e: MouseEvent) => boolean
-		/** Return true to prevent the focus event from being handled. */
-		filterFocus?: (e: FocusEvent) => boolean
-	}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class" | "onSubmit"> & {
-		/** Tailwind classes. */
-		class?: string
-	}>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
+<script>
 
 </script>

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

@@ -0,0 +1,94 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
+    /** Tailwind classes. */
+    class?: string;
+}>>;
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    /** Return true to prevent the keydown event from being handled. */
+    filterKeydown?: (e: KeyboardEvent) => boolean;
+    /** Return true to prevent the blur event from being handled. */
+    filterBlur?: (e: MouseEvent) => boolean;
+    /** Return true to prevent the focus event from being handled. */
+    filterFocus?: (e: FocusEvent) => boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
+    /** Tailwind classes. */
+    class?: string;
+}>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: <TSuggestion extends string | object, TValue extends string | string[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSubmit?: ((val: string, suggestion?: any, wasRemoved?: boolean | undefined) => any) | undefined;
+        readonly "onUpdate:isOpen"?: ((val: boolean) => any) | undefined;
+        readonly "onUpdate:activeSuggestion"?: ((val: number) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
+        readonly "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onUpdate:modelValue" | "onUpdate:open" | "onUpdate:isOpen" | "onUpdate:activeSuggestion" | "onUpdate:inputValue"> & (Props & SuggestionsProps<TSuggestion> & {
+        /**
+         * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
+         *
+         * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
+         */
+        modelValue: TValue;
+        /**
+         * If the element is bound to an input, this is the value that the input should be sharing.
+         *
+         * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
+         */
+        inputValue?: string;
+        open?: boolean;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: TSuggestion | undefined;
+            hasValidSuggestion: boolean;
+            openable: boolean | undefined;
+            getLabel: (item: any) => string;
+            $open: boolean;
+            open: () => void;
+            close: () => void;
+            enterSelected: (doClose?: boolean) => void;
+            enterIndex: (num: number, doClose?: boolean) => void;
+            toggle: () => void;
+            cancel: () => void;
+            select: (num: number) => void;
+            prev: () => void;
+            next: () => void;
+            first: () => void;
+            last: () => void;
+        };
+        el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+        /** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        /** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
+        inputBlurHandler: (e: MouseEvent) => void;
+        /** A focus handler for the input that controls the component. */
+        inputFocusHandler: (e: FocusEvent) => void;
+    }>): void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            item: any;
+            index: any;
+            isSelected: any;
+        }) => any;
+    };
+    emit: SuggestionsEmits<false> & (((evt: "update:modelValue", value: TValue) => void) & ((evt: "update:inputValue", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/LibTable/LibTable.vue

@@ -1,6 +1,7 @@
 <template>
 <!-- Assumes no scrollbars on children -->
-<table :class="twMerge(`table
+<table :class="twMerge(
+  `table
 		table-fixed
 		border-separate
 		border-spacing-0
@@ -16,12 +17,12 @@
 		[&.resizable-cols-error]:cursor-not-allowed
 		[&.resizable-cols-error]:user-select-none
 		`,
-	cellBorder && `
+  cellBorder && `
 			[&_td]:border-neutral-500
 			[&_td:not(.last-row)]:border-b
 			[&_td:not(.first-col)]:border-l
 		`,
-	border && `
+  border && `
 			[&_thead_td]:bg-neutral-200
 			[&_td]:border-neutral-500
 			dark:[&_thead_td]:bg-neutral-800
@@ -31,13 +32,14 @@
 			[&_td.last-col]:border-r
 			[&_td.first-col]:border-l
 		`,
-	rounded &&`
+  rounded && `
 			[&_td.br]:rounded-br-sm
 			[&_td.bl]:rounded-bl-sm
 			[&_td.tr]:rounded-tr-sm
 			[&_td.tl]:rounded-tl-sm
-		`
-	, ($attrs as any).class)"
+		`,
+  $attrs.class
+)"
 	v-resizable-cols="resizableOptions"
 >
 	<thead v-if="header" class="table--header">
@@ -45,25 +47,21 @@
 			<template v-for="col,i of cols" :key="col">
 				<slot :name="`header-${col.toString()}`"
 					:class="[
-						extraClasses[`-1-${i}`],
-						'cell table--header-cell',
-						(colConfig as any)[col]?.resizable === false
-							? 'no-resize'
-							: ''
-					].join(' ')"
+  extraClasses[`-1-${i}`],
+  'cell table--header-cell',
+  colConfig[col]?.resizable === false ? 'no-resize' : ''
+].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
 				>
 					<td :class="[
-							extraClasses[`-1-${i}`] ,
-							'cell table--header-cell',
-							(colConfig as any)[col]?.resizable === false
-								? 'no-resize'
-								: ''
-						].join(' ')"
+  extraClasses[`-1-${i}`],
+  'cell table--header-cell',
+  colConfig[col]?.resizable === false ? 'no-resize' : ''
+].join(' ')"
 						:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					>
-						{{ (colConfig as any)[col]?.name ?? col }}
+						{{ colConfig[col]?.name ?? col }}
 					</td>
 				</slot>
 			</template>
@@ -90,87 +88,53 @@
 </table>
 </template>
 
-<!-- generic="T extends Record<string, any> -->"
-<script setup lang="ts" generic="T">
-import type { MakeRequired } from "@alanscodelog/utils"
-import { keys } from "@alanscodelog/utils/keys.js"
-import { computed, type PropType, ref, type TableHTMLAttributes } from "vue"
-
-import { vResizableCols } from "../../directives/vResizableCols.js"
-import type { ResizableOptions, TableColConfig } from "../../types/index.js"
-import { twMerge } from "../../utils/twMerge.js"
-import type { TailwindClassProp } from "../shared/props.js"
-
-
+<script setup>
+import { keys } from "@alanscodelog/utils/keys";
+import { computed, ref } from "vue";
+import { vResizableCols } from "../../directives/vResizableCols.js";
+import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-	name: "lib-table",
-})
-
-const props = withDefaults(defineProps<Props>(), {
-	resizable: () => ({}),
-	values: () => [] as T[],
-	itemKey: "",
-	cols: () => [] as (keyof T)[],
-	rounded: true,
-	border: true,
-	cellBorder: true,
-	header: true,
-	colConfig: () => ({}) ,
-})
-
-const widths = ref([])
-const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
-	colCount: props.cols.length,
-	widths,
-	selector: ".cell",
-	...props.resizable,
-}))
-
-/* props.values.length instead of `props.values.length - 1` because we're creating an artificial first row for the header */
-const getExtraClasses = (row: number, col: number, isHeader: boolean): string[] => {
-	const res = {
-		bl: !isHeader && row === props.values.length - 1 && col === 0,
-		br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
-		tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
-		tl: (isHeader || !props.header) && row === 0 && col === 0,
-		"first-row": (isHeader || !props.header) && row === 0,
-		"last-row": row === props.values.length - 1,
-		"first-col": col === 0,
-		"last-col": col === props.cols.length - 1,
-	}
-	return keys(res).filter(key => res[key])
-}
+  name: "lib-table"
+});
+const props = defineProps({
+  resizable: { type: Object, required: false, default: () => ({}) },
+  values: { type: Array, required: false, default: () => [] },
+  itemKey: { type: [String, Number, Symbol, Function], required: false, default: "" },
+  cols: { type: Array, required: false, default: () => [] },
+  rounded: { type: Boolean, required: false, default: true },
+  border: { type: Boolean, required: false, default: true },
+  cellBorder: { type: Boolean, required: false, default: true },
+  header: { type: Boolean, required: false, default: true },
+  colConfig: { type: Object, required: false, default: () => ({}) }
+});
+const widths = ref([]);
+const resizableOptions = computed(() => ({
+  colCount: props.cols.length,
+  widths,
+  selector: ".cell",
+  ...props.resizable
+}));
+const getExtraClasses = (row, col, isHeader) => {
+  const res = {
+    bl: !isHeader && row === props.values.length - 1 && col === 0,
+    br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
+    tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
+    tl: (isHeader || !props.header) && row === 0 && col === 0,
+    "first-row": (isHeader || !props.header) && row === 0,
+    "last-row": row === props.values.length - 1,
+    "first-col": col === 0,
+    "last-col": col === props.cols.length - 1
+  };
+  return keys(res).filter((key) => res[key]);
+};
+const extraClasses = computed(() => Object.fromEntries(
+  [...Array(props.values.length + 1).keys()].map((row) => [...Array(props.cols.length).keys()].map((col) => [
+    `${row - 1}-${col}`,
+    getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
+  ])).flat()
+));
+</script>
 
-const extraClasses = computed(() => Object.fromEntries([...Array(props.values.length + 1).keys()]
-	.map(row => [...Array(props.cols.length).keys()]
-		.map(col =>
-			[
-				`${row - 1}-${col}`,
-				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" "),
-			]))
-	.flat(),
-))
+<script>
 
 </script>
-<script lang="ts">
-// generic isn't working here :/
-type T = any
-	
-type RealProps = {
-	resizable?: Partial<ResizableOptions>
-	values?: T[]
-	itemKey?: keyof T | ((item: T) => string)
-	/** Let's the table know the shape of the data since values might be empty. */
-	cols?: (keyof T)[]
-	rounded?: boolean
-	border?: boolean
-	cellBorder?: boolean
-	header?: boolean
-	colConfig?: TableColConfig<T>
-}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<TableHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
-	RealProps { }
-</script>