@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/WColorInput/WColorInput.vue

@@ -0,0 +1,112 @@
+<template>
+<WPopover
+	:root-props="{
+		class: 'color-input--popover-root',
+		...rootProps
+	}"
+	:content-props="{
+		onInteractOutside: () => { $tempValue = undefined;emit('cancel') }
+	}"
+	v-model="showPopover"
+>
+	<template #button>
+		<WColorSwatchButton
+			:id="finalId"
+			:temp-value="$tempValue"
+			:value="$value"
+			@click="togglePopover"
+		/>
+	</template>
+	<template #popover>
+		<div
+			class="color-input--popover-wrapper p-5"
+		>
+			<WColorPicker
+				v-if="showPopover"
+				:id="finalId"
+				:allow-alpha="allowAlpha"
+				:custom-representation="customRepresentation"
+				:string-precision="stringPrecision"
+				v-model="internalTempValue"
+				v-model:temp-value="$tempValue"
+				@save="save"
+				@cancel="cancel"
+			/>
+		</div>
+	</template>
+</Wpopover>
+</template>
+
+<script setup lang="ts">
+import type { DialogRootEmits, PopoverRootProps } from "reka-ui"
+import { type ButtonHTMLAttributes, type EmitsToProps, type HTMLAttributes, ref } from "vue"
+
+import WColorSwatchButton from "./WColorSwatchButton.vue"
+
+import { useFallbackId } from "../../composables/useFallbackId.js"
+import type { HsvaColor, RgbaColor, TailwindClassProp } from "../../types/index.js"
+import WColorPicker from "../WColorPicker/WColorPicker.vue"
+import WPopover from "../WPopover/WPopover.vue"
+
+defineOptions({
+	name: "WColorInput"
+})
+const props = withDefaults(defineProps<
+	& {
+		id?: string
+		label?: string
+		allowAlpha?: boolean
+		border?: boolean
+		/** See ColorPicker.copyTransform */
+		copyTransform?: (val: HsvaColor, stringVal: string) => any
+		/** See ColorPicker.allowAlpha */
+		stringPrecision?: number
+		/** See ColorPicker.customRepresentation */
+		customRepresentation?: {
+			fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
+		}
+		rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	& /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+	allowAlpha: true,
+	border: true,
+	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+	stringPrecision: 3,
+	customRepresentation: undefined
+})
+const finalId = useFallbackId(props)
+
+const emit = defineEmits<{
+	(e: "save"): void
+	(e: "cancel"): void
+}>()
+
+
+const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
+const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
+
+const internalTempValue = ref({ ...$value.value })
+
+const showPopover = ref(false)
+
+const togglePopover = (): void => {
+	if (showPopover.value) {
+		$value.value = internalTempValue.value
+	}
+	showPopover.value = !showPopover.value
+}
+
+function save() {
+	$value.value = internalTempValue.value
+	showPopover.value = false
+	$tempValue.value = undefined
+	emit("save")
+}
+function cancel() {
+	showPopover.value = false
+	$tempValue.value = undefined
+	emit("cancel")
+}
+</script>

package/src/runtime/components/WColorInput/WColorSwatchButton.vue

