@witchcraft/ui 0.4.0 → 0.4.1

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

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { onUnmounted, ref } from "vue"
+
+import WProgressBar from "./WProgressBar.vue"
+
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_start?: number
+	_timeout?: number
+	_add?: number
+}
+const meta: Meta<typeof WProgressBar> = {
+	component: WProgressBar,
+	title: "Components/ProgressBar",
+	args: {
+		label: "Label",
+		...{
+			_timeout: 1000,
+			_add: 10,
+			_start: 50
+		} satisfies ExtraTestArgs as any
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WProgressBar> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const forceFull = ref(false)
+				const progress = ref(extraArgs._start as number)
+				if (args.progress) {
+					progress.value = args.progress
+				} else {
+					let justHitFull = false
+					const interval = setInterval(() => {
+						if (justHitFull) return
+						if (progress.value >= 100) {
+							justHitFull = true
+							// give it time to hide
+							setTimeout(() => {
+								progress.value = 0
+								justHitFull = false
+							}, 2000)
+						} else {
+							progress.value += extraArgs._add as number
+						}
+					}, extraArgs._timeout as number)
+					onUnmounted(() => {
+						clearInterval(interval)
+					})
+				}
+				return {
+					args: { ...args },
+					forceFull,
+					progress
+				}
+			},
+			template: `
+			<WCheckbox v-model="forceFull">Force 100%</WCheckbox>
+			<WProgressBar class="flex-1" v-bind="args" :progress="forceFull ? 100 : progress"></WProgressBar>
+			<br/>
+			Stretched in flexbox:
+			<div class="flex w-full">
+				<WProgressBar class="flex-1" v-bind="args" :progress="forceFull ? 100 : progress"></WProgressBar>
+			</div>
+			<hr class="mt-2"/>
+		`
+		}
+	}
+}
+
+
+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"
+	}
+}
+export const Static: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		progress: 50
+	}
+}
+
+export const AutoHiding: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		autohideOnComplete: 500,
+		clamp: [10, 100],
+		// keepSpaceWhenHidden: true,
+		_start: 0,
+		_timeout: 1000,
+		_add: 10
+	}
+}
+
+export const AutoHidingNoKeepSpace: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		autohideOnComplete: 500,
+		keepSpaceWhenHidden: false,
+		clamp: [10, 100],
+		_start: 0,
+		_timeout: 1000,
+		_add: 10
+	}
+}

package/src/runtime/components/WProgressBar/WProgressBar.vue

