vue-markdown-design 0.3.1 → 0.3.2

package/es/search/Search.mjs

@@ -1,292 +1,243 @@
-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, ref, watch, withKeys, watchEffect, onBeforeUnmount, shallowRef, createVNode, withDirectives, mergeProps, vModelText, Fragment, nextTick } from "vue";
-/* empty css            */
-import Mark from "mark.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.mjs";
 import { createNamespace } from "../utils/format.mjs";
-import { useVModel, toValue } from "@vueuse/core";
-import { isNumber, isString, chain, upperFirst, omit, escapeRegExp, debounce, last } from "lodash";
+import './index.css';/* empty css       */
 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 { chain, debounce, escapeRegExp, isNumber, isString, last, omit, upperFirst } from "lodash";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, nextTick, onBeforeUnmount, ref, shallowRef, vModelText, watch, watchEffect, withDirectives, withKeys } from "vue";
+import Mark from "mark.js";
+import { toValue, useVModel } from "@vueuse/core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faCircleXmark, faAngleUp, faAngleDown, faXmark } from "@fortawesome/free-solid-svg-icons";
-let inputId = 0;
-const {
-  name,
-  addPrefix
-} = 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: () => ({})
-  }
+import { faAngleDown, faAngleUp, faCircleXmark, faXmark } from "@fortawesome/free-solid-svg-icons";
+//#region src/search/Search.tsx
+var inputId = 0;
+var { name, addPrefix } = 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: () => ({})
+	}
 };
-const searchEmits = {
-  "update:modelValue": (payload) => 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) => isNumber(payload),
-  indexChange: (payload) => isNumber(payload)
+var searchEmits = {
+	"update:modelValue": (payload) => 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) => isNumber(payload),
+	indexChange: (payload) => isNumber(payload)
 };
