@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/src/runtime/components/{LibColorInput/LibColorInput.stories.ts → WColorInput/WColorInput.stories.ts}

@@ -2,12 +2,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibColorInput from "./LibColorInput.vue"
+import WColorInput from "./WColorInput.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibColorInput> = {
-	component: LibColorInput,
+const meta: Meta<typeof WColorInput> = {
+	component: WColorInput,
 	title: "Components/ColorInput",
 	args: {
 
@@ -15,7 +15,7 @@ const meta: Meta<typeof LibColorInput> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibColorInput>
+type Story = StoryObj<typeof WColorInput>
 
 export const Primary: Story = {
 	render: args => ({
@@ -36,21 +36,21 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-color-Input
+			<WColorInput
 				:allowAlpha="args.allowAlpha"
 				:modelValue="args.color.value"
 				@update:modelValue="handleChange"
 			>
- 			</lib-color-Input>
+ 			</WColorInput>
 			Stretched:
 			<div class="flex-1 flex">
-				<lib-color-Input
+				<WColorInput
 					class="flex-1"
 					:allowAlpha="args.allowAlpha"
 					:modelValue="args.color.value"
 					@update:modelValue="handleChange"
 				>
-				</lib-color-Input>
+				</WColorInput>
 			</div>
 		`
 	})

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,19 @@ 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 ILucideCopy from "~icons/lucide/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 +240,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 +269,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 +279,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 +346,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 +366,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 +447,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 +485,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 +539,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, () => {