@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibColorInput/LibColorInput.vue

@@ -1,125 +1,155 @@
 <template>
 <lib-popup
+	class="color-input--popup"
 	v-model="showPopup"
+	@close="$tempValue = void 0;
+  emit('cancel')"
 >
-	<template #button="{extractEl}">
+	<template #button="{ extractEl }">
+		<!-- <div -->
+		<!-- 		class=" -->
+		<!-- 	flex -->
+		<!-- 				w-full -->
+		<!-- 	border -->
+		<!-- 				 " -->
+		<!-- 	v-extract-root-el="extractEl" -->
+		<!-- > -->
+			
+		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
-			:class="twMerge(`
+			: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"
-			v-bind="{...$attrs, class: undefined}"
+  $attrs.class
+)"
+			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
+			:title="t('color-input.aria-and-title-prefix') + stringColor"
+			v-bind="{ ...$attrs, class: void 0 }"
 			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"
-		/>
+	<template #popup="{ extractEl }">
+		<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 { type ButtonHTMLAttributes,computed, type PropType, ref, useAttrs } from "vue"
-
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-import type { HsvaColor, RgbaColor } from "../../types/index.js"
-import { twMerge } from "../../utils/twMerge.js"
-import LibButton from "../LibButton/LibButton.vue"
-import LibColorPicker from "../LibColorPicker/LibColorPicker.vue"
-import LibPopup from "../LibPopup/LibPopup.vue"
-import { getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-
+<script setup>
+import Color from "colorjs.io";
+import { computed, ref, useAttrs } from "vue";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
+import { twMerge } from "../../utils/twMerge.js";
+import LibButton from "../LibButton/LibButton.vue";
+import LibColorPicker from "../LibColorPicker/LibColorPicker.vue";
+import LibPopup from "../LibPopup/LibPopup.vue";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-color-input",
-})
-
-const fallbackId = getFallbackId()
-
-const t = useInjectedI18n()
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props>(), {
-	allowAlpha: true,
-	border: true,
-	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
-})
-
-
-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 showPopup = ref(false)
-
-
-const togglePopup = (): void => {
-	if (showPopup.value) {
-		$value.value = tempValue.value
-	}
-	showPopup.value = !showPopup.value
+  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();
+const props = defineProps({
+  label: { type: String, required: false },
+  id: { type: String, required: false },
+  allowAlpha: { type: Boolean, required: false, default: true },
+  border: { type: Boolean, required: false, default: true },
+  copyTransform: { type: Function, required: false, default: (_val, stringVal) => stringVal },
+  stringPrecision: { type: Number, required: false, default: 3 },
+  customRepresentation: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["save", "cancel"]);
+function save() {
+  $value.value = internalTempValue.value;
+  showPopup.value = false;
+  $tempValue.value = void 0;
+  emit("save");
 }
-
+function cancel() {
+  showPopup.value = false;
+  $tempValue.value = void 0;
+  emit("cancel");
+}
+const $attrs = useAttrs();
+const $value = defineModel({ type: Object, ...{ required: false, default: () => ({ r: 0, g: 0, b: 0 }) } });
+const $tempValue = defineModel("tempValue", { type: null, ...{ required: false, default: () => void 0 } });
+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 = () => {
+  if (showPopup.value) {
+    $value.value = internalTempValue.value;
+  }
+  showPopup.value = !showPopup.value;
+};
 </script>
 
-<script lang="ts">
+<script>
 
-type RealProps =
-& LabelProps
-& LinkableByIdProps
-& {
-	allowAlpha?: boolean
-	border?: boolean
-	copyTransform?: (val: HsvaColor, stringVal: string) => any
-}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class">
-	& TailwindClassProp
-	& {
-		// why is this not already a part of button?
-		"aria-label": string
-	}>,
-	RealProps
-{}
 </script>

package/dist/runtime/components/LibColorInput/LibColorInput.vue.d.ts

@@ -0,0 +1,63 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { HsvaColor, RgbaColor } from "../../types/index.js.js";
+import { type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LabelProps & LinkableByIdProps & {
+    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 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class"> & TailwindClassProp & {
+    "aria-label": string;
+}>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: RgbaColor;
+    tempValue?: RgbaColor | undefined;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RgbaColor) => any;
+    "update:tempValue": (value: RgbaColor | undefined) => any;
+} & {
+    cancel: () => any;
+    save: () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: RgbaColor;
+    tempValue?: RgbaColor | undefined;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    allowAlpha: boolean;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        stringColor: any;
+        classes: any;
+    }) => any;
+} & {
+    temp?: (props: {
+        tempStringColor: any;
+        classes: any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};