@flux-ui/components 3.0.0-next.33 → 3.0.0-next.34

package/dist/component/FluxBoxedIcon.vue.d.ts

@@ -5,9 +5,5 @@ type __VLS_Props = {
     readonly name: FluxIconName;
     readonly size?: number;
 };
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    click: (args_0: MouseEvent) => any;
-}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (args_0: MouseEvent) => any;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/component/FluxFormDateRangeInput.vue.d.ts

@@ -1,15 +1,11 @@
-import { FluxAutoCompleteType, FluxDirection } from '@flux-ui/types';
 import { DateTime } from 'luxon';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties } from 'vue';
+import { FluxDirection } from '@flux-ui/types';
 import { OnCleanup } from '@vue/reactivity';
 type __VLS_Props = {
-    readonly autoComplete?: FluxAutoCompleteType;
-    readonly autoFocus?: boolean;
     readonly disabled?: boolean;
-    readonly isReadonly?: boolean;
     readonly max?: DateTime;
     readonly min?: DateTime;
-    readonly placeholder?: string;
     readonly rangeMode?: 'range' | 'week' | 'month';
 };
 type __VLS_PublicProps = {

package/dist/index.js

@@ -70,7 +70,7 @@ var FluxFormFieldInjectionKey = Symbol();
 var FluxTableInjectionKey = Symbol();
 var FluxTooltipInjectionKey = Symbol();
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+utils@3.11.1/node_modules/@basmilius/utils/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+utils@3.12.1/node_modules/@basmilius/utils/dist/index.mjs
 function t(e, t) {
 	return Math.round(e / t) * t;
 }
@@ -254,7 +254,7 @@ function useFormSelect_default(modelValue, isMultiple, options, searchQuery) {
 	const groups = computed(() => {
 		const groups = [];
 		const search = unref(searchQuery)?.trim().toLowerCase();
-		const available = unref(options).filter((o) => !("value" in o) || !search || o.label.toLowerCase().includes(search)).filter((o) => !("value" in o) || !isMultiple || !unref(selected).find((s) => s.value === o.value));
+		const available = unref(options).filter((o) => isFluxFormSelectGroup(o) || !search || o.label.toLowerCase().includes(search)).filter((o) => isFluxFormSelectGroup(o) || !isMultiple || !unref(selected).find((s) => s.value === o.value));
 		if (available.length === 0) return [];
 		if (!available.find(isFluxFormSelectGroup)) return [[null, available]];
 		for (let i = 0; i < available.length;) {
@@ -4295,7 +4295,7 @@ useMode(definition$2);
 useMode(definition$1);
 useMode(definition);
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.11.1+1fb4c65d43e298b9/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.12.1+1fb4c65d43e298b9/node_modules/@basmilius/http-client/dist/index.mjs
 function c(e) {
 	return class extends e {
 		constructor(...e) {
@@ -7843,13 +7843,13 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Action.module.scss
-var { "button": _0$15, "buttonIcon": _1$8, "buttonLabel": _2$5 } = Button_module_default$1;
+var { "buttonLabel": _0$15, "button": _1$8, "buttonIcon": _2$5 } = Button_module_default$1;
 var Action_module_default = {
-	action: `action ${_0$15}`,
+	action: `action ${_1$8}`,
 	spinner: `spinner`,
-	actionIcon: `action-icon ${_1$8}`,
+	actionIcon: `action-icon ${_2$5}`,
 	isDestructive: `is-destructive`,
-	actionLabel: `action-label ${_2$5}`,
+	actionLabel: `action-label ${_0$15}`,
 	actionBar: `action-bar`,
 	separator: `separator`,
 	formInput: `form-input`,
@@ -9352,7 +9352,6 @@ var FluxBoxedIcon_default = /* @__PURE__ */ defineComponent({
 		name: {},
 		size: {}
 	},
-	emits: ["click"],
 	setup(__props) {
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
@@ -9749,8 +9748,13 @@ var FilterItem_default = /* @__PURE__ */ defineComponent({
 		function onClick(evt) {
 			emit("click", evt);
 		}
-		watch(() => __props.item, async () => {
-			valueLabel.value = await unref(getValueLabel)(__props.value) ?? void 0;
+		watch([() => __props.item, () => __props.value], async ([, nextValue], _prev, onCleanup) => {
+			let cancelled = false;
+			onCleanup(() => {
+				cancelled = true;
+			});
+			const nextLabel = await unref(getValueLabel)(nextValue);
+			if (!cancelled) valueLabel.value = nextLabel ?? void 0;
 		}, {
 			deep: true,
 			immediate: true
@@ -10348,7 +10352,7 @@ var SelectBase_default = /* @__PURE__ */ defineComponent({
 					isPopupOpen.value = false;
 					return;
 				default:
-					if (evt.key.match(/[a-z]/)) highlightedIndex.value = unref(rawOptions).findIndex((o) => o.label.toLowerCase().startsWith(evt.key));
+					if (evt.key.length === 1) highlightedIndex.value = unref(rawOptions).findIndex((o) => o.label.toLowerCase().startsWith(evt.key.toLowerCase()));
 					else highlightedIndex.value = -1;
 					return;
 			}
@@ -10589,17 +10593,11 @@ var SliderBase_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const disabled = useDisabled_default(toRef(() => __props.disabled));
 		const rootRef = useTemplateRef("root");
-		onMounted(() => {
-			document.addEventListener("pointermove", onPointerMove);
-			document.addEventListener("pointerup", onPointerUp, { passive: true });
-		});
-		onUnmounted(() => {
-			document.removeEventListener("pointermove", onPointerMove);
-			document.removeEventListener("pointerup", onPointerUp);
-		});
 		function onPointerDown(evt) {
 			if (unref(disabled)) return;
 			emit("dragging", true);
+			document.addEventListener("pointermove", onPointerMove);
+			document.addEventListener("pointerup", onPointerUp, { passive: true });
 			requestAnimationFrame(() => onPointerMove(evt));
 		}
 		function onPointerMove(evt) {
@@ -10608,13 +10606,18 @@ var SliderBase_default = /* @__PURE__ */ defineComponent({
 			let { left, width } = root.getBoundingClientRect();
 			left += 6;
 			width -= 12;
-			emit("update", Math.max(0, Math.min(1, (evt.pageX - left) / width)));
+			emit("update", Math.max(0, Math.min(1, (evt.clientX - left) / width)));
 			evt.preventDefault();
 		}
 		function onPointerUp() {
 			emit("dragging", false);
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
 		}
-		watch(() => __props.isDragging, () => emit("dragging", __props.isDragging));
+		onUnmounted(() => {
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "root",
@@ -10947,6 +10950,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 							role: "gridcell"
 						}, [createElementVNode("div", { class: normalizeClass(unref(Calendar_module_default).calendarEvents) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(getEventsForDate(date), (event) => {
 							return openBlock(), createBlock(unref(VNodeRenderer), {
+								key: event.index,
 								class: normalizeClass(unref(clsx)(event.type === "single" && unref(Calendar_module_default).isSingle, event.type === "start" && unref(Calendar_module_default).isStart, event.type === "end" && unref(Calendar_module_default).isEnd, event.type === "middle" && unref(Calendar_module_default).isMiddle)),
 								style: normalizeStyle({ gridRow: event.index }),
 								vnode: event.vnode
@@ -10955,7 +10959,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 								"style",
 								"vnode"
 							]);
-						}), 256))], 2), createElementVNode("span", { class: normalizeClass(unref(Calendar_module_default).calendarEntryDate) }, toDisplayString(date.toLocaleString({ day: "numeric" })), 3)], 2);
+						}), 128))], 2), createElementVNode("span", { class: normalizeClass(unref(Calendar_module_default).calendarEntryDate) }, toDisplayString(date.toLocaleString({ day: "numeric" })), 3)], 2);
 					}), 256))], 2))]),
 					_: 1
 				}, 8, ["is-back"]),
