zartui 0.1.113 → 3.0.1

package/es/col/style/index.mjs

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

package/es/composables/on-popup-reopen.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey } from 'vue';
+export declare const POPUP_TOGGLE_KEY: InjectionKey<() => boolean>;
+export declare function onPopupReopen(callback: () => void): void;

package/es/composables/on-popup-reopen.mjs

@@ -0,0 +1,16 @@
+import { inject, watch } from "vue";
+const POPUP_TOGGLE_KEY = Symbol();
+function onPopupReopen(callback) {
+  const popupToggleStatus = inject(POPUP_TOGGLE_KEY, null);
+  if (popupToggleStatus) {
+    watch(popupToggleStatus, (show) => {
+      if (show) {
+        callback();
+      }
+    });
+  }
+}
+export {
+  POPUP_TOGGLE_KEY,
+  onPopupReopen
+};

package/es/composables/use-expose.d.ts

@@ -0,0 +1 @@
+export declare function useExpose<T = Record<string, any>>(apis: T): void;

package/es/composables/use-expose.mjs

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from "vue";
+import { extend } from "../utils/index.mjs";
+function useExpose(apis) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    extend(instance.proxy, apis);
+  }
+}
+export {
+  useExpose
+};

package/es/composables/use-height.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare const useHeight: (element: Element | Ref<Element | undefined>, withSafeArea?: boolean) => Ref<number | undefined>;

package/es/composables/use-height.mjs

@@ -0,0 +1,20 @@
+import { useRect } from "@zartui/use";
+import { ref, onMounted, nextTick } from "vue";
+const useHeight = (element, withSafeArea) => {
+  const height = ref();
+  const setHeight = () => {
+    height.value = useRect(element).height;
+  };
+  onMounted(() => {
+    nextTick(setHeight);
+    if (withSafeArea) {
+      for (let i = 1; i <= 3; i++) {
+        setTimeout(setHeight, 100 * i);
+      }
+    }
+  });
+  return height;
+};
+export {
+  useHeight
+};

package/es/composables/use-id.d.ts

@@ -0,0 +1 @@
+export declare function useId(): string;

package/es/composables/use-id.mjs

@@ -0,0 +1,13 @@
+import { getCurrentInstance } from "vue";
+let current = 0;
+function useId() {
+  const vm = getCurrentInstance();
+  const { name = "unknown" } = (vm == null ? void 0 : vm.type) || {};
+  if (process.env.NODE_ENV === "test") {
+    return name;
+  }
+  return `${name}-${++current}`;
+}
+export {
+  useId
+};

package/es/composables/use-lazy-render.d.ts

@@ -0,0 +1,2 @@
+import { WatchSource } from 'vue';
+export declare function useLazyRender(show: WatchSource<boolean | undefined>): (render: () => JSX.Element) => () => JSX.Element | null;

package/es/composables/use-lazy-render.mjs

@@ -0,0 +1,17 @@
+import { ref, watch } from "vue";
+function useLazyRender(show) {
+  const inited = ref(false);
+  watch(
+    show,
+    (value) => {
+      if (value) {
+        inited.value = value;
+      }
+    },
+    { immediate: true }
+  );
+  return (render) => () => inited.value ? render() : null;
+}
+export {
+  useLazyRender
+};

package/es/composables/use-lock-scroll.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useLockScroll(rootRef: Ref<HTMLElement | undefined>, shouldLock: () => boolean): void;

package/es/composables/use-lock-scroll.mjs

@@ -0,0 +1,56 @@
+import { watch, onBeforeUnmount, onDeactivated } from "vue";
+import { getScrollParent, onMountedOrActivated } from "@zartui/use";
+import { useTouch } from "./use-touch.mjs";
+import { preventDefault } from "../utils/index.mjs";
+let totalLockCount = 0;
+const BODY_LOCK_CLASS = "zt-overflow-hidden";
+function useLockScroll(rootRef, shouldLock) {
+  const touch = useTouch();
+  const onTouchMove = (event) => {
+    touch.move(event);
+    const direction = touch.deltaY.value > 0 ? "10" : "01";
+    const el = getScrollParent(
+      event.target,
+      rootRef.value
+    );
+    const { scrollHeight, offsetHeight, scrollTop } = el;
+    let status = "11";
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? "00" : "01";
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = "10";
+    }
+    if (status !== "11" && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      preventDefault(event, true);
+    }
+  };
+  const lock = () => {
+    document.addEventListener("touchstart", touch.start);
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+    totalLockCount++;
+  };
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener("touchstart", touch.start);
+      document.removeEventListener("touchmove", onTouchMove);
+      totalLockCount--;
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+  const init = () => shouldLock() && lock();
+  const destroy = () => shouldLock() && unlock();
+  onMountedOrActivated(init);
+  onDeactivated(destroy);
+  onBeforeUnmount(destroy);
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock();
+  });
+}
+export {
+  useLockScroll
+};