@@ -0,0 +1,102 @@
+<template>
+<WButton
+	:id="id"
+	:class="twMerge(`
+		color-input--button
+		p-0
+		flex
+		flex-nowrap
+		min-w-4
+		overflow-hidden
+		[&_.button--label]:items-stretch
+		[&_.button--label]:gap-0
+		after:hidden
+	`,
+		($attrs as any).class
+	)"
+	:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
+	:title="t('color-input.aria-and-title-prefix') + stringColor"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	<template #label>
+		<div
+			class="
+					color-input--swatch-wrapper
+					flex
+					w-full
+				"
+		>
+			<slot v-bind="{ stringColor, classes: swatchClasses }">
+				<div
+					:class="swatchClasses"
+					:style="`background:${stringColor}`"
+				/>
+			</slot>
+			<slot
+				v-if="tempValue"
+				v-bind="{ tempStringColor, classes: swatchClasses }"
+				name="temp"
+			>
+				<div
+					:class="swatchClasses"
+					:style="`background:${tempStringColor}`"
+				/>
+			</slot>
+		</div>
+	</template>
+</Wbutton>
+</template>
+
+<script setup lang="ts">
+import Color from "colorjs.io"
+import { type ButtonHTMLAttributes, computed, useAttrs } from "vue"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { RgbaColor, TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
+
+
+const $attrs = useAttrs()
+
+const t = useInjectedI18n()
+
+const props = withDefaults(defineProps<
+	& {
+		id?: string
+		tempValue: RgbaColor | undefined
+		value: RgbaColor
+	}
+	& /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "value">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+})
+
+const swatchClasses = `
+	color-input--swatch
+	after:content-vertical-holder
+	min-w-4
+	flex-1
+	relative
+	before:content-['']
+	before:absolute
+	before:inset-0
+	before:bg-transparency-squares
+	before:z-[-1]
+`
+
+
+const stringColor = computed(() => new Color("srgb", [
+	props.value.r / 255,
+	props.value.g / 255,
+	props.value.b / 255
+], props.value.a ?? 1).toString())
+
+const tempStringColor = computed(() => props.tempValue
+	? new Color("srgb", [
+			props.tempValue.r / 255,
+			props.tempValue.g / 255,
+			props.tempValue.b / 255
+		], props.tempValue.a ?? 1).toString()
+	: "")
+</script>

package/src/runtime/components/{LibColorPicker/LibColorPicker.stories.ts → WColorPicker/WColorPicker.stories.ts}

@@ -3,12 +3,12 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import Color from "colorjs.io"
 import { ref } from "vue"
 
-import LibColorPicker from "./LibColorPicker.vue"
+import WColorPicker from "./WColorPicker.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibColorPicker> = {
-	component: LibColorPicker,
+const meta: Meta<typeof WColorPicker> = {
+	component: WColorPicker,
 	title: "Components/ColorPicker",
 	args: {
 
@@ -16,7 +16,7 @@ const meta: Meta<typeof LibColorPicker> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibColorPicker>
+type Story = StoryObj<typeof WColorPicker>
 
 export const Primary: Story = {
 	render: args => ({
@@ -38,15 +38,15 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-root :outline="args.outline">
-	 		{{args.color}}
-	 		<lib-color-picker
-	 			:modelValue="args.color.value"
+			<WRoot :outline="args.outline">
+			{{args.color}}
+			<WColorPicker
+				:modelValue="args.color.value"
 				v-bind="args"
-	 			@update:modelValue="handleChange"
-	 		>
-	 		</lib-color-picker>
-	 		</lib-root>
+				@update:modelValue="handleChange"
+			>
+			</WColorPicker>
+			</WRoot>
 		`
 	})
 }

package/src/runtime/components/{LibColorPicker/LibColorPicker.vue → WColorPicker/WColorPicker.vue}

@@ -1,6 +1,6 @@
 <template>
 <div
-	:id="id ?? fallbackId"
+	:id="finalId"
 	:aria-label="t('color-picker.aria')"
 	:class="twMerge(`color-picker
 			[--slider-size:calc(var(--spacing)_*_4)]
@@ -11,7 +11,7 @@
 			max-w-[300px]
 			flex flex-col items-center justify-center
 			bg-neutral-50
-			dark:bg-neutral-950
+			dark:bg-neutral-800
 			gap-3
 			p-3
 		`,
@@ -20,7 +20,12 @@
 			[--bg:rgb(var(--contrast-dark))]
 		`,
 		border && `
-			border rounded-sm border-neutral-600
+			border
+			rounded-sm
+			border-neutral-300
+			dark:border-neutral-900
+			shadow-md
+			shadow-black/30
 		`,
 		($attrs as any)?.class
 	)"
@@ -43,9 +48,9 @@
 			ref="pickerEl"
 		/>
 		<div
-			aria-live="assertive"
+			role="slider"
 			:aria-description="ariaDescription"
