@oiij/naive-ui/dist/components/type-writer/TypeWriter.js

Some Composable Functions And Components for Vue 3

import { highlight } from "../_utils/prismjs.js";
import "../_utils/index.js";
import { cName, typeWriterCssr } from "./type-writer.cssr.js";
import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
import { useStyle } from "@oiij/css-render";
import { NEl } from "naive-ui";
import { useMarkdownIt } from "@oiij/markdown-it";
import { useTypeWriter } from "@oiij/use";

//#region src/components/type-writer/TypeWriter.vue
const _hoisted_1 = ["innerHTML"];
const _sfc_main = /* @__PURE__ */ defineComponent({
	__name: "TypeWriter",
	props: {
		value: {},
		typing: {
			type: Boolean,
			default: true
		},
		markdown: { type: Boolean },
		step: {},
		interval: {},
		suffix: { default: "|" }
	},
	emits: [
		"start",
		"update",
		"stop"
	],
	setup(__props, { emit: __emit }) {
		const emit = __emit;
		useStyle(cName, typeWriterCssr());
		const { typedValue, isTyping, onStat, onUpdate, onStop } = useTypeWriter(computed(() => __props.value ?? ""), {
			step: __props.step,
			interval: __props.interval,
			enabled: __props.typing
		});
		onStat(() => {
			emit("start");
		});
		onUpdate((v) => {
			emit("update", v);
		});
		onStop((v) => {
			emit("stop", v);
		});
		const { html } = useMarkdownIt(void 0, typedValue, {
			html: true,
			linkify: true,
			typographer: true,
			breaks: true,
			highlight
		});
		const renderValue = computed(() => __props.markdown ? html.value : typedValue.value);
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(NEl), {
				tag: "div",
				class: normalizeClass([unref(cName)])
			}, {
				default: withCtx(() => [createElementVNode("div", {
					class: normalizeClass([unref(isTyping) && !__props.markdown ? `${unref(cName)}__cursor` : void 0, __props.markdown ? `${unref(cName)}__markdown` : void 0]),
					style: normalizeStyle([!__props.markdown ? { "--cursor-content": `'${__props.suffix}'` } : void 0]),
					innerHTML: renderValue.value
				}, null, 14, _hoisted_1)]),
				_: 1
			}, 8, ["class"]);
		};
	}
});
var TypeWriter_default = _sfc_main;

//#endregion
export { TypeWriter_default as default };