@witchcraft/ui 0.3.26 → 0.4.0-beta.2

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/WColorInput/WColorInput.vue.d.ts

@@ -0,0 +1,45 @@
+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 */
+    copyTransform?: (val: HsvaColor, stringVal: string) => any;
+    /** See ColorPicker.allowAlpha */
+    stringPrecision?: number;
+    /** See ColorPicker.customRepresentation */
+    customRepresentation?: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+    rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+} & /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+type __VLS_ModelProps = {
+    modelValue?: RgbaColor;
+    "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;
+} & {
+    save: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onSave?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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.
@@ -35,23 +36,23 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "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;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,6 @@
 <template>
 <div
-	:id="id ?? fallbackId"
+	:id="finalId"
 	:aria-label="t('color-picker.aria')"
 	:class="twMerge(
   `color-picker
@@ -12,7 +12,7 @@
 			max-w-[300px]
 			flex flex-col items-center justify-center
 			bg-neutral-50
-			dark:bg-neutral-950
+			dark:bg-neutral-800
 			gap-3
 			p-3
 		`,
@@ -21,7 +21,12 @@
 			[--bg:rgb(var(--contrast-dark))]
 		`,
   border && `
-			border rounded-sm border-neutral-600
+			border
+			rounded-sm
+			border-neutral-300
+			dark:border-neutral-900
+			shadow-md
+			shadow-black/30
 		`,
   $attrs?.class
 )"
@@ -44,9 +49,9 @@
 			ref="pickerEl"
 		/>
 		<div
-			aria-live="assertive"
+			role="slider"
 			:aria-description="ariaDescription"
-			:aria-label="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"
+			:aria-valuetext="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.v}`"
 			:class="`
 					color-picker--all-handle
 					${handleClasses}
@@ -103,7 +108,7 @@
 		<div
 			role="slider"
 			:aria-label="t('color-picker.aria.alpha-slider')"
-			:aria-valuenow="`${localColor.percent.h}`"
+			:aria-valuenow="`${localColor.percent.a}`"
 			:aria-valuemin="0"
 			:aria-valuemax="100"
 			:aria-description="ariaDescription"
@@ -138,7 +143,7 @@
 		</div>
 		<div class="color-picker--input-group flex flex-1 items-center gap-2">
 			<slot name="input">
-				<lib-simple-input
+				<WSimpleInput
 					:valid="valid"
 					class="color-picker--input w-full"
 					:aria-label="label"
@@ -146,30 +151,30 @@
 					@input="parseInput"
 					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button
+				<WButton
 					class="color-picker--copy-button"
 					:aria-label="t('copy')"
 					@click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)"
 				>
-					<icon><i-fa6-regular-copy/></icon>
-				</lib-button>
+					<WIcon><i-lucide-copy/></WIcon>
+				</Wbutton>
 			</slot>
 		</div>
 	</div>
 	<slot name="buttons">
 		<div class="color-picker--save-cancel-group flex w-full items-center justify-center gap-2">
-			<lib-button
+			<WButton
 				class="color-picker--save-button"
 				@click="save()"
 			>
 				{{ t("save") }}
-			</lib-button>
-			<lib-button
+			</Wbutton>
+			<WButton
 				class="color-picker--cancel-button"
 				@click="emits('cancel')"
 			>
 				{{ t("cancel") }}
-			</lib-button>
+			</Wbutton>
 		</div>
 	</slot>
 </div>
@@ -184,16 +189,15 @@ import { computed, onMounted, reactive, ref, useAttrs, watch } from "vue";
 import { safeConvertToHsva } from "./utils/safeConvertToHsva.js";
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js";
 import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js";
-import IFa6RegularCopy from "~icons/fa-regular/copy";
+import { useFallbackId } from "../../composables/useFallbackId.js";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { copy } from "../../helpers/copy.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
-import { getFallbackId } from "../shared/props.js";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
+import WSimpleInput from "../WSimpleInput/WSimpleInput.vue";
 defineOptions({
-  name: "LibColorPicker"
+  name: "WColorPicker"
 });
 const $attrs = useAttrs();
 const t = useInjectedI18n();
