vue-markdown-design 0.3.1 → 0.3.2

package/lib/search/Search.js

@@ -1,292 +1,247 @@
-"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");
+;/* empty css       */
+const require_index$1 = ;/* empty css                          */
+const require_dom = require("../utils/dom.js");
+const require_asyncToGenerator = require("../_virtual/_@oxc-project_runtime@0.115.0/helpers/asyncToGenerator.js");
+let lodash = require("lodash");
+let vue = require("vue");
+let mark_js = require("mark.js");
+mark_js = require_runtime.__toESM(mark_js);
+let _vueuse_core = require("@vueuse/core");
+let _fortawesome_vue_fontawesome = require("@fortawesome/vue-fontawesome");
+let _fortawesome_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+//#region src/search/Search.tsx
+var inputId = 0;
+var { name, addPrefix } = require_format.createNamespace("search");
+var searchProps = {
+	modelValue: {
+		type: [String, Number],
+		default: ""
+	},
+	clearable: {
+		type: Boolean,
+		default: true
+	},
+	border: {
+		type: Boolean,
+		default: true
+	},
+	size: {
+		type: String,
+		default: "huge"
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	placeholder: String,
+	target: [
+		String,
+		Object,
+		Function
+	],
+	offset: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "center"
+	},
+	smooth: Boolean,
+	closeIcon: {
+		type: Boolean,
+		default: true
+	},
+	inputAttrs: {
+		type: Object,
+		default: () => ({})
+	}
 };
