vant 4.7.3 → 4.8.1

package/es/index.mjs

@@ -40,6 +40,7 @@ import { FloatingPanel } from "./floating-panel/index.mjs";
 import { Form } from "./form/index.mjs";
 import { Grid } from "./grid/index.mjs";
 import { GridItem } from "./grid-item/index.mjs";
+import { Highlight } from "./highlight/index.mjs";
 import { Icon } from "./icon/index.mjs";
 import { Image } from "./image/index.mjs";
 import { ImagePreview } from "./image-preview/index.mjs";
@@ -98,7 +99,7 @@ import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Watermark } from "./watermark/index.mjs";
-const version = "4.7.3";
+const version = "4.8.1";
 function install(app) {
   const components = [
     ActionBar,
@@ -143,6 +144,7 @@ function install(app) {
     Form,
     Grid,
     GridItem,
+    Highlight,
     Icon,
     Image,
     ImagePreview,
@@ -252,6 +254,7 @@ export * from "./floating-panel/index.mjs";
 export * from "./form/index.mjs";
 export * from "./grid/index.mjs";
 export * from "./grid-item/index.mjs";
+export * from "./highlight/index.mjs";
 export * from "./icon/index.mjs";
 export * from "./image/index.mjs";
 export * from "./image-preview/index.mjs";

package/es/row/Row.d.ts

@@ -3,8 +3,12 @@ export type RowSpaces = {
     left?: number;
     right: number;
 }[];
+export type VerticalSpaces = {
+    bottom?: number;
+}[];
 export type RowProvide = {
     spaces: ComputedRef<RowSpaces>;
+    verticalSpaces: ComputedRef<VerticalSpaces>;
 };
 export declare const ROW_KEY: InjectionKey<RowProvide>;
 export type RowAlign = 'top' | 'center' | 'bottom';
@@ -20,7 +24,7 @@ export declare const rowProps: {
     };
     align: PropType<RowAlign>;
     gutter: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: PropType<string | number | (string | number)[]>;
         default: number;
     };
     justify: PropType<RowJustify>;
@@ -37,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     align: PropType<RowAlign>;
     gutter: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: PropType<string | number | (string | number)[]>;
         default: number;
     };
     justify: PropType<RowJustify>;
@@ -52,13 +56,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     align: PropType<RowAlign>;
     gutter: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: PropType<string | number | (string | number)[]>;
         default: number;
     };
     justify: PropType<RowJustify>;
 }>>, {
     tag: keyof HTMLElementTagNameMap;
     wrap: boolean;
-    gutter: string | number;
+    gutter: string | number | (string | number)[];
 }, {}>;
 export default _default;

package/es/row/Row.mjs

