@youcan/celeste 0.6.98 → 0.6.100

package/dist/cjs/chunks/checkbox-card.cjs

@@ -0,0 +1,100 @@
+const require_dist = require("./dist.cjs");
+const require_clsx = require("./clsx.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_use_delegated_props = require("../use-delegated-props.cjs");
+let vue = require("vue");
+//#region src/components/checkbox/checkbox-card.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "celeste-checkbox-card-content" };
+var _hoisted_2 = { role: "presentation" };
+var _hoisted_3 = {
+	role: "presentation",
+	class: "celeste-checkbox-card-row"
+};
+var checkbox_card_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "checkbox-card",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Vh), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), {
+				"aria-required": _ctx.required,
+				"aria-disabled": _ctx.disabled,
+				class: (0, vue.unref)(require_clsx.clsx)("celeste-checkbox-card", props.class, { "celeste-checkbox-card-disabled": _ctx.disabled })
+			}), {
+				default: (0, vue.withCtx)(() => [
+					_ctx.$slots.image || _ctx.$slots.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 0,
+						role: "presentation",
+						class: (0, vue.normalizeClass)(["celeste-checkbox-card-preview", [_ctx.$slots.image ? "celeste-checkbox-card-preview-image" : "celeste-checkbox-card-preview-icon"]])
+					}, [_ctx.$slots.image ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [_cache[0] || (_cache[0] = (0, vue.createElementVNode)("i", {
+						class: "celeste-checkbox-card-preview-fallback",
+						"i-celeste-image-circle-fill": ""
+					}, null, -1)), (0, vue.renderSlot)(_ctx.$slots, "image", { class: "i-celeste-image-circle-fill?bg" }, void 0, true)], 64)) : _ctx.$slots.icon ? (0, vue.renderSlot)(_ctx.$slots, "icon", { key: 1 }, void 0, true) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", _hoisted_1, [(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createElementVNode)("div", _hoisted_3, [
+						(0, vue.createVNode)((0, vue.unref)(require_dist.O), {
+							as: "span",
+							class: "celeste-checkbox-card-label"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {}, void 0, true)]),
+							_: 3
+						}),
+						_ctx.$slots.sublabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+							key: 0,
+							as: "span",
+							class: "celeste-checkbox-card-sublabel"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "sublabel", {}, void 0, true)]),
+							_: 3
+						})) : (0, vue.createCommentVNode)("", true),
+						_ctx.$slots.badge ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+							key: 1,
+							"as-child": "",
+							class: "celeste-checkbox-card-badge"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "badge", { disabled: _ctx.disabled }, void 0, true)]),
+							_: 3
+						})) : (0, vue.createCommentVNode)("", true)
+					])]), _ctx.$slots.description ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+						key: 0,
+						as: "span",
+						class: "celeste-checkbox-card-description"
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "description", {}, void 0, true)]),
+						_: 3
+					})) : (0, vue.createCommentVNode)("", true)]),
+					(0, vue.createVNode)((0, vue.unref)(require_dist.O), {
+						disabled: _ctx.disabled,
+						"as-child": "",
+						class: "celeste-checkbox-card-checkbox"
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+						_: 3
+					}, 8, ["disabled"])
+				]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/checkbox/checkbox-card.vue
+var checkbox_card_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(checkbox_card_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8acdbba9"]]);
+//#endregion
+Object.defineProperty(exports, "checkbox_card_default", {
+	enumerable: true,
+	get: function() {
+		return checkbox_card_default;
+	}
+});

package/dist/cjs/chunks/checkbox-label.cjs

@@ -0,0 +1,94 @@
+const require_dist = require("./dist.cjs");
+const require_clsx = require("./clsx.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_use_delegated_props = require("../use-delegated-props.cjs");
+let vue = require("vue");
+//#region src/components/checkbox/checkbox-label.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { role: "presentation" };
+var _hoisted_2 = {
+	role: "presentation",
+	class: "celeste-checkbox-label-row"
+};
+var _hoisted_3 = {
+	role: "presentation",
+	class: "celeste-checkbox-label-content"
+};
+var checkbox_label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "checkbox-label",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		required: { type: Boolean },
+		disabled: { type: Boolean },
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const delegatedProps = require_use_delegated_props.useDelegatedProps(props, "class");
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Vh), (0, vue.mergeProps)((0, vue.unref)(delegatedProps), {
+				"aria-required": _ctx.required,
+				"aria-disabcled": _ctx.disabled,
+				class: (0, vue.unref)(require_clsx.clsx)("celeste-checkbox-label", props.class)
+			}), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_dist.O), {
+					"as-child": "",
+					class: "celeste-checkbox-label-checkbox"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+					_: 3
+				}), (0, vue.createElementVNode)("div", _hoisted_1, [(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createElementVNode)("div", null, [(0, vue.createVNode)((0, vue.unref)(require_dist.O), {
+					as: "span",
+					class: "celeste-checkbox-label-label"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {}, void 0, true)]),
+					_: 3
+				}), _ctx.$slots.sublabel ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+					key: 0,
+					as: "span",
+					class: "celeste-checkbox-label-sublabel"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "sublabel", {}, void 0, true)]),
+					_: 3
+				})) : (0, vue.createCommentVNode)("", true)]), _ctx.$slots.badge ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+					key: 0,
+					"as-child": "",
+					class: "celeste-checkbox-label-badge"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "badge", {}, void 0, true)]),
+					_: 3
+				})) : (0, vue.createCommentVNode)("", true)]), (0, vue.createElementVNode)("div", _hoisted_3, [_ctx.$slots.description ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+					key: 0,
+					as: "span",
+					class: "celeste-checkbox-label-description"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "description", {}, void 0, true)]),
+					_: 3
+				})) : (0, vue.createCommentVNode)("", true), _ctx.$slots.linkButton ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+					key: 1,
+					"as-child": "",
+					class: "celeste-checkbox-label-link-button"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "linkButton", {}, void 0, true)]),
+					_: 3
+				})) : (0, vue.createCommentVNode)("", true)])])]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabcled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/checkbox/checkbox-label.vue
+var checkbox_label_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(checkbox_label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-75e9816c"]]);
+//#endregion
+Object.defineProperty(exports, "checkbox_label_default", {
+	enumerable: true,
+	get: function() {
+		return checkbox_label_default;
+	}
+});

package/dist/cjs/chunks/checkbox.cjs

@@ -0,0 +1,40 @@
+const require_dist = require("./dist.cjs");
+const require_clsx = require("./clsx.cjs");
+const require_use_delegated_props = require("../use-delegated-props.cjs");
+let vue = require("vue");
+//#endregion
+//#region src/components/checkbox/checkbox.vue
+var checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "checkbox",
+	props: {
+		defaultChecked: { type: Boolean },
+		checked: { type: [Boolean, String] },
+		disabled: { type: Boolean },
+		required: { type: Boolean },
+		name: {},
+		value: {},
+		id: {},
+		asChild: { type: Boolean },
+		as: {},
+		class: {}
+	},
+	emits: ["update:checked"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const forwarded = require_dist.Se(require_use_delegated_props.useDelegatedProps(props, "class"), emits);
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.Wv), (0, vue.mergeProps)((0, vue.unref)(forwarded), { class: (0, vue.unref)(require_clsx.clsx)("celeste-checkbox", props.class) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(require_dist.jv), { class: "celeste-checkbox-indicator" })]),
+				_: 1
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "checkbox_default", {
+	enumerable: true,
+	get: function() {
+		return checkbox_default;
+	}
+});

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

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

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;
+	}
+});