@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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

@@ -4,10 +4,8 @@ import { onUnmounted, ref } from "vue"
 
 import LibProgressBar from "./LibProgressBar.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibProgressBar> = {
 	component: LibProgressBar,
 	title: "Components/ProgressBar",
@@ -16,14 +14,13 @@ const meta: Meta<typeof LibProgressBar> = {
 		// @ts-expect-error .
 		_timeout: 1000,
 		_add: 10,
-		_start: 50,
-	},
+		_start: 50
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibProgressBar>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -45,7 +42,7 @@ export const Primary: Story = {
 			}
 			return {
 				args: { ...args },
-				progress,
+				progress
 			}
 		},
 		template: `
@@ -55,28 +52,28 @@ export const Primary: Story = {
 			<div class="flex w-full">
 				<lib-progress-bar class="flex-1" v-bind="args" :progress="progress"></lib-progress-bar>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 export const Secondary: Story = {
 	...Primary,
 	args: {
-		...Primary.args,
-	},
+		...Primary.args
+	}
 }
 export const ReallyLongLabel: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		label: "Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect",
-	},
+		label: "Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect Really Long Label Label to See Effect"
+	}
 }
 export const Static: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		progress: 50,
-	},
+		progress: 50
+	}
 }
 
 export const AutoHiding: Story = {
@@ -88,7 +85,6 @@ export const AutoHiding: Story = {
 		_start: 0,
 		// keepSpaceWhenHidden: true,
 		_timeout: 1000,
-		_add: 10,
-	},
+		_add: 10
+	}
 }
-

package/src/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -1,6 +1,7 @@
 <template>
 <Transition>
-	<div v-if="!hide"
+	<div
+		v-if="!hide"
 		:id="id ?? fallbackId"
 		:class="twMerge(`
 			progress-bar
@@ -35,7 +36,7 @@
 			before:transition-all
 			before:z-1
 			before:duration-500
-		`,psuedoHide && `
+		`, psuedoHide && `
 			after:opacity-0
 			before:opacity-0
 		`, ($attrs as any).class)"
@@ -45,14 +46,15 @@
 		:aria-valuenow="clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
 		:aria-valuemin="clamp[0] ?? 0"
 		:aria-valuemax="clamp[1] ?? 100"
-		v-bind="{...$attrs, class:undefined}"
+		v-bind="{ ...$attrs, class: undefined }"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
 		<div class="procgress-bar--label-wrapper relative flex-1">
 			<span class="before:content-vertical-holder"/>
 			<Transition>
 				<slot>
-					<label v-if="!psuedoHide"
+					<label
+						v-if="!psuedoHide"
 						:for="id"
 						class="
 							text-bg
@@ -93,25 +95,26 @@
 	</div>
 </Transition>
 </template>
+
 <script setup  lang="ts">
-import { type HTMLAttributes,type PropType, ref, watch } from "vue"
+import { ref, watch } from "vue"
 
 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"
 
 // TODO move to utils
 const clampVal = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
 
 defineOptions({
-	name: "lib-progress-bar",
-	inheritAttrs: false,
+	name: "LibProgressBar",
+	inheritAttrs: false
 })
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
 	autohideOnComplete: -1,
 	keepSpaceWhenHidden: false,
 	clamp: () => [0, 100],
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 const hide = ref<boolean>(false)
 const psuedoHide = ref<boolean>(false)
@@ -130,7 +133,7 @@ if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress <
 watch([
 	() => props.progress,
 	() => props.keepSpaceWhenHidden,
-	() => props.autohideOnComplete,
+	() => props.autohideOnComplete
 ], () => {
 	if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
 		if (props.keepSpaceWhenHidden) {
@@ -158,36 +161,36 @@ watch([
 		psuedoHide.value = false
 	}
 }, { immediate: false })
-
 </script>
+
 <script lang="ts">
+import type { HTMLAttributes } from "vue"
 
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	progress: number
-	/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
-	autohideOnComplete?: number
-	/**
-		* Do not actually hide the element, just leave an unstyled div,
-		* so the whole layout doesn't change on completion when autohideOnComplete is set.
-		*/
-	keepSpaceWhenHidden?: boolean
-	/**
-		* By default the progress bar is visually clamped to 0-100, even if the value might be something else.
-		* You can change what it's clamped to here, to for example,
-		* show at least a small sliver of the progress bar when it's still 0.
-		*/
-	clamp?: [start:number, end:number]
-}
+type RealProps
+	= & LinkableByIdProps
+		& BaseInteractiveProps
+		& LabelProps
+		& {
+			progress: number
+			/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
+			autohideOnComplete?: number
+			/**
+			 * Do not actually hide the element, just leave an unstyled div,
+			 * so the whole layout doesn't change on completion when autohideOnComplete is set.
+			 */
+			keepSpaceWhenHidden?: boolean
+			/**
+			 * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+			 * You can change what it's clamped to here, to for example,
+			 * show at least a small sliver of the progress bar when it's still 0.
+			 */
+			clamp?: [start: number, end: number]
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 { }
-
 </script>

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

@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref, watchEffect } from "vue"
 
 import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 /**
  * This is a special input component designed to record any type of event.
@@ -18,8 +17,8 @@ const meta: Meta<typeof components.LibRecorder> = {
 	args: {
 		label: "Some Label",
 		recordingTitle: "Recording. Press enter or click away to accept. Press escape to cancel.",
-		modelValue: "K E Y S",
-	},
+		modelValue: "K E Y S"
+	}
 }
 
 export default meta
@@ -41,7 +40,7 @@ export const Primary: Story = {
 				recorder,
 				recording,
 				recordingValue,
-				recorderEl,
+				recorderEl
 			}
 		},
 		template: `
@@ -54,28 +53,28 @@ export const Primary: Story = {
 				v-model="modelValue"
 				@recorder:click="recording = !recording"
 			/>
-		`,
-	}),
+		`
+	})
 }
 
 /** Should not be tabbable or recordable. */
 export const Disabled: Story = {
 	...Primary,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 /** *Should* be tabbable but not recordable. */
 export const Readonly: Story = {
 	...Primary,
 	args: {
-		readonly: true,
-	},
+		readonly: true
+	}
 }
 /** Height should not shrink. */
 export const EmptyInitialValue: Story = {
 	...Primary,
 	args: {
-		modelValue: "",
-	},
+		modelValue: ""
+	}
 }

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