zartui 3.0.6 → 3.0.8

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

@@ -0,0 +1,11 @@
+export declare type IndexAnchorThemeVars = {
+    indexAnchorZIndex?: number | string;
+    indexAnchorPadding?: string;
+    indexAnchorTextColor?: string;
+    indexAnchorFontWeight?: string;
+    indexAnchorFontSize?: string;
+    indexAnchorLineHeight?: number | string;
+    indexAnchorBackground?: string;
+    indexAnchorStickyTextColor?: string;
+    indexAnchorStickyBackground?: string;
+};

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

@@ -0,0 +1,64 @@
+import { type PropType, type InjectionKey, type ExtractPropTypes } from 'vue';
+import { type Numeric } from '../utils';
+import { IndexBarProvide } from './types';
+declare function genAlphabet(): string[];
+export declare const indexBarProps: {
+    sticky: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    highlightColor: StringConstructor;
+    stickyOffsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indexList: {
+        type: PropType<Numeric[]>;
+        default: typeof genAlphabet;
+    };
+};
+export declare type IndexBarProps = ExtractPropTypes<typeof indexBarProps>;
+export declare const INDEX_BAR_KEY: InjectionKey<IndexBarProvide>;
+declare const _default: import("vue").DefineComponent<{
+    sticky: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    highlightColor: StringConstructor;
+    stickyOffsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indexList: {
+        type: PropType<Numeric[]>;
+        default: typeof genAlphabet;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    sticky: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: PropType<string | import("vue").RendererElement | null | undefined>;
+    highlightColor: StringConstructor;
+    stickyOffsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indexList: {
+        type: PropType<Numeric[]>;
+        default: typeof genAlphabet;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    sticky: boolean;
+    stickyOffsetTop: number;
+    indexList: Numeric[];
+}>;
+export default _default;

package/es/index-bar/IndexBar.mjs

@@ -0,0 +1,275 @@
+import { createVNode as _createVNode } from "vue";
+import { ref, watch, computed, nextTick, Teleport, onMounted, defineComponent } from "vue";
+import { isDef, isHidden, truthProp, numericProp, getScrollTop, preventDefault, makeNumberProp, createNamespace, getRootScrollTop, setRootScrollTop } from "../utils/index.mjs";
+import { useRect, useChildren, useScrollParent, useEventListener } from "@zartui/use";
+import { useTouch } from "../composables/use-touch.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+function genAlphabet() {
+  const charCodeOfA = "A".charCodeAt(0);
+  const indexList = Array(26).fill("").map((_, i) => String.fromCharCode(charCodeOfA + i));
+  return indexList;
+}
+const [name, bem] = createNamespace("index-bar");
+const indexBarProps = {
+  sticky: truthProp,
+  zIndex: numericProp,
+  teleport: [String, Object],
+  highlightColor: String,
+  stickyOffsetTop: makeNumberProp(0),
+  indexList: {
+    type: Array,
+    default: genAlphabet
+  }
+};
+const INDEX_BAR_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: indexBarProps,
+  emits: ["select", "change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const root = ref();
+    const sidebar = ref();
+    const activeAnchor = ref("");
+    const touchIndex = ref("");
+    const touch = useTouch();
+    const scrollParent = useScrollParent(root);
+    const {
+      children,
+      linkChildren
+    } = useChildren(INDEX_BAR_KEY);
+    let selectActiveIndex;
+    linkChildren({
+      props
+    });
+    const sidebarStyle = computed(() => {
+      if (isDef(props.zIndex)) {
+        return {
+          zIndex: +props.zIndex + 1
+        };
+      }
+    });
+    const highlightStyle = computed(() => {
+      if (props.highlightColor) {
+        return {
+          color: props.highlightColor
+        };
+      }
+    });
+    const getActiveAnchor = (scrollTop, rects) => {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const prevHeight = i > 0 ? rects[i - 1].height : 0;
+        const reachTop = props.sticky ? prevHeight + props.stickyOffsetTop : 0;
+        if (scrollTop + reachTop >= rects[i].top) {
+          return i;
+        }
+      }
+      return -1;
+    };
+    const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
+    const onScroll = () => {
+      if (isHidden(root)) {
+        return;
+      }
+      const {
+        sticky,
+        indexList
+      } = props;
+      const scrollTop = getScrollTop(scrollParent.value);
+      const scrollParentRect = useRect(scrollParent);
+      const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
+      let active = -1;
+      if (selectActiveIndex) {
+        const match = getMatchAnchor(selectActiveIndex);
+        if (match) {
+          const rect = match.getRect(scrollParent.value, scrollParentRect);
+          active = getActiveAnchor(rect.top, rects);
+        }
+      } else {
+        active = getActiveAnchor(scrollTop, rects);
+      }
+      activeAnchor.value = indexList[active];
+      if (sticky) {
+        children.forEach((item, index) => {
+          const {
+            state,
+            $el
+          } = item;
+          if (index === active || index === active - 1) {
+            const rect = $el.getBoundingClientRect();
+            state.left = rect.left;
+            state.width = rect.width;
+          } else {
+            state.left = null;
+            state.width = null;
+          }
+          if (index === active) {
+            state.active = true;
+            state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
+          } else if (index === active - 1 && selectActiveIndex === "") {
+            const activeItemTop = rects[active].top - scrollTop;
+            state.active = activeItemTop > 0;
+            state.top = activeItemTop + scrollParentRect.top - rects[index].height;
+          } else {
+            state.active = false;
+          }
+        });
+      }
+      selectActiveIndex = "";
+    };
+    const init = () => {
+      nextTick(onScroll);
+    };
+    useEventListener("scroll", onScroll, {
+      target: scrollParent,
+      passive: true
+    });
+    onMounted(init);
+    watch(() => props.indexList, init);
+    watch(activeAnchor, (value) => {
+      if (value) {
+        emit("change", value);
+      }
+    });
+    const scrollTo = (index) => {
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
+      if (match) {
+        const scrollTop = getScrollTop(scrollParent.value);
+        const scrollParentRect = useRect(scrollParent);
+        const {
+          offsetHeight
+        } = document.documentElement;
+        match.$el.scrollIntoView();
+        if (scrollTop === offsetHeight - scrollParentRect.height) {
+          onScroll();
+          return;
+        }
+        if (props.sticky && props.stickyOffsetTop) {
+          setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
+        }
+        emit("select", match.index);
+      }
+    };
+    const scrollToElement = (element) => {
+      const {
+        index
+      } = element.dataset;
+      if (index) {
+        scrollTo(index);
+      }
+    };
+    const onClickSidebar = (event) => {
+      scrollToElement(event.target);
+    };
+    const renderIndexes = () => props.indexList.map((index) => {
+      const active = index === activeAnchor.value;
+      const touch2 = index === touchIndex.value;
+      return _createVNode("div", {
+        "class": bem("index"),
+        "style": active ? highlightStyle.value : void 0
+      }, [_createVNode("div", {
+        "class": bem("touch", {
+          active: touch2
+        })
+      }, [_createVNode("div", {
+        "class": bem("touch-text")
+      }, [index]), _createVNode("svg", {
+        "class": bem("icon"),
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 20 32"
+      }, [_createVNode("defs", null, [_createVNode("path", {
+        "id": "7rkhbmqvk__gc482iacwa",
+        "d": "M0 0H20V32H0z"
+      }, null)]), _createVNode("g", {
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [_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), _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)])])]), _createVNode("div", {
+        "data-index": index,
+        "onClick": onClickSidebar,
+        "class": bem("index", {
+          active,
+          touch: touch2
+        })
+      }, [index])]);
+    });
+    let touchActiveIndex;
+    const onTouchStart = (event) => {
+      const {
+        clientX,
+        clientY
+      } = event.touches[0];
+      const target = document.elementFromPoint(clientX, clientY);
+      if (target) {
+        const {
+          index = ""
+        } = target.dataset;
+        touchIndex.value = index;
+      }
+      touch.start(event);
+    };
+    const onTouchend = () => {
+      touchIndex.value = "";
+    };
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.isVertical()) {
+        preventDefault(event);
+        const {
+          clientX,
+          clientY
+        } = event.touches[0];
+        const target = document.elementFromPoint(clientX, clientY);
+        if (target) {
+          const {
+            index
+          } = target.dataset;
+          if (index && touchActiveIndex !== index) {
+            touchActiveIndex = index;
+            touchIndex.value = index;
+            scrollToElement(target);
+          }
+        }
+      }
+    };
+    const renderSidebar = () => _createVNode("div", {
+      "ref": sidebar,
+      "class": bem("sidebar"),
+      "style": sidebarStyle.value,
+      "onTouchstartPassive": onTouchStart,
+      "onTouchend": onTouchend
+    }, [renderIndexes()]);
+    useExpose({
+      scrollTo
+    });
+    useEventListener("touchmove", onTouchMove, {
+      target: sidebar
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "ref": root,
+        "class": bem()
+      }, [props.teleport ? _createVNode(Teleport, {
+        "to": props.teleport
+      }, {
+        default: () => [renderSidebar()]
+      }) : renderSidebar(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  INDEX_BAR_KEY,
+  stdin_default as default,
+  indexBarProps
+};

package/es/index-bar/index.css

@@ -0,0 +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}

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

@@ -0,0 +1,50 @@
+import { IndexBarProps } from './IndexBar';
+export declare const IndexBar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    sticky: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    highlightColor: StringConstructor;
+    stickyOffsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indexList: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sticky: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    zIndex: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    highlightColor: StringConstructor;
+    stickyOffsetTop: {
+        type: NumberConstructor;
+        default: number;
+    };
+    indexList: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    sticky: boolean;
+    stickyOffsetTop: number;
+    indexList: import("../utils").Numeric[];
+}>>;
+export default IndexBar;
+export { indexBarProps } from './IndexBar';
+export type { IndexBarProps };
+export type { IndexBarInstance, IndexBarThemeVars } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtIndexBar: typeof IndexBar;
+    }
+}

