zartui 3.1.9 → 3.1.10

package/lib/image/index.d.ts

@@ -70,6 +70,7 @@ export declare const Image: import("../utils").WithInstall<import("vue").DefineC
 }, {}>>;
 export default Image;
 export type { ImageFit, ImageProps } from './Image';
+export type { ImageThemeVars } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         ZtImage: typeof Image;

package/lib/image/types.d.ts

@@ -0,0 +1,5 @@
+export type ImageThemeVars = {
+    imagePlaceholderTextColor?: string;
+    imagePlaceholderBackground?: string;
+    imageIconFontSize?: string;
+};

package/lib/image/types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 = {};
+module.exports = __toCommonJS(stdin_exports);

package/lib/image-preview/ImagePreview.d.ts

@@ -195,11 +195,11 @@ declare const _default: import("vue").DefineComponent<{
     closeOnPopstate: boolean;
     closeIconPosition: PopupCloseIconPosition;
     showIndicators: boolean;
-    swipeDuration: string | number;
     minZoom: string | number;
     maxZoom: string | number;
     images: ImageItem[];
     showIndex: boolean;
+    swipeDuration: string | number;
     startPosition: string | number;
 }, {}>;
 export default _default;

package/lib/image-preview/index.css

@@ -1 +1 @@
-:root{--zt-image-preview-index-height: 48px;--zt-image-preview-index-line-height: 24px;--zt-image-preview-index-background: var(--zt-gray-a4);--zt-image-preview-index-text-color: var(--zt-white);--zt-image-preview-index-number-font-size: var(--zt-font-size-sm);--zt-image-preview-title-font-size: var(--zt-font-size-md);--zt-image-preview-overlay-background: rgba(0, 0, 0, .9);--zt-image-preview-close-icon-size: 22px;--zt-image-preview-close-icon-color: var(--zt-gray-5);--zt-image-preview-close-icon-margin: var(--zt-padding-md);--zt-image-preview-close-icon-z-index: 1}.zt-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.zt-image-preview__swipe{height:100%}.zt-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.zt-image-preview__cover{position:absolute;top:0;left:0}.zt-image-preview__image,.zt-image-preview__image-wrap{width:100%;transition-property:transform}.zt-image-preview__image--vertical,.zt-image-preview__image-wrap--vertical{width:auto;height:100%}.zt-image-preview__image img,.zt-image-preview__image-wrap img,.zt-image-preview__image video,.zt-image-preview__image-wrap video{-webkit-user-drag:none}.zt-image-preview__image .zt-image__error,.zt-image-preview__image-wrap .zt-image__error{top:30%;height:40%}.zt-image-preview__image .zt-image__error-icon,.zt-image-preview__image-wrap .zt-image__error-icon{font-size:36px}.zt-image-preview__image .zt-image__loading,.zt-image-preview__image-wrap .zt-image__loading{background-color:transparent}.zt-image-preview__index{box-sizing:border-box;display:flex;align-items:center;position:absolute;bottom:0;left:0;width:100%;height:var(--zt-image-preview-index-height);padding:0 16px;background-color:var(--zt-image-preview-index-background);color:var(--zt-image-preview-index-text-color);overflow:hidden}.zt-image-preview__index-number{height:var(--zt-image-preview-index-line-height);background:rgba(45,75,115,.8);border-radius:2px;font-size:var(--zt-image-preview-index-number-font-size);text-align:center;line-height:var(--zt-image-preview-index-line-height);padding:0 8px}.zt-image-preview__title{flex-shrink:0;margin-left:8px;font-size:var(--zt-image-preview-title-font-size);line-height:var(--zt-image-preview-index-line-height)}.zt-image-preview__overlay{background:var(--zt-image-preview-overlay-background)}.zt-image-preview__close-icon{position:absolute;z-index:var(--zt-image-preview-close-icon-z-index);color:var(--zt-image-preview-close-icon-color);font-size:var(--zt-image-preview-close-icon-size)}.zt-image-preview__close-icon--top-left{top:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--top-right{top:var(--zt-image-preview-close-icon-margin);right:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-left{bottom:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-right{right:var(--zt-image-preview-close-icon-margin);bottom:var(--zt-image-preview-close-icon-margin)}
+:root{--zt-image-preview-index-height: 48px;--zt-image-preview-index-background: var(--zt-gray-a4);--zt-image-preview-index-text-color: var(--zt-white);--zt-image-preview-overlay-background: rgba(0, 0, 0, .9);--zt-image-preview-close-icon-color: var(--zt-gray-5);--zt-image-preview-close-icon-margin: var(--zt-padding-md);--zt-image-preview-close-icon-z-index: 1;--zt-image-preview-error-font-size: 36px}:root[zt-theme-size=large]{--zt-image-preview-error-font-size: 42px}.zt-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.zt-image-preview__swipe{height:100%}.zt-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.zt-image-preview__cover{position:absolute;top:0;left:0}.zt-image-preview__image,.zt-image-preview__image-wrap{width:100%;transition-property:transform}.zt-image-preview__image--vertical,.zt-image-preview__image-wrap--vertical{width:auto;height:100%}.zt-image-preview__image img,.zt-image-preview__image-wrap img,.zt-image-preview__image video,.zt-image-preview__image-wrap video{-webkit-user-drag:none}.zt-image-preview__image .zt-image__error,.zt-image-preview__image-wrap .zt-image__error{top:30%;height:40%}.zt-image-preview__image .zt-image__error-icon,.zt-image-preview__image-wrap .zt-image__error-icon{font-size:var(--zt-image-preview-error-font-size)}.zt-image-preview__image .zt-image__loading,.zt-image-preview__image-wrap .zt-image__loading{background-color:transparent}.zt-image-preview__index{box-sizing:border-box;display:flex;align-items:center;position:absolute;bottom:0;left:0;width:100%;height:var(--zt-image-preview-index-height);padding:0 16px;background-color:var(--zt-image-preview-index-background);color:var(--zt-image-preview-index-text-color);overflow:hidden}.zt-image-preview__index-number{height:var(--zt-line-height-xl);background:rgba(45,75,115,.8);border-radius:2px;font-size:var(--zt-font-size-sm);text-align:center;line-height:var(--zt-line-height-xl);padding:0 8px}.zt-image-preview__title{flex-shrink:0;margin-left:8px;font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-xl)}.zt-image-preview__overlay{background:var(--zt-image-preview-overlay-background)}.zt-image-preview__close-icon{position:absolute;z-index:var(--zt-image-preview-close-icon-z-index);color:var(--zt-image-preview-close-icon-color);font-size:var(--zt-font-size-xxxl)}.zt-image-preview__close-icon--top-left{top:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--top-right{top:var(--zt-image-preview-close-icon-margin);right:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-left{bottom:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-right{right:var(--zt-image-preview-close-icon-margin);bottom:var(--zt-image-preview-close-icon-margin)}

package/lib/image-preview/index.d.ts

@@ -132,18 +132,18 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
     closeOnPopstate: boolean;
     closeIconPosition: import("..").PopupCloseIconPosition;
     showIndicators: boolean;
-    swipeDuration: string | number;
     minZoom: string | number;
     maxZoom: string | number;
     images: import("./types").ImageItem[];
     showIndex: boolean;
+    swipeDuration: string | number;
     startPosition: string | number;
 }, {}>>;
 export default ImagePreview;
 export { imagePreviewProps } from './ImagePreview';
 export { showImagePreview } from './function-call';
 export type { ImagePreviewProps };
-export type { ImageItem, ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, } from './types';
+export type { ImageItem, ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, ImagePreviewThemeVars, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         ZtImagePreview: typeof ImagePreview;

package/lib/image-preview/types.d.ts

@@ -42,3 +42,13 @@ export type ImagePreviewExpose = {
     swipeTo: (index: number, options?: SwipeToOptions) => void;
 };
 export type ImagePreviewInstance = ComponentPublicInstance<ImagePreviewProps, ImagePreviewExpose>;
+export type ImagePreviewThemeVars = {
+    imagePreviewIndexHeight?: string;
+    imagePreviewIndexBackground?: string;
+    imagePreviewIndexTextColor?: string;
+    imagePreviewOverlayBackground?: string;
+    imagePreviewCloseIconColor?: string;
+    imagePreviewCloseIconMargin?: string;
+    imagePreviewCloseIconZIndex?: string;
+    imagePreviewErrorFontSize?: string;
+};

package/lib/index-anchor/index.css

@@ -1 +1 @@
-:root{--zt-index-anchor-z-index: 1;--zt-index-anchor-padding: 0 var(--zt-padding-md);--zt-index-anchor-text-color: var(--zt-text-color);--zt-index-anchor-font-weight: var(--zt-font-bold);--zt-index-anchor-font-size: var(--zt-font-size-md);--zt-index-anchor-line-height: 44px;--zt-index-anchor-background: transparent;--zt-index-anchor-sticky-text-color: var(--zt-primary-color);--zt-index-anchor-sticky-background: var(--zt-background-2)}.zt-index-anchor{z-index:var(--zt-index-anchor-z-index);box-sizing:border-box;padding:var(--zt-index-anchor-padding);color:var(--zt-index-anchor-text-color);font-weight:var(--zt-index-anchor-font-weight);font-size:var(--zt-index-anchor-font-size);line-height:var(--zt-index-anchor-line-height);height:var(--zt-index-anchor-line-height);background:var(--zt-index-anchor-background);position:relative;display:flex}.zt-index-anchor:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5);top:unset}.zt-index-anchor:before{position:absolute;content:"";top:14px;left:0;width:4px;height:16px;background:#0091fa}.zt-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--zt-index-anchor-sticky-text-color);background:var(--zt-background)}
+:root{--zt-index-anchor-z-index: 1;--zt-index-anchor-padding: 0 var(--zt-padding-md);--zt-index-anchor-text-color: var(--zt-text-color);--zt-index-anchor-font-weight: var(--zt-font-bold);--zt-index-anchor-background: transparent;--zt-index-anchor-sticky-text-color: var(--zt-primary-color);--zt-index-anchor-height: 44px}:root[zt-theme-size=large]{--zt-index-anchor-height: 56px}.zt-index-anchor{z-index:var(--zt-index-anchor-z-index);box-sizing:border-box;padding:var(--zt-index-anchor-padding);color:var(--zt-index-anchor-text-color);font-weight:var(--zt-index-anchor-font-weight);font-size:var(--zt-font-size-md);line-height:var(--zt-index-anchor-height);height:var(--zt-index-anchor-height);background:var(--zt-index-anchor-background);position:relative;display:flex}.zt-index-anchor:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5);top:unset}.zt-index-anchor:before{position:absolute;content:"";top:14px;left:0;width:4px;height:16px;background:var(--zt-primary-color)}.zt-index-anchor--sticky{position:fixed;top:0;right:0;left:0;color:var(--zt-index-anchor-sticky-text-color);background:var(--zt-background)}

package/lib/index-anchor/types.d.ts

@@ -3,9 +3,7 @@ export type IndexAnchorThemeVars = {
     indexAnchorPadding?: string;
     indexAnchorTextColor?: string;
     indexAnchorFontWeight?: string;
-    indexAnchorFontSize?: string;
-    indexAnchorLineHeight?: number | string;
     indexAnchorBackground?: string;
     indexAnchorStickyTextColor?: string;
-    indexAnchorStickyBackground?: string;
+    indexAnchorHeight?: string;
 };

package/lib/index-bar/IndexBar.d.ts

@@ -22,6 +22,14 @@ export declare const indexBarProps: {
         type: PropType<Numeric[]>;
         default: typeof genAlphabet;
     };
+    indexBarMaxHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    contractionPointText: {
+        type: PropType<string>;
+        default: string;
+    };
 };
 export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>;
 export declare const INDEX_BAR_KEY: InjectionKey<IndexBarProvide>;
@@ -45,6 +53,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Numeric[]>;
         default: typeof genAlphabet;
     };
