vue-markdown-design 0.3.1 → 0.3.2

package/es/toc/Toc.mjs

@@ -1,354 +1,260 @@
-import './index.css';var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { defineComponent, computed, watchEffect, ref, watch, nextTick, createVNode, mergeProps } from "vue";
-/* empty css            */
-import { headers } from "@markdown-design/markdown-it-headers";
-import { isString, isUndefined, isObject, chain, clamp, range, inRange, lte, throttle, isEqual } from "lodash";
-import { createNamespace, computeOffset } from "../utils/format.mjs";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.mjs";
+import { computeOffset, createNamespace } from "../utils/format.mjs";
+import { DATA_ANCHOR } from "../utils/constant.mjs";
 import { useElement } from "../hooks/use-element/index.mjs";
+import { scrollToEl } from "../utils/dom.mjs";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/asyncToGenerator.mjs";
+import './index.css';/* empty css       */
+import { useScrollParent } from "../hooks/use-scroll-element/index.mjs";
+import { chain, clamp, inRange, isEqual, isObject, isString, isUndefined, lte, range, throttle } from "lodash";
+import { computed, createVNode, defineComponent, mergeProps, nextTick, ref, watch, watchEffect } from "vue";
 import MarkdownIt from "markdown-it";
 import { toValue, useEventListener } from "@vueuse/core";
 import { compute } from "compute-scroll-into-view";
-import { useScrollParent } from "../hooks/use-scroll-element/index.mjs";
-import { scrollToEl } from "../utils/dom.mjs";
-import { DATA_ANCHOR } from "../utils/constant.mjs";
-const START_LEVEL = 1;
-const END_LEVEL = 6;
-const {
-  name,
-  addPrefix
-} = createNamespace("toc");
-const tocProps = {
-  startLevel: {
-    type: [Number, String],
-    default: START_LEVEL
-  },
-  endLevel: {
-    type: [Number, String],
-    default: END_LEVEL
-  },
-  orderedList: Boolean,
-  plainText: Boolean,
-  changeHash: {
-    type: Boolean,
-    default: true
-  },
-  target: [String, Object, Function],
-  offset: {
-    type: [String, Number, Function],
-    default: "start"
-  },
-  bound: {
-    type: Number,
-    default: 0
-  },
-  ignore: {
-    type: Array,
-    default: []
-  },
-  emptyText: {
-    type: String,
-    default: "No Data"
-  },
-  markdown: {
-    type: String,
-    default: ""
-  },
-  smooth: Boolean
+import { headers } from "@markdown-design/markdown-it-headers";
+//#region src/toc/Toc.tsx
+var START_LEVEL = 1;
+var END_LEVEL = 6;
+var { name, addPrefix } = createNamespace("toc");
+var tocProps = {
+	startLevel: {
+		type: [Number, String],
+		default: START_LEVEL
+	},
+	endLevel: {
+		type: [Number, String],
+		default: END_LEVEL
+	},
+	orderedList: Boolean,
+	plainText: Boolean,
+	changeHash: {
+		type: Boolean,
+		default: true
+	},
+	target: [
+		String,
+		Object,
+		Function
+	],
+	offset: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "start"
+	},
+	bound: {
+		type: Number,
+		default: 0
+	},
+	ignore: {
+		type: Array,
+		default: []
+	},
+	emptyText: {
+		type: String,
+		default: "No Data"
+	},
+	markdown: {
+		type: String,
+		default: ""
+	},
+	smooth: Boolean
 };