package/es/index-bar/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _IndexBar from "./IndexBar.mjs";
+const IndexBar = withInstall(_IndexBar);
+var stdin_default = IndexBar;
+import { indexBarProps } from "./IndexBar.mjs";
+export {
+  IndexBar,
+  stdin_default as default,
+  indexBarProps
+};

package/es/index-bar/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/index-bar/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";

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

@@ -0,0 +1,16 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { Numeric } from '../utils';
+import type { IndexBarProps } from './IndexBar';
+export declare type IndexBarProvide = {
+    props: IndexBarProps;
+};
+export declare type IndexBarExpose = {
+    scrollTo: (index: Numeric) => void;
+};
+export declare type IndexBarInstance = ComponentPublicInstance<IndexBarProps, IndexBarExpose>;
+export declare type IndexBarThemeVars = {
+    indexBarSidebarZIndex?: number | string;
+    indexBarIndexFontSize?: string;
+    indexBarIndexLineHeight?: number | string;
+    indexBarIndexActiveColor?: string;
+};

package/es/index.d.ts

@@ -22,9 +22,12 @@ export * from "./field";
 export * from "./form";
 export * from "./grid";
 export * from "./grid-item";
+export * from "./hierarchy-select";
 export * from "./icon";
 export * from "./image";
 export * from "./image-preview";