package/es/composables/use-placeholder.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import type { BEM } from '../utils/create';
+export declare function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM): (renderContent: () => JSX.Element) => JSX.Element;

package/es/composables/use-placeholder.mjs

@@ -0,0 +1,14 @@
+import { createVNode as _createVNode } from "vue";
+import { useHeight } from "./use-height.mjs";
+function usePlaceholder(contentRef, bem) {
+  const height = useHeight(contentRef, true);
+  return (renderContent) => _createVNode("div", {
+    "class": bem("placeholder"),
+    "style": {
+      height: height.value ? `${height.value}px` : void 0
+    }
+  }, [renderContent()]);
+}
+export {
+  usePlaceholder
+};

package/es/composables/use-refs.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useRefs<T = Element>(): readonly [Ref<T[]>, (index: number) => (el: unknown) => void];

package/es/composables/use-refs.mjs

@@ -0,0 +1,20 @@
+import { ref, onBeforeUpdate } from "vue";
+function useRefs() {
+  const refs = ref([]);
+  const cache = [];
+  onBeforeUpdate(() => {
+    refs.value = [];
+  });
+  const setRefs = (index) => {
+    if (!cache[index]) {
+      cache[index] = (el) => {
+        refs.value[index] = el;
+      };
+    }
+    return cache[index];
+  };
+  return [refs, setRefs];
+}
+export {
+  useRefs
+};

package/es/composables/use-route.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Vue Router support
+ */
+import { type PropType, type ExtractPropTypes, type ComponentPublicInstance } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+export declare const routeProps: {
+    to: PropType<RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+};
+export declare type RouteProps = ExtractPropTypes<typeof routeProps>;
+export declare function route({ to, url, replace, $router: router, }: ComponentPublicInstance<RouteProps>): void;
+export declare function useRoute(): () => void;

package/es/composables/use-route.mjs

@@ -0,0 +1,29 @@
+import {
+  getCurrentInstance
+} from "vue";
+const routeProps = {
+  to: [String, Object],
+  url: String,
+  replace: Boolean
+};
+function route({
+  to,
+  url,
+  replace,
+  $router: router
+}) {
+  if (to && router) {
+    router[replace ? "replace" : "push"](to);
+  } else if (url) {
+    replace ? location.replace(url) : location.href = url;
+  }
+}
+function useRoute() {
+  const vm = getCurrentInstance().proxy;
+  return () => route(vm);
+}
+export {
+  route,
+  routeProps,
+  useRoute
+};

package/es/composables/use-tab-status.d.ts

@@ -0,0 +1,3 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export declare const TAB_STATUS_KEY: InjectionKey<ComputedRef<boolean>>;
+export declare const useTabStatus: () => ComputedRef<boolean> | null;

package/es/composables/use-tab-status.mjs

@@ -0,0 +1,7 @@
+import { inject } from "vue";
+const TAB_STATUS_KEY = Symbol();
+const useTabStatus = () => inject(TAB_STATUS_KEY, null);
+export {
+  TAB_STATUS_KEY,
+  useTabStatus
+};

package/es/composables/use-touch.d.ts

@@ -0,0 +1,16 @@
+declare type Direction = '' | 'vertical' | 'horizontal';
+export declare function useTouch(): {
+    move: EventListener;
+    start: EventListener;
+    reset: () => void;
+    startX: import("vue").Ref<number>;
+    startY: import("vue").Ref<number>;
+    deltaX: import("vue").Ref<number>;
+    deltaY: import("vue").Ref<number>;
+    offsetX: import("vue").Ref<number>;
+    offsetY: import("vue").Ref<number>;
+    direction: import("vue").Ref<Direction>;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+};
+export {};

package/es/composables/use-touch.mjs

@@ -0,0 +1,61 @@
+import { ref } from "vue";
+function getDirection(x, y) {
+  if (x > y) {
+    return "horizontal";
+  }
+  if (y > x) {
+    return "vertical";
+  }
+  return "";
+}
+function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  };
+  const move = (event) => {
+    const touch = event.touches[0];
+    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    const LOCK_DIRECTION_DISTANCE = 10;
+    if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  };
+  return {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
+  };
+}
+export {
+  useTouch
+};