@@ -1,6 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 import { computed, defineComponent } from "vue";
-import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { truthProp, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { useChildren } from "@vant/use";
 const [name, bem] = createNamespace("row");
 const ROW_KEY = Symbol(name);
@@ -8,7 +8,10 @@ const rowProps = {
   tag: makeStringProp("div"),
   wrap: truthProp,
   align: String,
-  gutter: makeNumericProp(0),
+  gutter: {
+    type: [String, Number, Array],
+    default: 0
+  },
   justify: String
 };
 var stdin_default = defineComponent({
@@ -36,7 +39,12 @@ var stdin_default = defineComponent({
       return groups2;
     });
     const spaces = computed(() => {
-      const gutter = Number(props.gutter);
+      let gutter = 0;
+      if (Array.isArray(props.gutter)) {
+        gutter = Number(props.gutter[0]) || 0;
+      } else {
+        gutter = Number(props.gutter);
+      }
       const spaces2 = [];
       if (!gutter) {
         return spaces2;
@@ -60,8 +68,31 @@ var stdin_default = defineComponent({
       });
       return spaces2;
     });
+    const verticalSpaces = computed(() => {
+      const {
+        gutter
+      } = props;
+      const spaces2 = [];
+      if (Array.isArray(gutter) && gutter.length > 1) {
+        const bottom = Number(gutter[1]) || 0;
+        if (bottom <= 0) {
+          return spaces2;
+        }
+        groups.value.forEach((group, index) => {
+          if (index === groups.value.length - 1)
+            return;
+          group.forEach(() => {
+            spaces2.push({
+              bottom
+            });
+          });
+        });
+      }
+      return spaces2;
+    });
     linkChildren({
-      spaces
+      spaces,
+      verticalSpaces
     });
     return () => {
       const {

package/es/row/index.d.ts

@@ -9,7 +9,7 @@ export declare const Row: import("../utils").WithInstall<import("vue").DefineCom
     };
     align: import("vue").PropType<import("./Row").RowAlign>;
     gutter: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: import("vue").PropType<string | number | (string | number)[]>;
         default: number;
     };
     justify: import("vue").PropType<import("./Row").RowJustify>;
@@ -24,14 +24,14 @@ export declare const Row: import("../utils").WithInstall<import("vue").DefineCom
     };
     align: import("vue").PropType<import("./Row").RowAlign>;
     gutter: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: import("vue").PropType<string | number | (string | number)[]>;
         default: number;
     };
     justify: import("vue").PropType<import("./Row").RowJustify>;
 }>>, {
     tag: keyof HTMLElementTagNameMap;
     wrap: boolean;
-    gutter: string | number;
+    gutter: string | number | (string | number)[];
 }, {}>>;
 export default Row;
 export { rowProps } from './Row';

package/es/text-ellipsis/TextEllipsis.mjs

@@ -1,7 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, onMounted, defineComponent } from "vue";
-import { useEventListener } from "@vant/use";
-import { makeNumericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { makeNumericProp, makeStringProp, createNamespace, windowWidth } from "../utils/index.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
 const [name, bem] = createNamespace("text-ellipsis");
 const textEllipsisProps = {
   rows: makeNumericProp(1),
@@ -117,8 +117,11 @@ var stdin_default = defineComponent({
       }
       document.body.removeChild(container);
     };
+    const toggle = (isExpanded = !expanded.value) => {
+      expanded.value = isExpanded;
+    };
     const onClickAction = (event) => {
-      expanded.value = !expanded.value;
+      toggle();
       emit("clickAction", event);
     };
     const renderAction = () => _createVNode("span", {
@@ -126,8 +129,10 @@ var stdin_default = defineComponent({
       "onClick": onClickAction
     }, [actionText.value]);
     onMounted(calcEllipsised);
-    watch(() => [props.content, props.rows, props.position], calcEllipsised);
-    useEventListener("resize", calcEllipsised);
+    watch([windowWidth, () => [props.content, props.rows, props.position]], calcEllipsised);
+    useExpose({
+      toggle
+    });
     return () => _createVNode("div", {
       "ref": root,
       "class": bem()

package/es/text-ellipsis/index.d.ts

@@ -61,7 +61,7 @@ export declare const TextEllipsis: import("../utils").WithInstall<import("vue").
 export default TextEllipsis;
 export { textEllipsisProps } from './TextEllipsis';
 export type { TextEllipsisProps } from './TextEllipsis';
-export type { TextEllipsisThemeVars } from './types';
+export type { TextEllipsisInstance, TextEllipsisThemeVars } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanTextEllipsis: typeof TextEllipsis;

package/es/text-ellipsis/types.d.ts

@@ -1,3 +1,9 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { TextEllipsisProps } from './TextEllipsis';
+export type TextEllipsisExpose = {
+    toggle: (expanded?: boolean) => void;
+};
+export type TextEllipsisInstance = ComponentPublicInstance<TextEllipsisProps, TextEllipsisExpose>;
 export type TextEllipsisThemeVars = {
     textEllipsisActionColor?: string;
 };

package/lib/calendar/Calendar.js

@@ -140,7 +140,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     let bodyHeight;
     const bodyRef = (0, import_vue2.ref)();
     const subtitle = (0, import_vue2.ref)({
-      text: "",
+      textFn: () => "",
       date: void 0
     });
     const currentDate = (0, import_vue2.ref)(getInitialDate());
@@ -204,7 +204,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
       if (currentMonth) {
         subtitle.value = {
-          text: currentMonth.getTitle(),
+          textFn: currentMonth.getTitle,
           date: currentMonth.date
         };
       }
@@ -394,21 +394,24 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "van-safe-area-bottom": props.safeAreaInsetBottom
       }]
     }, [renderFooterButton()]);
-    const renderCalendar = () => (0, import_vue.createVNode)("div", {
-      "class": (0, import_utils2.bem)()
-    }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
-      "date": subtitle.value.date,
-      "title": props.title,
-      "subtitle": subtitle.value.text,
-      "showTitle": props.showTitle,
-      "showSubtitle": props.showSubtitle,
-      "firstDayOfWeek": dayOffset.value,
-      "onClickSubtitle": (event) => emit("clickSubtitle", event)
-    }, (0, import_utils.pick)(slots, ["title", "subtitle"])), (0, import_vue.createVNode)("div", {
-      "ref": bodyRef,
-      "class": (0, import_utils2.bem)("body"),
-      "onScroll": onScroll
-    }, [months.value.map(renderMonth)]), renderFooter()]);
+    const renderCalendar = () => {
+      const subTitle = subtitle.value.textFn();
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)()
+      }, [(0, import_vue.createVNode)(import_CalendarHeader.default, {
+        "date": subtitle.value.date,
+        "title": props.title,
+        "subtitle": subTitle,
+        "showTitle": props.showTitle,
+        "showSubtitle": props.showSubtitle,
+        "firstDayOfWeek": dayOffset.value,
+        "onClickSubtitle": (event) => emit("clickSubtitle", event)
+      }, (0, import_utils.pick)(slots, ["title", "subtitle"])), (0, import_vue.createVNode)("div", {
+        "ref": bodyRef,
+        "class": (0, import_utils2.bem)("body"),
+        "onScroll": onScroll
+      }, [months.value.map(renderMonth)]), renderFooter()]);
+    };
     (0, import_vue2.watch)(() => props.show, init);
     (0, import_vue2.watch)(() => [props.type, props.minDate, props.maxDate], () => reset(getInitialDate(currentDate.value)));
     (0, import_vue2.watch)(() => props.defaultDate, (value = null) => {

package/lib/checkbox/Checker.js

@@ -131,12 +131,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, null)]);
     };
     const renderLabel = () => {
+      const {
+        checked
+      } = props;
       if (slots.default) {
         return (0, import_vue.createVNode)("span", {
           "class": props.bem("label", [props.labelPosition, {
             disabled: disabled.value
           }])
-        }, [slots.default()]);
+        }, [slots.default({
+          checked,
+          disabled: disabled.value
+        })]);
       }
     };
     return () => {

package/lib/col/Col.js

@@ -47,18 +47,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return;
       }
       const {
-        spaces
+        spaces,
+        verticalSpaces
       } = parent;
