ablok-components 0.3.145 → 0.3.146

package/dist/components/molecules/rte-editor/rte-editor.vue_vue_type_script_setup_true_lang.js

@@ -4,17 +4,17 @@ import { Teleport as t, createBlock as n, createCommentVNode as r, createElement
 var g = {
 	key: 0,
 	class: "rte-editor__controls mb-2"
-}, _ = ["disabled"], v = ["disabled"], y = { class: "btn-group" }, b = ["disabled"], x = ["disabled"], S = { class: "btn-group" }, C = { class: "dropdown" }, w = {
+}, _ = ["disabled"], v = ["disabled"], y = { class: "btn-group" }, b = ["disabled"], x = ["disabled"], S = ["disabled"], C = { class: "btn-group" }, w = { class: "dropdown" }, T = {
 	class: "btn dropdown-toggle btn-light",
 	"data-bs-toggle": "dropdown",
 	role: "button",
 	type: "button"
-}, T = { class: "dropdown-menu" }, E = { class: "dropdown" }, D = {
+}, E = { class: "dropdown-menu" }, D = { class: "dropdown" }, O = {
 	class: "btn dropdown-toggle btn-light",
 	"data-bs-toggle": "dropdown",
 	role: "button",
 	type: "button"
-}, O = { class: "dropdown-menu" }, k = { class: "btn-group" }, A = ["disabled"], j = ["disabled"], M = ["title"], N = /*@__PURE__*/ s({
+}, k = { class: "dropdown-menu" }, A = { class: "btn-group" }, j = ["disabled"], M = ["disabled"], N = ["title"], P = /*@__PURE__*/ s({
 	inheritAttrs: !1,
 	__name: "rte-editor",
 	props: {
@@ -36,22 +36,21 @@ var g = {
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(s, { emit: N }) {
-		let P = s, F = N, I = f(!1), L = f(!1), R = m(void 0), z = m(null);
+	setup(s, { emit: P }) {
+		let F = s, I = P, L = f(!1), R = f(!1), z = m(void 0), B = m(null);
 		u(async () => {
-			let [{ Editor: e, mergeAttributes: t }, { EditorContent: n }, { default: r }, { default: i }, { default: a }, { default: o }, { default: s }] = await Promise.all([
+			let [{ Editor: e, Mark: t, mergeAttributes: n }, { EditorContent: r }, { default: i }, { default: a }, { default: o }, { default: s }] = await Promise.all([
 				import("@tiptap/core"),
 				import("@tiptap/vue-3"),
-				import("@tiptap/extension-highlight"),
 				import("@tiptap/extension-text-align"),
 				import("@tiptap/extension-link"),
 				import("@tiptap/starter-kit"),
 				import("@tiptap/extension-bold")
 			]);
-			z.value = n, R.value = new e({
-				content: P.modelValue,
+			B.value = r, z.value = new e({
+				content: F.modelValue,
 				onUpdate: () => {
-					F("update:modelValue", R.value?.getHTML());
+					I("update:modelValue", z.value?.getHTML());
 				},
 				extensions: [
 					o.configure({
@@ -68,13 +67,26 @@ var g = {
 						renderHTML({ HTMLAttributes: e }) {
 							return [
 								"strong",
-								t(this.options.HTMLAttributes, e),
+								n(this.options.HTMLAttributes, e),
 								0
 							];
 						}
 					}),
 					i.configure({ types: ["heading", "paragraph"] }),
-					r,
+					t.create({
+						name: "gradientText",
+						inclusive: !0,
+						parseHTML() {
+							return [{ tag: "span[class~=\"gradient-text\"]" }];
+						},
+						renderHTML({ HTMLAttributes: e }) {
+							return [
+								"span",
+								n({ class: "gradient-text" }, e),
+								0
+							];
+						}
+					}),
 					a.extend({
 						addAttributes() {
 							return {
@@ -109,16 +121,16 @@ var g = {
 						},
 						renderHTML({ HTMLAttributes: e }) {
 							if (!e.href) {
-								let { href: n, target: r, rel: i, ...a } = e;
+								let { href: t, target: r, rel: i, ...a } = e;
 								return [
 									"a",
-									t(a),
+									n(a),
 									0
 								];
 							}
 							return [
 								"a",
-								t(this.options.HTMLAttributes, e),
+								n(this.options.HTMLAttributes, e),
 								0
 							];
 						}
@@ -135,90 +147,102 @@ var g = {
 				]
 			});
 		}), l(() => {
-			R.value?.destroy();
-		}), h(() => P.modelValue, (e, t) => {
-			if (R.value) {
-				if (R.value.getHTML() === e) return;
-				R.value.commands.setContent(e);
+			z.value?.destroy();
+		}), h(() => F.modelValue, (e, t) => {
+			if (z.value) {
+				if (z.value.getHTML() === e) return;
+				z.value.commands.setContent(e);
 			}
 		});
-		function B() {
-			let e = R.value?.getAttributes("link").href, t = window.prompt("URL", e);
+		function V() {
+			let e = z.value?.getAttributes("link").href, t = window.prompt("URL", e);
 			if (t !== null) {
 				if (t === "") {
-					R.value?.chain().focus().extendMarkRange("link").unsetLink().run();
+					z.value?.chain().focus().extendMarkRange("link").unsetLink().run();
 					return;
 				}
 				try {
-					R.value?.chain().focus().extendMarkRange("link").setLink({ href: t }).run();
+					z.value?.chain().focus().extendMarkRange("link").setLink({ href: t }).run();
 				} catch (e) {
 					alert(e.message);
 				}
 			}
 		}
-		let V = () => {
-			R.value?.commands.setContent(`<textarea>${R.value.getHTML()}</textarea>`), I.value = !0;
-		}, H = () => {
-			R.value?.commands.setContent(R.value.getText()), I.value = !1;
+		let H = () => {
+			z.value?.commands.setContent(`<textarea>${z.value.getHTML()}</textarea>`), L.value = !0;
+		}, U = () => {
+			z.value?.commands.setContent(z.value.getText()), L.value = !1;
 		};
 		return (l, u) => (d(), n(t, {
 			to: "body",
-			disabled: !L.value
+			disabled: !R.value
 		}, [a("div", { class: c([
-			L.value ? "" : l.$attrs.class,
+			R.value ? "" : l.$attrs.class,
 			"rte-editor",
-			{ "rte-editor--fullscreen": L.value }
-		]) }, [R.value ? (d(), i("div", g, [
-			I.value ? (d(), i("button", {
+			{ "rte-editor--fullscreen": R.value }
+		]) }, [z.value ? (d(), i("div", g, [
+			L.value ? (d(), i("button", {
 				key: 1,
 				class: "btn btn-sm btn-light is-active",
-				onClick: H,
-				disabled: !R.value.can().chain().focus().toggleCode().run(),
+				onClick: U,
+				disabled: !z.value.can().chain().focus().toggleCode().run(),
 				title: "Toggle Source"
 			}, [o(e, {
 				symbol: "source",
 				"base-path": s.iconBasePath
 			}, null, 8, ["base-path"])], 8, v)) : (d(), i("button", {
 				key: 0,
-				class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("code") }]),
-				onClick: V,
-				disabled: !R.value.can().chain().focus().toggleCode().run(),
+				class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("code") }]),
+				onClick: H,
+				disabled: !z.value.can().chain().focus().toggleCode().run(),
 				title: "Toggle Source"
 			}, [o(e, {
 				symbol: "source",
 				"base-path": s.iconBasePath
 			}, null, 8, ["base-path"])], 10, _)),
-			a("div", y, [a("button", {
-				class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("bold") }]),
-				onClick: u[0] ||= (e) => R.value?.chain().focus().toggleBold().run(),
-				disabled: !R.value.can().chain().focus().toggleBold().run(),
-				title: "Toggle Bold"
-			}, [o(e, {
-				symbol: "bold",
-				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])], 10, b), a("button", {
-				class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("italic") }]),
-				onClick: u[1] ||= (e) => R.value?.chain().focus().toggleItalic().run(),
-				disabled: !R.value.can().chain().focus().toggleItalic().run(),
-				title: "Toggle Italic"
-			}, [o(e, {
-				symbol: "italic",
-				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])], 10, x)]),
-			a("div", S, [
-				a("div", C, [a("button", w, [R.value.isActive("heading", { level: 1 }) ? (d(), n(e, {
+			a("div", y, [
+				a("button", {
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("bold") }]),
+					onClick: u[0] ||= (e) => z.value?.chain().focus().toggleBold().run(),
+					disabled: !z.value.can().chain().focus().toggleBold().run(),
+					title: "Toggle Bold"
+				}, [o(e, {
+					symbol: "bold",
+					"base-path": s.iconBasePath
+				}, null, 8, ["base-path"])], 10, b),
+				a("button", {
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("italic") }]),
+					onClick: u[1] ||= (e) => z.value?.chain().focus().toggleItalic().run(),
+					disabled: !z.value.can().chain().focus().toggleItalic().run(),
+					title: "Toggle Italic"
+				}, [o(e, {
+					symbol: "italic",
+					"base-path": s.iconBasePath
+				}, null, 8, ["base-path"])], 10, x),
+				a("button", {
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("gradientText") }]),
+					onClick: u[2] ||= (e) => z.value?.chain().focus().toggleMark("gradientText").run(),
+					disabled: !z.value.can().chain().focus().toggleMark("gradientText").run(),
+					title: "Toggle Gradient Text"
+				}, [o(e, {
+					symbol: "highlight",
+					"base-path": s.iconBasePath
+				}, null, 8, ["base-path"])], 10, S)
+			]),
+			a("div", C, [
+				a("div", w, [a("button", T, [z.value.isActive("heading", { level: 1 }) ? (d(), n(e, {
 					key: 0,
 					symbol: "h1",
 					"base-path": s.iconBasePath
-				}, null, 8, ["base-path"])) : R.value.isActive("heading", { level: 2 }) ? (d(), n(e, {
+				}, null, 8, ["base-path"])) : z.value.isActive("heading", { level: 2 }) ? (d(), n(e, {
 					key: 1,
 					symbol: "h2",
 					"base-path": s.iconBasePath
-				}, null, 8, ["base-path"])) : R.value.isActive("heading", { level: 3 }) ? (d(), n(e, {
+				}, null, 8, ["base-path"])) : z.value.isActive("heading", { level: 3 }) ? (d(), n(e, {
 					key: 2,
 					symbol: "h3",
 					"base-path": s.iconBasePath
-				}, null, 8, ["base-path"])) : R.value.isActive("heading", { level: 4 }) ? (d(), n(e, {
+				}, null, 8, ["base-path"])) : z.value.isActive("heading", { level: 4 }) ? (d(), n(e, {
 					key: 3,
 					symbol: "h4",
 					"base-path": s.iconBasePath
@@ -226,34 +250,34 @@ var g = {
 					key: 4,
 					symbol: "headline",
 					"base-path": s.iconBasePath
-				}, null, 8, ["base-path"]))]), a("ul", T, [
+				}, null, 8, ["base-path"]))]), a("ul", E, [
 					a("li", null, [a("button", {
-						class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("heading", { level: 1 }) }]),
-						onClick: u[2] ||= (e) => R.value?.chain().focus().setHeading({ level: 1 }).run(),
+						class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("heading", { level: 1 }) }]),
+						onClick: u[3] ||= (e) => z.value?.chain().focus().setHeading({ level: 1 }).run(),
 						title: "Set Heading 1"
 					}, [o(e, {
 						symbol: "h1",
 						"base-path": s.iconBasePath
 					}, null, 8, ["base-path"])], 2)]),
 					a("li", null, [a("button", {
-						class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("heading", { level: 2 }) }]),
-						onClick: u[3] ||= (e) => R.value?.chain().focus().setHeading({ level: 2 }).run(),
+						class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("heading", { level: 2 }) }]),
+						onClick: u[4] ||= (e) => z.value?.chain().focus().setHeading({ level: 2 }).run(),
 						title: "Set Heading 2"
 					}, [o(e, {
 						symbol: "h2",
 						"base-path": s.iconBasePath
 					}, null, 8, ["base-path"])], 2)]),
 					a("li", null, [a("button", {
-						class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("heading", { level: 3 }) }]),
-						onClick: u[4] ||= (e) => R.value?.chain().focus().setHeading({ level: 3 }).run(),
+						class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("heading", { level: 3 }) }]),
+						onClick: u[5] ||= (e) => z.value?.chain().focus().setHeading({ level: 3 }).run(),
 						title: "Set Heading 3"
 					}, [o(e, {
 						symbol: "h3",
 						"base-path": s.iconBasePath
 					}, null, 8, ["base-path"])], 2)]),
 					a("li", null, [a("button", {
-						class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("heading", { level: 4 }) }]),
-						onClick: u[5] ||= (e) => R.value?.chain().focus().setHeading({ level: 4 }).run(),
+						class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("heading", { level: 4 }) }]),
+						onClick: u[6] ||= (e) => z.value?.chain().focus().setHeading({ level: 4 }).run(),
 						title: "Set Heading 4"
 					}, [o(e, {
 						symbol: "h4",
@@ -261,39 +285,39 @@ var g = {
 					}, null, 8, ["base-path"])], 2)])
 				])]),
 				a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("paragraph") }]),
