reka-ui 2.8.2 → 2.9.1

package/dist/ColorField/ColorFieldRoot.js

@@ -0,0 +1,269 @@
+import { createContext } from "../shared/createContext.js";
+import { useFormControl } from "../shared/useFormControl.js";
+import { useForwardExpose } from "../shared/useForwardExpose.js";
+import { useLocale } from "../shared/useLocale.js";
+import { Primitive } from "../Primitive/Primitive.js";
+import { VisuallyHiddenInput_default } from "../VisuallyHidden/VisuallyHiddenInput.js";
+import { colorToString, convertToRgb } from "../color/convert.js";
+import { getChannelRange, getChannelValue, setChannelValue } from "../color/channel.js";
+import { isValidColor, normalizeColor, parseColor } from "../color/parse.js";
+import { computed, createBlock, createCommentVNode, defineComponent, openBlock, ref, renderSlot, toRefs, unref, watch, withCtx } from "vue";
+import { useVModel } from "@vueuse/core";
+
+//#region src/ColorField/ColorFieldRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorFieldRootContext, provideColorFieldRootContext] = createContext("ColorFieldRoot");
+var ColorFieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ColorFieldRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#000000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		channel: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disableWheelChange: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		locale: {
+			type: String,
+			required: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "update:color"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { colorSpace, channel, disabled, readonly, disableWheelChange, placeholder, locale: propLocale, step: stepProp } = toRefs(props);
+		const { forwardRef, currentElement } = useForwardExpose();
+		const isFormControl = useFormControl(currentElement);
+		const locale = useLocale(propLocale);
+		const modelValue = useVModel(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		const color = computed({
+			get: () => normalizeColor(modelValue.value ?? "#000000"),
+			set: (newColor) => {
+				const hexString = colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const inputValue = ref("");
+		const isEditing = ref(false);
+		watch(() => color.value, (newColor) => {
+			if (!isEditing.value) inputValue.value = formatValue(newColor);
+		}, { immediate: true });
+		function formatValue(c) {
+			if (channel.value) {
+				const value = getChannelValue(c, channel.value);
+				if (channel.value === "alpha") return String(Math.round(value));
+				return String(Math.round(value));
+			}
+			return colorToString(c, "hex");
+		}
+		const MIN_HEX_INT = 0;
+		const MAX_HEX_INT = 16777215;
+		const PAGE_STEP_MULTIPLIER = 10;
+		function getStep() {
+			if (stepProp.value != null) return stepProp.value;
+			if (channel.value) return getChannelRange(channel.value).step;
+			return 1;
+		}
+		function updateValue(value) {
+			inputValue.value = value;
+		}
+		function commit() {
+			isEditing.value = false;
+			if (channel.value) {
+				const numValue = parseFloat(inputValue.value);
+				if (!isNaN(numValue)) {
+					const range = getChannelRange(channel.value);
+					const clamped = Math.max(range.min, Math.min(range.max, numValue));
+					color.value = setChannelValue(color.value, channel.value, clamped);
+				}
+				inputValue.value = formatValue(color.value);
+			} else {
+				const trimmed = inputValue.value.trim();
+				if (isValidColor(trimmed)) color.value = parseColor(trimmed);
+				inputValue.value = formatValue(color.value);
+			}
+		}
+		function addHexValue(delta) {
+			const intDelta = Math.trunc(delta);
+			const hexInt = color.value.space === "rgb" ? Math.round(color.value.r) << 16 | Math.round(color.value.g) << 8 | Math.round(color.value.b) : (() => {
+				const rgb = convertToRgb(color.value);
+				return Math.round(rgb.r) << 16 | Math.round(rgb.g) << 8 | Math.round(rgb.b);
+			})();
+			const clamped = Math.min(Math.max(hexInt + intDelta, MIN_HEX_INT), MAX_HEX_INT);
+			const hex = `#${clamped.toString(16).padStart(6, "0")}`;
+			color.value = parseColor(hex);
+			inputValue.value = formatValue(color.value);
+		}
+		function increment() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrement() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep();
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue + step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(step);
+		}
+		function decrementPage() {
+			if (disabled.value || readonly.value) return;
+			const step = getStep() * PAGE_STEP_MULTIPLIER;
+			if (channel.value) {
+				const currentValue = getChannelValue(color.value, channel.value);
+				color.value = setChannelValue(color.value, channel.value, currentValue - step);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-step);
+		}
+		function incrementToMax() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = getChannelRange(channel.value);
+				color.value = setChannelValue(color.value, channel.value, range.max);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(MAX_HEX_INT);
+		}
+		function decrementToMin() {
+			if (disabled.value || readonly.value) return;
+			if (channel.value) {
+				const range = getChannelRange(channel.value);
+				color.value = setChannelValue(color.value, channel.value, range.min);
+				inputValue.value = formatValue(color.value);
+			} else addHexValue(-MAX_HEX_INT);
+		}
+		function handleWheel(event) {
+			if (disableWheelChange.value || disabled.value || readonly.value) return;
+			event.preventDefault();
+			if (event.deltaY > 0) decrement();
+			else increment();
+		}
+		provideColorFieldRootContext({
+			color: computed(() => color.value),
+			inputValue,
+			channel,
+			colorSpace,
+			disabled,
+			readonly,
+			disableWheelChange,
+			placeholder,
+			updateValue,
+			commit,
+			increment,
+			decrement,
+			incrementToMax,
+			decrementToMin,
+			incrementPage,
+			decrementPage,
+			handleWheel
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				role: "group",
+				"data-disabled": unref(disabled) ? "" : void 0,
+				"data-readonly": unref(readonly) ? "" : void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), unref(isFormControl) && _ctx.name ? (openBlock(), createBlock(unref(VisuallyHiddenInput_default), {
+					key: 0,
+					type: "text",
+					value: unref(colorToString)(color.value, "hex"),
+					name: _ctx.name,
+					disabled: unref(disabled),
+					required: _ctx.required
+				}, null, 8, [
+					"value",
+					"name",
+					"disabled",
+					"required"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"as-child",
+				"data-disabled",
+				"data-readonly"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorField/ColorFieldRoot.vue
+var ColorFieldRoot_default = ColorFieldRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { ColorFieldRoot_default, injectColorFieldRootContext };
+//# sourceMappingURL=ColorFieldRoot.js.map

package/dist/ColorField/ColorFieldRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFieldRoot.js","names":["as","asChild","name","required"],"sources":["../../src/ColorField/ColorFieldRoot.vue","../../src/ColorField/ColorFieldRoot.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/ColorSlider/ColorSliderRoot.cjs

@@ -0,0 +1,230 @@
+const require_rolldown_runtime = require('../rolldown-runtime.cjs');
+const require_shared_createContext = require('../shared/createContext.cjs');
+const require_shared_useDirection = require('../shared/useDirection.cjs');
+const require_shared_useFormControl = require('../shared/useFormControl.cjs');
+const require_shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
+const require_VisuallyHidden_VisuallyHiddenInput = require('../VisuallyHidden/VisuallyHiddenInput.cjs');
+const require_color_convert = require('../color/convert.cjs');
+const require_color_channel = require('../color/channel.cjs');
+const require_color_parse = require('../color/parse.cjs');
+const require_Slider_SliderRoot = require('../Slider/SliderRoot.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+const __vueuse_core = require_rolldown_runtime.__toESM(require("@vueuse/core"));
+
+//#region src/ColorSlider/ColorSliderRoot.vue?vue&type=script&setup=true&lang.ts
+const [injectColorSliderRootContext, provideColorSliderRootContext] = require_shared_createContext.createContext("ColorSliderRoot");
+var ColorSliderRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "ColorSliderRoot",
+	props: {
+		modelValue: {
+			type: [String, Object],
+			required: false
+		},
+		defaultValue: {
+			type: [String, Object],
+			required: false,
+			default: "#000000"
+		},
+		colorSpace: {
+			type: String,
+			required: false,
+			default: "hsl"
+		},
+		channel: {
+			type: String,
+			required: true
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "horizontal"
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		inverted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		step: {
+			type: Number,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:color",
+		"change",
+		"changeEnd"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { orientation, disabled, inverted, dir: propDir, channel, colorSpace, step: stepProp } = (0, vue.toRefs)(props);
+		const dir = require_shared_useDirection.useDirection(propDir);
+		const { forwardRef, currentElement } = require_shared_useForwardExpose.useForwardExpose();
+		const isFormControl = require_shared_useFormControl.useFormControl(currentElement);
+		const modelValue = (0, __vueuse_core.useVModel)(props, "modelValue", emits, {
+			defaultValue: props.defaultValue,
+			passive: props.modelValue === void 0
+		});
+		function toNativeSpace(color$1, ch, space) {
+			switch (ch) {
+				case "hue":
+				case "lightness": return require_color_convert.convertToHsl(color$1);
+				case "saturation": return space === "hsb" ? require_color_convert.convertToHsb(color$1) : require_color_convert.convertToHsl(color$1);
+				case "brightness": return require_color_convert.convertToHsb(color$1);
+				case "red":
+				case "green":
+				case "blue": return require_color_convert.convertToRgb(color$1);
+				case "alpha": return color$1;
+				default: return color$1;
+			}
+		}
+		const internalColor = (0, vue.ref)(toNativeSpace(require_color_parse.normalizeColor(modelValue.value ?? props.defaultValue ?? "#000000"), channel.value, colorSpace.value));
+		function isAchromatic(color$1) {
+			const hsl = require_color_convert.convertToHsl(color$1);
+			return hsl.s === 0 || hsl.l === 0 || hsl.l >= 100;
+		}
+		(0, vue.watch)(() => modelValue.value, (newVal) => {
+			if (newVal == null) return;
+			const parsed = require_color_parse.normalizeColor(newVal);
+			const currentHex = require_color_convert.colorToString(internalColor.value, "hex");
+			const newHex = require_color_convert.colorToString(parsed, "hex");
+			if (currentHex !== newHex) {
+				const nativeColor = toNativeSpace(parsed, channel.value, colorSpace.value);
+				const currentChannelVal = require_color_channel.getChannelValue(internalColor.value, channel.value);
+				const newChannelVal = require_color_channel.getChannelValue(nativeColor, channel.value);
+				const range = channelRange.value.max - channelRange.value.min;
+				const shouldPreserve = channel.value === "hue" && isAchromatic(parsed) || Math.abs(currentChannelVal - newChannelVal) < range * .02;
+				if (shouldPreserve) internalColor.value = require_color_channel.setChannelValue(nativeColor, channel.value, currentChannelVal);
+				else internalColor.value = nativeColor;
+			}
+		});
+		const color = (0, vue.computed)({
+			get: () => internalColor.value,
+			set: (newColor) => {
+				internalColor.value = newColor;
+				const hexString = require_color_convert.colorToString(newColor, "hex");
+				modelValue.value = hexString;
+				emits("update:color", newColor);
+			}
+		});
+		const channelRange = (0, vue.computed)(() => require_color_channel.getChannelRange(channel.value));
+		const min = (0, vue.computed)(() => channelRange.value.min);
+		const max = (0, vue.computed)(() => channelRange.value.max);
+		const step = (0, vue.computed)(() => stepProp.value ?? channelRange.value.step);
+		const channelValue = (0, vue.computed)(() => require_color_channel.getChannelValue(color.value, channel.value));
+		const sliderValue = (0, vue.computed)({
+			get: () => [channelValue.value],
+			set: (newValue) => {
+				const clamped = Math.max(min.value, Math.min(max.value, newValue[0]));
+				const newColor = require_color_channel.setChannelValue(color.value, channel.value, clamped);
+				color.value = newColor;
+				emits("change", require_color_convert.colorToString(newColor, "hex"));
+			}
+		});
+		function handleValueCommit(values) {
+			emits("changeEnd", require_color_convert.colorToString(color.value, "hex"));
+		}
+		provideColorSliderRootContext({
+			color: (0, vue.computed)(() => color.value),
+			channelValue,
+			channel,
+			colorSpace,
+			orientation,
+			disabled,
+			inverted,
+			min,
+			max,
+			step
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Slider_SliderRoot.SliderRoot_default), (0, vue.mergeProps)(_ctx.$attrs, {
+				ref: (0, vue.unref)(forwardRef),
+				modelValue: sliderValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => sliderValue.value = $event),
+				orientation: (0, vue.unref)(orientation),
+				dir: (0, vue.unref)(dir),
+				disabled: (0, vue.unref)(disabled),
+				inverted: (0, vue.unref)(inverted),
+				min: min.value,
+				max: max.value,
+				step: step.value,
+				as: _ctx.as,
+				"as-child": _ctx.asChild,
+				onValueCommit: handleValueCommit
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default"), (0, vue.unref)(isFormControl) && _ctx.name ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_VisuallyHidden_VisuallyHiddenInput.VisuallyHiddenInput_default), {
+					key: 0,
+					type: "text",
+					value: (0, vue.unref)(require_color_convert.colorToString)(color.value, "hex"),
+					name: _ctx.name,
+					disabled: (0, vue.unref)(disabled),
+					required: _ctx.required
+				}, null, 8, [
+					"value",
+					"name",
+					"disabled",
+					"required"
+				])) : (0, vue.createCommentVNode)("v-if", true)]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"orientation",
+				"dir",
+				"disabled",
+				"inverted",
+				"min",
+				"max",
+				"step",
+				"as",
+				"as-child"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/ColorSlider/ColorSliderRoot.vue
+var ColorSliderRoot_default = ColorSliderRoot_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'ColorSliderRoot_default', {
+  enumerable: true,
+  get: function () {
+    return ColorSliderRoot_default;
+  }
+});
+Object.defineProperty(exports, 'injectColorSliderRootContext', {
+  enumerable: true,
+  get: function () {
+    return injectColorSliderRootContext;
+  }
+});
+//# sourceMappingURL=ColorSliderRoot.cjs.map

package/dist/ColorSlider/ColorSliderRoot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSliderRoot.cjs","names":["$attrs","as","asChild","name","required"],"sources":["../../src/ColorSlider/ColorSliderRoot.vue","../../src/ColorSlider/ColorSliderRoot.vue"],"sourcesContent":[],"mappings":"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"}