+    indexBarMaxHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    contractionPointText: {
+        type: PropType<string>;
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "anchorClick" | "update:activeAnchor")[], "select" | "change" | "anchorClick" | "update:activeAnchor", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     sticky: {
         type: BooleanConstructor;
@@ -65,6 +81,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Numeric[]>;
         default: typeof genAlphabet;
     };
+    indexBarMaxHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    contractionPointText: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -75,5 +99,7 @@ declare const _default: import("vue").DefineComponent<{
     activeAnchor: string | number;
     stickyOffsetTop: number;
     indexList: Numeric[];
+    indexBarMaxHeight: string | number;
+    contractionPointText: string;
 }, {}>;
 export default _default;

package/lib/index-bar/IndexBar.js

@@ -29,6 +29,8 @@ var import_use = require("@zartui/use");
 var import_use_touch = require("../composables/use-touch");
 var import_use_expose = require("../composables/use-expose");
 var import_use_sync_prop_ref = require("../composables/use-sync-prop-ref");
+var import_parse = require("../utils/parse");
+var import_deep_clone = require("../utils/deep-clone");
 function genAlphabet() {
   const charCodeOfA = "A".charCodeAt(0);
   const indexList = Array(26).fill("").map((_, i) => String.fromCharCode(charCodeOfA + i));
@@ -45,9 +47,12 @@ const indexBarProps = {
   indexList: {
     type: Array,
     default: genAlphabet
-  }
+  },
+  indexBarMaxHeight: (0, import_utils.makeNumericProp)("70vh"),
+  contractionPointText: (0, import_utils.makeStringProp)("\xB7")
 };
 const INDEX_BAR_KEY = Symbol(name);