package/es/composables/use-visibility-change.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useVisibilityChange(target: Ref<Element | undefined>, onChange: (visible: boolean) => void): void;

package/es/composables/use-visibility-change.mjs

@@ -0,0 +1,30 @@
+import { inBrowser } from "../utils/index.mjs";
+import { onDeactivated, onBeforeUnmount } from "vue";
+import { onMountedOrActivated } from "@zartui/use";
+function useVisibilityChange(target, onChange) {
+  if (!inBrowser || !window.IntersectionObserver) {
+    return;
+  }
+  const observer = new IntersectionObserver(
+    (entries) => {
+      onChange(entries[0].intersectionRatio > 0);
+    },
+    { root: document.body }
+  );
+  const observe = () => {
+    if (target.value) {
+      observer.observe(target.value);
+    }
+  };
+  const unobserve = () => {
+    if (target.value) {
+      observer.unobserve(target.value);
+    }
+  };
+  onDeactivated(unobserve);
+  onBeforeUnmount(unobserve);
+  onMountedOrActivated(observe);
+}
+export {
+  useVisibilityChange
+};

package/es/config-provider/ConfigProvider.d.ts

@@ -0,0 +1,47 @@
+import type { PropType, InjectionKey, ExtractPropTypes } from 'vue';
+import type { Numeric } from '../utils';
+export declare type ConfigProviderTheme = 'light' | 'dark';
+export declare type ConfigProviderProvide = {
+    iconPrefix?: string;
+};
+export declare const CONFIG_PROVIDER_KEY: InjectionKey<ConfigProviderProvide>;
+declare const configProviderProps: {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    theme: {
+        type: PropType<ConfigProviderTheme>;
+        default: ConfigProviderTheme;
+    };
+    themeVars: PropType<Record<string, Numeric>>;
+    iconPrefix: StringConstructor;
+};
+export declare type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    theme: {
+        type: PropType<ConfigProviderTheme>;
+        default: ConfigProviderTheme;
+    };
+    themeVars: PropType<Record<string, Numeric>>;
+    iconPrefix: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    theme: {
+        type: PropType<ConfigProviderTheme>;
+        default: ConfigProviderTheme;
+    };
+    themeVars: PropType<Record<string, Numeric>>;
+    iconPrefix: StringConstructor;
+}>>, {
+    tag: keyof HTMLElementTagNameMap;
+    theme: ConfigProviderTheme;
+}>;
+export default _default;

package/es/config-provider/ConfigProvider.mjs

