@youcan/celeste 0.6.97 → 0.6.99

package/dist/es/chunks/hint-text.js

@@ -0,0 +1,31 @@
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/hint-text/hint-text.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = { key: 1 };
+//#endregion
+//#region src/components/hint-text/hint-text.vue
+var hint_text_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "hint-text",
+	props: {
+		text: {},
+		icon: {},
+		class: {},
+		state: { default: "default" }
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: props.state === "error" ? "alert" : "note",
+				class: normalizeClass(unref(clsx)("celeste-hint-text", `celeste-hint-text-${_ctx.state}`, props.class))
+			}, [_ctx.icon ? (openBlock(), createElementBlock("i", {
+				key: 0,
+				class: normalizeClass(_ctx.icon)
+			}, null, 2)) : createCommentVNode("", true), _ctx.text ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-42c3df99"]]);
+//#endregion
+export { hint_text_default as t };

package/dist/es/chunks/hue-slider.js

@@ -0,0 +1,113 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { useUserPageSelection } from "../use-user-select.js";
+import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection } from "../color.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onUnmounted, openBlock, ref, useModel, useTemplateRef, watch } from "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"];
+//#endregion
+//#region src/components/color-picker/hue-slider.vue
+var hue_slider_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "hue-slider",
+	props: {
+		"modelValue": { default: 0 },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const hue = useModel(__props, "modelValue");
+		const pullDirection = ref();
+		const containerRef = useTemplateRef("slider-track");
+		const { preventPageUserSelect, allowPageUserSelect } = useUserPageSelection();
+		watch(hue, (newHue, oldHue) => {
+			if (newHue !== 0 && newHue - oldHue > 0) pullDirection.value = "right";
+			if (newHue !== 0 && newHue - oldHue < 0) pullDirection.value = "left";
+		});
+		const pointerLeft = computed(() => {
+			if (hue.value === 0 && pullDirection.value === "right") return "100%";
+			return `${hue.value * 100 / 360}%`;
+		});
+		const trackThumbBg = 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 } = getAbsolutePosition(container);
+			const { x: pageX } = 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 = 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);
+		}
+		onUnmounted(() => {
+			unbindEventListeners();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [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
+			}, [createElementVNode("div", {
+				class: "celeste-color-thumb",
+				style: normalizeStyle({
+					left: pointerLeft.value,
+					background: trackThumbBg.value
+				}),
+				role: "presentation"
+			}, null, 4)], 40, _hoisted_2)]);
+		};
+	}
+}), [["__scopeId", "data-v-69ac87ad"]]);
+//#endregion
+export { hue_slider_default as t };

package/dist/es/chunks/label.js