+export * from "./index-anchor";
+export * from "./index-bar";
 export * from "./lazyload";
 export * from "./list";
 export * from "./loading";
@@ -54,14 +57,18 @@ export * from "./stepper";
 export * from "./steps";
 export * from "./sticky";
 export * from "./swipe";
+export * from "./swipe-cell";
 export * from "./swipe-item";
 export * from "./switch";
 export * from "./tab";
 export * from "./tabbar";
 export * from "./tabbar-item";
+export * from "./table";
 export * from "./tabs";
 export * from "./tag";
+export * from "./text-ellipsis";
 export * from "./time-picker";
+export * from "./timeline";
 export * from "./toast";
 export * from "./uploader";
 declare namespace _default {
@@ -70,4 +77,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.0.6";
+export const version: "3.0.7";

package/es/index.mjs

@@ -22,9 +22,12 @@ import { Field } from "./field/index.mjs";
 import { Form } from "./form/index.mjs";
 import { Grid } from "./grid/index.mjs";
 import { GridItem } from "./grid-item/index.mjs";
+import { HierarchySelect } from "./hierarchy-select/index.mjs";
 import { Icon } from "./icon/index.mjs";
 import { Image } from "./image/index.mjs";
 import { ImagePreview } from "./image-preview/index.mjs";
+import { IndexAnchor } from "./index-anchor/index.mjs";
+import { IndexBar } from "./index-bar/index.mjs";
 import { List } from "./list/index.mjs";
 import { Loading } from "./loading/index.mjs";
 import { Locale } from "./locale/index.mjs";
@@ -53,17 +56,21 @@ import { Stepper } from "./stepper/index.mjs";
 import { Steps } from "./steps/index.mjs";
 import { Sticky } from "./sticky/index.mjs";
 import { Swipe } from "./swipe/index.mjs";
+import { SwipeCell } from "./swipe-cell/index.mjs";
 import { SwipeItem } from "./swipe-item/index.mjs";
 import { Switch } from "./switch/index.mjs";
 import { Tab } from "./tab/index.mjs";
 import { Tabbar } from "./tabbar/index.mjs";
 import { TabbarItem } from "./tabbar-item/index.mjs";
+import { Table } from "./table/index.mjs";
 import { Tabs } from "./tabs/index.mjs";
 import { Tag } from "./tag/index.mjs";
+import { TextEllipsis } from "./text-ellipsis/index.mjs";
 import { TimePicker } from "./time-picker/index.mjs";
+import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "3.0.6";
+const version = "3.0.7";
 function install(app) {
   const components = [
     ActionSheet,
@@ -90,9 +97,12 @@ function install(app) {
     Form,
     Grid,
     GridItem,
+    HierarchySelect,
     Icon,
     Image,
     ImagePreview,
+    IndexAnchor,
+    IndexBar,
     List,
     Loading,
     Locale,
@@ -121,14 +131,18 @@ function install(app) {
     Steps,
     Sticky,
     Swipe,
+    SwipeCell,
     SwipeItem,
     Switch,
     Tab,
     Tabbar,
     TabbarItem,
+    Table,
     Tabs,
     Tag,
+    TextEllipsis,
     TimePicker,
+    Timeline,
     Toast,
     Uploader
   ];
@@ -164,9 +178,12 @@ export * from "./field/index.mjs";
 export * from "./form/index.mjs";
 export * from "./grid/index.mjs";
 export * from "./grid-item/index.mjs";
+export * from "./hierarchy-select/index.mjs";
 export * from "./icon/index.mjs";
 export * from "./image/index.mjs";
 export * from "./image-preview/index.mjs";
+export * from "./index-anchor/index.mjs";
+export * from "./index-bar/index.mjs";
 export * from "./lazyload/index.mjs";
 export * from "./list/index.mjs";
 export * from "./loading/index.mjs";
@@ -196,14 +213,18 @@ export * from "./stepper/index.mjs";
 export * from "./steps/index.mjs";
 export * from "./sticky/index.mjs";
 export * from "./swipe/index.mjs";
+export * from "./swipe-cell/index.mjs";
 export * from "./swipe-item/index.mjs";
 export * from "./switch/index.mjs";
 export * from "./tab/index.mjs";
 export * from "./tabbar/index.mjs";
 export * from "./tabbar-item/index.mjs";
+export * from "./table/index.mjs";
 export * from "./tabs/index.mjs";
 export * from "./tag/index.mjs";
+export * from "./text-ellipsis/index.mjs";
 export * from "./time-picker/index.mjs";
+export * from "./timeline/index.mjs";
 export * from "./toast/index.mjs";
 export * from "./uploader/index.mjs";
 var stdin_default = {

package/es/lazyload/vue-lazyload/index.mjs

@@ -3,6 +3,11 @@ import LazyComponent from "./lazy-component.mjs";
 import LazyContainer from "./lazy-container.mjs";
 import LazyImage from "./lazy-image.mjs";
 const Lazyload = {
+  /*
+   * install function
+   * @param  {App} app
+   * @param  {object} options lazyload options
+   */
   install(app, options = {}) {
     const LazyClass = Lazy();
     const lazy = new LazyClass(options);