-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 searchEmits = {
+	"update:modelValue": (payload) => (0, lodash.isString)(payload),
+	input: (payload) => payload instanceof Event,
+	blur: (payload) => payload instanceof FocusEvent,
+	focus: (payload) => payload instanceof FocusEvent,
+	change: (payload) => payload instanceof Event,
+	clear: () => true,
+	close: () => true,
+	stepClick: (payload) => ["prev", "next"].includes(payload),
+	totalChange: (payload) => (0, lodash.isNumber)(payload),
+	indexChange: (payload) => (0, lodash.isNumber)(payload)
 };
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-;/* empty css            */
-const Mark = require("mark.js");
-const format = require("../utils/format.js");
-const core = require("@vueuse/core");
-const lodash = require("lodash");
-const index = require("../hooks/use-element/index.js");
-const dom = require("../utils/dom.js");
-const vueFontawesome = require("@fortawesome/vue-fontawesome");
-const freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-let inputId = 0;
-const {
-  name,
-  addPrefix
-} = format.createNamespace("search");
-const searchProps = {
-  modelValue: {
-    type: [String, Number],
-    default: ""
-  },
-  clearable: {
-    type: Boolean,
-    default: true
-  },
-  border: {
-    type: Boolean,
-    default: true
-  },
-  size: {
-    type: String,
-    default: "huge"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  placeholder: String,
-  target: [String, Object, Function],
-  offset: {
-    type: [String, Number, Function],
-    default: "center"
-  },
-  smooth: Boolean,
-  closeIcon: {
-    type: Boolean,
-    default: true
-  },
-  inputAttrs: {
-    type: Object,
-    default: () => ({})
-  }
-};
-const searchEmits = {
-  "update:modelValue": (payload) => lodash.isString(payload),
-  input: (payload) => payload instanceof Event,
-  blur: (payload) => payload instanceof FocusEvent,
-  focus: (payload) => payload instanceof FocusEvent,
-  change: (payload) => payload instanceof Event,
-  clear: () => true,
-  close: () => true,
-  stepClick: (payload) => ["prev", "next"].includes(payload),
-  totalChange: (payload) => lodash.isNumber(payload),
-  indexChange: (payload) => lodash.isNumber(payload)
-};
-const _Search = /* @__PURE__ */ vue.defineComponent({
-  name,
-  props: searchProps,
-  emits: searchEmits,
-  setup(props, {
-    emit,
-    expose,
-    attrs
-  }) {
-    const modelValue = core.useVModel(props, "modelValue", emit, {
-      passive: true
-    });
-    const rootClass = vue.computed(() => {
-      const {
-        size,
-        disabled,
-        border
-      } = props;
-      return [name, addPrefix(`--${size}`), {
-        [addPrefix("--disabled")]: disabled,
-        [addPrefix("--border")]: border
-      }];
-    });
-    const id = `${name}-${inputId++}`;
-    const eventAttrs = lodash.chain(["input", "blur", "focus", "change"]).map((key) => [`on${lodash.upperFirst(key)}`, (...arg) => emit(key, ...arg)]).fromPairs().value();
-    const inputAttrs = vue.computed(() => {
-      const {
-        inputAttrs: inputAttrs2,
-        disabled,
-        placeholder
-      } = props;
-      return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-        id
-      }, lodash.omit(attrs, ["class", "style"])), inputAttrs2), eventAttrs), {
-        disabled,
-        placeholder
-      });
-    });
-    const onClear = () => {
-      if (props.disabled) return;
-      modelValue.value = "";
-      emit("clear");
-    };
-    const rawIndex = vue.ref(0);
-    const markList = vue.ref([]);
-    const escapedVal = vue.computed(() => lodash.escapeRegExp(String(modelValue.value)));
-    const setMarkList = (el) => {
-      const item = lodash.last(markList.value);
-      const keyword = (item == null ? void 0 : item.map((item2) => item2.innerText).join("")) || "";
-      const regexp = new RegExp(`^${escapedVal.value}$`, "i");
-      !item || regexp.test(keyword) ? markList.value.push([el]) : item.push(el);
-    };
-    const total = vue.computed(() => markList.value.length);
-    vue.watch(total, (val) => emit("totalChange", val));
-    const matchesIndex = vue.computed(() => {
-      return total.value && (rawIndex.value % total.value + total.value) % total.value;
-    });
-    vue.watch(matchesIndex, (val) => emit("indexChange", val));
-    const matchesCount = vue.computed(
-      // modelValue.value !== '' 不直接判断防止值为0的情况
-      () => modelValue.value !== "" && total.value && `${matchesIndex.value + 1}/${total.value}`
-    );
-    const stepMap = /* @__PURE__ */ new Map([["prev", -1], ["next", 1]]);
-    const toggle = (index2, ignoreDisabled = true) => {
-      if (!ignoreDisabled && props.disabled) return;
-      const offsetVal = stepMap.get(String(index2));
-      rawIndex.value = offsetVal ? matchesIndex.value + offsetVal : Number(index2);
-    };
-    const onStepClick = (direction) => {
-      if (props.disabled) return;
-      toggle(direction);
-      emit("stepClick", direction);
-    };
-    const onKeydown = vue.withKeys(
-      (event) => {
-        var _a;
-        return !((_a = event.target) == null ? void 0 : _a.composing) && onStepClick("next");
-      },
-      // composing 此处的值为vue3源码中的赋值
-      ["enter"]
-    );
-    const target = vue.computed(() => core.toValue(props.target));
-    const {
-      targetEl
-    } = index.useElement(target);
-    const markInstance = vue.computed(() => {
-      return targetEl.value instanceof HTMLElement ? new Mark(targetEl.value) : void 0;
-    });
-    vue.watch(targetEl, (el) => {
-      if (el && !(el instanceof HTMLElement)) {
-        console.error("[vue-markdown-design] Target is not of the HTMLElement type.");
-      }
-    });
-    const highlightClass = addPrefix("--highlight");
-    vue.watchEffect(() => {
-      var _a;
-      (_a = targetEl.value) == null ? void 0 : _a.querySelectorAll(`.${highlightClass}`).forEach((el) => el.classList.remove(highlightClass));
-      const currentMark = markList.value.find((_, index2) => index2 === matchesIndex.value);
-      if (!currentMark) return;
-      currentMark.forEach((el) => el.classList.add(highlightClass));
-      const {
-        offset,
-        smooth
-      } = props;
-      dom.scrollToEl(currentMark[0], {
-        offset,
-        smooth,
-        scrollMode: "if-needed"
-      });
-    });
-    const resetMark = () => {
-      var _a;
-      (_a = markInstance.value) == null ? void 0 : _a.unmark();
-      markList.value = [];
-    };
-    const setMark = lodash.debounce(() => {
-      var _a;
-      resetMark();
-      if (!targetEl.value) return;
-      const regexp = new RegExp(escapedVal.value, "gi");
-      (_a = markInstance.value) == null ? void 0 : _a.markRegExp(regexp, {
-        className: addPrefix("--mark"),
-        acrossElements: true,
-        each: setMarkList
-      });
-    }, 200);
-    const resetAndMark = () => {
-      rawIndex.value = 0;
-      setMark();
-    };
-    vue.watch(modelValue, resetAndMark);
-    vue.onBeforeUnmount(resetMark);
-    const refresh = (resetIndex = true) => __async(this, null, function* () {
-      yield vue.nextTick();
-      resetIndex ? resetAndMark() : setMark();
-    });
-    vue.watch([targetEl, () => {
-      var _a;
-      return (_a = target.value) == null ? void 0 : _a.htmlStr;
-    }], () => refresh(), {
-      immediate: true
-    });
-    const inputRef = vue.shallowRef();
-    expose(__spreadProps(__spreadValues({}, lodash.chain(["focus", "blur"]).map((key) => [key, () => {
-      var _a;
-      return (_a = inputRef.value) == null ? void 0 : _a[key]();
-    }]).fromPairs().value()), {
-      clear: onClear,
-      toggle,
-      refresh
-    }));
-    return () => vue.createVNode("div", {
-      "class": rootClass.value
-    }, [vue.withDirectives(vue.createVNode("input", vue.mergeProps(inputAttrs.value, {
-      "onUpdate:modelValue": ($event) => modelValue.value = $event,
-      "class": addPrefix("__input"),
-      "ref": inputRef,
-      "onKeydown": onKeydown
-    }), null), [[vue.vModelText, modelValue.value]]), modelValue.value && vue.createVNode(vue.Fragment, null, [props.clearable && vue.createVNode("span", {
-      "class": [addPrefix("__clearable"), addPrefix("__btn")],
-      "onClick": onClear
-    }, [vue.createVNode(vueFontawesome.FontAwesomeIcon, {
-      "size": "xs",
-      "icon": freeSolidSvgIcons.faCircleXmark
-    }, null)]), vue.createVNode("span", {
-      "class": addPrefix("__count")
-    }, [matchesCount.value]), vue.createVNode("span", {
-      "class": [addPrefix("__prev"), addPrefix("__btn")],
-      "onClick": () => onStepClick("prev")
-    }, [vue.createVNode(vueFontawesome.FontAwesomeIcon, {
-      "icon": freeSolidSvgIcons.faAngleUp
-    }, null)]), vue.createVNode("span", {
-      "class": [addPrefix("__next"), addPrefix("__btn")],
-      "onClick": () => onStepClick("next")
-    }, [vue.createVNode(vueFontawesome.FontAwesomeIcon, {
-      "icon": freeSolidSvgIcons.faAngleDown
-    }, null)])]), props.closeIcon && vue.createVNode("span", {
-      "class": [addPrefix("__close"), addPrefix("__btn")],
-      "onClick": () => emit("close")
-    }, [vue.createVNode(vueFontawesome.FontAwesomeIcon, {
-      "icon": freeSolidSvgIcons.faXmark
-    }, null)])]);
-  }
+var Search_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name,
+	props: searchProps,
+	emits: searchEmits,
+	setup(props, { emit, expose, attrs }) {
+		const modelValue = (0, _vueuse_core.useVModel)(props, "modelValue", emit, { passive: true });
+		const rootClass = (0, vue.computed)(() => {
+			const { size, disabled, border } = props;
+			return [
+				name,
+				addPrefix(`--${size}`),
+				{
+					[addPrefix("--disabled")]: disabled,
+					[addPrefix("--border")]: border
+				}
+			];
+		});
+		const id = `${name}-${inputId++}`;
+		const eventAttrs = (0, lodash.chain)([
+			"input",
+			"blur",
+			"focus",
+			"change"
+		]).map((key) => [`on${(0, lodash.upperFirst)(key)}`, (...arg) => emit(key, ...arg)]).fromPairs().value();
+		const inputAttrs = (0, vue.computed)(() => {
+			const { inputAttrs, disabled, placeholder } = props;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ id }, (0, lodash.omit)(attrs, ["class", "style"])), inputAttrs), eventAttrs), {}, {
+				disabled,
+				placeholder
+			});
+		});
+		const onClear = () => {
+			if (props.disabled) return;
+			modelValue.value = "";
+			emit("clear");
+		};
+		const rawIndex = (0, vue.ref)(0);
+		const markList = (0, vue.ref)([]);
+		const escapedVal = (0, vue.computed)(() => (0, lodash.escapeRegExp)(String(modelValue.value)));
+		const setMarkList = (el) => {
+			const item = (0, lodash.last)(markList.value);
+			const keyword = (item === null || item === void 0 ? void 0 : item.map((item) => item.innerText).join("")) || "";
+			const regexp = new RegExp(`^${escapedVal.value}$`, "i");
+			!item || regexp.test(keyword) ? markList.value.push([el]) : item.push(el);
+		};
+		const total = (0, vue.computed)(() => markList.value.length);
+		(0, vue.watch)(total, (val) => emit("totalChange", val));
+		const matchesIndex = (0, vue.computed)(() => {
+			return total.value && (rawIndex.value % total.value + total.value) % total.value;
+		});
+		(0, vue.watch)(matchesIndex, (val) => emit("indexChange", val));
+		const matchesCount = (0, vue.computed)(() => modelValue.value !== "" && total.value && `${matchesIndex.value + 1}/${total.value}`);
+		const stepMap = new Map([["prev", -1], ["next", 1]]);
+		const toggle = (index, ignoreDisabled = true) => {
+			if (!ignoreDisabled && props.disabled) return;
+			const offsetVal = stepMap.get(String(index));
+			rawIndex.value = offsetVal ? matchesIndex.value + offsetVal : Number(index);
+		};
+		const onStepClick = (direction) => {
+			if (props.disabled) return;
+			toggle(direction);
+			emit("stepClick", direction);
+		};
+		const onKeydown = (0, vue.withKeys)((event) => {
+			var _event$target;
+			return !((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.composing) && onStepClick("next");
+		}, ["enter"]);
+		const target = (0, vue.computed)(() => (0, _vueuse_core.toValue)(props.target));
+		const { targetEl } = require_index$1.useElement(target);
+		const markInstance = (0, vue.computed)(() => {
+			return targetEl.value instanceof HTMLElement ? new mark_js.default(targetEl.value) : void 0;
+		});
+		(0, vue.watch)(targetEl, (el) => {
+			if (el && !(el instanceof HTMLElement)) console.error("[vue-markdown-design] Target is not of the HTMLElement type.");
+		});
+		const highlightClass = addPrefix("--highlight");
+		(0, vue.watchEffect)(() => {
+			var _targetEl$value;
+			(_targetEl$value = targetEl.value) === null || _targetEl$value === void 0 || _targetEl$value.querySelectorAll(`.${highlightClass}`).forEach((el) => el.classList.remove(highlightClass));
+			const currentMark = markList.value.find((_, index) => index === matchesIndex.value);
+			if (!currentMark) return;
+			currentMark.forEach((el) => el.classList.add(highlightClass));
+			const { offset, smooth } = props;
+			require_dom.scrollToEl(currentMark[0], {
+				offset,
+				smooth,
+				scrollMode: "if-needed"
+			});
+		});
+		const resetMark = () => {
+			var _markInstance$value;
+			(_markInstance$value = markInstance.value) === null || _markInstance$value === void 0 || _markInstance$value.unmark();
+			markList.value = [];
+		};
+		const setMark = (0, lodash.debounce)(() => {
+			var _markInstance$value2;
+			resetMark();
+			if (!targetEl.value) return;
+			const regexp = new RegExp(escapedVal.value, "gi");
+			(_markInstance$value2 = markInstance.value) === null || _markInstance$value2 === void 0 || _markInstance$value2.markRegExp(regexp, {
+				className: addPrefix("--mark"),
+				acrossElements: true,
+				each: setMarkList
+			});
+		}, 200);
+		const resetAndMark = () => {
+			rawIndex.value = 0;
+			setMark();
+		};
+		(0, vue.watch)(modelValue, resetAndMark);
+		(0, vue.onBeforeUnmount)(resetMark);
+		const refresh = function() {
+			var _ref = require_asyncToGenerator._asyncToGenerator(function* (resetIndex = true) {
+				yield (0, vue.nextTick)();
+				resetIndex ? resetAndMark() : setMark();
+			});
+			return function refresh() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		(0, vue.watch)([targetEl, () => {
+			var _target$value;
+			return (_target$value = target.value) === null || _target$value === void 0 ? void 0 : _target$value.htmlStr;
+		}], () => refresh(), { immediate: true });
+		const inputRef = (0, vue.shallowRef)();
+		expose(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (0, lodash.chain)(["focus", "blur"]).map((key) => [key, () => {
+			var _inputRef$value;
+			return (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value[key]();
+		}]).fromPairs().value()), {}, {
+			clear: onClear,
+			toggle,
+			refresh
+		}));
+		return () => (0, vue.createVNode)("div", { "class": rootClass.value }, [
+			(0, vue.withDirectives)((0, vue.createVNode)("input", (0, vue.mergeProps)(inputAttrs.value, {
+				"onUpdate:modelValue": ($event) => modelValue.value = $event,
+				"class": addPrefix("__input"),
+				"ref": inputRef,
+				"onKeydown": onKeydown
+			}), null), [[vue.vModelText, modelValue.value]]),
+			modelValue.value && (0, vue.createVNode)(vue.Fragment, null, [
+				props.clearable && (0, vue.createVNode)("button", {
+					"aria-label": "Clear",
+					"class": [addPrefix("__clearable"), addPrefix("__btn")],
+					"onClick": onClear
+				}, [(0, vue.createVNode)(_fortawesome_vue_fontawesome.FontAwesomeIcon, {
+					"size": "xs",
+					"icon": _fortawesome_free_solid_svg_icons.faCircleXmark
+				}, null)]),
+				(0, vue.createVNode)("span", { "class": addPrefix("__count") }, [matchesCount.value]),
+				(0, vue.createVNode)("button", {
+					"aria-label": "Previous",
+					"class": [addPrefix("__prev"), addPrefix("__btn")],
+					"onClick": () => onStepClick("prev")
+				}, [(0, vue.createVNode)(_fortawesome_vue_fontawesome.FontAwesomeIcon, { "icon": _fortawesome_free_solid_svg_icons.faAngleUp }, null)]),
+				(0, vue.createVNode)("button", {
+					"aria-label": "Next",
+					"class": [addPrefix("__next"), addPrefix("__btn")],
+					"onClick": () => onStepClick("next")
+				}, [(0, vue.createVNode)(_fortawesome_vue_fontawesome.FontAwesomeIcon, { "icon": _fortawesome_free_solid_svg_icons.faAngleDown }, null)])
+			]),
+			props.closeIcon && (0, vue.createVNode)("button", {
+				"aria-label": "Close",
+				"class": [addPrefix("__close"), addPrefix("__btn")],
+				"onClick": () => emit("close")
+			}, [(0, vue.createVNode)(_fortawesome_vue_fontawesome.FontAwesomeIcon, { "icon": _fortawesome_free_solid_svg_icons.faXmark }, null)])
+		]);
+	}
 });
-exports.default = _Search;
+//#endregion
+exports.default = Search_default;
 exports.searchEmits = searchEmits;
 exports.searchProps = searchProps;

package/lib/search/index.css

@@ -16,6 +16,7 @@
   --vmd-search-clearable-color: var(--vmd-text-secondary-color);
   --vmd-search-count-font-size: 12px;
   --vmd-search-count-color: var(--vmd-text-secondary-color);
+  --vmd-search-btn-icon-size: 14px;
   --vmd-search-btn-hover-opacity: 0.5;
   --vmd-search-mark: mark;
   --vmd-search-highlight: orange;
@@ -77,6 +78,9 @@
 .vmd-search__btn {
   cursor: pointer;
   color: var(--vmd-icon-color);
+  background: none;
+  border: none;
+  font-size: var(--vmd-search-btn-icon-size);
 }
 .vmd-search__btn:hover {
   opacity: var(--vmd-search-btn-hover-opacity);

package/lib/search/index2.js

@@ -0,0 +1,6 @@
+const require_vue = require("../utils/vue.js");
+const require_Search = require("./Search.js");
+//#region src/search/index.ts
+var VmdSearch = require_vue.withInstall(require_Search.default);
+//#endregion
+exports.default = VmdSearch;