vue-stream-markdown 0.1.5 → 0.2.0

package/dist/image-VMGQj_VU.js

@@ -0,0 +1,258 @@
+import { B as saveImage, U as useControls, W as useContext, m as useMediumZoom, y as useI18n } from "./composables-DuQ72m6O.js";
+import { n as treeFlatFilter } from "./dist-CYkm26BF.js";
+import { t as button_default } from "./button-BDO3n0n_.js";
+import { t as modal_default } from "./modal-DrPdD2g1.js";
+import { t as zoom_container_default } from "./zoom-container-CrKx_BbS.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, renderList, toRefs, unref, watch, withCtx } from "vue";
+import { useCycleList } from "@vueuse/core";
+
+//#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
+		},
+		transformHardenUrl: {
+			type: Function,
+			required: false
+		},
+		nodeProps: {
+			type: Object,
+			required: 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, resolveControls } = useControls({ controls });
+		const imageNodes = computed(() => treeFlatFilter(parsedNodes.value, (node) => node.type === "image" && !node.loading));
+		const imageList = computed(() => {
+			return [...new Set(imageNodes.value.map((node) => node.url))].filter((url) => props.transformHardenUrl ? props.transformHardenUrl(url) : url).filter(Boolean);
+		});
+		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
+		}));
+		const builtinControls = computed(() => [
+			{
+				key: "download",
+				icon: "download",
+				name: t("button.download"),
+				onClick: download,
+				visible: () => !!imageSrc.value && enableDownload.value
+			},
+			{
+				key: "previous",
+				icon: "arrowLeft",
+				name: t("button.previous"),
+				onClick: () => prev(),
+				visible: () => imageList.value.length > 1 && enableCarousel.value
+			},
+			{
+				key: "next",
+				icon: icons.value.arrowRight ? "arrowRight" : "arrowLeft",
+				name: t("button.next"),
+				onClick: () => next(),
+				buttonStyle: icons.value.arrowRight ? void 0 : { transform: "scaleX(-1)" },
+				visible: () => imageList.value.length > 1 && enableCarousel.value
+			},
+			{
+				key: "flipX",
+				icon: "flipHorizontal",
+				name: t("button.flipX"),
+				onClick: flipHorizontal,
+				visible: () => enableFlip.value
+			},
+			{
+				key: "flipY",
+				icon: icons.value.flipVertical ? "flipVertical" : "flipHorizontal",
+				name: t("button.flipY"),
+				onClick: flipVertical,
+				buttonStyle: icons.value.flipVertical ? void 0 : { rotate: "90deg" },
+				visible: () => enableFlip.value
+			},
+			{
+				key: "rotateLeft",
+				icon: "rotateLeft",
+				name: t("button.rotateLeft"),
+				onClick: rotateLeft,
+				visible: () => enableRotate.value
+			},
+			{
+				key: "rotateRight",
+				icon: icons.value.rotateRight ? "rotateRight" : "rotateLeft",
+				name: t("button.rotateRight"),
+				onClick: rotateRight,
+				buttonStyle: icons.value.rotateRight ? void 0 : { transform: "scaleX(-1)" },
+				visible: () => enableRotate.value
+			}
+		]);
+		const zoomControls = computed(() => resolveControls("image", builtinControls.value, props.nodeProps));
+		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[0] || (_cache[0] = ($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) => [(openBlock(true), createElementBlock(Fragment, null, renderList(zoomControls.value, (item) => {
+						return openBlock(), createBlock(button_default, mergeProps({ ref_for: true }, {
+							...buttonProps,
+							...item
+						}, {
+							key: item.key,
+							onClick: item.onClick
+						}), null, 16, ["onClick"]);
+					}), 128))]),
+					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 → index.css/index.css}

@@ -48,7 +48,7 @@
   color: var(--popover-foreground);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
-  z-index: 100;
+  z-index: 110;
 }
 
 .stream-markdown [data-stream-markdown='tooltip-overlay'] {
@@ -250,7 +250,7 @@
 
 .stream-markdown [data-stream-markdown='zoom-controls'] {
   position: absolute;
-  z-index: 10;
+  z-index: 1;
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -270,7 +270,7 @@
   margin-block: 1rem;
   border-radius: 0.75rem;
   border: 1px solid var(--border);
-  overflow: hidden;
+  overflow: clip;
 }
 
 .stream-markdown [data-stream-markdown='code-block'][data-collapsed='true'] [data-stream-markdown='code-block-header'] {
@@ -278,7 +278,9 @@
 }
 
 .stream-markdown [data-stream-markdown='code-block-header'] {
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 5;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -591,6 +593,31 @@
   padding: 1rem;
 }
 
+.stream-markdown [data-stream-markdown='footnote-reference'] {
+  color: var(--primary);
+  cursor: pointer;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] {
+  color: var(--muted-foreground);
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] [data-stream-markdown='footnote-definition-label'] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.25rem;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] [data-stream-markdown='footnote-definition-button'] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+}
+
+.stream-markdown [data-stream-markdown='footnote-definition'] p {
+  display: inline;
+}
+
 @media (max-width: 1024px) {
   .stream-markdown [data-stream-markdown='code-block-header'] {
     padding-inline: 0.75rem;