@youcan/celeste 0.6.98 → 0.6.100

package/dist/cjs/chunks/hue-slider.cjs

@@ -0,0 +1,120 @@
+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");
+let vue = require("vue");
+//#region src/components/color-picker/hue-slider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "celeste-color-slider" };
+var _hoisted_2 = ["aria-valuenow"];
+var hue_slider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "hue-slider",
+	props: {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const hue = (0, vue.useModel)(__props, "modelValue");
+		const pullDirection = (0, vue.ref)();
+		const containerRef = (0, vue.useTemplateRef)("slider-track");
+		const { preventPageUserSelect, allowPageUserSelect } = require_use_user_select.useUserPageSelection();
+		(0, vue.watch)(hue, (newHue, oldHue) => {
+			if (newHue !== 0 && newHue - oldHue > 0) pullDirection.value = "right";
+			if (newHue !== 0 && newHue - oldHue < 0) pullDirection.value = "left";
+		});
+		const pointerLeft = (0, vue.computed)(() => {
+			if (hue.value === 0 && pullDirection.value === "right") return "100%";
+			return `${hue.value * 100 / 360}%`;
+		});
+		const trackThumbBg = (0, vue.computed)(() => {
+			return `hsl(${hue.value}, 100%, 50%)`;
+		});
+		function handleChange(e, skip) {
+			if (!skip) e.preventDefault();
+			const container = containerRef.value;
+			if (!container) return;
+			const containerWidth = container.clientWidth;
+			const { x: xOffset } = require_color.getAbsolutePosition(container);
+			const { x: pageX } = require_color.getPageXYFromEvent(e);
+			const left = pageX - xOffset;
+			let h;
+			let percent;
+			if (left < 0) h = 0;
+			else if (left > containerWidth) h = 360;
+			else {
+				percent = left * 100 / containerWidth;
+				h = Math.round(360 * percent / 100);
+			}
+			if (hue.value !== h) emitChange(h);
+		}
+		function emitChange(h) {
+			hue.value = h;
+		}
+		function handleMouseDown(e) {
+			handleChange(e, true);
+			preventPageUserSelect();
+			window.addEventListener("mousemove", handleChange);
+			window.addEventListener("mouseup", handleMouseUp);
+		}
+		function handleMouseUp() {
+			allowPageUserSelect();
+			unbindEventListeners();
+		}
+		function unbindEventListeners() {
+			window.removeEventListener("mousemove", handleChange);
+			window.removeEventListener("mouseup", handleMouseUp);
+		}
+		function handleKeyDown(e) {
+			const direction = require_color.resolveArrowDirection(e);
+			if (!direction) return;
+			e.preventDefault();
+			const currentValue = hue.value;
+			let newValue;
+			switch (direction) {
+				case "left":
+					newValue = currentValue - 1 < 0 ? 0 : Math.floor(currentValue - 1);
+					break;
+				case "right":
+					newValue = currentValue + 1 > 360 ? 360 : Math.ceil(currentValue + 1);
+					break;
+			}
+			if (typeof newValue !== "undefined") emitChange(newValue);
+		}
+		(0, vue.onUnmounted)(() => {
+			unbindEventListeners();
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("div", {
+				ref: "slider-track",
+				class: "slider-track",
+				role: "slider",
+				"aria-valuenow": hue.value,
+				"aria-valuemin": "0",
+				"aria-valuemax": "360",
+				"aria-label": "Hue",
+				tabindex: "0",
+				onMousedown: handleMouseDown,
+				onTouchmovePassive: handleChange,
+				onTouchstartPassive: handleChange,
+				onKeydown: handleKeyDown
+			}, [(0, vue.createElementVNode)("div", {
+				class: "celeste-color-thumb",
+				style: (0, vue.normalizeStyle)({
+					left: pointerLeft.value,
+					background: trackThumbBg.value
+				}),
+				role: "presentation"
+			}, null, 4)], 40, _hoisted_2)]);
+		};
+	}
+});
+//#endregion
+//#region src/components/color-picker/hue-slider.vue
+var hue_slider_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(hue_slider_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-69ac87ad"]]);
+//#endregion
+Object.defineProperty(exports, "hue_slider_default", {
+	enumerable: true,
+	get: function() {
+		return hue_slider_default;
+	}
+});

package/dist/cjs/chunks/label.cjs

@@ -0,0 +1,64 @@
+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");
+const require_tooltip = require("./tooltip.cjs");
+let vue = require("vue");
+//#region src/components/label/label.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "celeste-label-text" };
+var _hoisted_2 = {
+	key: 0,
+	class: "celeste-sublabel"
+};
+var label_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "label",
+	props: {
+		for: {},
+		asChild: { type: Boolean },
+		as: {},
+		sublabel: {},
+		information: {},
+		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-label", props.class)
+			}), {
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createElementVNode)("span", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+					(0, vue.renderSlot)(_ctx.$slots, "button", { class: "celeste-label-button" }, void 0, true),
+					_ctx.sublabel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2, (0, vue.toDisplayString)(_ctx.sublabel), 1)) : (0, vue.createCommentVNode)("", true),
+					_ctx.information ? ((0, vue.openBlock)(), (0, vue.createBlock)(require_tooltip.tooltip_default, {
+						key: 1,
+						title: _ctx.information
+					}, {
+						default: (0, vue.withCtx)(() => _cache[0] || (_cache[0] = [(0, vue.createElementVNode)("button", { class: "celeste-label-info" }, [(0, vue.createElementVNode)("i", { class: "i-celeste-information-2-fill" })], -1)])),
+						_: 1
+					}, 8, ["title"])) : (0, vue.createCommentVNode)("", true)
+				]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabled",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/label/label.vue
+var label_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(label_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-896f427f"]]);
+//#endregion
+Object.defineProperty(exports, "label_default", {
+	enumerable: true,
+	get: function() {
+		return label_default;
+	}
+});

package/dist/cjs/chunks/link-bubble.cjs

@@ -0,0 +1,201 @@
+require("./dist.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+const require_button = require("./button.cjs");
+const require_compact_button = require("./compact-button.cjs");
+const require_link_button = require("./link-button.cjs");
+const require_text_input_affix = require("./text-input-affix.cjs");
+const require_text_input = require("./text-input.cjs");
+const require_label = require("./label.cjs");
+const require_switch = require("./switch.cjs");
+let vue = require("vue");
+//#region src/components/rich-editor/link-bubble.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "set-mode"
+};
+var _hoisted_2 = { class: "set-link" };
+var _hoisted_3 = { class: "switch-button-box" };
+var _hoisted_4 = {
+	key: 1,
+	class: "edit-mode"
+};
+var link_bubble_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "link-bubble",
+	props: {
+		editor: {},
+		showSetLinkFromToolbar: { type: Boolean }
+	},
+	emits: ["set-link-closed"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const BubbleMenu = (0, vue.defineAsyncComponent)(() => Promise.resolve().then(() => require("./menus.cjs")).then((m) => m.BubbleMenu));
+		const href = (0, vue.ref)("");
+		const openInNewTab = (0, vue.ref)(false);
+		const editing = (0, vue.ref)(false);
+		const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+		const showBubble = (0, vue.computed)(() => {
+			return editing.value || props.editor.isActive("link") || props.showSetLinkFromToolbar && isTextSelected();
+		});
+		function startEdit() {
+			editing.value = true;
+			const attrs = props.editor.getAttributes("link");
+			href.value = attrs.href || "";
+			openInNewTab.value = attrs.target === "_blank";
+			(0, vue.nextTick)(() => {
+				const transaction = props.editor.state.tr.setMeta("bubbleMenu", "updatePosition");
+				props.editor.view.dispatch(transaction);
+			});
+		}
+		function removeLink() {
+			props.editor.chain().focus().unsetLink().run();
+			reset();
+		}
+		function reset() {
+			editing.value = false;
+			href.value = "";
+			openInNewTab.value = false;
+			emit("set-link-closed");
+		}
+		function truncateMiddleUrl(str) {
+			const maxLength = 40;
+			if (str.length <= maxLength) return str;
+			const startChars = Math.ceil((maxLength - 3) / 2);
+			const endChars = Math.floor((maxLength - 3) / 2);
+			return `${str.slice(0, startChars)}...${str.slice(-endChars)}`;
+		}
+		function isAllowedUri() {
+			const url = href.value.trim();
+			if (!url || url.includes(" ")) return false;
+			if (url.startsWith("/")) return true;
+			if (url.startsWith("./") || url.startsWith("../")) return false;
+			const allowedProtocols = /^(?:https?:|mailto:)/i;
+			if (/^(?:javascript:|data:)/i.test(url)) return false;
+			if (allowedProtocols.test(url)) return true;
+			return false;
+		}
+		const isValidUrl = (0, vue.computed)(() => isAllowedUri());
+		function applyLink() {
+			if (!href.value || !isValidUrl.value) return;
+			props.editor.chain().focus().extendMarkRange("link").setLink({
+				href: href.value,
+				target: openInNewTab.value ? "_blank" : null
+			}).run();
+			reset();
+		}
+		const bubbleRef = (0, vue.ref)(null);
+		function handleClickOutside(event) {
+			const target = event.target;
+			if (!bubbleRef.value) return;
+			if (bubbleRef.value && bubbleRef.value.contains(target)) return;
+			if (target.closest(".i-celeste-link")) return;
+			emit("set-link-closed");
+		}
+		(0, vue.onMounted)(() => {
+			props.editor.on("selectionUpdate", () => {
+				if (props.editor.isActive("link") || props.showSetLinkFromToolbar) {
+					const attrs = props.editor.getAttributes("link");
+					href.value = attrs.href || "";
+					openInNewTab.value = attrs.target === "_blank";
+				} else reset();
+			});
+			document.addEventListener("click", handleClickOutside);
+		});
+		(0, vue.onUnmounted)(() => {
+			document.removeEventListener("click", handleClickOutside);
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(BubbleMenu), {
+				"should-show": () => true,
+				editor: _ctx.editor,
+				options: {
+					strategy: "fixed",
+					placement: "bottom",
+					offset: 12,
+					flip: {
+						padding: 20,
+						mainAxis: true,
+						crossAxis: true
+					},
+					shift: {
+						padding: 20,
+						mainAxis: true,
+						crossAxis: true
+					}
+				}
+			}, {
+				default: (0, vue.withCtx)(() => [showBubble.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					ref_key: "bubbleRef",
+					ref: bubbleRef,
+					class: "link-bubble"
+				}, [editing.value || props.showSetLinkFromToolbar && isTextSelected() ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createVNode)(require_text_input.text_input_default, {
+					modelValue: href.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => href.value = $event),
+					type: "url",
+					size: "xs",
+					placeholder: "https://example.com",
+					class: "link-input",
+					onKeydown: [(0, vue.withKeys)(applyLink, ["enter"]), (0, vue.withKeys)(reset, ["esc"])]
+				}, {
+					leadingNode: (0, vue.withCtx)(() => [(0, vue.createVNode)(require_text_input_affix.text_input_affix_default, null, {
+						default: (0, vue.withCtx)(() => _cache[2] || (_cache[2] = [(0, vue.createElementVNode)("i", { class: "i-celeste-link" }, null, -1)])),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue"]), (0, vue.createVNode)(require_button.button_default, {
+					type: "button",
+					intent: "neutral",
+					size: "xs",
+					variant: "stroke",
+					disabled: !isValidUrl.value,
+					onClick: applyLink
+				}, {
+					default: (0, vue.withCtx)(() => _cache[3] || (_cache[3] = [(0, vue.createTextVNode)(" Set link ")])),
+					_: 1
+				}, 8, ["disabled"])]), (0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createVNode)(require_label.label_default, { for: "open-in-new-tab" }, {
+					default: (0, vue.withCtx)(() => _cache[4] || (_cache[4] = [(0, vue.createTextVNode)(" Open in new tab ")])),
+					_: 1
+				}), (0, vue.createVNode)(require_switch.switch_default, {
+					id: "open-in-new-tab",
+					checked: openInNewTab.value,
+					"onUpdate:checked": _cache[1] || (_cache[1] = ($event) => openInNewTab.value = $event)
+				}, null, 8, ["checked"])])])) : props.editor.isActive("link") ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [
+					(0, vue.createVNode)(require_link_button.link_button_default, {
+						href: _ctx.editor.getAttributes("link").href,
+						target: _ctx.editor.getAttributes("link").target
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(truncateMiddleUrl(_ctx.editor.getAttributes("link").href)), 1)]),
+						_: 1
+					}, 8, ["href", "target"]),
+					_cache[5] || (_cache[5] = (0, vue.createElementVNode)("div", { class: "divider" }, null, -1)),
+					(0, vue.createVNode)(require_compact_button.compact_button_default, {
+						type: "button",
+						icon: "i-celeste-edit-line",
+						size: "lg",
+						variant: "ghost",
+						onClick: startEdit
+					}),
+					(0, vue.createVNode)(require_compact_button.compact_button_default, {
+						type: "button",
+						icon: "i-celeste-delete-bin-line",
+						size: "lg",
+						variant: "ghost",
+						onClick: removeLink
+					})
+				])) : (0, vue.createCommentVNode)("", true)], 512)) : (0, vue.createCommentVNode)("", true)]),
+				_: 1
+			}, 8, ["editor"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/rich-editor/link-bubble.vue
+var link_bubble_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(link_bubble_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d757fd2c"]]);
+//#endregion
+Object.defineProperty(exports, "link_bubble_default", {
+	enumerable: true,
+	get: function() {
+		return link_bubble_default;
+	}
+});

package/dist/cjs/chunks/link-button.cjs

@@ -0,0 +1,48 @@
+const require_dist = require("./dist.cjs");
+const require_clsx = require("./clsx.cjs");
+const require__plugin_vue_export_helper = require("./_plugin-vue_export-helper.cjs");
+let vue = require("vue");
+//#region src/components/button/link-button.vue?vue&type=script&setup=true&lang.ts
+var link_button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "link-button",
+	props: {
+		class: {},
+		size: { default: "md" },
+		intent: { default: "primary" },
+		underline: { type: Boolean },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: { default: "a" }
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_dist.O), {
+				as: _ctx.as,
+				disabled: _ctx.disabled,
+				"as-child": _ctx.asChild,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_clsx.clsx)("celeste-link-button", `celeste-link-button-${_ctx.intent}`, `celeste-link-button-${_ctx.size}`, _ctx.disabled && "celeste-link-button-disabled", _ctx.underline && "celeste-link-button-underline", props.class)),
+				role: _ctx.as === "a" ? "link" : "button"
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"disabled",
+				"as-child",
+				"class",
+				"role"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/button/link-button.vue
+var link_button_default = /* @__PURE__ */ require__plugin_vue_export_helper._plugin_vue_export_helper_default(link_button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-82b3b1ab"]]);
+//#endregion
+Object.defineProperty(exports, "link_button_default", {
+	enumerable: true,
+	get: function() {
+		return link_button_default;
+	}
+});