@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/src/runtime/components/{LibRecorder/LibRecorder.vue → WRecorder/WRecorder.vue}

@@ -4,8 +4,8 @@
 	contenteditable=false is because of storybook, it's shortcuts interfere when not using real input elements
 	-->
 <div
-	:id="id?? fallbackId"
-	:class="twMerge(`recorder
+	:class="twMerge(`
+			recorder
 			flex items-center
 			gap-2
 			px-2
@@ -13,12 +13,11 @@
 			focus-outline-no-offset
 			rounded-sm
 		`,
-		border &&`
+		border && `
 			border
 			border-neutral-500
 			focus:border-accent-500
 		`,
-
 		(disabled || readonly) && `
 			text-neutral-400
 			dark:text-neutral-600
@@ -30,37 +29,47 @@
 			dark:border-neutral-600
 		`,
 		($attrs as any).class)"
-	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
+	v-bind="{ ...$attrs, class: undefined }"
+	role="button"
+	:aria-pressed="recording"
+	:aria-disabled="disabled"
 	ref="recorderEl"
-	v-bind="{ ...ariaLabel, ...$attrs, class: undefined }"
 	@blur="handleBlurRecorder($event)"
-	@click="handleClickRecorder($event)"
-	@keydown.space.prevent="handleClickRecorder($event, true)"
+	@keydown.space.prevent.capture="handlePointerdownRecorder($event, true)"
 >
-	<!-- :aria-description="recording ? recordingTitle : ''" -->
+	<span
+		class="sr-only"
+		aria-live="polite"
+	>
+		{{ recording ? (recordingTitle || t('recorder.recording')) : '' }}
+	</span>
 	<div
-		:class="twMerge(`recorder--indicator
-				inline-block
-				bg-red-700
-				rounded-full
-				w-[1em]
-				h-[1em]
-				shrink-0
-				hover:bg-red-500
-			`,
+		:class="twMerge(`
+			recorder--indicator
+			inline-block
+			bg-red-700
+			rounded-full
+			w-[1em]
+			h-[1em]
+			shrink-0
+		`,
 			recording && `
 				animate-blinkInf
 				bg-red-500
 			`,
 			(disabled || readonly) && `
 				bg-neutral-500