+const MIN_CONTRACTION_NUM = 2;
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: indexBarProps,
@@ -60,6 +65,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const sidebar = (0, import_vue2.ref)();
     const activeAnchor = (0, import_use_sync_prop_ref.useSyncPropRef)(() => props.activeAnchor, (value) => emit("update:activeAnchor", value));
     const touchIndex = (0, import_vue2.ref)("");
+    const indexBarMaxHeight = () => {
+      return props.indexBarMaxHeight ? (0, import_utils.unitToPx)(props.indexBarMaxHeight) : (0, import_utils.unitToPx)("100vh");
+    };
     const touch = (0, import_use_touch.useTouch)();
     const scrollParent = (0, import_use.useScrollParent)(root);
     const {
@@ -182,54 +190,170 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const scrollToElement = (element) => {
       const {
-        index
+        index,
+        indexMap = ""
       } = element.dataset;
-      if (index) {
-        scrollTo(index);
+      let indexValue = index;
+      if (index === props.contractionPointText) {
+        indexValue = getIndexMapStartIndexItem(indexMap);
+      }
+      if (indexValue) {
+        scrollTo(indexValue);
       }
     };
     const onClickSidebar = (event) => {
       scrollToElement(event.target);
     };
-    const renderIndexes = () => props.indexList.map((index) => {
-      const active = index === activeAnchor.value;
-      const touch2 = index === touchIndex.value;
-      return (0, import_vue.createVNode)("div", {
-        "class": bem("index"),
-        "style": active ? highlightStyle.value : void 0
-      }, [(0, import_vue.createVNode)("div", {
-        "class": bem("touch", {
-          active: touch2
-        })
-      }, [(0, import_vue.createVNode)("div", {
-        "class": bem("touch-text")
-      }, [index]), (0, import_vue.createVNode)("svg", {
-        "class": bem("icon"),
-        "xmlns": "http://www.w3.org/2000/svg",
-        "viewBox": "0 0 20 32"
-      }, [(0, import_vue.createVNode)("defs", null, [(0, import_vue.createVNode)("path", {
-        "id": "7rkhbmqvk__gc482iacwa",
-        "d": "M0 0H20V32H0z"
-      }, null)]), (0, import_vue.createVNode)("g", {
-        "fill": "none",
-        "fill-rule": "evenodd"
-      }, [(0, import_vue.createVNode)("path", {
-        "d": "M-1,0 C7.836556,-1.623249e-15 15,7.163444 15,16 C15,24.836556 7.836556,32 -1,32 L-1,32 L-1,32 L-1,0 Z",
-        "fill": "#8093AB",
-        "mask": "url(#7rkhbmqvk__9ahlxl93tb)"
-      }, null), (0, import_vue.createVNode)("path", {
-        "d": "M12.2406862,7.01475705 L19.4355101,15.3463801 C19.7597461,15.7218113 19.7597461,16.2781887 19.4355101,16.6536199 L12.2406862,24.9852429 C13.9822172,22.423901 15,19.3308084 15,16 C15,12.6691916 13.9822172,9.57609904 12.2406862,7.01475705 Z",
-        "fill": "#8093AB",
-        "mask": "url(#7rkhbmqvk__9ahlxl93tb)"
-      }, null)])])]), (0, import_vue.createVNode)("div", {
-        "data-index": index,
-        "onClick": onClickSidebar,
-        "class": bem("index", {
-          active,
-          touch: touch2
-        })
-      }, [index])]);
-    });
+    const getIndexHeight = () => {
+      var _a, _b;
+      let indexHeight = "0";
+      if ((_a = sidebar.value) == null ? void 0 : _a.children.length) {
+        const indexElement = (_b = sidebar.value) == null ? void 0 : _b.children[0];
+        indexHeight = getComputedStyle(indexElement).height;
+      }
+      return (0, import_parse.parseNumber)(indexHeight.replace("px", ""));
+    };
+    const toContractionListByIntervals = (options) => {
+      const {
+        hiddenIndexNum,
+        renderedPointNum
+      } = options;
+      let adaptedIndexList = (0, import_deep_clone.deepClone)(props.indexList);
+      const lastIndexItem = adaptedIndexList[adaptedIndexList.length - 1];
+      const contractionList = [];
+      const contractionMapList = [];
+      const remainder = hiddenIndexNum % renderedPointNum;
+      const contractionRate = new Array(renderedPointNum).fill(Math.floor(hiddenIndexNum / renderedPointNum));
+      contractionRate[0] += remainder;
+      const NEXT_INDEX_OFFSET = 1;
+      for (let index = 0; index < renderedPointNum; index++) {
+        contractionList.push(adaptedIndexList[0]);
+        contractionList.push(props.contractionPointText);
+        contractionMapList.push(adaptedIndexList.slice(NEXT_INDEX_OFFSET, contractionRate[index] + NEXT_INDEX_OFFSET));
+        adaptedIndexList = adaptedIndexList.splice(contractionRate[index] + NEXT_INDEX_OFFSET);
+      }
+      contractionList.push(lastIndexItem);
+      return {
+        contractionList,
+        contractionMapList
+      };
+    };
+    const toContractionListByProgression = (options) => {
+      const {
+        renderedNum
+      } = options;
+      let adaptedIndexList = (0, import_deep_clone.deepClone)(props.indexList);
+      const contractionList = [];
+      const contractionMapList = [];
+      const renderedPointNum = adaptedIndexList.length - renderedNum;
+      const contractionRate = new Array(renderedPointNum).fill(MIN_CONTRACTION_NUM);
+      const intervenedIndexListPartNum = renderedPointNum + 1;
+      const intervals = Math.ceil((adaptedIndexList.length - MIN_CONTRACTION_NUM * renderedPointNum) / intervenedIndexListPartNum);
+      for (let index = 0; index < renderedPointNum; index++) {
+        const slicedIndexList = adaptedIndexList.slice(0, intervals);
+        contractionList.push(...slicedIndexList);
+        contractionMapList.push(adaptedIndexList.slice(intervals, contractionRate[index] + intervals));
+        adaptedIndexList = adaptedIndexList.splice(contractionRate[index] + intervals);
+        if (adaptedIndexList.length) {
+          contractionList.push(props.contractionPointText);
+        }
+      }
+      contractionList.push(...adaptedIndexList);
+      return {
+        contractionList,
+        contractionMapList
+      };
+    };
+    const adaptorIndexListByHeight = () => {
+      const actualIndexListHeight = props.indexList.length * getIndexHeight();
+      if (actualIndexListHeight && actualIndexListHeight > indexBarMaxHeight()) {
+        const adaptedIndexList = (0, import_deep_clone.deepClone)(props.indexList);
+        const renderedNum = Math.floor(indexBarMaxHeight() / getIndexHeight());
+        const renderedPointNum = Math.floor(renderedNum / MIN_CONTRACTION_NUM);
+        const renderedIndexNum = renderedNum - renderedPointNum;
+        const hiddenIndexNum = adaptedIndexList.length - renderedIndexNum;
+        if (MIN_CONTRACTION_NUM * renderedPointNum + renderedIndexNum <= adaptedIndexList.length) {
+          return toContractionListByIntervals({
+            hiddenIndexNum,
+            renderedPointNum
+          });
+        } else {
+          return toContractionListByProgression({
+            renderedNum
+          });
+        }
+      }
+      return {
+        contractionList: props.indexList,
+        contractionMapList: []
+      };
+    };
+    const getContractionPointMapList = (contractionList, contractionMapList, order) => {
+      let contractionPointOrder = 0;
+      for (let index = 0; index < order; index++) {
+        const element = contractionList[index];
+        if (element.toString() === props.contractionPointText) {
+          contractionPointOrder++;
+        }
+      }
+      return contractionMapList[contractionPointOrder];
+    };
+    const getIndexMapStartIndexItem = (indexMap) => {
+      return indexMap.split(",")[0] || "";
+    };
+    const renderIndexes = () => {
+      const {
+        contractionList,
+        contractionMapList
+      } = adaptorIndexListByHeight();
+      return contractionList.map((index, order) => {
+        let active = index === activeAnchor.value;
+        let touch2 = index === touchIndex.value;
+        let contractionPointMapList = [];
+        if (index === props.contractionPointText) {
+          contractionPointMapList = getContractionPointMapList(contractionList, contractionMapList, order);
+          active = contractionPointMapList.includes(activeAnchor.value);
+          touch2 = contractionPointMapList.includes(touchIndex.value);
+        }
+        const touchActiveText = contractionPointMapList[0] || index;
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("index"),
+          "style": active ? highlightStyle.value : void 0
+        }, [(0, import_vue.createVNode)("div", {
+          "class": bem("touch", {
+            active: touch2
+          })
+        }, [(0, import_vue.createVNode)("div", {
+          "class": bem("touch-text")
+        }, [touchActiveText]), (0, import_vue.createVNode)("svg", {
+          "class": bem("icon"),
+          "xmlns": "http://www.w3.org/2000/svg",
+          "viewBox": "0 0 20 32"
+        }, [(0, import_vue.createVNode)("defs", null, [(0, import_vue.createVNode)("path", {
+          "id": "7rkhbmqvk__gc482iacwa",
+          "d": "M0 0H20V32H0z"
+        }, null)]), (0, import_vue.createVNode)("g", {
+          "fill": "none",
+          "fill-rule": "evenodd"
+        }, [(0, import_vue.createVNode)("path", {
+          "d": "M-1,0 C7.836556,-1.623249e-15 15,7.163444 15,16 C15,24.836556 7.836556,32 -1,32 L-1,32 L-1,32 L-1,0 Z",
+          "fill": "#8093AB",
+          "mask": "url(#7rkhbmqvk__9ahlxl93tb)"
+        }, null), (0, import_vue.createVNode)("path", {
+          "d": "M12.2406862,7.01475705 L19.4355101,15.3463801 C19.7597461,15.7218113 19.7597461,16.2781887 19.4355101,16.6536199 L12.2406862,24.9852429 C13.9822172,22.423901 15,19.3308084 15,16 C15,12.6691916 13.9822172,9.57609904 12.2406862,7.01475705 Z",
+          "fill": "#8093AB",
+          "mask": "url(#7rkhbmqvk__9ahlxl93tb)"
+        }, null)])])]), (0, import_vue.createVNode)("div", {
+          "data-index": index,
+          "data-index-map": contractionPointMapList,
+          "onClick": onClickSidebar,
+          "class": bem("index", {
+            active,
+            touch: touch2
+          })
+        }, [index])]);
+      });
+    };
     let touchActiveIndex;
     const onTouchStart = (event) => {
       const {
@@ -239,9 +363,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const target = document.elementFromPoint(clientX, clientY);
       if (target) {
         const {
-          index = ""
+          index = "",
+          indexMap = ""
         } = target.dataset;
-        touchIndex.value = index;
+        if (index === props.contractionPointText) {
+          touchIndex.value = getIndexMapStartIndexItem(indexMap);
+        } else {
+          touchIndex.value = index;
+        }
       }
       touch.start(event);
     };
@@ -259,11 +388,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
         const target = document.elementFromPoint(clientX, clientY);
         if (target) {
           const {
-            index
+            index,
+            indexMap = ""
           } = target.dataset;
-          if (index && touchActiveIndex !== index) {
-            touchActiveIndex = index;
-            touchIndex.value = index;
+          let indexValue = index;
+          if (index === props.contractionPointText) {
+            indexValue = getIndexMapStartIndexItem(indexMap);
+          }
+          if (indexValue && touchActiveIndex !== indexValue) {
+            touchActiveIndex = indexValue;
+            touchIndex.value = indexValue;
             scrollToElement(target);
           }
         }

package/lib/index-bar/index.css

@@ -1 +1 @@
-:root{--zt-index-bar-sidebar-z-index: 2;--zt-index-bar-index-font-size: var(--zt-font-size-xs);--zt-index-bar-index-line-height: var(--zt-line-height-md);--zt-index-bar-index-active-color: var(--zt-primary-color)}.zt-index-bar__sidebar{position:fixed;top:50%;right:var(--zt-padding-xs);z-index:var(--zt-index-bar-sidebar-z-index);display:flex;flex-direction:column;align-items:end;text-align:center;transform:translateY(-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.zt-index-bar__index{position:relative;color:var(--zt-text-color);padding:0 var(--zt-padding-base);font-size:var(--zt-index-bar-index-font-size);line-height:var(--zt-index-bar-index-line-height);display:flex;height:20px}.zt-index-bar__index--active{color:var(--zt-primary-color);font-weight:700}.zt-index-bar__index--touch{display:inline-block;box-sizing:border-box;padding:0 4px;min-width:var(--zt-index-bar-index-line-height);color:var(--zt-white);background:var(--zt-primary-color);border-radius:10px}.zt-index-bar__touch{display:none}.zt-index-bar__touch-text{position:relative;right:-1px;height:32px;line-height:32px;border-radius:16px 0 0 16px;padding:0 0 0 14px;font-size:16px;color:var(--zt-white);text-align:center;background:#8093ab}.zt-index-bar__touch--active{display:flex;position:relative;top:-6px;right:8px}.zt-index-bar__icon{position:relative;width:20px;height:32px}
+:root{--zt-index-bar-sidebar-z-index: 2}.zt-index-bar__sidebar{position:fixed;top:50%;right:var(--zt-padding-xs);z-index:var(--zt-index-bar-sidebar-z-index);display:flex;flex-direction:column;align-items:end;text-align:center;transform:translateY(-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.zt-index-bar__index{position:relative;color:var(--zt-text-color);padding:0 var(--zt-padding-base);font-size:var(--zt-font-size-sm);line-height:var(--zt-line-height-sm);display:flex;height:var(--zt-line-height-sm)}.zt-index-bar__index--active{color:var(--zt-primary-color);font-weight:700}.zt-index-bar__index--touch{display:inline-block;box-sizing:border-box;padding:0 4px;min-width:var(--zt-line-height-md);color:var(--zt-white);background:var(--zt-primary-color);border-radius:calc(var(--zt-line-height-sm) / 2)}.zt-index-bar__touch{display:none}.zt-index-bar__touch-text{position:relative;right:-1px;height:32px;line-height:32px;border-radius:16px 0 0 16px;padding:0 0 0 14px;font-size:var(--zt-font-size-lg);color:var(--zt-white);text-align:center;background:#8093ab}.zt-index-bar__touch--active{display:flex;position:relative;top:-6px;right:8px}.zt-index-bar__icon{position:relative;width:20px;height:32px}

package/lib/index-bar/index.d.ts

@@ -19,6 +19,14 @@ export declare const IndexBar: import("../utils").WithInstall<import("vue").Defi
         type: import("vue").PropType<import("../utils").Numeric[]>;
         default: () => string[];
     };
+    indexBarMaxHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    contractionPointText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change" | "anchorClick" | "update:activeAnchor")[], "select" | "change" | "anchorClick" | "update:activeAnchor", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     sticky: {
         type: BooleanConstructor;
@@ -39,6 +47,14 @@ export declare const IndexBar: import("../utils").WithInstall<import("vue").Defi
         type: import("vue").PropType<import("../utils").Numeric[]>;
         default: () => string[];
     };
+    indexBarMaxHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    contractionPointText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;
@@ -49,6 +65,8 @@ export declare const IndexBar: import("../utils").WithInstall<import("vue").Defi
     activeAnchor: string | number;
     stickyOffsetTop: number;
     indexList: import("../utils").Numeric[];
+    indexBarMaxHeight: string | number;
+    contractionPointText: string;
 }, {}>>;
 export default IndexBar;
 export { indexBarProps } from './IndexBar';

package/lib/index-bar/types.d.ts

@@ -10,7 +10,8 @@ export type IndexBarExpose = {
 export type IndexBarInstance = ComponentPublicInstance<IndexBarProps, IndexBarExpose>;
 export type IndexBarThemeVars = {
     indexBarSidebarZIndex?: number | string;
-    indexBarIndexFontSize?: string;
-    indexBarIndexLineHeight?: number | string;
-    indexBarIndexActiveColor?: string;
 };
+export interface IndexBarContractionItem {
+    index: Numeric;
+    indexContractionMapList: Numeric[];
+}