@youcan/celeste 0.6.97 → 0.6.99

package/dist/cjs/chunks/collapsible-trigger.cjs

@@ -0,0 +1,27 @@
+const require_dist = require("./dist.cjs");
+let vue = require("vue");
+//#endregion
+//#region src/components/collapsible/collapsible-trigger.vue
+var collapsible_trigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "collapsible-trigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Yi), (0, vue.normalizeProps)((0, vue.guardReactiveProps)(props)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "collapsible_trigger_default", {
+	enumerable: true,
+	get: function() {
+		return collapsible_trigger_default;
+	}
+});

package/dist/cjs/chunks/collapsible.cjs

@@ -0,0 +1,31 @@
+const require_dist = require("./dist.cjs");
+let vue = require("vue");
+//#endregion
+//#region src/components/collapsible/collapsible.vue
+var collapsible_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "collapsible",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const forwarded = require_dist.Se(__props, __emit);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.qi), (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(forwarded))), {
+				default: (0, vue.withCtx)(({ open }) => [(0, vue.renderSlot)(_ctx.$slots, "default", { open })]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "collapsible_default", {
+	enumerable: true,
+	get: function() {
+		return collapsible_default;
+	}
+});

package/dist/cjs/chunks/color-area.cjs

@@ -0,0 +1,174 @@
+require("./dist.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_use_user_select = require("../use-user-select.cjs");
+const require_color = require("../color.cjs");
+const require_use_color_model = require("./use-color-model.cjs");
+let vue = require("vue");
+//#region src/components/color-picker/color-area.vue?vue&type=script&setup=true&lang.ts
+var color_area_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "color-area",
+	props: {
+		hue: {},
+		modelValue: {}
+	},
+	emits: ["change"].concat(require_use_color_model.ColorPickerEmits),
+	setup(__props, { emit: __emit }) {
+		(0, vue.useCssVars)((_ctx) => ({ "57f9eb60": colorAreaBg.value }));
+		const props = __props;
+		const emit = __emit;
+		const { preventPageUserSelect, allowPageUserSelect } = require_use_user_select.useUserPageSelection();
+		const pointerRef = (0, vue.ref)(0);
+		const tinyColorRef = require_use_color_model.defineColorModel(props, emit);
+		const containerRef = (0, vue.useTemplateRef)("color-area");
+		const hsv = (0, vue.computed)(() => {
+			return tinyColorRef.value.toHsv();
+		});
+		const hue = (0, vue.computed)(() => {
+			return props.hue ?? hsv.value.h;
+		});
+		const colorAreaBg = (0, vue.computed)(() => {
+			return `hsl(${hue.value}, 100%, 50%)`;
+		});
+		const colorAreaThumbBg = (0, vue.computed)(() => {
+			const { r, g, b } = tinyColorRef.value.toRgb();
+			return `rgb(${r}, ${g}, ${b})`;
+		});
+		const pointerTop = (0, vue.computed)(() => {
+			return `${-(hsv.value.v * 100) + 1 + 100}%`;
+		});
+		const pointerLeft = (0, vue.computed)(() => {
+			if (hsv.value.v <= .01) return `${pointerRef.value * 100}%`;
+			return `${hsv.value.s * 100}%`;
+		});
+		(0, vue.watch)(() => props.hue, (newHue, oldHue) => {
+			if (newHue !== oldHue) {
+				const { s, v, a } = hsv.value;
+				onChange({
+					h: newHue,
+					s: s * 100,
+					v: v * 100,
+					a
+				});
+			}
+		});
+		function handleChange(e, skip = false) {
+			e.preventDefault();
+			const container = containerRef.value;
+			if (!container) return;
+			const containerWidth = container.clientWidth;
+			const containerHeight = container.clientHeight;
+			const { x: xOffset, y: yOffset } = require_color.getAbsolutePosition(container);
+			const { x: pageX, y: pageY } = require_color.getPageXYFromEvent(e);
+			const left = require_color.clamp(pageX - xOffset, 0, containerWidth);
+			const top = require_color.clamp(pageY - yOffset, 0, containerHeight);
+			const saturation = left / containerWidth;
+			const brightness = require_color.clamp(1 - top / containerHeight, 0, 1);
+			pointerRef.value = saturation;
+			let s = Math.round(saturation * 100);
+			let v = Math.round(brightness * 100);
+			if (s === 1) s = .01;
+			if (v === 1) v = .01;
+			onChange({
+				h: hue.value,
+				s,
+				v,
+				a: hsv.value.a
+			});
+		}
+		function onChange(newColor) {
+			tinyColorRef.value = newColor;
+		}
+		function handleMouseDown() {
+			preventPageUserSelect();
+			window.addEventListener("mousemove", handleChange);
+			window.addEventListener("mouseup", handleChange);
+			window.addEventListener("mouseup", handleMouseUp);
+		}
+		function handleMouseUp() {
+			allowPageUserSelect();
+			unbindEventListeners();
+		}
+		function unbindEventListeners() {
+			window.removeEventListener("mousemove", handleChange);
+			window.removeEventListener("mouseup", handleChange);
+			window.removeEventListener("mouseup", handleMouseUp);
+		}
+		function handleKeyDown(e) {
+			const direction = require_color.resolveArrowDirection(e);
+			if (!direction) return;
+			e.preventDefault();
+			switch (direction) {
+				case "left": {
+					const newSaturation = hsv.value.s - .01;
+					onChange({
+						...hsv.value,
+						s: newSaturation >= 0 ? newSaturation : 0
+					});
+					break;
+				}
+				case "right": {
+					const newSaturation = hsv.value.s + .01;
+					onChange({
+						...hsv.value,
+						s: newSaturation > 1 ? 1 : newSaturation
+					});
+					break;
+				}
+				case "up": {
+					const newBrightness = hsv.value.v + .01;
+					onChange({
+						...hsv.value,
+						v: newBrightness > 1 ? 1 : newBrightness
+					});
+					break;
+				}
+				case "down": {
+					const newBrightness = hsv.value.v - .01;
+					onChange({
+						...hsv.value,
+						v: newBrightness < 0 ? 0 : newBrightness
+					});
+					break;
+				}
+			}
+		}
+		(0, vue.onUnmounted)(() => {
+			unbindEventListeners();
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref: "color-area",
+				class: "celeste-color-area",
+				role: "application",
+				"aria-label": "Saturation and brightness picker",
+				onMousedown: handleMouseDown,
+				onTouchmovePassive: handleChange,
+				onTouchstartPassive: handleChange
+			}, [(0, vue.createElementVNode)("div", {
+				class: "celeste-color-thumb",
+				style: (0, vue.normalizeStyle)({
+					top: pointerTop.value,
+					left: pointerLeft.value,
+					background: colorAreaThumbBg.value
+				}),
+				role: "slider",
+				tabindex: "0",
+				"aria-valuemin": "0",
+				"aria-valuemax": "1",
+				"aria-label": "press arrow to change saturation or brightness",
+				"aria-valuenow": "?",
+				onKeydown: handleKeyDown
+			}, null, 36)], 544);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/color-area.vue
+var color_area_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(color_area_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ee238a27"]]);
+//#endregion
+Object.defineProperty(exports, "color_area_default", {
+	enumerable: true,
+	get: function() {
+		return color_area_default;
+	}
+});