-const _Search = /* @__PURE__ */ defineComponent({
-  name,
-  props: searchProps,
-  emits: searchEmits,
-  setup(props, {
-    emit,
-    expose,
-    attrs
-  }) {
-    const modelValue = useVModel(props, "modelValue", emit, {
-      passive: true
-    });
-    const rootClass = computed(() => {
-      const {
-        size,
-        disabled,
-        border
-      } = props;
-      return [name, addPrefix(`--${size}`), {
-        [addPrefix("--disabled")]: disabled,
-        [addPrefix("--border")]: border
-      }];
-    });
-    const id = `${name}-${inputId++}`;
-    const eventAttrs = chain(["input", "blur", "focus", "change"]).map((key) => [`on${upperFirst(key)}`, (...arg) => emit(key, ...arg)]).fromPairs().value();
-    const inputAttrs = computed(() => {
-      const {
-        inputAttrs: inputAttrs2,
-        disabled,
-        placeholder
-      } = props;
-      return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
-        id
-      }, omit(attrs, ["class", "style"])), inputAttrs2), eventAttrs), {
-        disabled,
-        placeholder
-      });
-    });
-    const onClear = () => {
-      if (props.disabled) return;
-      modelValue.value = "";
-      emit("clear");
-    };
-    const rawIndex = ref(0);
-    const markList = ref([]);
-    const escapedVal = computed(() => escapeRegExp(String(modelValue.value)));
-    const setMarkList = (el) => {
-      const item = 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 = computed(() => markList.value.length);
-    watch(total, (val) => emit("totalChange", val));
-    const matchesIndex = computed(() => {
-      return total.value && (rawIndex.value % total.value + total.value) % total.value;
-    });
-    watch(matchesIndex, (val) => emit("indexChange", val));
-    const matchesCount = computed(
-      // modelValue.value !== '' 不直接判断防止值为0的情况
-      () => modelValue.value !== "" && total.value && `${matchesIndex.value + 1}/${total.value}`
-    );
-    const stepMap = /* @__PURE__ */ 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 = withKeys(
-      (event) => {
-        var _a;
-        return !((_a = event.target) == null ? void 0 : _a.composing) && onStepClick("next");
-      },
-      // composing 此处的值为vue3源码中的赋值
-      ["enter"]
-    );
-    const target = computed(() => toValue(props.target));
-    const {
-      targetEl
-    } = useElement(target);
-    const markInstance = computed(() => {
-      return targetEl.value instanceof HTMLElement ? new Mark(targetEl.value) : void 0;
-    });
-    watch(targetEl, (el) => {
-      if (el && !(el instanceof HTMLElement)) {
-        console.error("[vue-markdown-design] Target is not of the HTMLElement type.");
-      }
-    });
-    const highlightClass = addPrefix("--highlight");
-    watchEffect(() => {
-      var _a;
-      (_a = targetEl.value) == null ? void 0 : _a.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;
-      scrollToEl(currentMark[0], {
-        offset,
-        smooth,
-        scrollMode: "if-needed"
-      });
-    });
-    const resetMark = () => {
-      var _a;
-      (_a = markInstance.value) == null ? void 0 : _a.unmark();
-      markList.value = [];
-    };
-    const setMark = 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();
-    };
-    watch(modelValue, resetAndMark);
-    onBeforeUnmount(resetMark);
-    const refresh = (resetIndex = true) => __async(this, null, function* () {
-      yield nextTick();
-      resetIndex ? resetAndMark() : setMark();
-    });
-    watch([targetEl, () => {
-      var _a;
-      return (_a = target.value) == null ? void 0 : _a.htmlStr;
-    }], () => refresh(), {
-      immediate: true
-    });
-    const inputRef = shallowRef();
-    expose(__spreadProps(__spreadValues({}, chain(["focus", "blur"]).map((key) => [key, () => {
-      var _a;
-      return (_a = inputRef.value) == null ? void 0 : _a[key]();
-    }]).fromPairs().value()), {
-      clear: onClear,
-      toggle,
-      refresh
-    }));
-    return () => createVNode("div", {
-      "class": rootClass.value
-    }, [withDirectives(createVNode("input", mergeProps(inputAttrs.value, {
-      "onUpdate:modelValue": ($event) => modelValue.value = $event,
-      "class": addPrefix("__input"),
-      "ref": inputRef,
-      "onKeydown": onKeydown
-    }), null), [[vModelText, modelValue.value]]), modelValue.value && createVNode(Fragment, null, [props.clearable && createVNode("span", {
-      "class": [addPrefix("__clearable"), addPrefix("__btn")],
-      "onClick": onClear
-    }, [createVNode(FontAwesomeIcon, {
-      "size": "xs",
-      "icon": faCircleXmark
-    }, null)]), createVNode("span", {
-      "class": addPrefix("__count")
-    }, [matchesCount.value]), createVNode("span", {
-      "class": [addPrefix("__prev"), addPrefix("__btn")],
-      "onClick": () => onStepClick("prev")
-    }, [createVNode(FontAwesomeIcon, {
-      "icon": faAngleUp
-    }, null)]), createVNode("span", {
-      "class": [addPrefix("__next"), addPrefix("__btn")],
-      "onClick": () => onStepClick("next")
-    }, [createVNode(FontAwesomeIcon, {
-      "icon": faAngleDown
-    }, null)])]), props.closeIcon && createVNode("span", {
-      "class": [addPrefix("__close"), addPrefix("__btn")],
-      "onClick": () => emit("close")
-    }, [createVNode(FontAwesomeIcon, {
-      "icon": faXmark
-    }, null)])]);
-  }
+var Search_default = /* @__PURE__ */ defineComponent({
+	name,
+	props: searchProps,
+	emits: searchEmits,
+	setup(props, { emit, expose, attrs }) {
+		const modelValue = useVModel(props, "modelValue", emit, { passive: true });
+		const rootClass = computed(() => {
+			const { size, disabled, border } = props;
+			return [
+				name,
+				addPrefix(`--${size}`),
+				{
+					[addPrefix("--disabled")]: disabled,
+					[addPrefix("--border")]: border
+				}
+			];
+		});
+		const id = `${name}-${inputId++}`;
+		const eventAttrs = chain([
+			"input",
+			"blur",
+			"focus",
+			"change"
+		]).map((key) => [`on${upperFirst(key)}`, (...arg) => emit(key, ...arg)]).fromPairs().value();
+		const inputAttrs = computed(() => {
+			const { inputAttrs, disabled, placeholder } = props;
+			return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({ id }, omit(attrs, ["class", "style"])), inputAttrs), eventAttrs), {}, {
+				disabled,
+				placeholder
+			});
+		});
+		const onClear = () => {
+			if (props.disabled) return;
+			modelValue.value = "";
+			emit("clear");
+		};
+		const rawIndex = ref(0);
+		const markList = ref([]);
+		const escapedVal = computed(() => escapeRegExp(String(modelValue.value)));
+		const setMarkList = (el) => {
+			const item = 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 = computed(() => markList.value.length);
+		watch(total, (val) => emit("totalChange", val));
+		const matchesIndex = computed(() => {
+			return total.value && (rawIndex.value % total.value + total.value) % total.value;
+		});
+		watch(matchesIndex, (val) => emit("indexChange", val));
+		const matchesCount = 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 = 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 = computed(() => toValue(props.target));
+		const { targetEl } = useElement(target);
+		const markInstance = computed(() => {
+			return targetEl.value instanceof HTMLElement ? new Mark(targetEl.value) : void 0;
+		});
+		watch(targetEl, (el) => {
+			if (el && !(el instanceof HTMLElement)) console.error("[vue-markdown-design] Target is not of the HTMLElement type.");
+		});
+		const highlightClass = addPrefix("--highlight");
+		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;
+			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 = 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();
+		};
+		watch(modelValue, resetAndMark);
+		onBeforeUnmount(resetMark);
+		const refresh = function() {
+			var _ref = _asyncToGenerator(function* (resetIndex = true) {
+				yield nextTick();
+				resetIndex ? resetAndMark() : setMark();
+			});
+			return function refresh() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		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 = shallowRef();
+		expose(_objectSpread2(_objectSpread2({}, 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 () => createVNode("div", { "class": rootClass.value }, [
+			withDirectives(createVNode("input", mergeProps(inputAttrs.value, {
+				"onUpdate:modelValue": ($event) => modelValue.value = $event,
+				"class": addPrefix("__input"),
+				"ref": inputRef,
+				"onKeydown": onKeydown
+			}), null), [[vModelText, modelValue.value]]),
+			modelValue.value && createVNode(Fragment, null, [
+				props.clearable && createVNode("button", {
+					"aria-label": "Clear",
+					"class": [addPrefix("__clearable"), addPrefix("__btn")],
+					"onClick": onClear
+				}, [createVNode(FontAwesomeIcon, {
+					"size": "xs",
+					"icon": faCircleXmark
+				}, null)]),
+				createVNode("span", { "class": addPrefix("__count") }, [matchesCount.value]),
+				createVNode("button", {
+					"aria-label": "Previous",
+					"class": [addPrefix("__prev"), addPrefix("__btn")],
+					"onClick": () => onStepClick("prev")
+				}, [createVNode(FontAwesomeIcon, { "icon": faAngleUp }, null)]),
+				createVNode("button", {
+					"aria-label": "Next",
+					"class": [addPrefix("__next"), addPrefix("__btn")],
+					"onClick": () => onStepClick("next")
+				}, [createVNode(FontAwesomeIcon, { "icon": faAngleDown }, null)])
+			]),
+			props.closeIcon && createVNode("button", {
+				"aria-label": "Close",
+				"class": [addPrefix("__close"), addPrefix("__btn")],
+				"onClick": () => emit("close")
+			}, [createVNode(FontAwesomeIcon, { "icon": faXmark }, null)])
+		]);
+	}
 });
-export {
-  _Search as default,
-  searchEmits,
-  searchProps
-};
+//#endregion
+export { Search_default as default, searchEmits, searchProps };

package/es/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/es/search/index2.mjs

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