@witchcraft/ui 0.2.1-beta.2 → 0.2.1

package/src/runtime/components/LibRecorder/LibRecorder.vue

@@ -28,15 +28,15 @@
 			dark:bg-neutral-950
 			border-neutral-400
 			dark:border-neutral-600
-		`
-		, ($attrs as any).class)"
+		`,
+		($attrs as any).class)"
 	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
 	ref="recorderEl"
-	v-bind="{...ariaLabel, ...$attrs, class:undefined}"
+	v-bind="{ ...ariaLabel, ...$attrs, class: undefined }"
 	@blur="handleBlurRecorder($event)"
 	@click="handleClickRecorder($event)"
 	@keydown.space.prevent="handleClickRecorder($event, true)"
@@ -69,18 +69,19 @@
 	</div>
 </div>
 </template>
+
 <script setup lang="ts">
 import { keys } from "@alanscodelog/utils/keys"
-import { computed, type HTMLAttributes ,onBeforeUnmount, onMounted, type PropType, ref, watch, watchPostEffect } from "vue"
+import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from "vue"
 
 import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-recorder",
-	inheritAttrs: false,
+	name: "LibRecorder",
+	inheritAttrs: false
 })
 const t = useInjectedI18n()
 
@@ -98,7 +99,7 @@ const props = withDefaults(defineProps<Props>(), {
 	id: undefined,
 	binders: undefined,
 	recorder: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 /**
  * Puts the element into recording mode if true. See {@link props.recorder}.
@@ -108,7 +109,6 @@ const recording = defineModel<boolean>("recording", { required: false, default:
 /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
 const modelValue = defineModel<string>({ required: true })
 
-
 const recorderEl = ref<HTMLInputElement | null>(null)
 const recorderIndicatorEl = ref<HTMLElement | null>(null)
 const canEdit = computed(() => !props.disabled && !props.readonly)
@@ -206,37 +206,37 @@ const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean
 		emits("recorder:click", { event: e as MouseEvent, indicator: recorderIndicatorEl.value! as HTMLElement, input: recorderEl.value! as HTMLInputElement })
 	}
 }
-
 </script>
+
 <script lang="ts">
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	border?: boolean
-	/** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
-	recordingValue?: string
-	/** A title to display on the input div while recording. Is also used as the aria-description. */
-	recordingTitle?: string
-	/**
-	 * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
-	 *
-	 * The listeners are then unbound when recording is set to false again.
-	 *
-	 * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
-	 */
-	recorder?: undefined | Record<string, any>
-	/** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time.*/
-	binders?: undefined | { bind: (el: HTMLElement) => void, unbind: (el: HTMLElement) => void }
-	/** The id of the element. If not provided, the id will be generated automatically. */
-	id?: string
-}
+type RealProps
+	= & LinkableByIdProps
+		& BaseInteractiveProps
+		& LabelProps
+		& {
+			border?: boolean
+			/** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
+			recordingValue?: string
+			/** A title to display on the input div while recording. Is also used as the aria-description. */
+			recordingTitle?: string
+			/**
+			 * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
+			 *
+			 * The listeners are then unbound when recording is set to false again.
+			 *
+			 * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
+			 */
+			recorder?: undefined | Record<string, any>
+			/** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time. */
+			binders?: undefined | { bind: (el: HTMLElement) => void, unbind: (el: HTMLElement) => void }
+			/** The id of the element. If not provided, the id will be generated automatically. */
+			id?: string
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 { }
 </script>

package/src/runtime/components/LibRoot/LibRoot.vue

@@ -1,12 +1,13 @@
 <template>
-<div :id="id"
+<div
+	:id="id"
 	tabindex="-1"
 	:class="twMerge(
 		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
 		darkMode && ' dark',
 		($attrs['wrapperAttrs'] as any)?.class
 	)"
-	v-bind="{ ...($attrs['wrapperAttrs']), attrs:undefined, class: undefined }"
+	v-bind="{ ...($attrs['wrapperAttrs']), attrs: undefined, class: undefined }"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
@@ -14,7 +15,7 @@
 	<div
 		id="root"
 		v-bind="{ ...$attrs.attrs, class: undefined, wrapperAttrs: undefined }"
-		:class="twMerge( `
+		:class="twMerge(`
 			dark:bg-fg
 			dark:text-bg
 			bg-bg
@@ -31,9 +32,14 @@
 		`,
 			($attrs as any).attrs?.class)"
 	>
-		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
-		<!-- @vue-expect-error data-allow-mismatch is for vue/nuxt to allow the hydration mismatch-->
-		<Notifications v-if="useNotifications && isClientSide" data-allow-mismatch/>
+		<TestControls
+			v-if="testWrapperMode"
+			:show-outline="showOutline"
+		/>
+		<Notifications
+			v-if="useNotifications && isClientSide"
+			data-allow-mismatch
+		/>
 		<slot/>
 	</div>
 </div>
@@ -41,7 +47,7 @@
 
 <script setup lang="ts">
 import { unreachable } from "@alanscodelog/utils/unreachable"
-import { type Theme } from "metamorphosis"
+import type { Theme } from "metamorphosis"
 import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
 
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
@@ -59,7 +65,7 @@ import TestControls from "../TestControls/TestControls.vue"
 
 const $attrs = useDivideAttrs(["wrapper"])
 
-defineOptions({ name: "root", inheritAttrs: false, suspensible: false })
+defineOptions({ name: "Root", inheritAttrs: false, suspensible: false })
 const props = withDefaults(defineProps<{
 	theme?: Theme
 	outline?: boolean
@@ -124,7 +130,7 @@ const darkMode = darkModeSetup.darkMode
 useShowDevOnlyKey()
 
 defineExpose({
-	darkMode: darkModeSetup,
+	darkMode: darkModeSetup
 })
 
 if (props.useBuiltinTranslations) {
@@ -132,9 +138,7 @@ if (props.useBuiltinTranslations) {
 	void useSetupI18n({
 		locale: languageLocale,
 		useBuiltinTranslations: true,
-		useDummyMessageSetWhileLoading: true,
+		useDummyMessageSetWhileLoading: true
 	})
 }
-
 </script>
-

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

@@ -1,27 +1,24 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta = {
 	component: components.LibSimpleInput,
 	title: "Components/Input",
 	args: {
 		modelValue: "Value",
-		placeholder: "Placeholder",
-	},
+		placeholder: "Placeholder"
+	}
 } satisfies Meta<typeof components.LibSimpleInput> & Meta<{ custom: string }>
 
 export default meta
 type Story = StoryObj<typeof components.LibSimpleInput> // & StoryObj<typeof extraArgs>
 
-
 /** Input */
 export const Primary: Story = {
 	args: {
-		modelValue: "some value",
+		modelValue: "some value"
 	},
 	render: args => ({
 		components,
@@ -32,8 +29,8 @@ export const Primary: Story = {
 				@keydown="test"
 				class="m-2" v-bind="args" v-model="args.modelValue" ></lib-simple-input>
 				<lib-simple-input class="m-2" v-bind="{...args, modelValue:''}" ></lib-simple-input>
-				`,
-	}),
+				`
+	})
 }
 
 /** Has more reasonable min-width inside a flexbox. */
@@ -47,31 +44,30 @@ export const InsideAFlexbox: Story = {
 					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
 					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
 				</div>
-		`,
+		`
 	}),
 	args: {
-		stretch: true,
-	},
+		stretch: true
+	}
 }
 
-
 export const Disabled = {
 	...Primary,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 export const Readonly = {
 	...Primary,
 	args: {
-		readonly: true,
-	},
+		readonly: true
+	}
 }
 export const Invalid = {
 	...Primary,
 	args: {
-		valid: false,
-	},
+		valid: false
+	}
 }
 /**
  * Intended for being wrapped.
@@ -80,19 +76,19 @@ export const Invalid = {
 export const Borderless = {
 	...Primary,
 	args: {
-		border: false,
-	},
+		border: false
+	}
 }
 
 export const Numerical = {
 	...Primary,
 	args: {
-		type: "number",
-	},
+		type: "number"
+	}
 }
 export const NumericalInsideAFlexbox = {
 	...InsideAFlexbox,
 	args: {
-		type: "number",
-	},
+		type: "number"
+	}
 }

package/src/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -63,13 +63,12 @@
 	:disabled="disabled"
 	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
+	v-bind="{ ...$attrs, class: undefined, ...ariaLabel }"
 	@keydown="handleKeydown"
 	@input="emit('input', $event as InputEvent)"
 >
 </template>
 
-
 <script lang="ts" setup generic="T">
 import { type InputHTMLAttributes, useAttrs } from "vue"
 
@@ -77,12 +76,11 @@ 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 { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-simple-input",
-	inheritAttrs: false,
+	name: "LibSimpleInput",
+	inheritAttrs: false
 })
 
 const fallbackId = getFallbackId()
@@ -93,13 +91,13 @@ const props = withDefaults(defineProps<Props>(), {
 	valid: true,
 	label: "",
 	type: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
 const modelValue = defineModel<T>({ required: true })
 
 const emit = defineEmits<{
-	/* User presses enter.*/
+	/* User presses enter. */
 	(e: "submit", val: T): void
 	(e: "input", val: InputEvent): void
 }>()
@@ -112,22 +110,20 @@ function handleKeydown(e: KeyboardEvent) {
 	}
 }
 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
-	}
+type RealProps
+	= & LinkableByIdProps
+		& LabelProps
+		& BaseInteractiveProps
+		& {
+			placeholder?: InputHTMLAttributes["placeholder"]
+			disabled?: InputHTMLAttributes["disabled"]
+			id?: InputHTMLAttributes["id"]
+			type?: InputHTMLAttributes["type"]
+			valid?: boolean
+		}
 
 interface Props
 	extends

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

@@ -5,7 +5,6 @@ import type { ComponentExposed } from "vue-component-type-helpers"
 
 import LibSuggestions from "./LibSuggestions.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
 const meta = {
@@ -16,8 +15,8 @@ const meta = {
 		modelValue: "",
 		label: "Some Label",
 		border: true,
-		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-	},
+		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+	}
 } // satisfies Meta<typeof LibSuggestions> & Meta<{ custom: string }>
 
 export default meta
@@ -33,7 +32,7 @@ type Story = StoryObj<typeof LibSuggestions> // & StoryObj<typeof extraArgs>
 export const Primary: Story = {
 	render: args => ({
 		components: { ...components, LibSuggestions },
-		
+
 		setup: () => {
 			const inputValue = ref(args.modelValue)
 			const modelValue = ref(args.modelValue)
@@ -56,7 +55,7 @@ export const Primary: Story = {
 				suggestions,
 				drawer,
 				keydownHandler,
-				blurHandler,
+				blurHandler
 			}
 		},
 
@@ -88,26 +87,25 @@ export const Primary: Story = {
 					</template>
 				</lib-suggestions>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 
 export const RestrictToSuggestions: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		restrictToSuggestions: true,
-	},
-	
-	
+		restrictToSuggestions: true
+	}
+
 }
 export const AlwaysShowAllSuggestions = {
 	...Primary,
 	args: {
 		...Primary.args,
 		restrictToSuggestions: true,
-		suggestionsFilter: (_input: string, items: string[]) => items,
-	},
+		suggestionsFilter: (_input: string, items: string[]) => items
+	}
 
 }
 export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
@@ -115,8 +113,8 @@ export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
 	args: {
 		...Primary.args,
 		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items,
-	},
+		suggestionsFilter: (_input: string, items: string[]) => items
+	}
 
 }
 export const CustomSuggestionsObject = {
@@ -128,10 +126,9 @@ export const CustomSuggestionsObject = {
 			{ label: "A", other: "some data A" },
 			{ label: "AB", other: "some data AB" },
 			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" },
+			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
 		],
-		suggestionLabel: (item: any) => item.label,
-	},
+		suggestionLabel: (item: any) => item.label
+	}
 
 }
-

package/src/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -13,10 +13,11 @@
 	:data-open="$open"
 	role="listbox"
 	ref="el"
-	v-bind="{...$.attrs, class:undefined}"
+	v-bind="{ ...$.attrs, class: undefined }"
 >
 	<!-- 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}`"