-const tocEmits = {
-  click: (payload) => isObject(payload),
-  change: (payload) => isString(payload) || isUndefined(payload)
+var tocEmits = {
+	click: (payload) => isObject(payload),
+	change: (payload) => isString(payload) || isUndefined(payload)
 };
-const _Toc = /* @__PURE__ */ defineComponent({
-  name,
-  props: tocProps,
-  emits: tocEmits,
-  setup(props, {
-    emit,
-    expose,
-    slots
-  }) {
-    const target = computed(() => toValue(props.target));
-    const {
-      targetEl
-    } = useElement(() => target.value || document.documentElement);
-    const levelWithNum = computed(() => {
-      const {
-        startLevel,
-        endLevel,
-        ignore
-      } = props;
-      return chain([startLevel, endLevel]).map((level) => clamp(Number(level), START_LEVEL, END_LEVEL)).thru(([start, end]) => range(start, end + 1)).difference(ignore.map(Number)).value();
-    });
-    watchEffect(() => {
-      const {
-        startLevel,
-        endLevel
-      } = props;
-      const levels = [startLevel, endLevel].map(Number);
-      if (!levels.every((level) => inRange(level, START_LEVEL, END_LEVEL + 1))) {
-        console.warn("[vue-markdown-design] The start-level or end-level is outside the valid range.");
-      }
-      if (!lte(...levels)) {
-        console.warn("[vue-markdown-design] The start-level must be less than the end-level.");
-      }
-    });
-    const md = new MarkdownIt({
-      html: true
-    });
-    md.use(headers);
-    const mdToc = computed(() => {
-      const env = {};
-      md.render(props.markdown, env);
-      const {
-        headings: headings2 = []
-      } = env;
-      return headings2.filter((item) => levelWithNum.value.includes(item.level));
-    });
-    const isMd = computed(() => !target.value && !!props.markdown);
-    const isPlainText = computed(() => isMd.value || props.plainText);
-    const headings = ref([]);
-    const setHeading = () => {
-      var _a;
-      if (!levelWithNum.value.length) {
-        headings.value = [];
-        return;
-      }
-      const selectors = levelWithNum.value.map((level) => `h${level}`).join(",");
-      const headingEl = (_a = targetEl.value) == null ? void 0 : _a.querySelectorAll(selectors);
-      const newHeadings = Array.from(headingEl || []);
-      if (isEqual(headings.value, newHeadings)) return;
-      headings.value = newHeadings;
-    };
-    const offsetResult = computed(() => computeOffset(props.offset));
-    const topMap = ref(/* @__PURE__ */ new Map());
-    const setTop = () => {
-      const {
-        block,
-        getOffset
-      } = offsetResult.value;
-      headings.value.forEach((heading) => {
-        const [scrollAction] = compute(heading, {
-          block
-        });
-        const curOffset = getOffset(scrollAction, true);
-        const val = scrollAction.top - curOffset - props.bound;
-        topMap.value.set(heading.id, Math.floor(val));
-      });
-    };
-    const setToc = () => {
-      if (isMd.value || !targetEl.value) return;
-      setHeading();
-      setTop();
-    };
-    watchEffect(setToc);
-    const refresh = () => __async(this, null, function* () {
-      headings.value = [];
-      yield nextTick();
-      setToc();
-    });
-    watch(() => {
-      var _a;
-      return (_a = target.value) == null ? void 0 : _a.htmlStr;
-    }, refresh);
-    const getText = (el) => {
-      const node = el.cloneNode(true);
-      const anchors = node.querySelectorAll(`[${DATA_ANCHOR}]`);
-      anchors.forEach((item) => node.removeChild(item));
-      return node.innerText.trim();
-    };
-    const listData = computed(() => {
-      if (isMd.value) return mdToc.value;
-      return headings.value.map((heading) => {
-        const {
-          id,
-          tagName
-        } = heading;
-        return {
-          id,
-          text: getText(heading),
-          level: Number(tagName[1]),
-          top: topMap.value.get(id)
-        };
-      });
-    });
-    const runtimeLevel = computed(() => {
-      if (!listData.value.length) return [0, 0];
-      const level = listData.value.map((item) => item.level);
-      return [Math.min(...level), Math.max(...level)];
-    });
-    const wait = 16;
-    let ScrollStatus = /* @__PURE__ */ function(ScrollStatus2) {
-      ScrollStatus2[ScrollStatus2["Start"] = 0] = "Start";
-      ScrollStatus2[ScrollStatus2["Update"] = 1] = "Update";
-      ScrollStatus2[ScrollStatus2["Done"] = 2] = "Done";
-      return ScrollStatus2;
-    }({});
-    let scrollStatus = ScrollStatus.Done;
-    const setScrollStatus = (key) => {
-      const status = ScrollStatus[key];
-      if (scrollStatus !== status) {
-        scrollStatus = status;
-      }
-    };
-    const {
-      scrollEl
-    } = useScrollParent(targetEl);
-    const resolvedScrollEl = computed(() => {
-      var _a;
-      return scrollEl.value || ((_a = targetEl.value) == null ? void 0 : _a.ownerDocument.documentElement);
-    });
-    const activeId = ref();
-    const onChange = () => {
-      if (scrollStatus === ScrollStatus.Done) {
-        emit("change", activeId.value);
-      }
-    };
-    const onScroll = throttle(() => {
-      var _a;
-      if (scrollStatus === ScrollStatus.Start || isPlainText.value) return;
-      setToc();
-      const scrollTop = Math.floor(((_a = resolvedScrollEl.value) == null ? void 0 : _a.scrollTop) || 0);
-      const current = listData.value.map((item) => __spreadProps(__spreadValues({}, item), {
-        top: item.top || 0
-      })).sort((a, b) => a.top - b.top).find((item, index, arr) => {
-        const next = arr[index + 1];
-        return item.top <= scrollTop && (!next || next.top > scrollTop) && !(index === 0 && scrollTop === 0);
-      });
-      const id = (current == null ? void 0 : current.id) || void 0;
-      if (activeId.value === id) return;
-      activeId.value = id;
-      onChange();
-    }, wait);
-    watchEffect(() => nextTick().then(onScroll));
-    useEventListener(() => scrollEl.value || window, "scroll", onScroll);
-    const scrollTo = (href) => {
-      var _a;
-      if (!href) return console.warn("[vue-markdown-design] Href has no value.");
-      const headingEl = (_a = targetEl.value) == null ? void 0 : _a.querySelector(`[id='${href}']`);
-      if (!headingEl) return console.warn("[vue-markdown-design] The provided href failed to query the DOM.");
-      const {
-        offset,
-        smooth
-      } = props;
-      scrollToEl(headingEl, {
-        offset,
-        smooth,
-        onPlay: () => setScrollStatus("Start"),
-        onUpdate: () => setScrollStatus("Update"),
-        onComplete: () => setTimeout(() => {
-          setScrollStatus("Done");
-          onChange();
-        }, wait + 4)
-        // 设置延迟可确保在 onScroll 后面再执行
-      });
-    };
-    const onClick = (tocItem, e) => {
-      if (!props.changeHash) e.preventDefault();
-      scrollTo(tocItem.id);
-      emit("click", tocItem);
-    };
-    const renderItem = () => {
-      const {
-        orderedList
-      } = props;
-      const [startLevel, endLevel] = runtimeLevel.value;
-      const orderCounter = new Array(endLevel - startLevel + 1).fill(0);
-      return listData.value.map((item) => {
-        const {
-          level,
-          text,
-          id,
-          top
-        } = item;
-        const relativeLevel = level - startLevel;
-        orderedList && orderCounter.fill(0, relativeLevel + 1);
-        const attrs = {
-          class: addPrefix("__text"),
-          style: {
-            paddingLeft: `${relativeLevel}em`
-          }
-        };
-        const plainText = orderedList ? `${++orderCounter[relativeLevel]}. ${text}` : text;
-        const isActive = activeId.value === id;
-        const tocItem = {
-          id,
-          top,
-          level,
-          relativeLevel,
-          isActive,
-          text: plainText
-        };
-        const itemContent = slots.item ? slots.item(tocItem) : plainText;
-        const className = addPrefix("__item");
-        if (isPlainText.value || !id) {
-          return createVNode("li", {
-            "class": className
-          }, [createVNode("span", attrs, [itemContent])]);
-        }
-        return createVNode("li", {
-          "class": [className, {
-            [addPrefix("__item--active")]: isActive
-          }]
-        }, [createVNode("a", mergeProps(attrs, {
-          "href": `#${id}`,
-          "onClick": (e) => onClick(tocItem, e)
-        }), [itemContent])]);
-      });
-    };
-    expose({
-      refresh,
-      scrollTo
-    });
-    return () => createVNode("nav", {
-      "class": name
-    }, [listData.value.length ? createVNode("ul", {
-      "class": [addPrefix("__list"), addPrefix("--padding")]
-    }, [renderItem()]) : createVNode("div", {
-      "class": [addPrefix("__empty"), addPrefix("--padding")]
-    }, [props.emptyText])]);
-  }
+var Toc_default = /* @__PURE__ */ defineComponent({
+	name,
+	props: tocProps,
+	emits: tocEmits,
+	setup(props, { emit, expose, slots }) {
+		const target = computed(() => toValue(props.target));
+		const { targetEl } = useElement(() => target.value || document.documentElement);
+		const levelWithNum = computed(() => {
+			const { startLevel, endLevel, ignore } = props;
+			return chain([startLevel, endLevel]).map((level) => clamp(Number(level), START_LEVEL, END_LEVEL)).thru(([start, end]) => range(start, end + 1)).difference(ignore.map(Number)).value();
+		});
+		watchEffect(() => {
+			const { startLevel, endLevel } = props;
+			const levels = [startLevel, endLevel].map(Number);
+			if (!levels.every((level) => inRange(level, START_LEVEL, END_LEVEL + 1))) console.warn("[vue-markdown-design] The start-level or end-level is outside the valid range.");
+			if (!lte(...levels)) console.warn("[vue-markdown-design] The start-level must be less than the end-level.");
+		});
+		const md = new MarkdownIt({ html: true });
+		md.use(headers);
+		const mdToc = computed(() => {
+			const env = {};
+			md.render(props.markdown, env);
+			const { headings = [] } = env;
+			return headings.filter((item) => levelWithNum.value.includes(item.level));
+		});
+		const isMd = computed(() => !target.value && !!props.markdown);
+		const isPlainText = computed(() => isMd.value || props.plainText);
+		const headings = ref([]);
+		const setHeading = () => {
+			var _targetEl$value;
+			if (!levelWithNum.value.length) {
+				headings.value = [];
+				return;
+			}
+			const selectors = levelWithNum.value.map((level) => `h${level}`).join(",");
+			const headingEl = (_targetEl$value = targetEl.value) === null || _targetEl$value === void 0 ? void 0 : _targetEl$value.querySelectorAll(selectors);
+			const newHeadings = Array.from(headingEl || []);
+			if (isEqual(headings.value, newHeadings)) return;
+			headings.value = newHeadings;
+		};
+		const offsetResult = computed(() => computeOffset(props.offset));
+		const topMap = ref(/* @__PURE__ */ new Map());
+		const setTop = () => {
+			const { block, getOffset } = offsetResult.value;
+			headings.value.forEach((heading) => {
+				const [scrollAction] = compute(heading, { block });
+				const curOffset = getOffset(scrollAction, true);
+				const val = scrollAction.top - curOffset - props.bound;
+				topMap.value.set(heading.id, Math.floor(val));
+			});
+		};
+		const setToc = () => {
+			if (isMd.value || !targetEl.value) return;
+			setHeading();
+			setTop();
+		};
+		watchEffect(setToc);
+		const refresh = function() {
+			var _ref = _asyncToGenerator(function* () {
+				headings.value = [];
+				yield nextTick();
+				setToc();
+			});
+			return function refresh() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		watch(() => {
+			var _target$value;
+			return (_target$value = target.value) === null || _target$value === void 0 ? void 0 : _target$value.htmlStr;
+		}, refresh);
+		const getText = (el) => {
+			const node = el.cloneNode(true);
+			node.querySelectorAll(`[${DATA_ANCHOR}]`).forEach((item) => node.removeChild(item));
+			return node.innerText.trim();
+		};
+		const listData = computed(() => {
+			if (isMd.value) return mdToc.value;
+			return headings.value.map((heading) => {
+				const { id, tagName } = heading;
+				return {
+					id,
+					text: getText(heading),
+					level: Number(tagName[1]),
+					top: topMap.value.get(id)
+				};
+			});
+		});
+		const runtimeLevel = computed(() => {
+			if (!listData.value.length) return [0, 0];
+			const level = listData.value.map((item) => item.level);
+			return [Math.min(...level), Math.max(...level)];
+		});
+		const wait = 16;
+		let ScrollStatus = /* @__PURE__ */ function(ScrollStatus) {
+			ScrollStatus[ScrollStatus["Start"] = 0] = "Start";
+			ScrollStatus[ScrollStatus["Update"] = 1] = "Update";
+			ScrollStatus[ScrollStatus["Done"] = 2] = "Done";
+			return ScrollStatus;
+		}({});
+		let scrollStatus = ScrollStatus.Done;
+		const setScrollStatus = (key) => {
+			const status = ScrollStatus[key];
+			if (scrollStatus !== status) scrollStatus = status;
+		};
+		const { scrollEl } = useScrollParent(targetEl);
+		const resolvedScrollEl = computed(() => {
+			var _targetEl$value2;
+			return scrollEl.value || ((_targetEl$value2 = targetEl.value) === null || _targetEl$value2 === void 0 ? void 0 : _targetEl$value2.ownerDocument.documentElement);
+		});
+		const activeId = ref();
+		const onChange = () => {
+			if (scrollStatus === ScrollStatus.Done) emit("change", activeId.value);
+		};
+		const onScroll = throttle(() => {
+			var _resolvedScrollEl$val;
+			if (scrollStatus === ScrollStatus.Start || isPlainText.value) return;
+			setToc();
+			const scrollTop = Math.floor(((_resolvedScrollEl$val = resolvedScrollEl.value) === null || _resolvedScrollEl$val === void 0 ? void 0 : _resolvedScrollEl$val.scrollTop) || 0);
+			const current = listData.value.map((item) => _objectSpread2(_objectSpread2({}, item), {}, { top: item.top || 0 })).sort((a, b) => a.top - b.top).find((item, index, arr) => {
+				const next = arr[index + 1];
+				return item.top <= scrollTop && (!next || next.top > scrollTop) && !(index === 0 && scrollTop === 0);
+			});
+			const id = (current === null || current === void 0 ? void 0 : current.id) || void 0;
+			if (activeId.value === id) return;
+			activeId.value = id;
+			onChange();
+		}, wait);
+		watchEffect(() => nextTick().then(onScroll));
+		useEventListener(() => scrollEl.value || window, "scroll", onScroll);
+		const scrollTo = (href) => {
+			var _targetEl$value3;
+			if (!href) return console.warn("[vue-markdown-design] Href has no value.");
+			const headingEl = (_targetEl$value3 = targetEl.value) === null || _targetEl$value3 === void 0 ? void 0 : _targetEl$value3.querySelector(`[id='${href}']`);
+			if (!headingEl) return console.warn("[vue-markdown-design] The provided href failed to query the DOM.");
+			const { offset, smooth } = props;
+			scrollToEl(headingEl, {
+				offset,
+				smooth,
+				onPlay: () => setScrollStatus("Start"),
+				onUpdate: () => setScrollStatus("Update"),
+				onComplete: () => setTimeout(() => {
+					setScrollStatus("Done");
+					onChange();
+				}, wait + 4)
+			});
+		};
+		const onClick = (tocItem, e) => {
+			if (!props.changeHash) e.preventDefault();
+			scrollTo(tocItem.id);
+			emit("click", tocItem);
+		};
+		const renderItem = () => {
+			const { orderedList } = props;
+			const [startLevel, endLevel] = runtimeLevel.value;
+			const orderCounter = new Array(endLevel - startLevel + 1).fill(0);
+			return listData.value.map((item) => {
+				const { level, text, id, top } = item;
+				const relativeLevel = level - startLevel;
+				orderedList && orderCounter.fill(0, relativeLevel + 1);
+				const attrs = {
+					class: addPrefix("__text"),
+					style: { paddingLeft: `${relativeLevel}em` }
+				};
+				const plainText = orderedList ? `${++orderCounter[relativeLevel]}. ${text}` : text;
+				const isActive = activeId.value === id;
+				const tocItem = {
+					id,
+					top,
+					level,
+					relativeLevel,
+					isActive,
+					text: plainText
+				};
+				const itemContent = slots.item ? slots.item(tocItem) : plainText;
+				const className = addPrefix("__item");
+				if (isPlainText.value || !id) return createVNode("li", { "class": className }, [createVNode("span", attrs, [itemContent])]);
+				return createVNode("li", { "class": [className, { [addPrefix("__item--active")]: isActive }] }, [createVNode("a", mergeProps(attrs, {
+					"href": `#${id}`,
+					"onClick": (e) => onClick(tocItem, e)
+				}), [itemContent])]);
+			});
+		};
+		expose({
+			refresh,
+			scrollTo
+		});
+		return () => createVNode("nav", { "class": name }, [listData.value.length ? createVNode("ul", { "class": [addPrefix("__list"), addPrefix("--padding")] }, [renderItem()]) : createVNode("div", { "class": [addPrefix("__empty"), addPrefix("--padding")] }, [props.emptyText])]);
+	}
 });
-export {
-  _Toc as default,
-  tocEmits,
-  tocProps
-};
+//#endregion
+export { Toc_default as default, tocEmits, tocProps };

package/es/toc/index2.mjs

@@ -0,0 +1,6 @@
+import { withInstall } from "../utils/vue.mjs";
+import Toc_default from "./Toc.mjs";
+//#region src/toc/index.ts
+var VmdToc = withInstall(Toc_default);
+//#endregion
+export { VmdToc as default };

package/es/utils/constant.mjs

@@ -1,4 +1,4 @@
-const DATA_ANCHOR = "data-vmd-anchor";
-export {
-  DATA_ANCHOR
-};
+//#region src/utils/constant.ts
+var DATA_ANCHOR = "data-vmd-anchor";
+//#endregion
+export { DATA_ANCHOR };