@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,41 @@
+import { type Theme } from "metamorphosis";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+type __VLS_Props = {
+    theme?: Theme;
+    outline?: boolean;
+    forceOutline?: boolean;
+    testWrapperMode?: boolean;
+    id?: string;
+    /** You can set a ref to the root element by passing :getRef="_ => el = _" */
+    getRef?: (el: HTMLElement | null) => void;
+    /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+    isClientSide?: boolean;
+    useBuiltinTranslations?: boolean;
+    useNotifications?: boolean;
+    notificationHandler?: NotificationHandler;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    darkMode: import("../../composables/useDarkMode.js.js").DarkModeState & import("../../composables/useDarkMode.js.js").DarkModeCommands;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: Theme;
+    id: string;
+    useBuiltinTranslations: boolean;
+    isClientSide: boolean;
+    outline: boolean;
+    forceOutline: boolean;
+    testWrapperMode: boolean;
+    getRef: (el: HTMLElement | null) => void;
+    useNotifications: boolean;
+    notificationHandler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -1,8 +1,9 @@
 <template>
 <input
 	:id="id ?? fallbackId"
-	:class="twMerge(`
-			input
+	:class="twMerge(
+  `
+			simple-input
 			flex-1
 			grow-[999999]
 			rounded-sm
@@ -27,35 +28,35 @@
 			dark:disabled:bg-neutral-950
 			dark:disabled:text-neutral-500
 		`,
-		type === `text` && `
+  type === `text` && `
 			min-w-[10ch]
 			w-full
 		`,
-		type === `number` && `
+  type === `number` && `
 			w-12
 			placeholder:text-transparent
 			appearance-none
 			pr-0
 		`,
-		border && `
+  border && `
 			border
 			border-neutral-500
 			focus:border-accent-500
 			disabled:border-neutral-400
 			dark:disabled:border-neutral-600
 		`,
-		!valid && `
+  !valid && `
 			placeholder:text-danger-700
 			border-danger-700
 			focus:border-danger-700
-			outlined:!ring-danger-700
+			outlined:!outline-danger-700
 			text-danger-800
 			dark:text-danger-400
 			dark:placeholder:text-danger-700
 			dark:border-danger-600
 		`,
-		($attrs as any)?.class
-	)"
+  $attrs?.class
+)"
 	:data-border="border"
 	:data-invalid="!valid"
 	:type="type"
@@ -63,86 +64,54 @@
 	:disabled="disabled"
 	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
+	v-bind="{ ...$attrs, class: void 0, ...ariaLabel }"
 	@keydown="handleKeydown"
-	@input="emit('input', $event as InputEvent)"
+	@input="emit('input', $event)"
 >
 </template>
 
-
-<script lang="ts" setup generic="T">
-import { keys } from "@alanscodelog/utils/keys.js"
-import { pick } from "@alanscodelog/utils/pick.js"
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { castType } from "@alanscodelog/utils/utils"
-import { getCurrentInstance, type InputHTMLAttributes, type InputTypeHTMLAttribute,toRef,useAttrs } from "vue"
-
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
-import { hasModifiers } from "../../helpers/hasModifiers.js"
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-
+<script setup>
+import { useAttrs } from "vue";
+import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { hasModifiers } from "../../helpers/hasModifiers.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-simple-input",
-	inheritAttrs: false,
-})
-
-const fallbackId = getFallbackId()
-
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props>(), {
-	id: "",
-	placeholder: "",
-	valid: true,
-	label: "",
-	type: undefined,
-	...baseInteractivePropsDefaults
-})
-
-const modelValue = defineModel<T>({ required: true })
-
-const emit = defineEmits<{
-	/* User presses enter.*/
-	(e: "submit", val: T): void
-	(e: "input", val: InputEvent): void
-}>()
-const $attrs = useAttrs()
-const ariaLabel = useAriaLabel(props, fallbackId)
-
-function handleKeydown(e: KeyboardEvent) {
-	if (e.key === "Enter" && !hasModifiers(e)) {
-		emit("submit", modelValue.value)
-	}
+  name: "lib-simple-input",
+  inheritAttrs: false
+});
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  placeholder: { type: null, required: false },
+  type: { type: null, required: false },
+  valid: { type: Boolean, required: false }
+}, {
+  id: "",
+  placeholder: "",
+  valid: true,
+  label: "",
+  type: void 0,
+  ...baseInteractivePropsDefaults
+}));
+const modelValue = defineModel({ type: null, ...{ required: true } });
+const emit = defineEmits(["submit", "input"]);
+const $attrs = useAttrs();
+const ariaLabel = useAriaLabel(props, fallbackId);
+function handleKeydown(e) {
+  if (e.key === "Enter" && !hasModifiers(e)) {
+    emit("submit", modelValue.value);
+  }
 }
-
+usePreHydrationValue(props.id ?? fallbackId, modelValue);
 </script>
 