-					onClick: u[6] ||= (e) => R.value?.chain().focus().setParagraph().run(),
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("paragraph") }]),
+					onClick: u[7] ||= (e) => z.value?.chain().focus().setParagraph().run(),
 					title: "Set Paragraph"
 				}, [o(e, {
 					symbol: "paragraph",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2),
 				a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("bulletList") }]),
-					onClick: u[7] ||= (e) => R.value?.chain().focus().toggleBulletList().run(),
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("bulletList") }]),
+					onClick: u[8] ||= (e) => z.value?.chain().focus().toggleBulletList().run(),
 					title: "Toggle Bullet List"
 				}, [o(e, {
 					symbol: "list",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2),
 				a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("orderedList") }]),
-					onClick: u[8] ||= (e) => R.value?.chain().focus().toggleOrderedList().run(),
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("orderedList") }]),
+					onClick: u[9] ||= (e) => z.value?.chain().focus().toggleOrderedList().run(),
 					title: "Toggle Ordered List"
 				}, [o(e, {
 					symbol: "ordered-list",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2)
 			]),
-			a("div", E, [a("button", D, [R.value.isActive({ textAlign: "center" }) ? (d(), n(e, {
+			a("div", D, [a("button", O, [z.value.isActive({ textAlign: "center" }) ? (d(), n(e, {
 				key: 0,
 				symbol: "align-center",
 				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])) : R.value.isActive({ textAlign: "left" }) ? (d(), n(e, {
+			}, null, 8, ["base-path"])) : z.value.isActive({ textAlign: "left" }) ? (d(), n(e, {
 				key: 1,
 				symbol: "align-left",
 				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])) : R.value.isActive({ textAlign: "right" }) ? (d(), n(e, {
+			}, null, 8, ["base-path"])) : z.value.isActive({ textAlign: "right" }) ? (d(), n(e, {
 				key: 2,
 				symbol: "align-right",
 				"base-path": s.iconBasePath
@@ -301,84 +325,84 @@ var g = {
 				key: 3,
 				symbol: "align-justify",
 				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"]))]), a("ul", O, [
+			}, null, 8, ["base-path"]))]), a("ul", k, [
 				a("li", null, [a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive({ textAlign: "left" }) }]),
-					onClick: u[9] ||= (e) => R.value?.chain().focus().setTextAlign("left").run()
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive({ textAlign: "left" }) }]),
+					onClick: u[10] ||= (e) => z.value?.chain().focus().setTextAlign("left").run()
 				}, [o(e, {
 					symbol: "align-left",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2)]),
 				a("li", null, [a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive({ textAlign: "center" }) }]),
-					onClick: u[10] ||= (e) => R.value?.chain().focus().setTextAlign("center").run()
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive({ textAlign: "center" }) }]),
+					onClick: u[11] ||= (e) => z.value?.chain().focus().setTextAlign("center").run()
 				}, [o(e, {
 					symbol: "align-center",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2)]),
 				a("li", null, [a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive({ textAlign: "right" }) }]),
-					onClick: u[11] ||= (e) => R.value?.chain().focus().setTextAlign("right").run()
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive({ textAlign: "right" }) }]),
+					onClick: u[12] ||= (e) => z.value?.chain().focus().setTextAlign("right").run()
 				}, [o(e, {
 					symbol: "align-right",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2)]),
 				a("li", null, [a("button", {
-					class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive({ textAlign: "pretty" }) }]),
-					onClick: u[12] ||= (e) => R.value?.chain().focus().setTextAlign("right").run()
+					class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive({ textAlign: "pretty" }) }]),
+					onClick: u[13] ||= (e) => z.value?.chain().focus().setTextAlign("right").run()
 				}, [o(e, {
 					symbol: "align-justify",
 					"base-path": s.iconBasePath
 				}, null, 8, ["base-path"])], 2)])
 			])]),
