vue-stream-markdown 0.0.0-alpha.0

package/dist/code-block-C4D_QNTq.js

@@ -0,0 +1,408 @@
+import { t as CODE_PREVIEWERS } from "./previewers-Drlf7IQF.js";
+import { F as LANGUAGE_ALIAS, I as LANGUAGE_EXTENSIONS, L as LANGUAGE_ICONS, O as save, R as useControls, i as useMermaid, j as ICONS, l as useI18n, z as useContext } from "./composables-qhB1h_ed.js";
+import { t as button_default } from "./button-D8xx1WIP.js";
+import { t as modal_default } from "./modal-CuQR21UD.js";
+import { t as segmented_default } from "./segmented-BEtO1eyl.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRefs, unref, useModel, vShow, watch, withCtx, withDirectives } from "vue";
+import { useClipboard } from "@vueuse/core";
+
+//#region src/components/code-block/actions.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = { "data-stream-markdown": "actions" };
+var actions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "actions",
+	props: { actions: {
+		type: Array,
+		required: false,
+		default: () => []
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action) => {
+				return openBlock(), createBlock(button_default, {
+					key: action.key,
+					name: action.name,
+					icon: action.icon,
+					"icon-style": action.iconStyle,
+					options: action.options,
+					onClick: action.onClick
+				}, null, 8, [
+					"name",
+					"icon",
+					"icon-style",
+					"options",
+					"onClick"
+				]);
+			}), 128))]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/code-block/actions.vue
+var actions_default = actions_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/code-block/language-title.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = { "data-stream-markdown": "language-title" };
+const _hoisted_2$1 = {
+	key: 1,
+	"data-stream-markdown": "language-name"
+};
+var language_title_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "language-title",
+	props: {
+		icon: {
+			type: null,
+			required: false
+		},
+		language: {
+			type: String,
+			required: true
+		},
+		showIcon: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		showName: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", _hoisted_1$1, [__props.showIcon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), { key: 0 })) : createCommentVNode("v-if", true), __props.showName ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.language), 1)) : createCommentVNode("v-if", true)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/code-block/language-title.vue
+var language_title_default = language_title_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/code-block/preview-segmented.vue?vue&type=script&setup=true&lang.ts
+var preview_segmented_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "preview-segmented",
+	props: {
+		"mode": {
+			type: String,
+			required: false,
+			default: "source"
+		},
+		"modeModifiers": {},
+		"collapsed": {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		"collapsedModifiers": {}
+	},
+	emits: ["update:mode", "update:collapsed"],
+	setup(__props) {
+		const mode = useModel(__props, "mode");
+		const collapsed = useModel(__props, "collapsed");
+		const { t } = useI18n();
+		const SEGMENTED_OPTIONS = computed(() => [{
+			label: t("button.preview"),
+			value: "preview",
+			icon: ICONS.preview
+		}, {
+			label: t("button.source"),
+			value: "source",
+			icon: ICONS.code
+		}]);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(segmented_default, {
+				value: mode.value,
+				"onUpdate:value": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+				options: SEGMENTED_OPTIONS.value,
+				"button-style": { fontFamily: "var(--font-mono)" },
+				onChange: _cache[1] || (_cache[1] = () => collapsed.value = false)
+			}, null, 8, ["value", "options"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/code-block/preview-segmented.vue
+var preview_segmented_default = preview_segmented_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/code-block/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-collapsed"];
+const _hoisted_2 = { "data-stream-markdown": "code-block-header" };
+const _hoisted_3 = { key: 2 };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = { "data-stream-markdown": "code-block-content" };
+const _hoisted_6 = { key: 2 };
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "index",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		markdownParser: {
+			type: Object,
+			required: true
+		},
+		nodeRenderers: {
+			type: Object,
+			required: true
+		},
+		mediumZoom: {
+			type: Object,
+			required: true
+		},
+		indexKey: {
+			type: [Number, String],
+			required: true
+		},
+		getContainer: {
+			type: Function,
+			required: true
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false
+		},
+		previewers: {
+			type: [Boolean, Object],
+			required: false
+		},
+		shikiOptions: {
+			type: Object,
+			required: false
+		},
+		mermaidOptions: {
+			type: Object,
+			required: false
+		},
+		katexOptions: {
+			type: Object,
+			required: false
+		},
+		hardenOptions: {
+			type: Object,
+			required: false
+		},
+		codeOptions: {
+			type: Object,
+			required: false
+		},
+		imageOptions: {
+			type: Object,
+			required: false
+		},
+		isDark: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { controls, previewers } = toRefs(props);
+		const { t } = useI18n();
+		const { isControlEnabled } = useControls({ controls });
+		const { installed: hasMermaid } = useMermaid();
+		const CodeNode = defineAsyncComponent(() => import("./code-CP6mPwkq.js"));
+		const { onCopied } = useContext();
+		const { copy, copied } = useClipboard({ legacy: true });
+		const { saveMermaid } = useMermaid();
+		const collapsed = ref(false);
+		const fullscreen = ref(false);
+		const mode = ref("source");
+		const language = computed(() => {
+			const lang = props.node.lang;
+			if (!lang) return "plaintext";
+			if (LANGUAGE_ALIAS[lang]) return LANGUAGE_ALIAS[lang];
+			return lang;
+		});
+		const showLanguageIcon = computed(() => {
+			var _props$codeOptions;
+			return typeof ((_props$codeOptions = props.codeOptions) === null || _props$codeOptions === void 0 ? void 0 : _props$codeOptions.languageIcon) === "boolean" ? props.codeOptions.languageIcon : true;
+		});
+		const showLanguageName = computed(() => {
+			var _props$codeOptions2;
+			return typeof ((_props$codeOptions2 = props.codeOptions) === null || _props$codeOptions2 === void 0 ? void 0 : _props$codeOptions2.languageName) === "boolean" ? props.codeOptions.languageName : true;
+		});
+		const showLanguageTitle = computed(() => showLanguageIcon.value || showLanguageName.value);
+		const showCollapse = computed(() => isControlEnabled("code.collapse"));
+		const showCopy = computed(() => isControlEnabled("code.copy"));
+		const showDownload = computed(() => isControlEnabled("code.download"));
+		const showFullscreen = computed(() => isControlEnabled("code.fullscreen"));
+		const icon = computed(() => LANGUAGE_ICONS[language.value] || LANGUAGE_ICONS.text);
+		const previewable = computed(() => {
+			if (previewers.value === false) return false;
+			const mermaid = language.value === "mermaid" && hasMermaid.value;
+			const html = language.value === "html" && !props.node.loading;
+			if (typeof previewers.value === "object") {
+				const _mermaid = previewers.value.mermaid !== false && mermaid;
+				const _html = previewers.value.html !== false && html;
+				return _mermaid || _html;
+			}
+			return mermaid || html;
+		});
+		const PreviewComponent = computed(() => {
+			if (!previewers.value || typeof previewers.value === "boolean") return CODE_PREVIEWERS[language.value];
+			const data = previewers.value[language.value];
+			if (data === false) return CODE_PREVIEWERS[language.value];
+			if (data && typeof data !== "boolean") return data;
+			return CODE_PREVIEWERS[language.value];
+		});
+		const downloadOptions = computed(() => {
+			if (language.value !== "mermaid" || !hasMermaid.value) return [];
+			return [
+				{
+					label: "SVG",
+					value: "svg"
+				},
+				{
+					label: "PNG",
+					value: "png"
+				},
+				{
+					label: "MMD",
+					value: "code"
+				}
+			];
+		});
+		const actions = computed(() => {
+			return [
+				{
+					name: t("button.collapse"),
+					key: "collapse",
+					icon: ICONS.collapse,
+					iconStyle: {
+						transform: collapsed.value ? "rotate(180deg)" : void 0,
+						transition: "transform var(--default-transition-duration)"
+					},
+					visible: () => showCollapse.value,
+					onClick: () => collapsed.value = !collapsed.value
+				},
+				{
+					name: t("button.copy"),
+					key: "copy",
+					icon: copied.value ? ICONS.check : ICONS.copy,
+					visible: () => showCopy.value,
+					onClick: () => {
+						if (!props.node.value) return;
+						copy(props.node.value);
+						onCopied(props.node.value);
+					}
+				},
+				{
+					name: t("button.download"),
+					key: "download",
+					icon: ICONS.download,
+					options: downloadOptions.value.length > 0 ? downloadOptions.value : void 0,
+					visible: () => showDownload.value && !!LANGUAGE_EXTENSIONS[language.value],
+					onClick: (_event, item) => {
+						if (props.node.loading) return;
+						if (!item || item.value === "code") {
+							const extension = LANGUAGE_EXTENSIONS[language.value];
+							save(`file.${extension}`, props.node.value, "text/plain");
+							return;
+						}
+						if ((item === null || item === void 0 ? void 0 : item.value) === "svg" || (item === null || item === void 0 ? void 0 : item.value) === "png") saveMermaid(item === null || item === void 0 ? void 0 : item.value, props.node.value);
+					}
+				},
+				{
+					name: fullscreen.value ? t("button.minimize") : t("button.maximize"),
+					key: "fullscreen",
+					icon: fullscreen.value ? ICONS.minimize : ICONS.maximize,
+					visible: () => showFullscreen.value,
+					onClick: () => fullscreen.value = !fullscreen.value
+				}
+			].filter((button) => !button.visible || button.visible());
+		});
+		const ModalActions = computed(() => actions.value.filter((i) => i.key !== "collapse"));
+		watch(() => previewable.value, () => {
+			if (previewable.value) mode.value = "preview";
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-stream-markdown": "code-block",
+				"data-collapsed": collapsed.value,
+				class: normalizeClass({
+					"code-loading": props.node.loading,
+					"dark": props.isDark
+				})
+			}, [
+				createElementVNode("header", _hoisted_2, [
+					renderSlot(_ctx.$slots, "title", {}, () => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
+						key: 0,
+						icon: icon.value,
+						language: language.value,
+						"show-icon": showLanguageIcon.value,
+						"show-name": showLanguageName.value
+					}, null, 8, [
+						"icon",
+						"language",
+						"show-icon",
+						"show-name"
+					])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 1,
+						mode: mode.value,
+						"onUpdate:mode": _cache[0] || (_cache[0] = ($event) => mode.value = $event),
+						collapsed: collapsed.value,
+						"onUpdate:collapsed": _cache[1] || (_cache[1] = ($event) => collapsed.value = $event)
+					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_3))]),
+					renderSlot(_ctx.$slots, "header-center", {}, () => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 0,
+						mode: mode.value,
+						"onUpdate:mode": _cache[2] || (_cache[2] = ($event) => mode.value = $event),
+						collapsed: collapsed.value,
+						"onUpdate:collapsed": _cache[3] || (_cache[3] = ($event) => collapsed.value = $event)
+					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_4))]),
+					renderSlot(_ctx.$slots, "actions", {}, () => [createVNode(actions_default, { actions: actions.value }, null, 8, ["actions"])])
+				]),
+				withDirectives(createElementVNode("main", _hoisted_5, [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), normalizeProps(mergeProps({ key: 0 }, props)), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createElementVNode("main", null, [renderSlot(_ctx.$slots, "default")], 512), [[vShow, mode.value === "source"]])], 512), [[vShow, !collapsed.value]]),
+				createVNode(modal_default, {
+					open: fullscreen.value,
+					"onUpdate:open": _cache[8] || (_cache[8] = ($event) => fullscreen.value = $event),
+					"get-container": props.getContainer
+				}, {
+					title: withCtx(() => [showLanguageTitle.value ? (openBlock(), createBlock(language_title_default, {
+						key: 0,
+						icon: icon.value,
+						language: language.value,
+						"show-icon": showLanguageIcon.value,
+						"show-name": showLanguageName.value
+					}, null, 8, [
+						"icon",
+						"language",
+						"show-icon",
+						"show-name"
+					])) : previewable.value ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 1,
+						mode: mode.value,
+						"onUpdate:mode": _cache[4] || (_cache[4] = ($event) => mode.value = $event),
+						collapsed: collapsed.value,
+						"onUpdate:collapsed": _cache[5] || (_cache[5] = ($event) => collapsed.value = $event)
+					}, null, 8, ["mode", "collapsed"])) : (openBlock(), createElementBlock("div", _hoisted_6))]),
+					"header-center": withCtx(() => [previewable.value && showLanguageTitle.value ? (openBlock(), createBlock(preview_segmented_default, {
+						key: 0,
+						mode: mode.value,
+						"onUpdate:mode": _cache[6] || (_cache[6] = ($event) => mode.value = $event),
+						collapsed: collapsed.value,
+						"onUpdate:collapsed": _cache[7] || (_cache[7] = ($event) => collapsed.value = $event)
+					}, null, 8, ["mode", "collapsed"])) : createCommentVNode("v-if", true)]),
+					actions: withCtx(() => [createVNode(actions_default, { actions: ModalActions.value }, null, 8, ["actions"])]),
+					default: withCtx(() => [previewable.value ? withDirectives((openBlock(), createBlock(resolveDynamicComponent(PreviewComponent.value), mergeProps({ key: 0 }, props, { "container-height": "100%" }), null, 16)), [[vShow, mode.value === "preview"]]) : createCommentVNode("v-if", true), withDirectives(createVNode(unref(CodeNode), mergeProps(props, { "show-header": false }), null, 16), [[vShow, mode.value === "source"]])]),
+					_: 1
+				}, 8, ["open", "get-container"])
+			], 10, _hoisted_1);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/code-block/index.vue
+var code_block_default = index_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { code_block_default as t };