@@ -11310,14 +11314,6 @@ var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 		const min = computed(() => Array.isArray(__props.min) ? __props.min : [__props.min, __props.min]);
 		const step = computed(() => Array.isArray(__props.step) ? __props.step : [__props.step, __props.step]);
 		const thumbPosition = computed(() => [(unref(modelValue)[0] - unref(min)[0]) / (unref(max)[0] - unref(min)[0]), (unref(modelValue)[1] - unref(min)[1]) / (unref(max)[1] - unref(min)[1])]);
-		onMounted(() => {
-			document.addEventListener("pointermove", onPointerMove);
-			document.addEventListener("pointerup", onPointerUp, { passive: true });
-		});
-		onUnmounted(() => {
-			document.removeEventListener("pointermove", onPointerMove);
-			document.removeEventListener("pointerup", onPointerUp);
-		});
 		function onDecrement(x, y) {
 			if (unref(disabled)) return;
 			let [valueX, valueY] = unref(modelValue);
@@ -11341,6 +11337,8 @@ var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 		function onPointerDown(evt) {
 			if (unref(disabled)) return;
 			isDragging.value = true;
+			document.addEventListener("pointermove", onPointerMove);
+			document.addEventListener("pointerup", onPointerUp, { passive: true });
 			requestAnimationFrame(() => onPointerMove(evt));
 		}
 		function onPointerMove(evt) {
@@ -11361,8 +11359,14 @@ var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 		}
 		function onPointerUp() {
 			isDragging.value = false;
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
 		}
 		watch(isDragging, (isDragging) => emit("dragging", isDragging));
+		onUnmounted(() => {
+			document.removeEventListener("pointermove", onPointerMove);
+			document.removeEventListener("pointerup", onPointerUp);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref: "root",
@@ -11705,7 +11709,7 @@ var FluxColorPicker_default = /* @__PURE__ */ defineComponent({
 			return computed({
 				get: () => fromHSV?.(...unref(hsv))[index] ?? unref(hsv)[index],
 				set: (value) => {
-					const values = fromHSV?.(...unref(hsv)) ?? unref(hsv);
+					const values = [...fromHSV?.(...unref(hsv)) ?? unref(hsv)];
 					values[index] = value;
 					hsv.value = toHSV?.(...values) ?? values;
 				}
@@ -12001,7 +12005,7 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const t = useTranslate_default();
+		const translate = useTranslate_default();
 		const customColor = ref("#000000");
 		function select(color, close) {
 			modelValue.value = color;
@@ -12033,10 +12037,10 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Color_module_default).colorSelectCustomPicker)
 				}, null, 8, ["modelValue", "class"]), createVNode(FluxPaneBody_default, { class: normalizeClass(unref(Color_module_default).colorSelectButtons) }, {
 					default: withCtx(() => [createVNode(FluxSecondaryButton_default, {
-						label: unref(t)("flux.cancel"),
+						label: unref(translate)("flux.cancel"),
 						onClick: ($event) => close()
 					}, null, 8, ["label", "onClick"]), createVNode(FluxPrimaryButton_default, {
-						label: unref(t)("flux.ok"),
+						label: unref(translate)("flux.ok"),
 						onClick: ($event) => select(customColor.value, close)
 					}, null, 8, ["label", "onClick"])]),
 					_: 2
@@ -12083,10 +12087,10 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 		const disabled = useDisabled_default(toRef(() => __props.disabled));
 		const { groups, selected, values } = useFormSelect_default(modelValue, __props.isMultiple, toRef(() => __props.options), modelSearch);
 		function onDeselect(id) {
-			if (unref(__props.isMultiple)) modelValue.value = unref(values).filter((v) => v !== id);
+			if (__props.isMultiple) modelValue.value = unref(values).filter((v) => v !== id);
 		}
 		function onSelect(id) {
-			if (unref(__props.isMultiple)) modelValue.value = [...unref(values), id];
+			if (__props.isMultiple) modelValue.value = [...unref(values), id];
 			else modelValue.value = id;
 		}
 		return (_ctx, _cache) => {
@@ -12672,10 +12676,7 @@ var FluxDatePicker_default = /* @__PURE__ */ defineComponent({
 		min: {},
 		rangeMode: {}
 	}, {
-		"modelValue": {
-			default: null,
-			required: true
-		},
+		"modelValue": { required: true },
 		"modelModifiers": {}
 	}),
 	emits: ["update:modelValue"],
@@ -13334,11 +13335,11 @@ var FluxFader_default = /* @__PURE__ */ defineComponent({
 			current.value = unref(current) + 1 >= unref(count) ? 0 : unref(current) + 1;
 		}
 		function previous() {
-			current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) + 1;
+			current.value = unref(current) - 1 <= -1 ? unref(count) - 1 : unref(current) - 1;
 		}
 		watch(current, (current) => {
 			const fader = T(faderRef);
-			if (!fader || fader.children.length === 0) return;
+			if (!fader || fader.children.length === 0 || current < 0) return;
 			Array.from(fader.children).forEach((item) => item.classList.remove(Fader_module_default.isCurrent));
 			fader.children[current].classList.add(Fader_module_default.isCurrent);
 			emit("update", current);
@@ -14355,8 +14356,8 @@ var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 			const image = unref(imageRef);
 			if (!image || !dragging.value) return;
 			const { top, left, width, height } = image.getBoundingClientRect();
-			const { pageX, pageY } = evt;
-			dragging.value = [Math.max(0, Math.min(1, (pageX - left) / width)) * 100, Math.max(0, Math.min(1, (pageY - top) / height)) * 100];
+			const { clientX, clientY } = evt;
+			dragging.value = [Math.max(0, Math.min(1, (clientX - left) / width)) * 100, Math.max(0, Math.min(1, (clientY - top) / height)) * 100];
 		}
 		function onPointerUp() {
 			if (!dragging.value) return;
@@ -14581,13 +14582,9 @@ var FluxFormDateInput_default = /* @__PURE__ */ defineComponent({
 var FluxFormDateRangeInput_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFormDateRangeInput",
 	props: /* @__PURE__ */ mergeModels({
-		autoComplete: {},
-		autoFocus: { type: Boolean },
 		disabled: { type: Boolean },
-		isReadonly: { type: Boolean },
 		max: {},
 		min: {},
-		placeholder: {},
 		rangeMode: { default: "range" }
 	}, {
 		"modelValue": { required: true },
@@ -14678,8 +14675,8 @@ var FluxFormDateTimeInput_default = /* @__PURE__ */ defineComponent({
 			if (!DateTime.isDateTime(dateTime)) return;
 			localValue.value = (localValue.value ?? DateTime.now()).set({
 				hour: dateTime.hour,
-				minute: unref(__props.isHourOnly) ? 0 : dateTime.minute,
-				second: unref(__props.isHourOnly) ? 0 : dateTime.second
+				minute: __props.isHourOnly ? 0 : dateTime.minute,
+				second: __props.isHourOnly ? 0 : dateTime.second
 			});
 		}
 		watch(() => __props.isHourOnly, () => __props.isHourOnly && (localValue.value = unref(localValue)?.startOf("hour") ?? null), { immediate: true });
@@ -15171,6 +15168,7 @@ var _hoisted_1$18 = [
 	"autocomplete",
 	"autofocus",
 	"disabled",
+	"readonly",
 	"maxlength",
 	"placeholder",
 	"aria-disabled"
@@ -15209,6 +15207,7 @@ var FluxFormTextArea_default = /* @__PURE__ */ defineComponent({
 				autocomplete: __props.autoComplete,
 				autofocus: __props.autoFocus,
 				disabled: unref(disabled),
+				readonly: __props.isReadonly,
 				maxlength: __props.maxLength,
 				placeholder: __props.placeholder,
 				style: normalizeStyle({ "--rows": __props.rows }),
@@ -17554,12 +17553,9 @@ var FluxQuantitySelector_default = /* @__PURE__ */ defineComponent({
 			});
 		}
 		watchEffect(() => {
-			if (unref(modelValue) > __props.max) {
-				increment();
-				return;
-			}
-			if (unref(modelValue) < __props.min) {
-				decrement();
+			const value = unref(modelValue);
+			if (value > __props.max || value < __props.min) {
+				modelValue.value = Math.min(__props.max, Math.max(__props.min, value));
 				return;
 			}
 			sizeToContent();
@@ -17680,10 +17676,11 @@ var FluxSnackbar_default = /* @__PURE__ */ defineComponent({
 				if (id.value) removeSnackbar(id.value);
 				return;
 			}
-			let spec = instance.props;
-			spec.onAction = onAction;
-			spec.onClose = onClose;
-			id.value = addSnackbar(spec);
+			id.value = addSnackbar({
+				...instance.props,
+				onAction,
+				onClose
+			});
 		}, { immediate: true });
 		return (_ctx, _cache) => {
 			return __props.isRendered ? (openBlock(), createElementBlock("div", {