vue-markdown-design 0.3.0 → 0.3.2-beta

package/lib/toc/Toc.js

@@ -1,354 +1,264 @@
-"use strict";
-require('./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;
+require('./index.css');const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_objectSpread2 = require("../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js");
+const require_format = require("../utils/format.js");
+const require_constant = require("../utils/constant.js");
+const require_index = ;/* empty css                          */
+const require_dom = require("../utils/dom.js");
+const require_asyncToGenerator = require("../_virtual/_@oxc-project_runtime@0.115.0/helpers/asyncToGenerator.js");
+;/* empty css       */
+const require_index$2 = ;/* empty css                                 */
+let lodash = require("lodash");
+let vue = require("vue");
+let markdown_it = require("markdown-it");
+markdown_it = require_runtime.__toESM(markdown_it);
+let _vueuse_core = require("@vueuse/core");
+let compute_scroll_into_view = require("compute-scroll-into-view");
+let _markdown_design_markdown_it_headers = require("@markdown-design/markdown-it-headers");
+//#region src/toc/Toc.tsx
+var START_LEVEL = 1;
+var END_LEVEL = 6;
+var { name, addPrefix } = require_format.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
 };
-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());
-  });
+var tocEmits = {
+	click: (payload) => (0, lodash.isObject)(payload),
+	change: (payload) => (0, lodash.isString)(payload) || (0, lodash.isUndefined)(payload)
 };
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-;/* empty css            */
-const markdownItHeaders = require("@markdown-design/markdown-it-headers");
-const lodash = require("lodash");
-const format = require("../utils/format.js");
-const index = require("../hooks/use-element/index.js");
-const MarkdownIt = require("markdown-it");
-const core = require("@vueuse/core");
-const computeScrollIntoView = require("compute-scroll-into-view");
-const index$1 = require("../hooks/use-scroll-element/index.js");
-const dom = require("../utils/dom.js");
-const constant = require("../utils/constant.js");
-const START_LEVEL = 1;
-const END_LEVEL = 6;
-const {
-  name,
-  addPrefix
-} = format.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
-};
-const tocEmits = {
-  click: (payload) => lodash.isObject(payload),
-  change: (payload) => lodash.isString(payload) || lodash.isUndefined(payload)
-};
-const _Toc = /* @__PURE__ */ vue.defineComponent({
-  name,
-  props: tocProps,
-  emits: tocEmits,
-  setup(props, {
-    emit,
-    expose,
-    slots
-  }) {
-    const target = vue.computed(() => core.toValue(props.target));
-    const {
-      targetEl
-    } = index.useElement(() => target.value || document.documentElement);
-    const levelWithNum = vue.computed(() => {
-      const {
-        startLevel,
-        endLevel,
-        ignore
-      } = props;
-      return lodash.chain([startLevel, endLevel]).map((level) => lodash.clamp(Number(level), START_LEVEL, END_LEVEL)).thru(([start, end]) => lodash.range(start, end + 1)).difference(ignore.map(Number)).value();
-    });
-    vue.watchEffect(() => {
-      const {
-        startLevel,
-        endLevel
-      } = props;
-      const levels = [startLevel, endLevel].map(Number);
-      if (!levels.every((level) => lodash.inRange(level, START_LEVEL, END_LEVEL + 1))) {
-        console.warn("[vue-markdown-design] The start-level or end-level is outside the valid range.");
-      }
-      if (!lodash.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(markdownItHeaders.headers);
-    const mdToc = vue.computed(() => {
-      const env = {};
-      md.render(props.markdown, env);
-      const {
-        headings: headings2 = []
-      } = env;
-      return headings2.filter((item) => levelWithNum.value.includes(item.level));
-    });
-    const isMd = vue.computed(() => !target.value && !!props.markdown);
-    const isPlainText = vue.computed(() => isMd.value || props.plainText);
-    const headings = vue.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 (lodash.isEqual(headings.value, newHeadings)) return;
-      headings.value = newHeadings;
-    };
-    const offsetResult = vue.computed(() => format.computeOffset(props.offset));
-    const topMap = vue.ref(/* @__PURE__ */ new Map());
-    const setTop = () => {
-      const {
-        block,
-        getOffset
-      } = offsetResult.value;
-      headings.value.forEach((heading) => {
-        const [scrollAction] = computeScrollIntoView.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();
-    };
-    vue.watchEffect(setToc);
-    const refresh = () => __async(this, null, function* () {
-      headings.value = [];
-      yield vue.nextTick();
-      setToc();
-    });
-    vue.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(`[${constant.DATA_ANCHOR}]`);
-      anchors.forEach((item) => node.removeChild(item));
-      return node.innerText.trim();
-    };
-    const listData = vue.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 = vue.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
-    } = index$1.useScrollParent(targetEl);
-    const resolvedScrollEl = vue.computed(() => {
-      var _a;
-      return scrollEl.value || ((_a = targetEl.value) == null ? void 0 : _a.ownerDocument.documentElement);
-    });
-    const activeId = vue.ref();
-    const onChange = () => {
-      if (scrollStatus === ScrollStatus.Done) {
-        emit("change", activeId.value);
-      }
-    };
-    const onScroll = lodash.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, index2, arr) => {
-        const next = arr[index2 + 1];
-        return item.top <= scrollTop && (!next || next.top > scrollTop) && !(index2 === 0 && scrollTop === 0);
-      });
-      const id = (current == null ? void 0 : current.id) || void 0;
-      if (activeId.value === id) return;
-      activeId.value = id;
-      onChange();
-    }, wait);
-    vue.watchEffect(() => vue.nextTick().then(onScroll));
-    core.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;
-      dom.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 vue.createVNode("li", {
-            "class": className
-          }, [vue.createVNode("span", attrs, [itemContent])]);
-        }
-        return vue.createVNode("li", {
-          "class": [className, {
-            [addPrefix("__item--active")]: isActive
-          }]
-        }, [vue.createVNode("a", vue.mergeProps(attrs, {
-          "href": `#${id}`,
-          "onClick": (e) => onClick(tocItem, e)
-        }), [itemContent])]);
-      });
-    };
-    expose({
-      refresh,
-      scrollTo
-    });
-    return () => vue.createVNode("nav", {
-      "class": name
-    }, [listData.value.length ? vue.createVNode("ul", {
-      "class": [addPrefix("__list"), addPrefix("--padding")]
-    }, [renderItem()]) : vue.createVNode("div", {
-      "class": [addPrefix("__empty"), addPrefix("--padding")]
-    }, [props.emptyText])]);
-  }
+var Toc_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name,
+	props: tocProps,
+	emits: tocEmits,
+	setup(props, { emit, expose, slots }) {
+		const target = (0, vue.computed)(() => (0, _vueuse_core.toValue)(props.target));
+		const { targetEl } = require_index.useElement(() => target.value || document.documentElement);
+		const levelWithNum = (0, vue.computed)(() => {
+			const { startLevel, endLevel, ignore } = props;
+			return (0, lodash.chain)([startLevel, endLevel]).map((level) => (0, lodash.clamp)(Number(level), START_LEVEL, END_LEVEL)).thru(([start, end]) => (0, lodash.range)(start, end + 1)).difference(ignore.map(Number)).value();
+		});
+		(0, vue.watchEffect)(() => {
+			const { startLevel, endLevel } = props;
+			const levels = [startLevel, endLevel].map(Number);
+			if (!levels.every((level) => (0, lodash.inRange)(level, START_LEVEL, END_LEVEL + 1))) console.warn("[vue-markdown-design] The start-level or end-level is outside the valid range.");
+			if (!(0, lodash.lte)(...levels)) console.warn("[vue-markdown-design] The start-level must be less than the end-level.");
+		});
+		const md = new markdown_it.default({ html: true });
+		md.use(_markdown_design_markdown_it_headers.headers);
+		const mdToc = (0, vue.computed)(() => {
+			const env = {};
+			md.render(props.markdown, env);
+			const { headings = [] } = env;
+			return headings.filter((item) => levelWithNum.value.includes(item.level));
+		});
+		const isMd = (0, vue.computed)(() => !target.value && !!props.markdown);
+		const isPlainText = (0, vue.computed)(() => isMd.value || props.plainText);
+		const headings = (0, vue.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 ((0, lodash.isEqual)(headings.value, newHeadings)) return;
+			headings.value = newHeadings;
+		};
+		const offsetResult = (0, vue.computed)(() => require_format.computeOffset(props.offset));
+		const topMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+		const setTop = () => {
+			const { block, getOffset } = offsetResult.value;
+			headings.value.forEach((heading) => {
+				const [scrollAction] = (0, compute_scroll_into_view.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();
+		};
+		(0, vue.watchEffect)(setToc);
+		const refresh = function() {
+			var _ref = require_asyncToGenerator._asyncToGenerator(function* () {
+				headings.value = [];
+				yield (0, vue.nextTick)();
+				setToc();
+			});
+			return function refresh() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		(0, vue.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(`[${require_constant.DATA_ANCHOR}]`).forEach((item) => node.removeChild(item));
+			return node.innerText.trim();
+		};
+		const listData = (0, vue.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 = (0, vue.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 } = require_index$2.useScrollParent(targetEl);
+		const resolvedScrollEl = (0, vue.computed)(() => {
+			var _targetEl$value2;
+			return scrollEl.value || ((_targetEl$value2 = targetEl.value) === null || _targetEl$value2 === void 0 ? void 0 : _targetEl$value2.ownerDocument.documentElement);
+		});
+		const activeId = (0, vue.ref)();
+		const onChange = () => {
+			if (scrollStatus === ScrollStatus.Done) emit("change", activeId.value);
+		};
+		const onScroll = (0, lodash.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) => require_objectSpread2._objectSpread2(require_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);
+		(0, vue.watchEffect)(() => (0, vue.nextTick)().then(onScroll));
+		(0, _vueuse_core.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;
+			require_dom.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 (0, vue.createVNode)("li", { "class": className }, [(0, vue.createVNode)("span", attrs, [itemContent])]);
+				return (0, vue.createVNode)("li", { "class": [className, { [addPrefix("__item--active")]: isActive }] }, [(0, vue.createVNode)("a", (0, vue.mergeProps)(attrs, {
+					"href": `#${id}`,
+					"onClick": (e) => onClick(tocItem, e)
+				}), [itemContent])]);
+			});
+		};
+		expose({
+			refresh,
+			scrollTo
+		});
+		return () => (0, vue.createVNode)("nav", { "class": name }, [listData.value.length ? (0, vue.createVNode)("ul", { "class": [addPrefix("__list"), addPrefix("--padding")] }, [renderItem()]) : (0, vue.createVNode)("div", { "class": [addPrefix("__empty"), addPrefix("--padding")] }, [props.emptyText])]);
+	}
 });
-exports.default = _Toc;
+//#endregion
+exports.default = Toc_default;
 exports.tocEmits = tocEmits;
 exports.tocProps = tocProps;

package/lib/toc/index2.js

@@ -0,0 +1,6 @@
+const require_vue = require("../utils/vue.js");
+const require_Toc = require("./Toc.js");
+//#region src/toc/index.ts
+var VmdToc = require_vue.withInstall(require_Toc.default);
+//#endregion
+exports.default = VmdToc;

package/lib/utils/constant.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const DATA_ANCHOR = "data-vmd-anchor";
+//#region src/utils/constant.ts
+var DATA_ANCHOR = "data-vmd-anchor";
+//#endregion
 exports.DATA_ANCHOR = DATA_ANCHOR;