+	<div
+		:id="`suggestion-${id ?? fallbackId}-${index}`"
 		role="option"
 		:class="twMerge(`
 			suggestions--item
@@ -30,7 +31,7 @@
 			`,
 			($.itemAttrs as any)?.class
 		)"
-		v-bind="{...$.itemAttrs, class:undefined}"
+		v-bind="{ ...$.itemAttrs, class: undefined }"
 		:aria-selected="index === suggestions.active ? true : false"
 		:aria-label="suggestions.getLabel(item)"
 		v-for="(item, index) in suggestions.filtered"
@@ -39,7 +40,8 @@
 		@mousedown.prevent
 		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
 	>
-		<slot name="item"
+		<slot
+			name="item"
 			:item="item"
 			:index="index"
 			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
@@ -57,21 +59,19 @@
 </div>
 </template>
 
-
 <script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
-
-import { type HTMLAttributes,reactive, ref } from "vue"
+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, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-suggestions",
-	inheritAttrs: false,
+	name: "LibSuggestions",
+	inheritAttrs: false
 })
 
 const $ = useDivideAttrs(["item"] as const)
@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(),
 	isValid: true,
 	canOpen: true,
 	filterKeydown: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 /**
  * 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.
@@ -96,11 +96,10 @@ const $modelValue = defineModel<TValue>("modelValue", { required: true })
  *
  * 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 $inputValue = defineModel<string>("inputValue", { default: "" })
 
 const $open = defineModel<boolean>("open", { 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.")
 }
@@ -148,7 +147,7 @@ const inputKeydownHandler = (e: KeyboardEvent): void => {
 }
 const inputBlurHandler = (e: MouseEvent): void => {
 	if (props.filterBlur?.(e)) return
-	
+
 	if (!$open.value) return
 
 	if (props.restrictToSuggestions) {
@@ -175,34 +174,33 @@ defineExpose({
 	/** 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,
+	inputFocusHandler
 })
-
 </script>
 
 <script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes, {
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
 	/** Tailwind classes. */
 	class?: string
 }>>
 
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
+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
-	}
+			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"> & {
+	Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
 		/** Tailwind classes. */
 		class?: string
 	}>,
@@ -210,5 +208,4 @@ interface Props
 	WrapperTypes,
 	RealProps
 {}
-
 </script>