+			`,
+			!(disabled || readonly) && `
+				hover:bg-red-500
 			`
 		)"
 		ref="recorderIndicatorEl"
+		@pointerdown.capture.prevent="handlePointerdownRecorder($event)"
 	/>
 	<div class="recorder--value before:content-vertical-holder truncate">
 		{{ recording
@@ -72,15 +81,16 @@
 
 <script setup lang="ts">
 import { keys } from "@alanscodelog/utils/keys"
-import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from "vue"
+import type { HTMLAttributes } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch, watchPostEffect } from "vue"
 
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
 
 defineOptions({
-	name: "LibRecorder",
+	name: "WRecorder",
 	inheritAttrs: false
 })
 const t = useInjectedI18n()
@@ -88,18 +98,40 @@ const t = useInjectedI18n()
 const emits = defineEmits<{
 	/** Recorder is blurred */
 	(e: "recorder:blur", $event: FocusEvent): void
-	/** Recorder is clicked. The component's indicator and recorder elements are passed to help filter out those clicks. */
-	(e: "recorder:click", { event, indicator, input }: { event: MouseEvent | KeyboardEvent, indicator: HTMLElement, input: HTMLInputElement }): void
+	/** Recorder pointerdown event. The component's indicator and recorder elements are passed to help filter out those clicks. */
+	(e: "recorder:pointerdown", { event, indicator, input }: { event: MouseEvent | KeyboardEvent, indicator: HTMLElement, input: HTMLInputElement }): void
 	/* User presses enter. Not emitted when multiple values are used. */
 	(e: "focus:parent"): void
 }>()
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props>(), {
+
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+	& BaseInteractiveProps
+	& {
+		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 }
+	}
+>(), {
 	recordingTitle: "",
-	id: undefined,
 	binders: undefined,
 	recorder: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
 /**
  * Puts the element into recording mode if true. See {@link props.recorder}.
@@ -109,12 +141,12 @@ 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 recorderEl = ref<HTMLElement | null>(null)
 const recorderIndicatorEl = ref<HTMLElement | null>(null)
 const canEdit = computed(() => !props.disabled && !props.readonly)
 const tempValue = ref(modelValue.value)
 
-watch([() => props.binders, () => props.binders], () => {
+watch([() => props.binders, () => props.recorder], () => {
 	if (recording.value) {
 		throw new Error("Component was not designed to allow swapping out of binders/recorders while recording")
 	}
@@ -123,7 +155,6 @@ watch([() => props.binders, () => props.binders], () => {
 watch(modelValue, () => {
 	tempValue.value = modelValue.value
 })
-const ariaLabel = useAriaLabel(props)
 
 const boundListeners: Record<string, any> = {}
 let isBound = false
@@ -138,12 +169,13 @@ const unbindListeners = (): void => {
 		}
 	}
 	if (props.binders && recorderEl.value) {
-		props.binders.unbind(recorderEl.value as HTMLInputElement)
+		props.binders.unbind(recorderEl.value)
 	}
 }
+
 const bindListeners = (): void => {
 	if (!props.recorder && !props.binders) {
-		throw new Error("Record is true but no recorder or binders props was passed")
+		throw new Error("Recording is true but no recorder or binders props was passed")
 	}
 	if (props.recorder && props.binders) {
 		throw new Error("Recording is true and was passed both a recorder and a binders prop. Both cannot be used at the same time.")
@@ -156,7 +188,7 @@ const bindListeners = (): void => {
 		}
 	}
 	if (props.binders && recorderEl.value) {
-		props.binders.bind(recorderEl.value as HTMLInputElement)
+		props.binders.bind(recorderEl.value)
 	}
 }
 
@@ -182,6 +214,7 @@ watchPostEffect(() => {
 onBeforeUnmount(() => {
 	unbindListeners()
 })
+
 onMounted(() => {
 	if (recording.value) {
 		bindListeners()
@@ -195,7 +228,7 @@ const handleBlurRecorder = (e: FocusEvent): void => {
 	}
 }
 
-const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean = false): void => {
+const handlePointerdownRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean = false): void => {
 	if (!canEdit.value) return
 	if (!recording.value) {
 		recorderEl.value?.focus()
@@ -203,40 +236,8 @@ const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean
 	// toggle if clicking on the recording indicator, otherwise only allow starting recording, so if needed, clicks can be recorded
 	if (props.recorder || props.binders) {
 		if (isSpaceKey) { return }
-		emits("recorder:click", { event: e as MouseEvent, indicator: recorderIndicatorEl.value! as HTMLElement, input: recorderEl.value! as HTMLInputElement })
+		emits("recorder:pointerdown", { 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
-		}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{ }
-</script>

package/src/runtime/components/{LibRoot/LibRoot.vue → WRoot/WRoot.vue}

@@ -1,25 +1,28 @@
 <template>
 <div
-	:id="id"
 	tabindex="-1"
 	:class="twMerge(
 		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
 		darkMode && ' dark',
-		($attrs['wrapperAttrs'] as any)?.class
+		wrapperAttrs?.class
 	)"
-	v-bind="{ ...($attrs['wrapperAttrs']), attrs: undefined, class: undefined }"
+	v-bind="{
+		id: 'app',
+		...wrapperAttrs,
+		class: undefined
+	}"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
 	<!-- See TestControls for why the margins here -->
 	<div
 		id="root"
-		v-bind="{ ...$attrs.attrs, class: undefined, wrapperAttrs: undefined }"
+		v-bind="{ ...$attrs, class: undefined }"
 		:class="twMerge(`
-			dark:bg-fg
-			dark:text-bg
-			bg-bg
-			text-fg
+			dark:bg-neutral-900
+			dark:text-white
+			bg-neutral-50
+			text-black
 		`,
 			testWrapperMode && `
 			px-10