+      let styles = {};
       if (spaces && spaces.value && spaces.value[index.value]) {
         const {
           left,
           right
         } = spaces.value[index.value];
-        return {
+        styles = {
           paddingLeft: left ? `${left}px` : null,
           paddingRight: right ? `${right}px` : null
         };
       }
+      const {
+        bottom
+      } = verticalSpaces.value[index.value] || {};
+      return (0, import_utils.extend)(styles, {
+        marginBottom: bottom ? `${bottom}px` : null
+      });
     });
     return () => {
       const {

package/lib/config-provider/types.d.ts

@@ -57,5 +57,5 @@ type BaseThemeVars = {
     radiusLg?: string;
     radiusMax?: string;
 };
-export type ConfigProviderThemeVars = BaseThemeVars & import('../action-bar').ActionBarThemeVars & import('../action-bar-button').ActionBarButtonThemeVars & import('../action-bar-icon').ActionBarIconThemeVars & import('../action-sheet').ActionSheetThemeVars & import('../address-edit').AddressEditThemeVars & import('../address-list').AddressListThemeVars & import('../back-top').BackTopThemeVars & import('../badge').BadgeThemeVars & import('../barrage').BarrageThemeVars & import('../button').ButtonThemeVars & import('../calendar').CalendarThemeVars & import('../card').CardThemeVars & import('../cascader').CascaderThemeVars & import('../cell').CellThemeVars & import('../cell-group').CellGroupThemeVars & import('../checkbox').CheckboxThemeVars & import('../circle').CircleThemeVars & import('../collapse-item').CollapseItemThemeVars & import('../contact-card').ContactCardThemeVars & import('../contact-edit').ContactEditThemeVars & import('../contact-list').ContactListThemeVars & import('../count-down').CountDownThemeVars & import('../coupon').CouponThemeVars & import('../coupon-cell').CouponCellThemeVars & import('../coupon-list').CouponListThemeVars & import('../dialog').DialogThemeVars & import('../divider').DividerThemeVars & import('../dropdown-item').DropdownItemThemeVars & import('../dropdown-menu').DropdownMenuThemeVars & import('../empty').EmptyThemeVars & import('../field').FieldThemeVars & import('../floating-bubble').FloatingBubbleThemeVars & import('../floating-panel').FloatingPanelThemeVars & import('../grid-item').GridItemThemeVars & import('../image').ImageThemeVars & import('../image-preview').ImagePreviewThemeVars & import('../index-anchor').IndexAnchorThemeVars & import('../index-bar').IndexBarThemeVars & import('../list').ListThemeVars & import('../loading').LoadingThemeVars & import('../nav-bar').NavBarThemeVars & import('../notice-bar').NoticeBarThemeVars & import('../notify').NotifyThemeVars & import('../number-keyboard').NumberKeyboardThemeVars & import('../overlay').OverlayThemeVars & import('../pagination').PaginationThemeVars & import('../password-input').PasswordInputThemeVars & import('../picker').PickerThemeVars & import('../picker-group').PickerGroupThemeVars & import('../popover').PopoverThemeVars & import('../popup').PopupThemeVars & import('../progress').ProgressThemeVars & import('../pull-refresh').PullRefreshThemeVars & import('../radio').RadioThemeVars & import('../rate').RateThemeVars & import('../rolling-text').RollingTextThemeVars & import('../search').SearchThemeVars & import('../share-sheet').ShareSheetThemeVars & import('../sidebar').SidebarThemeVars & import('../sidebar-item').SidebarItemThemeVars & import('../signature').SignatureThemeVars & import('../skeleton').SkeletonThemeVars & import('../slider').SliderThemeVars & import('../step').StepThemeVars & import('../stepper').StepperThemeVars & import('../steps').StepsThemeVars & import('../sticky').StickyThemeVars & import('../submit-bar').SubmitBarThemeVars & import('../swipe').SwipeThemeVars & import('../switch').SwitchThemeVars & import('../tabbar').TabbarThemeVars & import('../tabbar-item').TabbarItemThemeVars & import('../tabs').TabsThemeVars & import('../tag').TagThemeVars & import('../toast').ToastThemeVars & import('../tree-select').TreeSelectThemeVars & import('../uploader').UploaderThemeVars & import('../watermark').WatermarkThemeVars;
+export type ConfigProviderThemeVars = BaseThemeVars & import('../action-bar').ActionBarThemeVars & import('../action-bar-button').ActionBarButtonThemeVars & import('../action-bar-icon').ActionBarIconThemeVars & import('../action-sheet').ActionSheetThemeVars & import('../address-edit').AddressEditThemeVars & import('../address-list').AddressListThemeVars & import('../back-top').BackTopThemeVars & import('../badge').BadgeThemeVars & import('../barrage').BarrageThemeVars & import('../button').ButtonThemeVars & import('../calendar').CalendarThemeVars & import('../card').CardThemeVars & import('../cascader').CascaderThemeVars & import('../cell').CellThemeVars & import('../cell-group').CellGroupThemeVars & import('../checkbox').CheckboxThemeVars & import('../circle').CircleThemeVars & import('../collapse-item').CollapseItemThemeVars & import('../contact-card').ContactCardThemeVars & import('../contact-edit').ContactEditThemeVars & import('../contact-list').ContactListThemeVars & import('../count-down').CountDownThemeVars & import('../coupon').CouponThemeVars & import('../coupon-cell').CouponCellThemeVars & import('../coupon-list').CouponListThemeVars & import('../dialog').DialogThemeVars & import('../divider').DividerThemeVars & import('../dropdown-item').DropdownItemThemeVars & import('../dropdown-menu').DropdownMenuThemeVars & import('../empty').EmptyThemeVars & import('../highlight').HighlightThemeVars & import('../field').FieldThemeVars & import('../floating-bubble').FloatingBubbleThemeVars & import('../floating-panel').FloatingPanelThemeVars & import('../grid-item').GridItemThemeVars & import('../image').ImageThemeVars & import('../image-preview').ImagePreviewThemeVars & import('../index-anchor').IndexAnchorThemeVars & import('../index-bar').IndexBarThemeVars & import('../list').ListThemeVars & import('../loading').LoadingThemeVars & import('../nav-bar').NavBarThemeVars & import('../notice-bar').NoticeBarThemeVars & import('../notify').NotifyThemeVars & import('../number-keyboard').NumberKeyboardThemeVars & import('../overlay').OverlayThemeVars & import('../pagination').PaginationThemeVars & import('../password-input').PasswordInputThemeVars & import('../picker').PickerThemeVars & import('../picker-group').PickerGroupThemeVars & import('../popover').PopoverThemeVars & import('../popup').PopupThemeVars & import('../progress').ProgressThemeVars & import('../pull-refresh').PullRefreshThemeVars & import('../radio').RadioThemeVars & import('../rate').RateThemeVars & import('../rolling-text').RollingTextThemeVars & import('../search').SearchThemeVars & import('../share-sheet').ShareSheetThemeVars & import('../sidebar').SidebarThemeVars & import('../sidebar-item').SidebarItemThemeVars & import('../signature').SignatureThemeVars & import('../skeleton').SkeletonThemeVars & import('../slider').SliderThemeVars & import('../step').StepThemeVars & import('../stepper').StepperThemeVars & import('../steps').StepsThemeVars & import('../sticky').StickyThemeVars & import('../submit-bar').SubmitBarThemeVars & import('../swipe').SwipeThemeVars & import('../switch').SwitchThemeVars & import('../tabbar').TabbarThemeVars & import('../tabbar-item').TabbarItemThemeVars & import('../tabs').TabsThemeVars & import('../tag').TagThemeVars & import('../toast').ToastThemeVars & import('../tree-select').TreeSelectThemeVars & import('../uploader').UploaderThemeVars & import('../watermark').WatermarkThemeVars;
 export {};

package/lib/highlight/Highlight.d.ts

@@ -0,0 +1,96 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+export declare const highlightProps: {
+    autoEscape: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    caseSensitive: BooleanConstructor;
+    highlightClass: StringConstructor;
+    highlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    keywords: {
+        type: PropType<string | string[]>;
+        required: true;
+    };
+    sourceString: {
+        type: PropType<string>;
+        default: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    unhighlightClass: StringConstructor;
+    unhighlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+};
+export type HighlightProps = ExtractPropTypes<typeof highlightProps>;
+declare const _default: import("vue").DefineComponent<{
+    autoEscape: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    caseSensitive: BooleanConstructor;
+    highlightClass: StringConstructor;
+    highlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    keywords: {
+        type: PropType<string | string[]>;
+        required: true;
+    };
+    sourceString: {
+        type: PropType<string>;
+        default: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    unhighlightClass: StringConstructor;
+    unhighlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    autoEscape: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    caseSensitive: BooleanConstructor;
+    highlightClass: StringConstructor;
+    highlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    keywords: {
+        type: PropType<string | string[]>;
+        required: true;
+    };
+    sourceString: {
+        type: PropType<string>;
+        default: string;
+    };
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    unhighlightClass: StringConstructor;
+    unhighlightTag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+}>>, {
+    tag: keyof HTMLElementTagNameMap;
+    autoEscape: boolean;
+    caseSensitive: boolean;
+    highlightTag: keyof HTMLElementTagNameMap;
+    sourceString: string;
+    unhighlightTag: keyof HTMLElementTagNameMap;
+}, {}>;
+export default _default;

package/lib/highlight/Highlight.js

@@ -0,0 +1,141 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  highlightProps: () => highlightProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+const [name, bem] = (0, import_utils.createNamespace)("highlight");
+const highlightProps = {
+  autoEscape: import_utils.truthProp,
+  caseSensitive: Boolean,
+  highlightClass: String,
+  highlightTag: (0, import_utils.makeStringProp)("span"),
+  keywords: (0, import_utils.makeRequiredProp)([String, Array]),
+  sourceString: (0, import_utils.makeStringProp)(""),
+  tag: (0, import_utils.makeStringProp)("div"),
+  unhighlightClass: String,
+  unhighlightTag: (0, import_utils.makeStringProp)("span")
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: highlightProps,
+  setup(props) {
+    const highlightChunks = (0, import_vue2.computed)(() => {
+      const {
+        autoEscape,
+        caseSensitive,
+        keywords,
+        sourceString
+      } = props;
+      const flags = caseSensitive ? "g" : "gi";
+      const _keywords = Array.isArray(keywords) ? keywords : [keywords];
+      let chunks = _keywords.filter((keyword) => keyword).reduce((chunks2, keyword) => {
+        if (autoEscape) {
+          keyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        }
+        const regex = new RegExp(keyword, flags);
+        let match;
+        while (match = regex.exec(sourceString)) {
+          const start = match.index;
+          const end = regex.lastIndex;
+          if (start >= end) {
+            regex.lastIndex++;
+            continue;
+          }
+          chunks2.push({
+            start,
+            end,
+            highlight: true
+          });
+        }
+        return chunks2;
+      }, []);
+      chunks = chunks.sort((a, b) => a.start - b.start).reduce((chunks2, currentChunk) => {
+        const prevChunk = chunks2[chunks2.length - 1];
+        if (!prevChunk || currentChunk.start > prevChunk.end) {
+          const unhighlightStart = prevChunk ? prevChunk.end : 0;
+          const unhighlightEnd = currentChunk.start;
+          if (unhighlightStart !== unhighlightEnd) {
+            chunks2.push({
+              start: unhighlightStart,
+              end: unhighlightEnd,
+              highlight: false
+            });
+          }
+          chunks2.push(currentChunk);
+        } else {
+          prevChunk.end = Math.max(prevChunk.end, currentChunk.end);
+        }
+        return chunks2;
+      }, []);
+      const lastChunk = chunks[chunks.length - 1];
+      if (lastChunk && lastChunk.end < sourceString.length) {
+        chunks.push({
+          start: lastChunk.end,
+          end: sourceString.length,
+          highlight: false
+        });
+      }
+      return chunks;
+    });
+    const renderContent = () => {
+      const {
+        sourceString,
+        highlightClass,
+        unhighlightClass,
+        highlightTag,
+        unhighlightTag
+      } = props;
+      return highlightChunks.value.map((chunk) => {
+        const {
+          start,
+          end,
+          highlight
+        } = chunk;
+        const text = sourceString.slice(start, end);
+        if (highlight) {
+          return (0, import_vue.createVNode)(highlightTag, {
+            "class": [bem("tag"), highlightClass]
+          }, {
+            default: () => [text]
+          });
+        }
+        return (0, import_vue.createVNode)(unhighlightTag, {
+          "class": unhighlightClass
+        }, {
+          default: () => [text]
+        });
+      });
+    };
+    return () => {
+      const {
+        tag
+      } = props;
+      return (0, import_vue.createVNode)(tag, {
+        "class": bem()
+      }, {
+        default: () => [renderContent()]
+      });
+    };
+  }
+});

package/lib/highlight/index.css

@@ -0,0 +1 @@
+:root{--van-highlight-tag-color: var(--van-primary-color)}.van-highlight__tag{color:var(--van-highlight-tag-color)}