@@ -222,8 +226,8 @@ const handleClasses = `
 `;
 const emits = defineEmits(["save", "cancel"]);
 const props = defineProps({
-  label: { type: String, required: false },
   id: { type: String, required: false },
+  label: { type: String, required: false },
   allowAlpha: { type: Boolean, required: false, default: true },
   stringPrecision: { type: Number, required: false, default: 3 },
   customRepresentation: { type: Object, required: false, default: void 0 },
@@ -231,13 +235,16 @@ const props = defineProps({
   copyTransform: { type: Function, required: false, default: (_val, stringVal) => stringVal },
   valid: { type: Boolean, required: false, default: true }
 });
+const finalId = useFallbackId(props);
 const ariaDescription = t("color-picker.aria.description");
-const fallbackId = getFallbackId();
 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 pickerEl = ref(null);
 const hueSliderEl = ref(null);
 const alphaSliderEl = ref(null);
+let pickerCtx = null;
+let hueSliderCtx = null;
+let alphaSliderCtx = null;
 const config = {
   hue: {
     el: hueSliderEl,
@@ -294,7 +301,8 @@ function onBlurFixInvalidValue() {
   }
 }
 function updatePicker(el, hue) {
-  const ctx = el.getContext("2d");
+  if (!pickerCtx) return;
+  const ctx = pickerCtx;
   const { height, width } = el;
   ctx.clearRect(0, 0, width, height);
   const gradient = ctx.createLinearGradient(0, 0, 0, height);
@@ -310,8 +318,8 @@ function updatePicker(el, hue) {
   ctx.fillRect(0, 0, width, height);
   ctx.globalCompositeOperation = "source-over";
 }
-function updateSlider(el, stops, length = 360) {
-  const ctx = el.getContext("2d");
+function updateSlider(el, ctx, stops, length = 360) {
+  if (!ctx) return;
   const { height, width } = el;
   ctx.clearRect(0, 0, width, height);
   const end = isArray(stops) ? stops.length - 1 : length;
@@ -382,7 +390,7 @@ const slider = {
     }
   },
   pointerdown: (e, type) => {
-    const focusTargetClass = `#${props.id ?? fallbackId} .color-picker--${type}-handle`;
+    const focusTargetClass = `#${finalId} .color-picker--${type}-handle`;
     const focusTarget = document.querySelector(focusTargetClass);
     if (focusTarget instanceof HTMLElement) focusTarget.focus();
     if (dragging) return;
@@ -417,9 +425,9 @@ function updateSliders(_) {
     hsl0.alpha = 0;
     const hsl1 = color.clone();
     hsl1.alpha = 1;
-    updateSlider(alphaSliderEl.value, [hsl0.toString(), hsl1.toString()]);
+    updateSlider(alphaSliderEl.value, alphaSliderCtx, [hsl0.toString(), hsl1.toString()]);
   }
-  updateSlider(hueSliderEl.value, (i) => `hsl(${i} 100% 50%)`);
+  updateSlider(hueSliderEl.value, hueSliderCtx, (i) => `hsl(${i} 100% 50%)`);
   updatePicker(pickerEl.value, _.h);
 }
 function updateValueAndPosition(_) {
@@ -456,8 +464,11 @@ onMounted(() => {
   if ($tempValue.value !== void 0) {
     convertAndUpdateAll($tempValue.value);
   }
-  const handle = document.querySelector(`#${props.id ?? fallbackId} .color-picker--all-handle`);
+  const handle = document.querySelector(`#${finalId} .color-picker--all-handle`);
   if (handle instanceof HTMLElement) handle.focus();
+  pickerCtx = pickerEl.value?.getContext("2d") ?? null;
+  hueSliderCtx = hueSliderEl.value?.getContext("2d") ?? null;
+  alphaSliderCtx = alphaSliderEl.value?.getContext("2d") ?? null;
 });
 watch($value, () => {
   convertAndUpdateAll($value.value);

package/dist/runtime/components/{LibColorPicker/LibColorPicker.vue.d.ts → WColorPicker/WColorPicker.vue.d.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.
@@ -35,23 +36,23 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "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;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,109 @@
+import type { AcceptableValue, ComboboxContentEmits, ComboboxContentProps, ComboboxInputEmits, ComboboxInputProps } from "reka-ui";
+import type { EmitsToProps, HTMLAttributes, InputHTMLAttributes } from "vue";
+import { type SuggestionsDisplayProps } from "../../composables/useDisplayForReka.js";
+import type { PopupConstrainToProps } from "../../types/index.js";
+declare const __VLS_export: <TSuggestion extends NonNullable<AcceptableValue>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(SuggestionsDisplayProps<TSuggestion> & PopupConstrainToProps & {
+        id?: string;
+        border?: boolean;
+        to?: string;
+        /**
+         * Validates the input, return true if valid, otherwise return an error message.
+         *
+         * If the input is invalid, modelValue is not updated. Empty inputs are visually valid, but they cannot trigger saves or or any setting of modelValue.
+         *
+         * If restrictToSuggestions is true, the input will be invalid if there is no exact match.
+         *
+         * `save` will not be emitted when the input is invalid.
+         *
+         * To show an error message, return a string from the function.
+         */
+        isValid?: (searchTerm: string) => true | string;
+        suggestions: TSuggestion[];
+        /** Shown in the popup when the search term is valid, not empty, not already selected, there are no suggestions, and restrictToSuggestions is false. Defaults to undefined. */
+        emptyLabel?: string;
+        /** The popup can't be styled via the regular class attr because it's teleported. You can also pass any reka ComboboxContent options. */
+        contentProps?: {
+            class?: string;
+            to?: string;
+        } & HTMLAttributes & ComboboxContentProps & EmitsToProps<ComboboxContentEmits>;
+        /** Disables the filter. */
+        ignoreFilter?: boolean;
+        /** If false, modelValue is set to the search term (so long as it's valid). */
+        restrictToSuggestions?: boolean;
+        /** Input attributes or reka-ui ComboboxInput props. */
+        inputProps?: Omit<InputHTMLAttributes, "class"> & {
+            class?: string;
+        } & HTMLAttributes & ComboboxInputProps & EmitsToProps<ComboboxInputEmits>;
+    } & {
+        modelValue?: TSuggestion;
+        open?: boolean;
+        searchTerm?: string;
+        loading?: boolean;
+    }) & {
+        "onUpdate:modelValue"?: ((value: TSuggestion) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onSave?: ((value: string) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+        "onUpdate:loading"?: ((value: boolean) => any) | undefined;
+        onNew?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        'loading-indicator'?: (props: {}) => any;
+    } & {
+        trigger?: (props: {
+            open: boolean;
+        }) => any;
+    } & {
+        toggle?: (props: {
+            isOpen: boolean;
+        }) => any;
+    } & {
+        header?: (props: {
+            class: string;
+            filtered: TSuggestion[];
+            isShowingEmptyLabel: boolean;
+        }) => any;
+    } & {
+        invalid?: (props: {
+            searchTerm: string;
+            errorMessage: string;
+            id: string;
+            role: string;
+        }) => any;
+    } & {
+        suggestions?: (props: {
+            filtered: TSuggestion[];
+            display: (value: TSuggestion, options?: {
+                isForEmit?: boolean;
+            }) => string;
+            searchTerm: string;
+        }) => any;
+    } & {
+        'suggestion-icon'?: (props: {
+            suggestion: Exclude<TSuggestion, any[]>;
+        }) => any;
+    } & {
+        suggestion?: (props: {
+            suggestion: Exclude<TSuggestion, any[]>;
+            suggestionText: string;
+        }) => any;
+    };
+    emit: {
+        (e: "save", value: string): void;
+        (e: "new", value: string): void;
+    } & (((event: "update:modelValue", value: TSuggestion) => void) & ((event: "update:open", value: boolean) => void) & ((event: "update:searchTerm", value: string) => void) & ((event: "update:loading", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};