-			:aria-label="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"
+			:aria-valuetext="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.v}`"
 			:class="`
 					color-picker--all-handle
 					${handleClasses}
@@ -102,7 +107,7 @@
 		<div
 			role="slider"
 			:aria-label="t('color-picker.aria.alpha-slider')"
-			:aria-valuenow="`${localColor.percent.h}`"
+			:aria-valuenow="`${localColor.percent.a}`"
 			:aria-valuemin="0"
 			:aria-valuemax="100"
 			:aria-description="ariaDescription"
@@ -137,7 +142,7 @@
 		</div>
 		<div class="color-picker--input-group flex flex-1 items-center gap-2">
 			<slot name="input">
-				<lib-simple-input
+				<WSimpleInput
 					:valid="valid"
 					class="color-picker--input w-full"
 					:aria-label="label"
@@ -145,30 +150,30 @@
 					@input="parseInput"
 					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button
+				<WButton
 					class="color-picker--copy-button"
 					:aria-label="t('copy')"
 					@click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)"
 				>
-					<icon><i-fa6-regular-copy/></icon>
-				</lib-button>
+					<WIcon><i-lucide-copy/></WIcon>
+				</Wbutton>
 			</slot>
 		</div>
 	</div>
 	<slot name="buttons">
 		<div class="color-picker--save-cancel-group flex w-full items-center justify-center gap-2">
-			<lib-button
+			<WButton
 				class="color-picker--save-button"
 				@click="save()"
 			>
 				{{ t("save") }}
-			</lib-button>
-			<lib-button
+			</Wbutton>
+			<WButton
 				class="color-picker--cancel-button"
 				@click="emits('cancel')"
 			>
 				{{ t("cancel") }}
-			</lib-button>
+			</Wbutton>
 		</div>
 	</slot>
 </div>
@@ -186,19 +191,17 @@ import { safeConvertToHsva } from "./utils/safeConvertToHsva.js"
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js"
 import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js"
 
-import IFa6RegularCopy from "~icons/fa-regular/copy"
-
+import { useFallbackId } from "../../composables/useFallbackId.js"
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { copy } from "../../helpers/copy.js"
 import type { HsvaColor, RgbaColor } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
-import { getFallbackId, type LabelProps, type LinkableByIdProps } from "../shared/props.js"
+import WButton from "../WButton/WButton.vue"
+import WIcon from "../WIcon/WIcon.vue"
+import WSimpleInput from "../WSimpleInput/WSimpleInput.vue"
 
 defineOptions({
-	name: "LibColorPicker"
+	name: "WColorPicker"
 })
 
 const $attrs = useAttrs()
@@ -235,9 +238,9 @@ const emits = defineEmits<{
 }>()
 
 const props = withDefaults(defineProps<
-	LabelProps
-	& LinkableByIdProps
 	& {
+		id?: string
+		label?: string
 		allowAlpha?: boolean
 		/**
 		 * The precision of the rgba string representation of the color. Defaults to 3. Extra trailing zeros are removed for a prettier number.
@@ -264,9 +267,8 @@ const props = withDefaults(defineProps<
 	customRepresentation: undefined,
 	valid: true
 })
-
+const finalId = useFallbackId(props)
 const ariaDescription = t("color-picker.aria.description")
-const fallbackId = getFallbackId()
 
 const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
 const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
@@ -275,6 +277,10 @@ const pickerEl = ref<HTMLCanvasElement | null>(null)
 const hueSliderEl = ref<HTMLCanvasElement | null>(null)
 const alphaSliderEl = ref<HTMLCanvasElement | null>(null)
 
+let pickerCtx: CanvasRenderingContext2D | null = null
+let hueSliderCtx: CanvasRenderingContext2D | null = null
+let alphaSliderCtx: CanvasRenderingContext2D | null = null
+
 type Config = Record<string, {
 	el: Ref<HTMLCanvasElement>
 	xKey?: keyof HsvaColor
@@ -338,7 +344,8 @@ function onBlurFixInvalidValue() {
 }
 
 function updatePicker(el: HTMLCanvasElement, hue: number): void {
-	const ctx = el.getContext("2d")!
+	if (!pickerCtx) return
+	const ctx = pickerCtx
 	const { height, width } = el
 	ctx.clearRect(0, 0, width, height)
 
@@ -357,8 +364,8 @@ function updatePicker(el: HTMLCanvasElement, hue: number): void {
 	ctx.globalCompositeOperation = "source-over"
 }
 
-function updateSlider(el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void {
-	const ctx = el.getContext("2d")!
+function updateSlider(el: HTMLCanvasElement, ctx: CanvasRenderingContext2D | null, stops: ((i: number) => string) | string[], length: number = 360): void {
+	if (!ctx) return
 	const { height, width } = el
 	ctx.clearRect(0, 0, width, height)
 
@@ -438,7 +445,7 @@ const slider = {
 		}
 	},
 	pointerdown: (e: PointerEvent, type: Types) => {
-		const focusTargetClass = `#${props.id ?? fallbackId} .color-picker--${type}-handle`
+		const focusTargetClass = `#${finalId} .color-picker--${type}-handle`
 		const focusTarget = document.querySelector(focusTargetClass)
 		// allows enter to work when the user drags any slider as the even will be captured by the keydown listener
 		if (focusTarget instanceof HTMLElement) focusTarget.focus()
@@ -476,9 +483,9 @@ function updateSliders(_: HsvaColor): void {
 		hsl0.alpha = 0
 		const hsl1 = color.clone()
 		hsl1.alpha = 1
-		updateSlider(alphaSliderEl.value, [hsl0.toString(), hsl1.toString()])
+		updateSlider(alphaSliderEl.value, alphaSliderCtx!, [hsl0.toString(), hsl1.toString()])
 	}
-	updateSlider(hueSliderEl.value!, i => `hsl(${i} 100% 50%)`)
+	updateSlider(hueSliderEl.value!, hueSliderCtx!, i => `hsl(${i} 100% 50%)`)
 	updatePicker(pickerEl.value!, _.h)
 }
 
@@ -530,8 +537,12 @@ onMounted(() => {
 		convertAndUpdateAll($tempValue.value)
 	}
 
-	const handle = document.querySelector(`#${props.id ?? fallbackId} .color-picker--all-handle`)
+	const handle = document.querySelector(`#${finalId} .color-picker--all-handle`)
 	if (handle instanceof HTMLElement) handle.focus()
+
+	pickerCtx = pickerEl.value?.getContext("2d") ?? null
+	hueSliderCtx = hueSliderEl.value?.getContext("2d") ?? null
+	alphaSliderCtx = alphaSliderEl.value?.getContext("2d") ?? null
 })
 
 watch($value, () => {

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

@@ -0,0 +1,209 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref, watch } from "vue"
+
+import { playAllowNewValues, playBasic, playBasicClickSelect, playBasicKeyboardSelect, playValidation } from "./storyPlays.js"
+import WCombobox from "./WCombobox.vue"
+
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof WCombobox> = {
+	component: WCombobox as any,
+	title: "Components/Combobox",
+	args: {
+		modelValue: "",
+		searchTerm: "",
+		emptyLabel: "No matches found",
+		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+	}
+}
+
+export default meta
+
+type ExtraTestArgs = {
+	_simulateLoading?: boolean
+	_allowSave?: boolean
+	_headerTemplate?: string
+}
+
+type Story = StoryObj<typeof WCombobox> & { args?: ExtraTestArgs }
+
+/**
+ * Primary story setup to match the DOM structure expected by the
+ * migrated play functions (specifically looking for data-testid="model-value").
+ */
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup() {
+				const modelValue = ref(args.modelValue)
+				const searchTerm = ref(args.searchTerm)
+				const suggestions = ref([...args.suggestions!])
+				const loading = ref(false)
+				const simulateLoading = ref((extraArgs)._simulateLoading)
+				// the component takes care of extending this so we can actually see the icon on quick loads like this
+				watch(searchTerm, () => {
+					if (simulateLoading.value) {
+						loading.value = true
+						setTimeout(() => {
+							loading.value = false
+						}, 1)
+					}
+				})
+				function save(value: string) {
+					if (!(extraArgs)._allowSave) return
+					const newValue: any
+						= typeof value === "string" && typeof suggestions.value[0] === "object"
+							? { name: value, id: "new-id" }
+							: value
+					suggestions.value = [...suggestions.value, newValue]
+					modelValue.value = newValue
+				}
+				return {
+					args,
+					modelValue,
+					searchTerm,
+					suggestions,
+					loading,
+					simulateLoading,
+					save,
+					extraArgs
+				}
+			},
+			template: `
+			<div class="flex flex-col gap-3">
+				<div class="flex flex-col gap-1">
+					<WCheckbox v-model="simulateLoading">Simulate Loading</WCheckbox>
+					<WCheckbox v-model="loading">Loading (Force State)</WCheckbox>
+				</div>
+				<div class="text-xs text-neutral-500">
+					<div>
+						Current Model Value: 
+						<span class="font-mono" data-testid="model-value">{{ modelValue }}</span>
+					</div>
+					<div>
+						Current Search Term: 
+						<span class="font-mono" data-testid="search-term">{{ searchTerm }}</span>
+					</div>
+				</div>
+
+				<div class="flex flex-col gap-1">
+					<WCombobox
+						@save="save"
+						v-bind="args"
+						v-model="modelValue"
+						v-model:searchTerm="searchTerm"
+						:suggestions="suggestions"
+						:loading="loading"
+					>
+						${(extraArgs)._headerTemplate ?? ""}
+					</WCombobox>
+				</div>
+			</div>
+		`
+		}
+	},
+	play: async (...args) => {
+		await playBasicClickSelect(...args)
+		await playBasicKeyboardSelect(...args)
+		await playBasic(...args)
+	}
+}
+
+export const RestrictToSuggestions: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		restrictToSuggestions: true
+	},
+	play: async (...args) => {
+		await playBasicClickSelect(...args)
+		await playBasicKeyboardSelect(...args)
+		await playBasic(...args)
+	}
+}
+
+
+export const ObjectSuggestions: Story = {
+	...Primary,
+	play: undefined,
+	args: {
+		...Primary.args,
+		suggestions: [
+			{ id: 1, name: "Apple" },
+			{ id: 2, name: "Banana" },
+			{ id: 3, name: "Cherry" }
+		] as any[],
+		displayKey: "name"
+	}
+}
+
+
+export const AllowNewValues: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		_allowSave: true,
+		_headerTemplate: `
+		<template #header="slotProps">
+			<div v-if="slotProps.isShowingEmptyLabel" :class="slotProps.class">
+				Press Enter to Add Value
+			</div>
+		</template>
+		`
+	},
+	play: playAllowNewValues
+}
+
+/** Note that when allowing new values to be added, if the input is v-modeling objects, you have to transform the object before adding it to the suggestions array. */
+export const ObjectSuggestionsCustomDisplay: Story = {
+	...Primary,
+	play: undefined,
+	args: {
+		...Primary.args,
+		_allowSave: true,
+		suggestions: [
+			{ id: 1, name: "Apple" },
+			{ id: 2, name: "Banana" },
+			{ id: 3, name: "Cherry" }
+		] as any[],
+		displayEntry: (value: any) => {
+			return value.name?.toLowerCase()
+		}
+	}
+}
+
+
+export const CustomHeader: Story = {
+	...Primary,
+	play: undefined,
+	args: {
+		...Primary.args,
+		loading: true,
+		_headerTemplate: `<template #header> Custom Header </template>`
+	}
+}
+
+export const WithValidation: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		loading: true,
+		isValid: (searchTerm: string) => searchTerm === "Invalid" ? "Error Message" : true,
+		modelValue: "Invalid"
+	},
+	play: playValidation
+}
+
+export const LoadingIndicator: Story = {
+	...Primary,
+	play: undefined,
+	args: {
+		...Primary.args,
+		_simulateLoading: true
+	}
+}
+