@@ -30,7 +33,7 @@
 			flex
 			flex-col
 		`,
-			($attrs as any).attrs?.class)"
+			($attrs as any).class)"
 	>
 		<TestControls
 			v-if="testWrapperMode"
@@ -48,10 +51,10 @@
 <script setup lang="ts">
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Theme } from "metamorphosis"
-import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
+import type { ComponentPublicInstance, HTMLAttributes } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, useAttrs } from "vue"
 
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
 import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
 import { useSetupI18n } from "../../composables/useSetupI18n.js"
@@ -59,19 +62,19 @@ import { useSetupLocale } from "../../composables/useSetupLocale.js"
 import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { theme as defaultTheme } from "../../theme.js"
+import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Notifications from "../LibNotifications/LibNotifications.vue"
 import TestControls from "../TestControls/TestControls.vue"
+import Notifications from "../WNotifications/WNotifications.vue"
 
-const $attrs = useDivideAttrs(["wrapper"])
 
 defineOptions({ name: "Root", inheritAttrs: false, suspensible: false })
+const $attrs = useAttrs()
 const props = withDefaults(defineProps<{
 	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. */
@@ -79,12 +82,12 @@ const props = withDefaults(defineProps<{
 	useBuiltinTranslations?: boolean
 	useNotifications?: boolean
 	notificationHandler?: NotificationHandler
+	wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
 }>(), {
 	theme: undefined,
 	testWrapperMode: false,
 	outline: true,
 	forceOutline: false,
-	id: "app",
 	getRef: undefined,
 	isClientSide: true,
 	useBuiltinTranslations: true,

package/src/runtime/components/{LibSimpleInput/LibSimpleInput.stories.ts → WSimpleInput/WSimpleInput.stories.ts}

@@ -1,19 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { StoryObj } from "@storybook/vue3"
+
+import WSimpleInput from "./WSimpleInput.vue"
 
 import * as components from "../index.js"
 
 const meta = {
-	component: components.LibSimpleInput,
+	component: WSimpleInput,
 	title: "Components/Input",
 	args: {
 		modelValue: "Value",
 		placeholder: "Placeholder"
 	}
-} satisfies Meta<typeof components.LibSimpleInput> & Meta<{ custom: string }>
+}
 
 export default meta
-type Story = StoryObj<typeof components.LibSimpleInput> // & StoryObj<typeof extraArgs>
+type Story = StoryObj<typeof components.WSimpleInput>
 
 /** Input */
 export const Primary: Story = {
@@ -25,10 +27,10 @@ export const Primary: Story = {
 		// eslint-disable-next-line no-console
 		setup: () => ({ args, test: () => console.log("Enter") }),
 		template: `
-				<lib-simple-input
+				<WSimpleInput
 				@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>
+				class="m-2" v-bind="args" v-model="args.modelValue" ></WSimpleInput>
+				<WSimpleInput class="m-2" v-bind="{...args, modelValue:''}" ></WSimpleInput>
 				`
 	})
 }
@@ -41,14 +43,11 @@ export const InsideAFlexbox: Story = {
 		template: `
 				Inside a flexbox:
 				<div class="flex flex-wrap">
-					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
+					<WSimpleInput v-bind="args" v-model="args.modelValue"></WSimpleInput>
 					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
 				</div>
 		`
-	}),
-	args: {
-		stretch: true
-	}
+	})
 }
 
 export const Disabled = {

package/src/runtime/components/{LibSimpleInput/LibSimpleInput.vue → WSimpleInput/WSimpleInput.vue}

@@ -1,7 +1,7 @@
 <template>
 <input
-	:id="id ?? fallbackId"
-	:class="twMerge(`
+	:id="finalId"
+	:class="!unstyle && twMerge(`
 		simple-input
 		flex-1
 		grow-[999999]
@@ -70,12 +70,11 @@
 	)"
 	:data-border="border"
 	:data-invalid="!valid"
-	:type="type"
-	:placeholder="placeholder"
-	:disabled="disabled"
-	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{ ...$attrs, class: undefined, ...ariaLabel }"
+	v-bind="{
+		...$attrs,
+		class: undefined
+	}"
 	@keydown="handleKeydown"
 	@input="emit('input', $event as InputEvent)"
 >
@@ -84,27 +83,41 @@
 <script lang="ts" setup generic="T">
 import { type InputHTMLAttributes, useAttrs } from "vue"
 
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { useFallbackId } from "../../composables/useFallbackId.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "LibSimpleInput",
+	name: "WSimpleInput",
 	inheritAttrs: false
 })
 
-const fallbackId = getFallbackId()
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<
+		InputHTMLAttributes,
+		| "class" | "readonly" | "disabled" | "onSubmit" | "onInput"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
+	>
+	& /** @vue-ignore */ TailwindClassProp
+	& Pick<BaseInteractiveProps, "unstyle" | "border">
+	& {
+		id?: string
+		label?: string
+		valid?: boolean
+	}
+>(), {
 	id: "",
 	placeholder: "",
 	valid: true,
 	label: "",
 	type: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
+const finalId = useFallbackId(props)
 
 const modelValue = defineModel<T>({ required: true })
 
@@ -114,42 +127,12 @@ const emit = defineEmits<{
 	(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)
 	}
 }
-usePreHydrationValue(props.id ?? fallbackId, modelValue)
+usePreHydrationValue(finalId, modelValue)
 </script>
 
-<script lang="ts">
-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"
-		// https://github.com/vuejs/core/pull/14237
-		| "autocomplete"
-	> & TailwindClassProp>,
-	RealProps
-{}
-</script>