-<script lang="ts">
-
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		placeholder?: InputHTMLAttributes["placeholder"]
-		disabled?: InputHTMLAttributes["disabled"]
-		id?: InputHTMLAttributes["id"]
-		type?: InputHTMLAttributes["type"]
-		valid?: boolean
-	}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		| "class"
-		| "readonly"
-		| "disabled"
-		| "onSubmit"
-		| "onInput"
-	> & TailwindClassProp>,
-	RealProps
-{}
 </script>

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

@@ -0,0 +1,35 @@
+import { type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    placeholder?: InputHTMLAttributes["placeholder"];
+    disabled?: InputHTMLAttributes["disabled"];
+    id?: InputHTMLAttributes["id"];
+    type?: InputHTMLAttributes["type"];
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit" | "onInput"> & TailwindClassProp>, RealProps {
+}
+declare const _default: <T>(__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 onInput?: ((val: InputEvent) => any) | undefined;
+        readonly onSubmit?: ((val: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onInput" | "onSubmit" | "onUpdate:modelValue"> & (Props & {
+        modelValue: T;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {
+        (e: "submit", val: T): void;
+        (e: "input", val: InputEvent): void;
+    } & ((evt: "update:modelValue", value: T) => 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/LibSuggestions/LibSuggestions.vue

@@ -1,198 +1,181 @@
 <template>
 <div
-	v-if="suggestions.isOpen"
+	v-if="$open"
 	:id="`suggestions-${id ?? fallbackId}`"
-	:class="twMerge(`
+	:class="twMerge(
+  `
 			suggestions
 			bg-bg
 			dark:bg-fg
+			dark:text-bg
 		`,
-		($.attrs as any)?.class
-	)"
-	:data-open="suggestions.isOpen"
+  $.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(`
-					px-1
-					user-select-none
-					cursor-pointer
-					px-2
-				`,
-			index=== suggestions.active && `bg-accent-200 dark:bg-accent-800`,
-			($.itemAttrs as any)?.class
-		)"
-		v-bind="{...$.itemAttrs, class:undefined}"
+		:class="twMerge(
+  `
+			suggestions--item
+			user-select-none
+			cursor-pointer
+			px-2
+		`,
+  index === suggestions.active && `
+				bg-accent-200
+				dark:bg-accent-800/70
+			`,
+  $.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"
 		:key="item"
 		@mouseover="suggestions.active = index"
 		@mousedown.prevent
-		@mouseup="suggestions.enterSuggestion(index)"
+		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
 	>
-		<slot name="item" :item="item" :index="index">
-			{{ item }}
+		<slot name="item"
+			:item="item"
+			:index="index"
+			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
+		>
+			<div class="flex gap-2 nowrap">
+				<lib-checkbox
+					v-if="Array.isArray($modelValue) && showSelectedValues"
+					:model-value="$modelValue.includes(item)"
+					@mousedown.prevent
+				/>
+				<div> {{ item }} </div>
+			</div>
 		</slot>
 	</div>
 </div>
 </template>
 
-
-<script setup lang="ts" generic="TSuggestion extends string | object">
-
-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 { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type MultiValueProps, 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 { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-suggestions",
-	inheritAttrs: false,
-})
-
-const $ = useDivideAttrs(["item"] as const)
-
-const emits = defineEmits<SuggestionsEmits>()
-
-const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
-	isValid: true,
-	canOpen: true,
-	values: undefined,
-	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<string>("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: "" })
-
-
+  name: "lib-suggestions",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["item"]);
+const emits = defineEmits(["submit", "update:isOpen", "update:activeSuggestion"]);
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  filterKeydown: { type: Function, required: false },
+  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 },
+  canClose: { type: Boolean, required: false },
+  isValid: { type: Boolean, required: false },
+  suggestionSelector: { type: Function, required: false },
+  showSelectedValues: { type: Boolean, required: false }
+}, {
+  isValid: true,
+  canOpen: true,
+  filterKeydown: void 0,
+  ...baseInteractivePropsDefaults
+}));
+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 mousedown = ref(false)
-
+const el = ref(null);
 const suggestions = reactive(useSuggestions(
-	$inputValue,
-	$modelValue,
-	emits,
-	props
-))
-
-const inputKeydownHandler = (e: KeyboardEvent): void => {
-	if (props.filterKeydown?.(e)) return
-	if (hasModifiers(e)) return
-	if (e.key === "Enter") {
-		suggestions.enterSelected()
-		e.preventDefault()
-	} else if (e.key === "Escape") {
-		suggestions.cancel()
-		e.preventDefault()
-	} else if (!suggestions.isOpen && ["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 (!suggestions.isOpen) return
-
-	if (props.restrictToSuggestions) {
-		suggestions.cancel()
-	} else {
-		$modelValue.value = $inputValue.value
-	}
-	if (suggestions.isOpen) {
-		suggestions.close()
-	}
-}
-const inputFocusHandler = (e: FocusEvent): void => {
-	if (props.filterFocus?.(e)) return
-	suggestions.open()
-}
-
+  $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
-	& MultiValueProps
-	& {
-		/** 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>