@@ -0,0 +1,185 @@
+<template>
+<Transition>
+	<div
+		v-if="currentVisibility !== 'hidden'"
+		:class="twMerge(`
+			progress-bar
+			w-[200px]
+			whitespace-nowrap
+			overflow-x-scroll
+			scrollbar-hidden
+			rounded-sm
+			flex
+			relative
+			text-sm
+			min-w-[50px]
+			after:shadow-inner
+			after:shadow-black/50
+			after:content-['']
+			after:absolute
+			after:inset-0
+			after:pointer-events-none
+			after:z-2
+			after:transition-all
+			before:content-['']
+			before:shadow-inner
+			before:shadow-black/50
+			before:rounded-sm
+			before:bg-bars-gradient
+			before:animate-slideBgInf
+			before:[background-size:15px_15px]
+			before:absolute
+			before:w-[var(--progress)]
+			before:top-0 before:bottom-0 before:left-0
+			before:transition-all
+			before:z-1
+			before:duration-500
+		`, currentVisibility === 'pseudo' && `
+			after:opacity-0
+			before:opacity-0
+		`, ($attrs as any).class)"
+		:data-value="progress"
+		role="progressbar"
+		:aria-valuenow="clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
+		:aria-valuemin="clamp[0] ?? 0"
+		:aria-valuemax="clamp[1] ?? 100"
+		:aria-label="label"
+		v-bind="{ ...$attrs, class: undefined }"
+		:style="`--progress: ${clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
+	>
+		<div
+			class="progress-bar--label-wrapper relative flex-1 z-3"
+			aria-hidden="true"
+		>
+			<span class="before:content-vertical-holder"/>
+
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--bottom-label
+						text-black
+						dark:text-white
+						absolute
+						inset-0
+						flex
+						justify-center
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--top-label
+						pointer-events-none
+						absolute
+						inset-0
+						flex
+						justify-center
+						transition-all
+						duration-500
+						text-white
+						[clip-path:inset(0_calc(100%-var(--progress))_0_0)]
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+		</div>
+	</div>
+</Transition>
+</template>
+
+<script setup lang="ts">
+import { clampNumber } from "@alanscodelog/utils/clampNumber"
+import { unreachable } from "@alanscodelog/utils/unreachable"
+import type { HTMLAttributes } from "vue"
+import { ref, useAttrs, watch } from "vue"
+
+import type { TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "WProgressBar",
+	inheritAttrs: false
+})
+
+const $attrs = useAttrs()
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+	& {
+		label?: string
+		/** A number from 0-100. It is auto-clamped. */
+		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]
+	}
+>(), {
+	autohideOnComplete: -1,
+	keepSpaceWhenHidden: false,
+	clamp: () => [0, 100]
+})
+
+type Visibility = "visible" | "pseudo" | "hidden"
+const currentVisibility = ref<Visibility>("visible")
+let lastVisibility: Visibility | null = null
+
+function updateVisibility(
+	immediate: boolean = false,
+	onCleanup?: (cb: () => void) => void
+): void {
+	const isComplete = props.progress >= 100 || props.progress < 0
+	const shouldHide = props.autohideOnComplete > -1 && isComplete
+
+	if (!shouldHide) {
+		lastVisibility = null
+		currentVisibility.value = "visible"
+		return
+	}
+
+	const newVisibility: Visibility = props.keepSpaceWhenHidden ? "pseudo" : "hidden"
+
+	if (immediate) {
+		currentVisibility.value = newVisibility
+		lastVisibility = newVisibility
+	} else if (lastVisibility !== newVisibility) {
+		lastVisibility = newVisibility
+		const timeout = setTimeout(() => {
+			currentVisibility.value = newVisibility
+		}, props.autohideOnComplete) as any
+		if (!onCleanup) unreachable()
+		onCleanup(() => clearTimeout(timeout))
+	}
+}
+
+updateVisibility(true)
+
+watch([
+	() => [props.progress, props.keepSpaceWhenHidden, props.autohideOnComplete]
+], (_new, _old, onCleanup) => {
+	updateVisibility(false, onCleanup)
+})
+</script>

package/src/runtime/components/{LibRecorder/LibRecorder.stories.ts → WRecorder/WRecorder.stories.ts}

@@ -2,8 +2,10 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref, watchEffect } from "vue"
 
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
 import { createRecorderHandler, createRecorderWatchEffect } from "../../helpers/storybook.js"
 import * as components from "../index.js"
+
 /**
  * This is a special input component designed to record any type of event.
  *
@@ -11,22 +13,22 @@ import * as components from "../index.js"
  *
  * This basic implementation just lists the keys. Enter accepts the recording, escape cancels back to the initial value.
  */
-const meta: Meta<typeof components.LibRecorder> = {
-	component: components.LibRecorder,
+const meta: Meta<typeof components.WRecorder> = {
+	component: components.WRecorder,
 	title: "Components/Recorder",
 	args: {
-		label: "Some Label",
 		recordingTitle: "Recording. Press enter or click away to accept. Press escape to cancel.",
 		modelValue: "K E Y S"
 	}
 }
 
 export default meta
-type Story = StoryObj<typeof components.LibRecorder>
+type Story = StoryObj<typeof components.WRecorder>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
+		directives: { vExtractRootEl },
 		setup: () => {
 			const recording = ref(false)
 			const recordingValue = ref("")
@@ -44,14 +46,15 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-recorder
+			<WRecorder
 				v-bind="args"
 				v-extract-root-el="_ => recorderEl = _"
 				:recordingValue="recordingValue"
 				:recorder="recorder"
 				v-model:recording="recording"
 				v-model="modelValue"
-				@recorder:click="recording = !recording"
+				@recorder:pointerdown="recording = !recording"
+				@recorder:blur="recordingValue = modelValue; recording = false"
 			/>
 		`
 	})

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>