@@ -0,0 +1,64 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, provide, computed, onActivated, onDeactivated, onBeforeUnmount, defineComponent } from "vue";
+import { inBrowser, kebabCase, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("config-provider");
+const CONFIG_PROVIDER_KEY = Symbol(name);
+const configProviderProps = {
+  tag: makeStringProp("div"),
+  theme: makeStringProp("light"),
+  themeVars: Object,
+  iconPrefix: String
+};
+function mapThemeVarsToCSSVars(themeVars) {
+  const cssVars = {};
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--zt-${kebabCase(key)}`] = themeVars[key];
+  });
+  return cssVars;
+}
+var stdin_default = defineComponent({
+  name,
+  props: configProviderProps,
+  setup(props, {
+    slots
+  }) {
+    const style = computed(() => {
+      if (props.themeVars) {
+        return mapThemeVarsToCSSVars(props.themeVars);
+      }
+    });
+    if (inBrowser) {
+      const addTheme = () => {
+        document.body.classList.add(`zt-theme-${props.theme}`);
+      };
+      const removeTheme = (theme = props.theme) => {
+        document.body.classList.remove(`zt-theme-${theme}`);
+      };
+      watch(() => props.theme, (newVal, oldVal) => {
+        if (oldVal) {
+          removeTheme(oldVal);
+        }
+        addTheme();
+      }, {
+        immediate: true
+      });
+      onActivated(addTheme);
+      onDeactivated(removeTheme);
+      onBeforeUnmount(removeTheme);
+    }
+    provide(CONFIG_PROVIDER_KEY, props);
+    return () => _createVNode(props.tag, {
+      "class": bem(),
+      "style": style.value
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+export {
+  CONFIG_PROVIDER_KEY,
+  stdin_default as default
+};

package/es/config-provider/index.d.ts

@@ -0,0 +1,33 @@
+export declare const ConfigProvider: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    theme: {
+        type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
+        default: import("./ConfigProvider").ConfigProviderTheme;
+    };
+    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    iconPrefix: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    theme: {
+        type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
+        default: import("./ConfigProvider").ConfigProviderTheme;
+    };
+    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    iconPrefix: StringConstructor;
+}>>, {
+    tag: keyof HTMLElementTagNameMap;
+    theme: import("./ConfigProvider").ConfigProviderTheme;
+}>>;
+export default ConfigProvider;
+export type { ConfigProviderProps, ConfigProviderTheme, } from './ConfigProvider';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanConfigProvider: typeof ConfigProvider;
+    }
+}

package/es/config-provider/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _ConfigProvider from "./ConfigProvider.mjs";
+const ConfigProvider = withInstall(_ConfigProvider);
+var stdin_default = ConfigProvider;
+export {
+  ConfigProvider,
+  stdin_default as default
+};

package/es/config-provider/style/index.d.ts

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

package/es/config-provider/style/index.mjs

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

package/es/divider/Divider.d.ts

@@ -0,0 +1,40 @@
+import { ExtractPropTypes } from 'vue';
+export declare type DividerContentPosition = 'left' | 'center' | 'right';
+declare const dividerProps: {
+    dashed: BooleanConstructor;
+    hairline: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    contentPosition: {
+        type: import("vue").PropType<DividerContentPosition>;
+        default: DividerContentPosition;
+    };
+};
+export declare type DividerProps = ExtractPropTypes<typeof dividerProps>;
+declare const _default: import("vue").DefineComponent<{
+    dashed: BooleanConstructor;
+    hairline: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    contentPosition: {
+        type: import("vue").PropType<DividerContentPosition>;
+        default: DividerContentPosition;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    dashed: BooleanConstructor;
+    hairline: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    contentPosition: {
+        type: import("vue").PropType<DividerContentPosition>;
+        default: DividerContentPosition;
+    };
+}>>, {
+    dashed: boolean;
+    hairline: boolean;
+    contentPosition: DividerContentPosition;
+}>;
+export default _default;

package/es/divider/Divider.mjs

@@ -0,0 +1,31 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { truthProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("divider");
+const dividerProps = {
+  dashed: Boolean,
+  hairline: truthProp,
+  contentPosition: makeStringProp("center")
+};
+var stdin_default = defineComponent({
+  name,
+  props: dividerProps,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "role": "separator",
+        "class": bem({
+          dashed: props.dashed,
+          hairline: props.hairline,
+          [`content-${props.contentPosition}`]: !!slots.default
+        })
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/divider/index.css

@@ -1 +1 @@
-.zt-divider{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin:16px 0;color:#969799;font-size:14px;line-height:24px;border-color:rgba(0,0,0,.1);border-style:solid;border-width:0}.zt-divider::after,.zt-divider::before{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:1px 0 0}.zt-divider::before{content:''}.zt-divider--hairline::after,.zt-divider--hairline::before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.zt-divider--dashed{border-style:dashed}.zt-divider--content-center::before,.zt-divider--content-left::before,.zt-divider--content-right::before{margin-right:16px}.zt-divider--content-center::after,.zt-divider--content-left::after,.zt-divider--content-right::after{margin-left:16px;content:''}.zt-divider--content-left::before{max-width:10%}.zt-divider--content-right::after{max-width:10%}
+body{--zt-divider-margin: var(--zt-padding-md) 0;--zt-divider-text-color: var(--zt-text-color-2);--zt-divider-font-size: var(--zt-font-size-md);--zt-divider-line-height: 24px;--zt-divider-border-color: var(--zt-border-color);--zt-divider-content-padding: var(--zt-padding-md);--zt-divider-content-left-width: 10%;--zt-divider-content-right-width: 10%}.zt-divider{display:flex;align-items:center;margin:var(--zt-divider-margin);color:var(--zt-divider-text-color);font-size:var(--zt-divider-font-size);line-height:var(--zt-divider-line-height);border-color:var(--zt-divider-border-color);border-style:solid;border-width:0}.zt-divider:before,.zt-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--zt-border-width) 0 0}.zt-divider:before{content:""}.zt-divider--hairline:before,.zt-divider--hairline:after{transform:scaleY(.5)}.zt-divider--dashed{border-style:dashed}.zt-divider--content-center:before,.zt-divider--content-left:before,.zt-divider--content-right:before{margin-right:var(--zt-divider-content-padding)}.zt-divider--content-center:after,.zt-divider--content-left:after,.zt-divider--content-right:after{margin-left:var(--zt-divider-content-padding);content:""}.zt-divider--content-left:before{max-width:var(--zt-divider-content-left-width)}.zt-divider--content-right:after{max-width:var(--zt-divider-content-right-width)}