@witchcraft/ui 0.4.0 → 0.4.1

package/dist/runtime/components/WCheckbox/WCheckbox.vue

@@ -0,0 +1,110 @@
+<template>
+<div
+	:class="twMerge(
+  `
+		checkbox--wrapper
+		flex
+		items-center
+		gap-1
+	`,
+  (disabled || readonly) && `
+			cursor-not-allowed
+			text-neutral-500
+		`,
+  wrapperAttrs?.class
+)"
+	v-bind="{ ...wrapperAttrs, class: void 0 }"
+	ref="el"
+>
+	<slot name="left"/>
+	<label
+		:class="twMerge(
+  `
+			checkbox--label
+			flex
+			items-center
+			gap-1
+		`,
+  labelAttrs?.class
+)"
+		v-bind="{ ...labelAttrs, class: void 0 }"
+	>
+		<CheckboxRoot
+			:id="finalId"
+			:disabled="disabled || readonly"
+			:class="!unstyle && twMerge(
+  `
+				checkbox
+				flex
+				items-center
+				justify-center
+				focus-outline-no-offset
+				m-0
+				h-[1.2em]
+				w-[1.2em]
+				aspect-square
+				bg-neutral-500/10
+				text-white
+				dark:text-white
+				border
+				border-neutral-500
+				data-[state=checked]:border-accent-800/50
+				data-[state=checked]:bg-accent-500
+				data-[state=checked]:shadow-2xs
+				data-[state=checked]:shadow-black/20
+				data-[state=unchecked]:inset-shadow-2xs
+				data-[state=unchecked]:inset-shadow-black/20
+				focus:border-accent-600
+				rounded-sm
+				relative
+				transition-colors
+				dark:disabled:bg-neutral-800
+				cursor-pointer
+				disabled:text-neutral-500
+				disabled:bg-neutral-500/50
+				disabled:cursor-not-allowed
+				disabled:data-[state=checked]:border-neutral-500
+			`,
+  $attrs?.class
+)"
+			v-bind="{ ...$attrs, class: void 0 }"
+
+			v-model="modelValue"
+		>
+			<CheckboxIndicator class="checkbox--indicator">
+				<WIcon class="scale-110 mt-[2px] ml-[0.5px] [&_path]:stroke-3"><i-lucide-check/></WIcon>
+			</CheckboxIndicator>
+		</CheckboxRoot>
+
+		<slot/> {{ label }}
+	</label>
+</div>
+</template>
+
+<script setup>
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
+import { useAttrs } from "vue";
+import ILucideCheck from "~icons/lucide/check";
+import { useFallbackId } from "../../composables/useFallbackId.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WIcon from "../WIcon/WIcon.vue";
+const $attrs = useAttrs();
+defineOptions({
+  name: "WCheckbox",
+  inheritAttrs: false
+});
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  labelAttrs: { type: Object, required: false },
+  wrapperAttrs: { type: Object, required: false }
+});
+const modelValue = defineModel("modelValue", { type: [Boolean, String], ...{ default: false } });
+const finalId = useFallbackId(props);
+usePreHydrationValue(finalId, modelValue);
+</script>

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = BaseInteractiveProps & {
+    id?: string;
+    label?: string;
+    labelAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSumbit" | "autocomplete"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    "modelValue"?: boolean | "indeterminate";
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_26: {};
+type __VLS_Slots = {} & {
+    left?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LibColorInput/LibColorInput.d.vue.ts → WColorInput/WColorInput.d.vue.ts}

@@ -1,7 +1,9 @@
-import { type ButtonHTMLAttributes } from "vue";
-import type { HsvaColor, RgbaColor } from "../../types/index.js";
-import { type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LabelProps & LinkableByIdProps & {
+import type { DialogRootEmits, PopoverRootProps } from "reka-ui";
+import { type ButtonHTMLAttributes, type EmitsToProps, type HTMLAttributes } from "vue";
+import type { HsvaColor, RgbaColor, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    label?: string;
     allowAlpha?: boolean;
     border?: boolean;
     /** See ColorPicker.copyTransform */
@@ -12,29 +14,23 @@ type RealProps = LabelProps & LinkableByIdProps & {
     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 & {
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
     modelValue?: RgbaColor;
-    tempValue?: RgbaColor | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "tempValue"?: RgbaColor | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, 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<{
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
-    onCancel?: (() => any) | undefined;
     onSave?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
@@ -44,20 +40,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
         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;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/WColorInput/WColorInput.vue

@@ -0,0 +1,85 @@
+<template>
+<WPopover
+	:root-props="{
+  class: 'color-input--popover-root',
+  ...rootProps
+}"
+	:content-props="{
+  onInteractOutside: () => {
+    $tempValue = void 0;
+    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>
+import { ref } from "vue";
+import WColorSwatchButton from "./WColorSwatchButton.vue";
+import { useFallbackId } from "../../composables/useFallbackId.js";
+import WColorPicker from "../WColorPicker/WColorPicker.vue";
+import WPopover from "../WPopover/WPopover.vue";
+defineOptions({
+  name: "WColorInput"
+});
+const props = defineProps({
+  id: { type: String, required: false },
+  label: { 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 },
+  rootProps: { type: Object, required: false }
+});
+const finalId = useFallbackId(props);
+const emit = defineEmits(["save", "cancel"]);
+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 internalTempValue = ref({ ...$value.value });
+const showPopover = ref(false);
+const togglePopover = () => {
+  if (showPopover.value) {
+    $value.value = internalTempValue.value;
+  }
+  showPopover.value = !showPopover.value;
+};
+function save() {
+  $value.value = internalTempValue.value;
+  showPopover.value = false;
+  $tempValue.value = void 0;
+  emit("save");
+}
+function cancel() {
+  showPopover.value = false;
+  $tempValue.value = void 0;
+  emit("cancel");
+}
+</script>

package/dist/runtime/components/{LibColorInput/LibColorInput.vue.d.ts → WColorInput/WColorInput.vue.d.ts}

@@ -1,7 +1,9 @@
-import { type ButtonHTMLAttributes } from "vue";
-import type { HsvaColor, RgbaColor } from "../../types/index.js";
-import { type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LabelProps & LinkableByIdProps & {
+import type { DialogRootEmits, PopoverRootProps } from "reka-ui";
+import { type ButtonHTMLAttributes, type EmitsToProps, type HTMLAttributes } from "vue";
+import type { HsvaColor, RgbaColor, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    label?: string;
     allowAlpha?: boolean;
     border?: boolean;
     /** See ColorPicker.copyTransform */
@@ -12,29 +14,23 @@ type RealProps = LabelProps & LinkableByIdProps & {
     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 & {
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
     modelValue?: RgbaColor;
-    tempValue?: RgbaColor | undefined;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "tempValue"?: RgbaColor | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, 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<{
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
-    onCancel?: (() => any) | undefined;
     onSave?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
@@ -44,20 +40,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
         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;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/WColorInput/WColorSwatchButton.d.vue.ts

@@ -0,0 +1,28 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { RgbaColor, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    tempValue: RgbaColor | undefined;
+    value: RgbaColor;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "value"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_9: {
+    stringColor: string;
+    classes: "\n\tcolor-input--swatch\n\tafter:content-vertical-holder\n\tmin-w-4\n\tflex-1\n\trelative\n\tbefore:content-['']\n\tbefore:absolute\n\tbefore:inset-0\n\tbefore:bg-transparency-squares\n\tbefore:z-[-1]\n";
+}, __VLS_11: {
+    tempStringColor: string;
+    classes: "\n\tcolor-input--swatch\n\tafter:content-vertical-holder\n\tmin-w-4\n\tflex-1\n\trelative\n\tbefore:content-['']\n\tbefore:absolute\n\tbefore:inset-0\n\tbefore:bg-transparency-squares\n\tbefore:z-[-1]\n";
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    temp?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/WColorInput/WColorSwatchButton.vue

@@ -0,0 +1,86 @@
+<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.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 }"
+>
+	<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>
+import Color from "colorjs.io";
+import { computed, useAttrs } from "vue";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
+const $attrs = useAttrs();
+const t = useInjectedI18n();
+const props = defineProps({
+  id: { type: String, required: false },
+  tempValue: { type: null, required: true },
+  value: { type: Object, required: true }
+});
+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/dist/runtime/components/WColorInput/WColorSwatchButton.vue.d.ts

@@ -0,0 +1,28 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { RgbaColor, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    id?: string;
+    tempValue: RgbaColor | undefined;
+    value: RgbaColor;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "value"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_9: {
+    stringColor: string;
+    classes: "\n\tcolor-input--swatch\n\tafter:content-vertical-holder\n\tmin-w-4\n\tflex-1\n\trelative\n\tbefore:content-['']\n\tbefore:absolute\n\tbefore:inset-0\n\tbefore:bg-transparency-squares\n\tbefore:z-[-1]\n";
+}, __VLS_11: {
+    tempStringColor: string;
+    classes: "\n\tcolor-input--swatch\n\tafter:content-vertical-holder\n\tmin-w-4\n\tflex-1\n\trelative\n\tbefore:content-['']\n\tbefore:absolute\n\tbefore:inset-0\n\tbefore:bg-transparency-squares\n\tbefore:z-[-1]\n";
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    temp?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LibColorPicker/LibColorPicker.d.vue.ts → WColorPicker/WColorPicker.d.vue.ts}

@@ -1,6 +1,7 @@
 import type { HsvaColor, RgbaColor } from "../../types/index.js";
-import { type LabelProps, type LinkableByIdProps } from "../shared/props.js";
-type __VLS_Props = LabelProps & LinkableByIdProps & {
+type __VLS_Props = {
+    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.
@@ -20,26 +21,27 @@ type __VLS_Props = LabelProps & LinkableByIdProps & {
     copyTransform?: (val: HsvaColor, stringVal: string) => any;
     valid?: boolean;
 };
-type __VLS_PublicProps = __VLS_Props & {
+type __VLS_ModelProps = {
     modelValue?: RgbaColor;
     "tempValue"?: RgbaColor | undefined;
 };
-declare var __VLS_1: {}, __VLS_27: {};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     input?: (props: typeof __VLS_1) => any;
 } & {
-    buttons?: (props: typeof __VLS_27) => any;
+    buttons?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: RgbaColor) => any;
     "update:tempValue": (value: RgbaColor | undefined) => any;
 } & {
-    cancel: () => any;
     save: (val: RgbaColor) => any;
+    cancel: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
-    onCancel?: (() => any) | undefined;
     onSave?: ((val: RgbaColor) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
@@ -52,7 +54,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
     };
     copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {