@witchcraft/ui 0.1.3 → 0.2.1-beta.1

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

@@ -2,9 +2,10 @@
 <lib-popup
 	class="color-input--popup"
 	v-model="showPopup"
-	@close="$tempValue = undefined;emit('cancel')"
+	@close="$tempValue = void 0;
+  emit('cancel')"
 >
-	<template #button="{extractEl}">
+	<template #button="{ extractEl }">
 		<!-- <div -->
 		<!-- 		class=" -->
 		<!-- 	flex -->
@@ -17,7 +18,8 @@
 		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
-			:class="twMerge(`
+			:class="twMerge(
+  `
 				p-0
 				color-input--button
 				flex flex-nowrap
@@ -27,11 +29,11 @@
 				[&_.button--label]:gap-0
 				after:hidden
 			`,
-				($attrs as any).class
-			)"
+  $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: undefined}"
+			v-bind="{ ...$attrs, class: void 0 }"
 			v-extract-root-el="extractEl"
 			@click="togglePopup"
 		>
@@ -42,14 +44,14 @@
 					w-full
 				"
 				>
-					<slot v-bind="{stringColor, classes:swatchClasses}">
+					<slot v-bind="{ stringColor, classes: swatchClasses }">
 						<div :class="swatchClasses"
 							:style="`background:${stringColor}`"
 						/>
 					</slot>
 					<slot
 						v-if="$tempValue"
-						v-bind="{tempStringColor, classes:swatchClasses}"
+						v-bind="{ tempStringColor, classes: swatchClasses }"
 						name="temp"
 					>
 						<div :class="swatchClasses"
@@ -60,7 +62,7 @@
 			</template>
 		</lib-button>
 	</template>
-	<template #popup="{extractEl}">
+	<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"
@@ -77,24 +79,19 @@
 </lib-popup>
 </template>
 
-<script setup lang="ts">
-import Color from "colorjs.io"
-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",
-})
-
+  name: "lib-color-input"
+});
 const swatchClasses = `
 	color-input--swatch
 	after:content-vertical-holder
@@ -106,94 +103,53 @@ const swatchClasses = `
 	before:inset-0
 	before:bg-transparency-squares
 	before:z-[-1]
-`
-
-const fallbackId = getFallbackId()
-
-const t = useInjectedI18n()
-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
-}>()
-
-
+`;
+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 = undefined
-	emit("save")
+  $value.value = internalTempValue.value;
+  showPopup.value = false;
+  $tempValue.value = void 0;
+  emit("save");
 }
 function cancel() {
-	showPopup.value = false
-	$tempValue.value = undefined
-	emit("cancel")
+  showPopup.value = false;
+  $tempValue.value = void 0;
+  emit("cancel");
 }
-
-const $attrs = useAttrs()
- 
-const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
-const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
-
+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())
-
+  $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 = internalTempValue.value
-	}
-	showPopup.value = !showPopup.value
-}
-
+  $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
-	/** 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
-	& {
-		// 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;
+    };
+};