vue-stream-markdown 0.1.3 → 0.1.5

package/dist/image-DvOGBhi-.js

@@ -0,0 +1,327 @@
+import { H as useContext, V as useControls, a as useMediumZoom, k as saveImage, u as useI18n } from "./composables-yny5gJo3.js";
+import { t as button_default } from "./button-BQhuT7wh.js";
+import { t as modal_default } from "./modal-Rc_RoeYA.js";
+import { t as zoom_container_default } from "./zoom-container-B1qbA-7z.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, toRefs, unref, watch, withCtx } from "vue";
+import { useCycleList } from "@vueuse/core";
+
+//#region node_modules/.pnpm/treechop@0.1.2/node_modules/treechop/dist/index.js
+const DEFAULT_CHILDREN_KEY = "children";
+function createTreeUtils(options = {}) {
+	const { childrenKey = DEFAULT_CHILDREN_KEY } = options;
+	return {
+		childrenKey,
+		getChildrenKey(node, meta) {
+			return typeof this.childrenKey === "function" ? this.childrenKey(node, meta) : this.childrenKey;
+		},
+		getChildren(node, meta) {
+			return node[this.getChildrenKey(node, meta)] || [];
+		},
+		hasChildren(node, meta) {
+			const children = this.getChildren(node, meta);
+			return Array.isArray(children) && children.length > 0;
+		}
+	};
+}
+function preOrderTraverse(tree, callback, utils) {
+	const result = [];
+	const traverse = (nodes, parents = [], depth = 0) => {
+		nodes.forEach((node, index) => {
+			const meta = {
+				depth,
+				index,
+				parents
+			};
+			result.push(callback(node, meta));
+			if (utils.hasChildren(node, meta)) traverse(utils.getChildren(node, meta), [...parents, node], depth + 1);
+		});
+	};
+	traverse(tree);
+	return result;
+}
+function postOrderTraverse(tree, callback, utils) {
+	const result = [];
+	const traverse = (nodes, parents = [], depth = 0) => {
+		nodes.forEach((node, index) => {
+			const meta = {
+				depth,
+				index,
+				parents
+			};
+			if (utils.hasChildren(node, meta)) traverse(utils.getChildren(node, meta), [...parents, node], depth + 1);
+			result.push(callback(node, meta));
+		});
+	};
+	traverse(tree);
+	return result;
+}
+function breadthTraverse(tree, callback, utils) {
+	const result = [];
+	const queue = tree.map((node, index) => [
+		node,
+		index,
+		[],
+		0
+	]);
+	while (queue.length) {
+		const [node, index, parents, depth] = queue.shift();
+		const meta = {
+			depth,
+			index,
+			parents
+		};
+		result.push(callback(node, meta));
+		if (utils.hasChildren(node, meta)) utils.getChildren(node, meta).forEach((child, childIndex) => {
+			queue.push([
+				child,
+				childIndex,
+				[...parents, node],
+				depth + 1
+			]);
+		});
+	}
+	return result;
+}
+function treeFlatFilter(tree, predicate, options = {}) {
+	const { strategy = "pre" } = options;
+	const utils = createTreeUtils(options);
+	const callback = (node, meta) => {
+		return predicate(node, meta) ? node : null;
+	};
+	switch (strategy) {
+		case "post": return postOrderTraverse(tree, callback, utils).filter(Boolean);
+		case "breadth": return breadthTraverse(tree, callback, utils).filter(Boolean);
+		case "pre":
+		default: return preOrderTraverse(tree, callback, utils).filter(Boolean);
+	}
+}
+
+//#endregion
+//#region src/components/image.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"src",
+	"alt",
+	"title"
+];
+const _hoisted_2 = [
+	"src",
+	"alt",
+	"title"
+];
+var image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "image",
+	props: {
+		src: {
+			type: String,
+			required: false
+		},
+		alt: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		preview: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		margin: {
+			type: Number,
+			required: false,
+			default: 16
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false,
+			default: true
+		}
+	},
+	emits: ["load", "error"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const { margin, controls } = toRefs(props);
+		const { t } = useI18n();
+		const { icons, parsedNodes } = useContext();
+		const { isControlEnabled, getControlValue } = useControls({ controls });
+		const imageNodes = computed(() => treeFlatFilter(parsedNodes.value, (node) => node.type === "image" && !node.loading));
+		const imageList = computed(() => [...new Set(imageNodes.value.map((node) => node.url))]);
+		const { state: imageSrc, prev, next } = useCycleList(imageList, {
+			initialValue: props.src,
+			fallbackIndex: 0
+		});
+		const enableDownload = computed(() => isControlEnabled("image.download"));
+		const enableCarousel = computed(() => isControlEnabled("image.carousel"));
+		const enableFlip = computed(() => isControlEnabled("image.flip"));
+		const enableRotate = computed(() => isControlEnabled("image.rotate"));
+		const controlPosition = computed(() => {
+			const position = getControlValue("image.controlPosition");
+			if (typeof position === "boolean") return "bottom-center";
+			return position || "bottom-center";
+		});
+		const loaded = ref(false);
+		const open = ref(false);
+		const scaleX = ref(1);
+		const scaleY = ref(1);
+		const rotate = ref(0);
+		const { isAnimating, elementRef, zoomElementRef: _zoomElementRef, elementStyle, zoomIn, zoomOut } = useMediumZoom({
+			margin,
+			open: () => open.value = true,
+			close: () => open.value = false
+		});
+		const imageStyle = computed(() => ({
+			transform: `
+    scaleX(${scaleX.value})
+    scaleY(${scaleY.value})
+    rotate(${rotate.value}deg)
+  `,
+			transition: "transform 0.3s ease",
+			...elementStyle.value
+		}));
+		function handleLoad(event) {
+			loaded.value = true;
+			emits("load", event);
+		}
+		function handleError(event) {
+			emits("error", event);
+		}
+		function handleOpen() {
+			if (!props.preview || !elementRef.value || !loaded.value) return;
+			zoomIn();
+		}
+		function handleClose() {
+			if (isAnimating.value) return;
+			zoomOut();
+		}
+		function download() {
+			if (!imageSrc.value) return;
+			saveImage(imageSrc.value, props.alt);
+		}
+		function flipHorizontal() {
+			scaleX.value *= -1;
+		}
+		function flipVertical() {
+			scaleY.value *= -1;
+		}
+		function rotateLeft() {
+			rotate.value -= 90;
+		}
+		function rotateRight() {
+			rotate.value += 90;
+		}
+		watch(open, (data) => {
+			if (!data) {
+				scaleX.value = 1;
+				scaleY.value = 1;
+				rotate.value = 0;
+				if (props.src) imageSrc.value = props.src;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("img", {
+				ref_key: "elementRef",
+				ref: elementRef,
+				"data-stream-markdown": "image",
+				src: __props.src,
+				alt: __props.alt,
+				title: __props.title,
+				style: { transition: "transform 300ms cubic-bezier(0.2, 0, 0.2, 1)" },
+				loading: "lazy",
+				decoding: "async",
+				onLoad: handleLoad,
+				onError: handleError,
+				onClick: handleOpen
+			}, null, 40, _hoisted_1), createVNode(modal_default, {
+				open: open.value,
+				"onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
+				transition: "",
+				"modal-style": { backgroundColor: "rgba(0, 0, 0, 0.45)" },
+				close: handleClose
+			}, {
+				default: withCtx(() => [createVNode(zoom_container_default, {
+					"control-size": "large",
+					position: controlPosition.value,
+					"container-style": {
+						width: "auto",
+						maxWidth: `calc(100% - ${props.margin * 2}px)`,
+						cursor: "grab"
+					},
+					onClick: handleClose
+				}, {
+					controls: withCtx((buttonProps) => [
+						unref(imageSrc) && enableDownload.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 0 }, buttonProps, {
+							icon: unref(icons).download,
+							name: unref(t)("button.download"),
+							onClick: download
+						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
+						imageList.value.length > 1 && enableCarousel.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 1 }, buttonProps, {
+							icon: unref(icons).arrowLeft,
+							name: unref(t)("button.previous"),
+							onClick: _cache[0] || (_cache[0] = () => unref(prev)())
+						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
+						imageList.value.length > 1 && enableCarousel.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 2 }, buttonProps, {
+							icon: unref(icons).arrowRight || unref(icons).arrowLeft,
+							name: unref(t)("button.next"),
+							"button-style": { transform: unref(icons).arrowRight ? void 0 : "scaleX(-1)" },
+							onClick: _cache[1] || (_cache[1] = () => unref(next)())
+						}), null, 16, [
+							"icon",
+							"name",
+							"button-style"
+						])) : createCommentVNode("v-if", true),
+						enableFlip.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 3 }, buttonProps, {
+							icon: unref(icons).flipHorizontal,
+							name: unref(t)("button.flipX"),
+							onClick: flipHorizontal
+						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
+						enableFlip.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 4 }, buttonProps, {
+							icon: unref(icons).flipVertical || unref(icons).flipHorizontal,
+							name: unref(t)("button.flipY"),
+							"button-style": { rotate: unref(icons).flipVertical ? void 0 : "90deg" },
+							onClick: flipVertical
+						}), null, 16, [
+							"icon",
+							"name",
+							"button-style"
+						])) : createCommentVNode("v-if", true),
+						enableRotate.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 5 }, buttonProps, {
+							icon: unref(icons).rotateLeft,
+							name: unref(t)("button.rotateLeft"),
+							onClick: rotateLeft
+						}), null, 16, ["icon", "name"])) : createCommentVNode("v-if", true),
+						enableRotate.value ? (openBlock(), createBlock(button_default, mergeProps({ key: 6 }, buttonProps, {
+							icon: unref(icons).rotateRight || unref(icons).rotateLeft,
+							name: unref(t)("button.rotateRight"),
+							"button-style": { transform: unref(icons).rotateRight ? void 0 : "scaleX(-1)" },
+							onClick: rotateRight
+						}), null, 16, [
+							"icon",
+							"name",
+							"button-style"
+						])) : createCommentVNode("v-if", true)
+					]),
+					default: withCtx(() => [createElementVNode("img", {
+						ref_key: "_zoomElementRef",
+						ref: _zoomElementRef,
+						src: unref(imageSrc),
+						alt: __props.alt,
+						title: __props.title,
+						style: normalizeStyle(imageStyle.value)
+					}, null, 12, _hoisted_2)]),
+					_: 1
+				}, 8, ["position", "container-style"])]),
+				_: 1
+			}, 8, ["open"])], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/image.vue
+var image_default = image_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { image_default as t };

