@witchcraft/ui 0.0.1 → 0.1.0

package/dist/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/dist/runtime/components/LibColorPicker/LibColorPicker.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof LibColorPicker>;
 export declare const Primary: Story;
 export declare const DoesNotAllowAlpha: Story;
+export declare const WithExistingValue: Story;
+export declare const CustomStringRepresentation: Story;

package/dist/runtime/components/LibColorPicker/LibColorPicker.stories.js

@@ -1,3 +1,4 @@
+import Color from "colorjs.io";
 import { ref } from "vue";
 import LibColorPicker from "./LibColorPicker.vue";
 import * as components from "../index.js";
@@ -11,12 +12,8 @@ export const Primary = {
   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, ...args.modelValue });
+      delete args.modelValue;
       const handleChange = (e) => {
         color.value = { ...e };
       };
@@ -31,15 +28,15 @@ export const Primary = {
       };
     },
     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>
 		`
   })
 };
@@ -49,3 +46,23 @@ export const DoesNotAllowAlpha = {
     allowAlpha: false
   }
 };
+export const WithExistingValue = {
+  ...Primary,
+  args: {
+    modelValue: { r: 255, g: 0, b: 0 }
+  }
+};
+export const CustomStringRepresentation = {
+  ...Primary,
+  args: {
+    allowAlpha: false,
+    customRepresentation: {
+      fromHsvaToString: (hsva, includeAlpha) => new Color(
+        "hsv",
+        [hsva.h, hsva.s, hsva.v],
+        includeAlpha ? hsva.a : 1
+        // this takes care of the correct hex format
+      ).toString({ format: "hex" })
+    }
+  }
+};