morya-ui 0.3.8 → 0.4.0

package/dist/typography/index.js

@@ -0,0 +1,466 @@
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { t as n } from "../vnode-PJWBO7_h.js";
+import { t as r } from "../Textarea-BBvpgIQL.js";
+import { n as i } from "../locale-Dnk0UIie.js";
+import "./style.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, openBlock as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useAttrs as w, useSlots as T, watch as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
+//#region src/components/Typography/decoration.ts
+function A(e) {
+	return {
+		"m-typography--secondary": e.type === "secondary",
+		"m-typography--success": e.type === "success",
+		"m-typography--warning": e.type === "warning",
+		"m-typography--danger": e.type === "danger",
+		"m-typography--code": !!e.code,
+		"m-typography--delete": !!e.delete,
+		"m-typography--mark": !!e.mark,
+		"m-typography--underline": !!e.underline,
+		"m-typography--strong": !!e.strong,
+		"m-typography--italic": !!e.italic,
+		"m-typography--disabled": !!e.disabled
+	};
+}
+function j(e) {
+	return {
+		"m-typography--secondary": e === "secondary",
+		"m-typography--success": e === "success",
+		"m-typography--warning": e === "warning",
+		"m-typography--danger": e === "danger"
+	};
+}
+//#endregion
+//#region src/components/Typography/behavior.ts
+function M(e) {
+	if (!e) return null;
+	if (e === !0) return {
+		rows: 1,
+		expandable: !1
+	};
+	let t = e;
+	return {
+		rows: t.rows && t.rows > 0 ? Math.floor(t.rows) : 1,
+		expandable: !!t.expandable,
+		tooltip: t.tooltip,
+		suffix: t.suffix
+	};
+}
+function N(e) {
+	return e ? e === !0 ? {} : e : null;
+}
+function P(e) {
+	return e ? e === !0 ? {} : e : null;
+}
+function F(e) {
+	return n(e).map((e) => typeof e.children == "string" ? e.children : "").join("").trim();
+}
+async function I(e) {
+	let t = typeof navigator < "u" ? navigator.clipboard : void 0;
+	if (t?.writeText) {
+		await t.writeText(e);
+		return;
+	}
+	if (typeof document > "u") return;
+	let n = document.createElement("textarea");
+	n.value = e, n.setAttribute("readonly", ""), n.style.position = "fixed", n.style.opacity = "0", document.body.appendChild(n), n.select(), document.execCommand?.("copy"), document.body.removeChild(n);
+}
+function L(e) {
+	let t = i(), n = o(() => M(e.props().ellipsis)), r = o(() => N(e.props().copyable)), a = o(() => P(e.props().editable)), s = y(!1), c = y(!1), l = y(!1), u = y(""), d = y(null), f = null;
+	E(a, (t) => {
+		t?.editing && !l.value && (u.value = e.text(), l.value = !0);
+	}, { immediate: !0 });
+	let p = o(() => n.value?.rows ?? 1), m = o(() => !!n.value && p.value > 1), h = o(() => m.value && !s.value), g = o(() => {
+		if (h.value) return { "--m-typography-rows": String(p.value) };
+	}), v = o(() => !!n.value?.expandable && m.value), b = o(() => {
+		let e = r.value?.tooltips;
+		return c.value ? e?.[1] ?? t.value.copied ?? "Copied" : e?.[0] ?? t.value.copy ?? "Copy";
+	}), x = o(() => a.value?.tooltip ?? t.value.edit ?? "Edit"), S = o(() => t.value.cancelEdit ?? "Cancel edit");
+	function C() {
+		s.value = !s.value;
+	}
+	async function w() {
+		let t = r.value;
+		if (!t) return;
+		let n = t.text ?? e.text(), i = t.format ? t.format(n) : n;
+		try {
+			await I(i), c.value = !0, t.onCopy?.(i), f && clearTimeout(f), f = setTimeout(() => {
+				c.value = !1;
+			}, 1500);
+		} catch {
+			c.value = !1;
+		}
+	}
+	function T() {
+		!a.value || e.props().disabled || (u.value = e.text(), d.value = null, l.value = !0);
+	}
+	function D() {
+		let e = a.value;
+		if (!e || !l.value) return;
+		let t = u.value, n = e.onChange?.(t);
+		if (n !== !1) {
+			if (typeof n == "string") {
+				d.value = n;
+				return;
+			}
+			d.value = null, l.value = !1;
+		}
+	}
+	function O() {
+		l.value = !1, d.value = null;
+	}
+	return _(() => {
+		f && clearTimeout(f);
+	}), {
+		ellipsis: n,
+		copyable: r,
+		editable: a,
+		expanded: s,
+		copied: c,
+		editing: l,
+		draft: u,
+		error: d,
+		rowCount: p,
+		isMultiline: m,
+		isClamped: h,
+		contentStyle: g,
+		showExpandAction: v,
+		copyLabel: b,
+		editLabel: x,
+		cancelEditLabel: S,
+		toggleExpand: C,
+		copy: w,
+		startEdit: T,
+		commitEdit: D,
+		cancelEdit: O
+	};
+}
+//#endregion
+//#region src/components/Typography/TypographyContent.vue?vue&type=script&setup=true&lang.ts
+var R = ["title"], z = {
+	key: 0,
+	class: "m-typography__ellipsis-suffix",
+	"aria-hidden": "true"
+}, B = ["aria-expanded"], V = ["title", "aria-label"], H = ["title", "aria-label"], U = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MTypographyContent",
+	__name: "TypographyContent",
+	props: {
+		decorations: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let n = e, f = T(), p = i(), _ = L({
+			props: () => ({
+				...n.decorations,
+				disabled: n.disabled
+			}),
+			text: () => F(f.default?.())
+		}), x = y(null);
+		E(() => _.editing.value, async (e) => {
+			e && (await m(), x.value?.focus());
+		});
+		let w = o(() => ({
+			"m-typography__content": !0,
+			"m-typography--ellipsis": !!_.ellipsis.value && !_.isMultiline.value,
+			"m-typography--ellipsis-multiline": _.isMultiline.value,
+			"m-typography--ellipsis-expanded": _.expanded.value
+		})), D = o(() => !!_.ellipsis.value?.suffix && _.isClamped.value), A = o(() => _.editable.value?.autoSize), j = o(() => _.error.value ? "error" : void 0);
+		return (e, i) => C(_).editing.value ? (v(), s(r, {
+			key: 0,
+			ref_key: "editorRef",
+			ref: x,
+			modelValue: C(_).draft.value,
+			"onUpdate:modelValue": i[0] ||= (e) => C(_).draft.value = e,
+			class: "m-typography__editor",
+			autosize: A.value,
+			maxlength: C(_).editable.value?.maxLength,
+			status: j.value,
+			rows: 2,
+			onBlur: i[1] ||= (e) => C(_).commitEdit(),
+			onKeydown: [i[2] ||= O(k((e) => C(_).commitEdit(), ["exact", "prevent"]), ["enter"]), i[3] ||= O((e) => C(_).cancelEdit(), ["esc"])]
+		}, null, 8, [
+			"modelValue",
+			"autosize",
+			"maxlength",
+			"status"
+		])) : (v(), l(a, { key: 1 }, [
+			u("span", {
+				class: h(["m-typography__content", w.value]),
+				style: g(C(_).contentStyle.value),
+				title: C(_).ellipsis.value?.tooltip
+			}, [b(e.$slots, "default")], 14, R),
+			D.value ? (v(), l("span", z, S(C(_).ellipsis.value?.suffix), 1)) : c("", !0),
+			C(_).showExpandAction.value ? (v(), l("button", {
+				key: 1,
+				type: "button",
+				class: "m-typography__action m-typography__expand",
+				"aria-expanded": C(_).expanded.value,
+				onClick: i[4] ||= (e) => C(_).toggleExpand()
+			}, S(C(_).expanded.value ? C(p).collapse ?? "Collapse" : C(p).expand ?? "Expand"), 9, B)) : c("", !0),
+			C(_).copyable.value ? (v(), l("button", {
+				key: 2,
+				type: "button",
+				class: "m-typography__action m-typography__copy",
+				title: C(_).copyLabel.value,
+				"aria-label": C(_).copyLabel.value,
+				onClick: i[5] ||= (e) => C(_).copy()
+			}, [d(t, { name: C(_).copied.value ? "check" : "copy" }, null, 8, ["name"])], 8, V)) : c("", !0),
+			C(_).editable.value && !n.disabled ? (v(), l("button", {
+				key: 3,
+				type: "button",
+				class: "m-typography__action m-typography__edit",
+				title: C(_).editLabel.value,
+				"aria-label": C(_).editLabel.value,
+				onClick: i[6] ||= (e) => C(_).startEdit()
+			}, [d(t, { name: "edit" })], 8, H)) : c("", !0)
+		], 64));
+	}
+}), W = [
+	"href",
+	"target",
+	"rel",
+	"aria-disabled",
+	"tabindex"
+], G = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MLink",
+	__name: "Link",
+	props: {
+		pt: {},
+		href: {},
+		target: {},
+		type: {},
+		underline: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		copyable: { type: [Boolean, Object] }
+	},
+	setup(t) {
+		let n = t, r = w(), { rootAttrs: i } = e(r, () => n.pt), a = o(() => [
+			"m-typography",
+			"m-typography-link",
+			j(n.type),
+			{
+				"m-typography--underline": n.underline,
+				"m-typography--disabled": n.disabled
+			}
+		]), s = o(() => n.target === "_blank" ? "noopener noreferrer" : void 0);
+		function c(e) {
+			n.disabled && (e.preventDefault(), e.stopPropagation());
+		}
+		return (e, r) => (v(), l("a", p(C(i), {
+			class: a.value,
+			href: t.disabled ? void 0 : t.href,
+			target: t.disabled ? void 0 : t.target,
+			rel: t.disabled ? void 0 : s.value,
+			"aria-disabled": t.disabled || void 0,
+			tabindex: t.disabled ? -1 : void 0,
+			onClick: c
+		}), [d(U, {
+			decorations: { copyable: n.copyable },
+			disabled: n.disabled
+		}, {
+			default: D(() => [b(e.$slots, "default")]),
+			_: 3
+		}, 8, ["decorations", "disabled"])], 16, W));
+	}
+}), K = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MParagraph",
+	__name: "Paragraph",
+	props: {
+		pt: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		spacing: {
+			type: Boolean,
+			default: !0
+		},
+		type: {},
+		code: {
+			type: Boolean,
+			default: !1
+		},
+		delete: {
+			type: Boolean,
+			default: !1
+		},
+		mark: {
+			type: Boolean,
+			default: !1
+		},
+		underline: {
+			type: Boolean,
+			default: !1
+		},
+		strong: {
+			type: Boolean,
+			default: !1
+		},
+		italic: {
+			type: Boolean,
+			default: !1
+		},
+		ellipsis: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		copyable: { type: [Boolean, Object] },
+		editable: { type: [Boolean, Object] }
+	},
+	setup(t) {
+		let n = t, r = w(), { rootAttrs: i } = e(r, () => n.pt), a = o(() => [
+			"m-typography",
+			"m-typography-paragraph",
+			A(n),
+			{ "m-typography-paragraph--spacing": n.spacing }
+		]);
+		return (e, t) => (v(), l("p", p(C(i), { class: a.value }), [d(U, {
+			decorations: n,
+			disabled: n.disabled
+		}, {
+			default: D(() => [b(e.$slots, "default")]),
+			_: 3
+		}, 8, ["disabled"])], 16));
+	}
+}), q = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MText",
+	__name: "Text",
+	props: {
+		pt: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		type: {},
+		code: {
+			type: Boolean,
+			default: !1
+		},
+		delete: {
+			type: Boolean,
+			default: !1
+		},
+		mark: {
+			type: Boolean,
+			default: !1
+		},
+		underline: {
+			type: Boolean,
+			default: !1
+		},
+		strong: {
+			type: Boolean,
+			default: !1
+		},
+		italic: {
+			type: Boolean,
+			default: !1
+		},
+		ellipsis: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		copyable: { type: [Boolean, Object] },
+		editable: { type: [Boolean, Object] }
+	},
+	setup(t) {
+		let n = t, r = w(), { rootAttrs: i } = e(r, () => n.pt), a = o(() => [
+			"m-typography",
+			"m-typography-text",
+			A(n)
+		]);
+		return (e, t) => (v(), l("span", p(C(i), { class: a.value }), [d(U, {
+			decorations: n,
+			disabled: n.disabled
+		}, {
+			default: D(() => [b(e.$slots, "default")]),
+			_: 3
+		}, 8, ["disabled"])], 16));
+	}
+}), J = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MTitle",
+	__name: "Title",
+	props: {
+		pt: {},
+		level: { default: 1 },
+		type: {},
+		code: {
+			type: Boolean,
+			default: !1
+		},
+		delete: {
+			type: Boolean,
+			default: !1
+		},
+		mark: {
+			type: Boolean,
+			default: !1
+		},
+		underline: {
+			type: Boolean,
+			default: !1
+		},
+		strong: {
+			type: Boolean,
+			default: !1
+		},
+		italic: {
+			type: Boolean,
+			default: !1
+		},
+		ellipsis: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		copyable: { type: [Boolean, Object] },
+		editable: { type: [Boolean, Object] }
+	},
+	setup(t) {
+		let n = t, r = w(), { rootAttrs: i } = e(r, () => n.pt), a = o(() => `h${n.level}`), c = o(() => [
+			"m-typography",
+			"m-typography-title",
+			`m-typography-title--h${n.level}`,
+			A(n)
+		]);
+		return (e, t) => (v(), s(x(a.value), p(C(i), { class: c.value }), {
+			default: D(() => [d(U, { decorations: n }, {
+				default: D(() => [b(e.$slots, "default")]),
+				_: 3
+			})]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), Y = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	name: "MTypography",
+	__name: "Typography",
+	props: { pt: {} },
+	setup(t) {
+		let n = t, r = w(), { rootAttrs: i } = e(r, () => n.pt), a = o(() => ["m-typography", "m-typography-root"]);
+		return (e, t) => (v(), l("article", p(C(i), { class: a.value }), [b(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+//#region src/components/Typography/index.ts
+Object.assign(Y, {
+	Title: J,
+	Text: q,
+	Paragraph: K,
+	Link: G
+});
+var X = Y;
+//#endregion
+export { G as MLink, K as MParagraph, q as MText, J as MTitle, Y as MTypography, X as default };