@witchcraft/ui 0.0.1 → 0.1.0

package/src/runtime/components/LibColorInput/LibColorInput.vue

@@ -1,61 +1,84 @@
 <template>
 <lib-popup
+	class="color-input--popup"
 	v-model="showPopup"
+	@close="$tempValue = undefined;emit('cancel')"
 >
 	<template #button="{extractEl}">
+		<!-- <div -->
+		<!-- 		class=" -->
+		<!-- 	flex -->
+		<!-- 				w-full -->
+		<!-- 	border -->
+		<!-- 				 " -->
+		<!-- 	v-extract-root-el="extractEl" -->
+		<!-- > -->
+			
+		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
 			:class="twMerge(`
+				p-0
+				color-input--button
 				flex flex-nowrap
+				min-w-4
+				overflow-hidden
+				[&_.button--label]:items-stretch
+				[&_.button--label]:gap-0
+				after:hidden
 			`,
 				($attrs as any).class
 			)"
-			:aria-label="stringColor"
-			:title="stringColor"
+			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
+			:title="t('color-input.aria-and-title-prefix') + stringColor"
 			v-bind="{...$attrs, class: undefined}"
 			v-extract-root-el="extractEl"
 			@click="togglePopup"
 		>
-			<span class="color-label
-					whitespace-nowrap
-					pr-2
+			<template #label>
+				<div class="
+					color-input--swatch-wrapper
+					flex
+					w-full
 				"
-			>
-				<slot>{{ t("color-picker.pick-color") }}</slot>
-			</span>
-			<div :class="`color-swatch
-						rounded-xs
-						px-1
-						flex-1
-						h-4
-						w-8
-						relative
-						aspect-square
-						before:content-['']
-						before:absolute
-						before:inset-0
-						before:bg-transparency-squares
-						before:z-[-1]
-					`"
-				:style="`background:${stringColor}`"
-			/>
+				>
+					<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>
 		</lib-button>
 	</template>
 	<template #popup="{extractEl}">
-		<lib-color-picker v-if="showPopup"
-			:id="id ?? fallbackId"
-			:allow-alpha="allowAlpha"
-			v-model="tempValue"
-			v-extract-root-el="extractEl"
-			@save="$value = tempValue; showPopup = false"
-			@cancel="showPopup = false"
-		/>
+		<div class="color-input--popup-wrapper p-5" v-extract-root-el="extractEl">
+			<lib-color-picker v-if="showPopup"
+				:id="id ?? fallbackId"
+				:allow-alpha="allowAlpha"
+				:custom-representation="customRepresentation"
+				:string-precision="stringPrecision"
+				v-model="internalTempValue"
+				v-model:temp-value="$tempValue"
+				@save="save"
+				@cancel="cancel"
+			/>
+		</div>
 	</template>
 </lib-popup>
 </template>
 
 <script setup lang="ts">
-import { colord } from "colord"
+import Color from "colorjs.io"
 import { type ButtonHTMLAttributes,computed, type PropType, ref, useAttrs } from "vue"
 
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
@@ -72,6 +95,19 @@ defineOptions({
 	name: "lib-color-input",
 })
 
+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 fallbackId = getFallbackId()
 
 const t = useInjectedI18n()
@@ -80,21 +116,52 @@ const props = withDefaults(defineProps<Props>(), {
 	allowAlpha: true,
 	border: true,
 	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+	stringPrecision: 3,
+	customRepresentation: undefined,
 })
+const emit = defineEmits<{
+	(e: "save"): void
+	(e: "cancel"): void
+}>()
 
 
+function save() {
+	$value.value = internalTempValue.value
+	showPopup.value = false
+	$tempValue.value = undefined
+	emit("save")
+}
+function cancel() {
+	showPopup.value = false
+	$tempValue.value = undefined
+	emit("cancel")
+}
+
 const $attrs = useAttrs()
  
 const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
-const stringColor = computed(() => colord($value.value).toRgbString())
-const tempValue = ref({ ...$value.value })
+const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
+
+const stringColor = computed(() => new Color("srgb", [
+	$value.value.r / 255,
+	$value.value.g / 255,
+	$value.value.b / 255,
+], $value.value.a ?? 1,).toString())
+
+const tempStringColor = computed(() => $tempValue.value ? new Color("srgb", [
+	$tempValue.value.r / 255,
+	$tempValue.value.g / 255,
+	$tempValue.value.b / 255,
+], $tempValue.value.a ?? 1,).toString() : "")
+
+const internalTempValue = ref({ ...$value.value })
 
 const showPopup = ref(false)
 
 
 const togglePopup = (): void => {
 	if (showPopup.value) {
-		$value.value = tempValue.value
+		$value.value = internalTempValue.value
 	}
 	showPopup.value = !showPopup.value
 }
@@ -109,7 +176,14 @@ type RealProps =
 & {
 	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
+	}
 }
 interface Props
 	extends
@@ -123,3 +197,4 @@ interface Props
 	RealProps
 {}
 </script>
+

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
+import Color from "colorjs.io"
 import { ref } from "vue"
 
 import LibColorPicker from "./LibColorPicker.vue"
@@ -24,7 +25,8 @@ export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => {
-			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */ })
+			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */, ...(args.modelValue) })
+			delete args.modelValue
 			const handleChange = (e: any) => {
 				color.value = { ...e }
 			}
@@ -39,15 +41,15 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<test-wrapper :outline="args.outline">
+			<lib-root :outline="args.outline">
 	 		{{args.color}}
 	 		<lib-color-picker
-	 			:allowAlpha="args.allowAlpha"
 	 			:modelValue="args.color.value"
+				v-bind="args"
 	 			@update:modelValue="handleChange"
 	 		>
 	 		</lib-color-picker>
-	 		</test-wrapper>
+	 		</lib-root>
 		`,
 	}),
 }
@@ -57,4 +59,23 @@ export const DoesNotAllowAlpha: Story = {
 		allowAlpha: false,
 	},
 }
+export const WithExistingValue: Story = {
+	...Primary,
+	args: {
+		modelValue: { r: 255, g: 0, b: 0 },
+	},
+}
+export const CustomStringRepresentation: Story = {
+	...Primary,
+	args: {
+		allowAlpha: false,
+		customRepresentation: {
+			fromHsvaToString: (hsva: any, includeAlpha: boolean) => new Color(
+				"hsv",
+				[hsva.h, hsva.s, hsva.v],
+					includeAlpha ? hsva.a : 1 // this takes care of the correct hex format
+			).toString({ format: "hex" }),
+		},
+	},
+}