package/dist/index.css

@@ -43,18 +43,23 @@
   opacity: 0.5;
 }
 
-.stream-markdown .tippy-box {
+.stream-markdown [data-stream-markdown='tooltip'] {
   background: var(--popover);
   color: var(--popover-foreground);
   border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  z-index: 100;
 }
 
-.stream-markdown .tippy-arrow {
-  color: var(--popover);
+.stream-markdown [data-stream-markdown='tooltip-overlay'] {
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.stream-markdown .tippy-box > .tippy-svg-arrow {
-  border-top-color: var(--popover);
+.stream-markdown [data-stream-markdown='dropdown-overlay'] {
+  padding: 0.25rem;
 }
 
 .stream-markdown [data-stream-markdown='button'] {
@@ -78,10 +83,6 @@
   background-color: var(--accent);
 }
 
-.stream-markdown [data-stream-markdown='dropdown-overlay'] {
-  padding: 0.25rem;
-}
-
 .stream-markdown [data-stream-markdown='error-component'] {
   display: inline-block;
   color: var(--muted-foreground);
@@ -144,15 +145,6 @@
   flex-shrink: 0;
   padding-inline: 1rem;
   padding-block: 0.5rem;
-  background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-  color: var(--muted-foreground);
-  border-bottom: 1px solid var(--border);
-}
-
-.stream-markdown [data-stream-markdown='modal-actions'] {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
 }
 
 .stream-markdown [data-stream-markdown='modal-body'] {
@@ -176,17 +168,6 @@
   transform: translateX(-50%);
 }
 
-.stream-markdown .typewriter-enter-from {
-  opacity: 0;
-}
-.stream-markdown .typewriter-enter-active {
-  transition: opacity var(--typewriter-transition-duration) ease-out;
-  will-change: opacity;
-}
-.stream-markdown .typewriter-enter-to {
-  opacity: 1;
-}
-
 .stream-markdown [data-stream-markdown='segmented'] {
   display: flex;
   align-items: center;
@@ -247,11 +228,6 @@
   line-height: 1.25rem;
 }
 
-.stream-markdown [data-stream-markdown='tooltip-overlay'] {
-  padding-block: 0.25rem;
-  padding-inline: 0.5rem;
-}
-
 .stream-markdown [data-stream-markdown='zoom-container'] {
   height: 100%;
   position: relative;
@@ -315,12 +291,6 @@
   color: var(--muted-foreground);
 }
 
-@media (max-width: 1024px) {
-  .stream-markdown [data-stream-markdown='code-block-header'] {
-    padding-inline: 0.75rem;
-  }
-}
-
 .stream-markdown [data-stream-markdown='code-block-content'] {
   overflow: auto;
 }
@@ -328,11 +298,13 @@
 .stream-markdown [data-stream-markdown='code-block-header'] > :first-child {
   flex: 1;
 }
+
 .stream-markdown [data-stream-markdown='code-block-header'] > :last-child {
   flex: 1;
   display: flex;
   justify-content: flex-end;
 }
+
 .stream-markdown [data-stream-markdown='code-block-header'] > :nth-child(2) {
   position: absolute;
   left: 50%;
@@ -430,6 +402,15 @@
   line-height: 1.25rem;
 }
 
+.stream-markdown [data-stream-markdown='image'] {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  object-fit: contain;
+  cursor: pointer;
+}
+
 .stream-markdown [data-stream-markdown='image-figure'] {
   display: inline-block;
 }
@@ -439,14 +420,6 @@
   text-align: center;
 }
 
-.stream-markdown [data-stream-markdown='image'] {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  object-fit: contain;
-  border-radius: 0.5rem;
-}
-
 .stream-markdown [data-stream-markdown='image-caption'] {
   text-align: center;
   font-size: 0.875rem;
@@ -455,12 +428,13 @@
 }
 
 .stream-markdown [data-stream-markdown='image-mask'] {
-  display: none;
+  opacity: 0;
   position: absolute;
   inset: 0;
   border-radius: 0.5rem;
   background-color: rgb(0 0 0 / 0.1);
   pointer-events: none;
+  transition: opacity var(--default-transition-duration) ease;
 }
 
 .stream-markdown [data-stream-markdown='image-download-button'] {
@@ -617,31 +591,37 @@
   padding: 1rem;
 }
 
+@media (max-width: 1024px) {
+  .stream-markdown [data-stream-markdown='code-block-header'] {
+    padding-inline: 0.75rem;
+  }
+  .stream-markdown [data-stream-markdown='zoom-controls'] {
+    gap: 0;
+  }
+}
+
+.stream-markdown .typewriter-enter-from {
+  opacity: 0;
+}
+.stream-markdown .typewriter-enter-active {
+  transition: opacity var(--typewriter-transition-duration) ease-out;
+  will-change: opacity;
+}
+.stream-markdown .typewriter-enter-to {
+  opacity: 1;
+}
+
 .stream-markdown .modal-enter-from,
 .stream-markdown .modal-leave-to {
   opacity: 0;
+  transform: scale(0.95);
 }
 .stream-markdown .modal-enter-active,
 .stream-markdown .modal-leave-active {
-  transition: opacity var(--default-transition-duration) ease;
-}
-
-.stream-markdown .img-switch-enter-active,
-.stream-markdown .img-switch-leave-active {
   transition:
     opacity var(--default-transition-duration) ease,
     transform var(--default-transition-duration) ease;
 }
-.stream-markdown .img-switch-enter-from,
-.stream-markdown .img-switch-leave-to {
-  opacity: 0;
-  transform: translateY(6px);
-}
-.stream-markdown .img-switch-enter-to,
-.stream-markdown .img-switch-leave-from {
-  opacity: 1;
-  transform: translateY(0);
-}
 
 @keyframes spin {
   from {