vue-markdown-design 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Zero
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+English | [中文](./README.zh-CN.md)
+
+# Vue Markdown Design
+
+A Vue 3 out-of-the-box Markdown component built on [markdown-it](https://github.com/markdown-it/markdown-it). It mainly features Markdown rendering, TOC generation, and keyword search. It also includes other common functionalities such as support for markdown-it plugins, emoji, heading permalinks, XSS sanitization, and TypeScript.
+
+## Quick Start
+
+### Installation
+
+```sh
+npm i vue-markdown-design
+```
+
+### Usage
+
+```js
+// main.js
+
+// Import component
+import VueMarkdown from 'vue-markdown-design'
+
+import { createApp } from 'vue'
+
+const app = createApp()
+
+// Register component
+app.use(VueMarkdown)
+
+app.mount('#app')
+```
+
+```vue
+<!-- demo.vue -->
+
+<vue-markdown :src="`# Title\nContent`" />
+```
+
+## More
+
+More documentation coming soon!
+
+## License
+
+[MIT](../../LICENSE).

package/README.zh-CN.md

@@ -0,0 +1,43 @@
+# Vue Markdown Design
+
+一个基于 [markdown-it](https://github.com/markdown-it/markdown-it) 的 Vue 3 开箱即用 Markdown 组件，主要功能有 Markdown 渲染，目录生成，关键字搜索。同时内置其他常用功能，包括支持 markdown-it 插件，emoji 表情，标题永久链接，防御 XSS 攻击，支持 TypeScript 等。
+
+## 快速上手
+
+### 安装
+
+```sh
+npm i vue-markdown-design
+```
+
+### 使用
+
+```js
+// main.js
+
+// 引入组件
+import VueMarkdown from 'vue-markdown-design'
+
+import { createApp } from 'vue'
+
+const app = createApp()
+
+// 注册组件
+app.use(VueMarkdown)
+
+app.mount('#app')
+```
+
+```vue
+<!-- demo.vue -->
+
+<vue-markdown :src="`# 标题\n内容`" />
+```
+
+## 更多
+
+详细文档即将发布，敬请期待！
+
+## 开源协议
+
+本项目基于 [MIT](../../LICENSE) 协议。

package/es/hooks/use-element/index.d.ts

@@ -0,0 +1,6 @@
+import { MaybeElement, UnRefElementReturn } from '@vueuse/core';
+import { MaybeRefOrGetter } from 'vue';
+export declare function useElement(target?: MaybeRefOrGetter<MaybeElement | string>): {
+    targetEl: import('vue').ShallowRef<UnRefElementReturn>;
+    update: () => void;
+};

package/es/hooks/use-element/index.mjs

@@ -0,0 +1,22 @@
+import { toRef, unrefElement } from "@vueuse/core";
+import { isString } from "lodash";
+import { shallowRef, watch, onMounted } from "vue";
+function useElement(target) {
+  const targetEl = shallowRef();
+  const targetRef = toRef(target);
+  const update = () => {
+    if (!targetRef.value) return;
+    if (!isString(targetRef.value)) {
+      targetEl.value = unrefElement(targetRef.value);
+      return;
+    }
+    targetEl.value = document.querySelector(targetRef.value);
+    if (!targetEl.value) console.error("[vue-markdown-design] Target does not exist.");
+  };
+  watch(targetRef, update, { flush: "post" });
+  onMounted(update);
+  return { targetEl, update };
+}
+export {
+  useElement
+};

package/es/hooks/use-scroll-element/index.d.ts

@@ -0,0 +1,13 @@
+import { MaybeComputedElementRef, UnRefElementReturn } from '@vueuse/core';
+import { ShallowRef } from 'vue';
+interface UseScrollParentOptions<T extends boolean> {
+    onlyParent?: T;
+}
+interface UseScrollParentReturn<T> {
+    scrollEl: ShallowRef<T>;
+    update: () => void;
+}
+type NonNullableElement = NonNullable<UnRefElementReturn>;
+export declare function useScrollParent(target: MaybeComputedElementRef, options?: UseScrollParentOptions<true>): UseScrollParentReturn<UnRefElementReturn>;
+export declare function useScrollParent(target: MaybeComputedElementRef, options?: UseScrollParentOptions<false>): UseScrollParentReturn<NonNullableElement[]>;
+export {};

package/es/hooks/use-scroll-element/index.mjs

@@ -0,0 +1,53 @@
+import { unrefElement, useMutationObserver } from "@vueuse/core";
+import { shallowRef, watch, onMounted } from "vue";
+const tagNames = /* @__PURE__ */ new Set(["HTML", "BODY"]);
+const scrollReg = /scroll|auto|overlay/i;
+function getScrollElement(el, onlyParent) {
+  let node = el;
+  const nodes = [];
+  while (node.nodeType === 1 && !tagNames.has(node.tagName)) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (scrollReg.test(overflowY)) {
+      nodes.push(node);
+      if (onlyParent) break;
+    }
+    const { parentNode } = node;
+    if (!(parentNode instanceof Element)) break;
+    node = parentNode;
+  }
+  return onlyParent ? nodes[0] : nodes;
+}
+function isElement(el) {
+  return [HTMLElement, SVGElement].some((type) => el instanceof type);
+}
+function useScrollParent(target, options = {}) {
+  const { onlyParent = true } = options;
+  const initialValue = onlyParent ? void 0 : [];
+  const scrollEl = shallowRef(initialValue);
+  const update = () => {
+    const el = unrefElement(target);
+    if (!el) {
+      scrollEl.value = initialValue;
+      return;
+    }
+    const scrollElement = getScrollElement(el, onlyParent);
+    if (Array.isArray(scrollElement)) {
+      scrollEl.value = scrollElement.filter(isElement);
+      return;
+    }
+    if (isElement(scrollElement)) {
+      scrollEl.value = scrollElement;
+    }
+  };
+  watch(() => unrefElement(target), update, { flush: "post" });
+  useMutationObserver(
+    () => Array.isArray(scrollEl.value) ? scrollEl.value : [scrollEl.value],
+    update,
+    { attributeFilter: ["style", "class"] }
+  );
+  onMounted(update);
+  return { scrollEl, update };
+}
+export {
+  useScrollParent
+};

package/es/index.d.ts

@@ -0,0 +1,6 @@
+export * from './render';
+export * from './search';
+export * from './toc';
+export * from './sticky';
+export * from './markdown';
+export { default } from './markdown';

package/es/index.mjs

@@ -0,0 +1,22 @@
+import './style/variables.css';/* empty css                      */
+import { VmdRender } from "./render/index.mjs";
+import { VmdSearch } from "./search/index.mjs";
+import { VmdTOC } from "./toc/index.mjs";
+import { VmdSticky } from "./sticky/index.mjs";
+import { VueMarkdown, VueMarkdown as VueMarkdown2 } from "./markdown/index.mjs";
+import { renderProps } from "./render/Render.mjs";
+import { searchProps } from "./search/Search.mjs";
+import { tocProps } from "./toc/TOC.mjs";
+import { markdownProps } from "./markdown/Markdown.mjs";
+export {
+  VmdRender,
+  VmdSearch,
+  VmdSticky,
+  VmdTOC,
+  VueMarkdown,
+  VueMarkdown2 as default,
+  markdownProps,
+  renderProps,
+  searchProps,
+  tocProps
+};