@@ -0,0 +1,58 @@
+import { U as Vh } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { useDelegatedProps } from "../use-delegated-props.js";
+import { t as tooltip_default } from "./tooltip.js";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "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"
+};
+//#endregion
+//#region src/components/label/label.vue
+var label_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ 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 = useDelegatedProps(props, "class");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Vh), mergeProps(unref(delegatedProps), {
+				"aria-required": _ctx.required,
+				"aria-disabled": _ctx.disabled,
+				class: unref(clsx)("celeste-label", props.class)
+			}), {
+				default: withCtx(() => [
+					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					renderSlot(_ctx.$slots, "button", { class: "celeste-label-button" }, void 0, true),
+					_ctx.sublabel ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.sublabel), 1)) : createCommentVNode("", true),
+					_ctx.information ? (openBlock(), createBlock(tooltip_default, {
+						key: 1,
+						title: _ctx.information
+					}, {
+						default: withCtx(() => _cache[0] || (_cache[0] = [createElementVNode("button", { class: "celeste-label-info" }, [createElementVNode("i", { class: "i-celeste-information-2-fill" })], -1)])),
+						_: 1
+					}, 8, ["title"])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"aria-required",
+				"aria-disabled",
+				"class"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-896f427f"]]);
+//#endregion
+export { label_default as t };

package/dist/es/chunks/link-bubble.js

@@ -0,0 +1,191 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as button_default } from "./button.js";
+import { t as compact_button_default } from "./compact-button.js";
+import { t as link_button_default } from "./link-button.js";
+import { t as text_input_affix_default } from "./text-input-affix.js";
+import { t as text_input_default } from "./text-input.js";
+import { t as label_default } from "./label.js";
+import { t as switch_default } from "./switch.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineAsyncComponent, defineComponent, nextTick, onMounted, onUnmounted, openBlock, ref, toDisplayString, unref, withCtx, withKeys } from "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"
+};
+//#endregion
+//#region src/components/rich-editor/link-bubble.vue
+var link_bubble_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ 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 = defineAsyncComponent(() => import("./menus.js").then((m) => m.BubbleMenu));
+		const href = ref("");
+		const openInNewTab = ref(false);
+		const editing = ref(false);
+		const isTextSelected = () => props.editor.state.selection.from !== props.editor.state.selection.to;
+		const showBubble = 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";
+			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 = 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 = 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");
+		}
+		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);
+		});
+		onUnmounted(() => {
+			document.removeEventListener("click", handleClickOutside);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(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: withCtx(() => [showBubble.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "bubbleRef",
+					ref: bubbleRef,
+					class: "link-bubble"
+				}, [editing.value || props.showSetLinkFromToolbar && isTextSelected() ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(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: [withKeys(applyLink, ["enter"]), withKeys(reset, ["esc"])]
+				}, {
+					leadingNode: withCtx(() => [createVNode(text_input_affix_default, null, {
+						default: withCtx(() => _cache[2] || (_cache[2] = [createElementVNode("i", { class: "i-celeste-link" }, null, -1)])),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue"]), createVNode(button_default, {
+					intent: "neutral",
+					size: "xs",
+					variant: "stroke",
+					disabled: !isValidUrl.value,
+					onClick: applyLink
+				}, {
+					default: withCtx(() => _cache[3] || (_cache[3] = [createTextVNode(" Set link ")])),
+					_: 1
+				}, 8, ["disabled"])]), createElementVNode("div", _hoisted_3, [createVNode(label_default, { for: "open-in-new-tab" }, {
+					default: withCtx(() => _cache[4] || (_cache[4] = [createTextVNode(" Open in new tab ")])),
+					_: 1
+				}), createVNode(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") ? (openBlock(), createElementBlock("div", _hoisted_4, [
+					createVNode(link_button_default, {
+						href: _ctx.editor.getAttributes("link").href,
+						target: _ctx.editor.getAttributes("link").target
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(truncateMiddleUrl(_ctx.editor.getAttributes("link").href)), 1)]),
+						_: 1
+					}, 8, ["href", "target"]),
+					_cache[5] || (_cache[5] = createElementVNode("div", { class: "divider" }, null, -1)),
+					createVNode(compact_button_default, {
+						icon: "i-celeste-edit-line",
+						size: "lg",
+						variant: "ghost",
+						onClick: startEdit
+					}),
+					createVNode(compact_button_default, {
+						icon: "i-celeste-delete-bin-line",
+						size: "lg",
+						variant: "ghost",
+						onClick: removeLink
+					})
+				])) : createCommentVNode("", true)], 512)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["editor"]);
+		};
+	}
+}), [["__scopeId", "data-v-ec88b8f1"]]);
+//#endregion
+export { link_bubble_default as t };

package/dist/es/chunks/link-button.js

@@ -0,0 +1,41 @@
+import { D as O } from "./dist.js";
+import { t as clsx } from "./clsx.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+//#endregion
+//#region src/components/button/link-button.vue
+var link_button_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ 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 openBlock(), createBlock(unref(O), {
+				as: _ctx.as,
+				disabled: _ctx.disabled,
+				"as-child": _ctx.asChild,
+				class: normalizeClass(unref(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: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, [
+				"as",
+				"disabled",
+				"as-child",
+				"class",
+				"role"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-82b3b1ab"]]);
+//#endregion
+export { link_button_default as t };