@witchcraft/ui 0.0.1

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

@@ -0,0 +1,192 @@
+<template>
+<Transition>
+	<div v-if="!hide"
+		:id="id ?? fallbackId"
+		:class="twMerge(`
+			w-[200px]
+			whitespace-nowrap
+			overflow-x-scroll
+			scrollbar-hidden
+			rounded-sm
+			flex
+			text-fg
+			relative
+			before:content-['']
+			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:shadow-inner
+			before:shadow-black/50
+			before:rounded-sm
+			before:bg-bars-gradient
+			before:animate-[slide_10s_linear_infinite]
+			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
+		`,psuedoHide && `
+			after:opacity-0
+			before:opacity-0
+		`, ($attrs as any).class)"
+		:data-value="progress"
+		:title="label"
+		role="progressbar"
+		: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}"
+		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
+	>
+		<div class="label-wrapper relative flex-1">
+			<span class="before:content-vertical-holder"/>
+			<Transition>
+				<slot>
+					<label v-if="!psuedoHide"
+						:for="id"
+						class="
+							text-bg
+							absolute inset-0  flex
+							justify-center
+						"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</label>
+				</slot>
+			</Transition>
+
+			<Transition>
+				<slot>
+					<label
+						v-if="!psuedoHide"
+						class="
+							contrast-label
+							pointer-events-none
+							absolute
+							inset-0
+							flex justify-center  transition-all
+							duration-500
+							[clip-path:inset(0_0_0_var(--progress))]
+							dark:hidden
+						"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</label>
+				</slot>
+			</Transition>
+		</div>
+	</div>
+</Transition>
+</template>
+<script setup  lang="ts">
+import { type HTMLAttributes,type PropType, ref, watch } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,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,
+})
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	autohideOnComplete: -1,
+	keepSpaceWhenHidden: false,
+	clamp: () => [0, 100],
+	...baseInteractivePropsDefaults
+})
+const hide = ref<boolean>(false)
+const psuedoHide = ref<boolean>(false)
+let timeout: number
+let type: number
+if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
+	if (props.keepSpaceWhenHidden) {
+		hide.value = false
+		psuedoHide.value = true
+	} else {
+		hide.value = true
+		psuedoHide.value = false
+	}
+}
+
+watch([
+	() => props.progress,
+	() => props.keepSpaceWhenHidden,
+	() => props.autohideOnComplete,
+], () => {
+	if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
+		if (props.keepSpaceWhenHidden) {
+			if (type === 1) return
+			clearTimeout(timeout)
+			type = 1
+			timeout = setTimeout(() => {
+				type = 0
+				hide.value = false
+				psuedoHide.value = true
+			}, props.autohideOnComplete) as any
+		} else {
+			if (type === 2) return
+			clearTimeout(timeout)
+			type = 2
+			timeout = setTimeout(() => {
+				type = 0
+				hide.value = true
+				psuedoHide.value = false
+			}, props.autohideOnComplete) as any
+		}
+	} else {
+		clearTimeout(timeout)
+		hide.value = false
+		psuedoHide.value = false
+	}
+}, { immediate: false })
+
+</script>
+<script lang="ts">
+
+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>,
+	RealProps
+{ }
+
+</script>

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

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+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.
+ *
+ * It requires additional setup to actually work since what and how anything is recorded is up to the needs of the application.
+ *
+ * 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,
+	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>
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const recording = ref(false)
+			const recordingValue = ref("")
+			const modelValue = ref(args.modelValue)
+			const recorderEl = ref(null)
+			const recorder = createRecorderHandler(recordingValue, recording, modelValue, recorderEl)
+			watchEffect(createRecorderWatchEffect(recordingValue, recording, modelValue))
+			return {
+				args,
+				modelValue,
+				recorder,
+				recording,
+				recordingValue,
+				recorderEl,
+			}
+		},
+		template: `
+			<lib-recorder
+				v-bind="args"
+				v-extract-root-el="_ => recorderEl = _"
+				:recordingValue="recordingValue"
+				:recorder="recorder"
+				v-model:recording="recording"
+				v-model="modelValue"
+				@recorder:click="recording = !recording"
+			/>
+		`,
+	}),
+}
+
+/** Should not be tabbable or recordable. */
+export const Disabled: Story = {
+	...Primary,
+	args: {
+		disabled: true,
+	},
+}
+/** *Should* be tabbable but not recordable. */
+export const Readonly: Story = {
+	...Primary,
+	args: {
+		readonly: true,
+	},
+}
+/** Height should not shrink. */
+export const EmptyInitialValue: Story = {
+	...Primary,
+	args: {
+		modelValue: "",
+	},
+}

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

@@ -0,0 +1,243 @@
+<template>
+<!--
+	We use a custom element for the recorder so we don't have to deal with the input event.
+	contenteditable=false is because of storybook, it's shortcuts interfere when not using real input elements
+	-->
+<div
+	:id="id?? fallbackId"
+	:class="twMerge(`recorder
+			flex items-center
+			gap-2
+			px-2
+			grow-[999999]
+			focus-outline-no-offset
+			rounded-sm
+		`,
+		border &&`
+			border
+			border-neutral-500
+			focus:border-accent-500
+		`,
+
+		(disabled || readonly) && `
+			text-neutral-400
+			dark:text-neutral-600
+		`,
+		(disabled || readonly) && border && `
+			bg-neutral-50
+			dark:bg-neutral-950
+			border-neutral-400
+			dark:border-neutral-600
+		`
+		, ($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}"
+	@blur="handleBlurRecorder($event)"
+	@click="handleClickRecorder($event)"
+	@keydown.space.prevent="handleClickRecorder($event, true)"
+>
+	<!-- :aria-description="recording ? recordingTitle : ''" -->
+	<div
+		:class="twMerge(`recorder-indicator
+				inline-block
+				bg-red-700
+				rounded-full
+				w-[1em]
+				h-[1em]
+				shrink-0
+				hover:bg-red-500
+			`,
+			recording && `
+				animate-[blink_1s_infinite]
+				bg-red-500
+			`,
+			(disabled || readonly) && `
+				bg-neutral-500
+			`
+		)"
+		ref="recorderIndicatorEl"
+	/>
+	<div class="recorder-value before:content-vertical-holder truncate">
+		{{ recording
+			? recordingValue ?? t("recorder.recording")
+			: tempValue }}
+	</div>
+</div>
+</template>
+<script setup lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { computed, type HTMLAttributes ,onBeforeUnmount, onMounted, type PropType, 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, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-recorder",
+	inheritAttrs: false,
+})
+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
+	/* User presses enter. Not emitted when multiple values are used. */
+	(e: "focus:parent"): void
+}>()
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	recordingTitle: "",
+	id: undefined,
+	binders: undefined,
+	recorder: undefined,
+	...baseInteractivePropsDefaults
+})
+/**
+ * Puts the element into recording mode if true. See {@link props.recorder}.
+ */
+const recording = defineModel<boolean>("recording", { required: false, default: false })
+
+/** 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)
+const tempValue = ref(modelValue.value)
+
+watch([() => props.binders, () => props.binders], () => {
+	if (recording.value) {
+		throw new Error("Component was not designed to allow swapping out of binders/recorders while recording")
+	}
+})
+
+watch(modelValue, () => {
+	tempValue.value = modelValue.value
+})
+const ariaLabel = useAriaLabel(props)
+
+const boundListeners: Record<string, any> = {}
+let isBound = false
+
+const unbindListeners = (): void => {
+	if (!isBound) return
+	isBound = false
+	if (props.recorder) {
+		for (const key of keys(boundListeners)) {
+			recorderEl.value?.removeEventListener(key, boundListeners[key])
+			delete boundListeners[key]
+		}
+	}
+	if (props.binders && recorderEl.value) {
+		props.binders.unbind(recorderEl.value as HTMLInputElement)
+	}
+}
+const bindListeners = (): void => {
+	if (!props.recorder && !props.binders) {
+		throw new Error("Record 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.")
+	}
+	isBound = true
+	if (props.recorder) {
+		for (const key of keys(props.recorder)) {
+			recorderEl.value?.addEventListener(key, props.recorder[key], { passive: false })
+			boundListeners[key] = props.recorder[key]
+		}
+	}
+	if (props.binders && recorderEl.value) {
+		props.binders.bind(recorderEl.value as HTMLInputElement)
+	}
+}
+
+watchPostEffect(() => {
+	if (!canEdit.value) {
+		unbindListeners()
+		recording.value = false
+		return
+	}
+	if (recording.value) {
+		bindListeners()
+	} else {
+		if ((props.recorder || props.binders) && isBound) {
+			unbindListeners()
+			// if we just blur the input then we can't shift+tab backwards
+			// this way we can go forwards or backwards without actually focusing since parentEl is not focusable
+			// parentEl.value?.focus()
+			emits("focus:parent")
+		}
+	}
+})
+
+onBeforeUnmount(() => {
+	unbindListeners()
+})
+onMounted(() => {
+	if (recording.value) {
+		bindListeners()
+	}
+})
+
+const handleBlurRecorder = (e: FocusEvent): void => {
+	if (!canEdit.value) return
+	if (props.recorder || props.binders) {
+		emits("recorder:blur", e)
+	}
+}
+
+const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean = false): void => {
+	if (!canEdit.value) return
+	if (!recording.value) {
+		recorderEl.value?.focus()
+	}
+	// 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 })
+	}
+}
+
+</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

@@ -0,0 +1,126 @@
+<template>
+<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 }"
+	: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 }"
+		:class="twMerge( `
+			dark:bg-fg
+			dark:text-bg
+			bg-bg
+			text-fg
+		`,
+			testWrapperMode && `
+			px-10
+			pb-10
+		`,
+			!testWrapperMode && `
+			min-h-dvh
+			flex
+			flex-col
+		`,
+			($attrs as any).attrs?.class)"
+	>
+		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
+		<slot/>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { type Theme } from "metamorphosis"
+import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
+
+import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
+import { useSetupI18n } from "../../composables/useSetupI18n.js"
+import { useSetupLocale } from "../../composables/useSetupLocale.js"
+import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
+import { theme as defaultTheme } from "../../theme.js"
+import { twMerge } from "../../utils/twMerge.js"
+import TestControls from "../TestControls/TestControls.vue"
+
+const $attrs = useDivideAttrs(["wrapper"])
+
+defineOptions({ name: "root", inheritAttrs: false, suspensible: false })
+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. */
+	isClientSide?: boolean
+	useBuiltinTranslations?: boolean
+}>(), {
+	theme: undefined,
+	testWrapperMode: false,
+	outline: true,
+	forceOutline: false,
+	id: "app",
+	getRef: undefined,
+	isClientSide: true,
+	useBuiltinTranslations: true
+})
+
+const el = ref<HTMLElement | null>(null)
+
+function handleRef(_: Element | ComponentPublicInstance | null): void {
+	if (_ !== null && !(_ instanceof HTMLElement)) unreachable()
+	el.value = _
+	props.getRef?.(_)
+}
+
+const autoOutline = useAccesibilityOutline(el).outline
+
+const showOutline = computed(() => (props.outline && autoOutline.value) || props.forceOutline)
+
+const theme = computed(() => props.theme ?? defaultTheme)
+const themeCb = (): void => {
+	toRaw(theme.value).attach(el.value!)
+}
+if (props.isClientSide) {
+	onMounted(() => {
+		toRaw(theme.value).on("change", themeCb)
+		themeCb()
+	})
+	onBeforeUnmount(() => {
+		toRaw(theme.value).off("change", themeCb)
+	})
+}
+
+const darkModeSetup = useSetupDarkMode({ isClientSide: props.isClientSide })
+
+const darkMode = darkModeSetup.darkMode
+
+useShowDevOnlyKey()
+
+defineExpose({
+	darkMode: darkModeSetup,
+})
+
+if (props.useBuiltinTranslations) {
+	const { languageLocale } = useSetupLocale()
+	void useSetupI18n({
+		locale: languageLocale,
+		useBuiltinTranslations: true,
+		useDummyMessageSetWhileLoading: true,
+	})
+}
+
+</script>
+