package/dist/code-block-D2zjJAww.css

@@ -0,0 +1,57 @@
+.stream-markdown [data-stream-markdown="actions"] {
+  align-items: center;
+  gap: .25rem;
+  display: flex;
+}
+
+.stream-markdown [data-stream-markdown="language-title"] {
+  align-items: center;
+  gap: .5rem;
+  display: flex;
+}
+.stream-markdown [data-stream-markdown="language-name"] {
+  font-family: var(--font-mono);
+  text-transform: lowercase;
+  font-size: .875rem;
+  line-height: 1.25rem;
+}
+
+.stream-markdown [data-stream-markdown="code-block"] {
+  border: 1px solid var(--border);
+  border-radius: .75rem;
+  margin-block: 1rem;
+  overflow: hidden;
+}
+.stream-markdown [data-stream-markdown="code-block"][data-collapsed="true"] [data-stream-markdown="code-block-header"] {
+  border-bottom: none;
+}
+.stream-markdown [data-stream-markdown="code-block-header"] {
+  border-bottom: 1px solid var(--border);
+  background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+  color: var(--muted-foreground);
+  justify-content: space-between;
+  align-items: center;
+  padding-block: .375rem;
+  padding-inline: 1rem;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  display: flex;
+  position: relative;
+}
+.stream-markdown [data-stream-markdown="code-block-content"] {
+  overflow: auto;
+}
+.stream-markdown [data-stream-markdown="code-block-header"] > :first-child {
+  flex: 1;
+}
+.stream-markdown [data-stream-markdown="code-block-header"] > :last-child {
+  flex: 1;
+  justify-content: flex-end;
+  display: flex;
+}
+.stream-markdown [data-stream-markdown="code-block-header"] > :nth-child(2) {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+

package/dist/code-block-Dzw63Lki.js

@@ -0,0 +1,9 @@
+import "./previewers-Drlf7IQF.js";
+import "./composables-qhB1h_ed.js";
+import "./tooltip-RiXixMIt.js";
+import "./button-D8xx1WIP.js";
+import "./modal-CuQR21UD.js";
+import { t as code_block_default } from "./code-block-C4D_QNTq.js";
+import "./segmented-BEtO1eyl.js";
+
+export { code_block_default as default };

package/dist/codeowners-CJggXF_b.js

@@ -0,0 +1,27 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/codeowners
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "#f5a97f",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", { d: "m8.01 1.5l5.728 1.774C15.25 11.154 9.813 14.5 7.984 14.5s-7.281-3.357-5.7-11.226zM8 8.5v2z" }), createElementVNode("circle", {
+		cx: "8",
+		cy: "7",
+		r: "1.5"
+	})], -1)])]);
+}
+var codeowners_default = markRaw({
+	name: "catppuccin-codeowners",
+	render
+});
+
+//#endregion
+export { codeowners_default as default };

package/dist/coffeescript-CBrVvzGY.js

@@ -0,0 +1,23 @@
+import { createElementBlock, createElementVNode, markRaw, openBlock } from "vue";
+
+//#region ~icons/catppuccin/coffeescript
+const _hoisted_1 = {
+	viewBox: "0 0 16 16",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "#f5a97f",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	}, [createElementVNode("path", { d: "M14.5 7c-.5 2.5-2 5.5-3 6.5s-2 1-3 1s-2 0-3.02-1C4.45 12.5 3 9.5 2.5 7c3 2 9 2 12 0m-12-2c3 2 9 2 12 0" }), createElementVNode("path", { d: "M2.5 8.4c-1.73 1.6-1.26 4.17 2 4.1M7 2c-.75-.36-1.5.18-1.5.74c-.01.56.94.78 1.5.75c.6-.03.97-.7 1.5-.96C8.98 2.3 9.41 2 10 2c.56 0 1.52.25 1.5 1c-.01.61-1.12.8-1.5.49" })], -1)])]);
+}
+var coffeescript_default = markRaw({
+	name: "catppuccin-coffeescript",
+	render
+});
+
+//#endregion
+export { coffeescript_default as default };