-			R.value.isActive("link") ? (d(), i("button", {
+			z.value.isActive("link") ? (d(), i("button", {
 				key: 3,
-				class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("link") }]),
-				onClick: u[13] ||= (e) => R.value.chain().focus().unsetLink().run(),
+				class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("link") }]),
+				onClick: u[14] ||= (e) => z.value.chain().focus().unsetLink().run(),
 				title: "Unset Link"
 			}, [o(e, {
 				symbol: "unlink",
 				"base-path": s.iconBasePath
 			}, null, 8, ["base-path"])], 2)) : (d(), i("button", {
 				key: 2,
-				class: c(["btn btn-sm btn-light", { "is-active": R.value.isActive("link") }]),
-				onClick: B,
+				class: c(["btn btn-sm btn-light", { "is-active": z.value.isActive("link") }]),
+				onClick: V,
 				title: "Set Link"
 			}, [o(e, {
 				symbol: "link",
 				"base-path": s.iconBasePath
 			}, null, 8, ["base-path"])], 2)),
-			a("div", k, [a("button", {
+			a("div", A, [a("button", {
 				class: "btn btn-sm btn-light",
-				onClick: u[14] ||= (e) => R.value?.chain().focus().undo().run(),
-				disabled: !R.value.can().chain().focus().undo().run(),
+				onClick: u[15] ||= (e) => z.value?.chain().focus().undo().run(),
+				disabled: !z.value.can().chain().focus().undo().run(),
 				title: "Undo"
 			}, [o(e, {
 				symbol: "undo",
 				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])], 8, A), a("button", {
+			}, null, 8, ["base-path"])], 8, j), a("button", {
 				class: "btn btn-sm btn-light",
-				onClick: u[15] ||= (e) => R.value?.chain().focus().redo().run(),
-				disabled: !R.value.can().chain().focus().redo().run(),
+				onClick: u[16] ||= (e) => z.value?.chain().focus().redo().run(),
+				disabled: !z.value.can().chain().focus().redo().run(),
 				title: "Redo"
 			}, [o(e, {
 				symbol: "redo",
 				"base-path": s.iconBasePath
-			}, null, 8, ["base-path"])], 8, j)]),
+			}, null, 8, ["base-path"])], 8, M)]),
 			s.allowFullscreen ? (d(), i("button", {
 				key: 4,
 				class: "btn btn-sm btn-light ms-auto",
-				onClick: u[16] ||= (e) => L.value = !L.value,
-				title: L.value ? "Exit Fullscreen" : "Fullscreen"
+				onClick: u[17] ||= (e) => R.value = !R.value,
+				title: R.value ? "Exit Fullscreen" : "Fullscreen"
 			}, [o(e, {
-				symbol: L.value ? "close" : "maximize",
+				symbol: R.value ? "close" : "maximize",
 				"base-path": s.iconBasePath
-			}, null, 8, ["symbol", "base-path"])], 8, M)) : r("", !0)
-		])) : r("", !0), (d(), n(p(z.value), {
+			}, null, 8, ["symbol", "base-path"])], 8, N)) : r("", !0)
+		])) : r("", !0), (d(), n(p(B.value), {
 			class: "rte-editor__content",
-			editor: R.value
+			editor: z.value
 		}, null, 8, ["editor"]))], 2)], 8, ["disabled"]));
 	}
 });
 //#endregion
-export { N as default };
+export { P as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.145",
+  "version": "0.3.146",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",