zartui 3.0.2 → 3.0.3

package/es/image/Image.d.ts

@@ -0,0 +1,105 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+export declare type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export declare type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string;
+declare const imageProps: {
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: PropType<ImageFit>;
+    position: PropType<string>;
+    round: BooleanConstructor;
+    block: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    loadingIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export declare type ImageProps = ExtractPropTypes<typeof imageProps>;
+declare const _default: import("vue").DefineComponent<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: PropType<ImageFit>;
+    position: PropType<string>;
+    round: BooleanConstructor;
+    block: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    loadingIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: PropType<ImageFit>;
+    position: PropType<string>;
+    round: BooleanConstructor;
+    block: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    loadingIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+}>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}, {
+    showError: boolean;
+    round: boolean;
+    block: boolean;
+    lazyLoad: boolean;
+    errorIcon: string;
+    showLoading: boolean;
+    loadingIcon: string;
+}>;
+export default _default;

package/es/image/Image.mjs

@@ -0,0 +1,151 @@
+import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { ref, watch, computed, nextTick, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
+import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("image");
+const imageProps = {
+  src: String,
+  alt: String,
+  fit: String,
+  position: String,
+  round: Boolean,
+  block: Boolean,
+  width: numericProp,
+  height: numericProp,
+  radius: numericProp,
+  lazyLoad: Boolean,
+  iconSize: numericProp,
+  showError: truthProp,
+  errorIcon: makeStringProp("photo-fail"),
+  iconPrefix: String,
+  showLoading: truthProp,
+  loadingIcon: makeStringProp("photo-default")
+};
+var stdin_default = defineComponent({
+  name,
+  props: imageProps,
+  emits: ["load", "error"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const error = ref(false);
+    const loading = ref(true);
+    const imageRef = ref();
+    const {
+      $Lazyload
+    } = getCurrentInstance().proxy;
+    const style = computed(() => {
+      const style2 = {
+        width: addUnit(props.width),
+        height: addUnit(props.height)
+      };
+      if (isDef(props.radius)) {
+        style2.overflow = "hidden";
+        style2.borderRadius = addUnit(props.radius);
+      }
+      return style2;
+    });
+    watch(() => props.src, () => {
+      error.value = false;
+      loading.value = true;
+    });
+    const onLoad = (event) => {
+      loading.value = false;
+      emit("load", event);
+    };
+    const onError = (event) => {
+      error.value = true;
+      loading.value = false;
+      emit("error", event);
+    };
+    const renderIcon = (name2, className, slot) => {
+      if (slot) {
+        return slot();
+      }
+      return _createVNode(Icon, {
+        "name": name2,
+        "size": props.iconSize,
+        "class": className,
+        "classPrefix": props.iconPrefix
+      }, null);
+    };
+    const renderPlaceholder = () => {
+      if (loading.value && props.showLoading) {
+        return _createVNode("div", {
+          "class": bem("loading")
+        }, [renderIcon(props.loadingIcon, bem("loading-icon"), slots.loading)]);
+      }
+      if (error.value && props.showError) {
+        return _createVNode("div", {
+          "class": bem("error")
+        }, [renderIcon(props.errorIcon, bem("error-icon"), slots.error)]);
+      }
+    };
+    const renderImage = () => {
+      if (error.value || !props.src) {
+        return;
+      }
+      const attrs = {
+        alt: props.alt,
+        class: bem("img"),
+        style: {
+          objectFit: props.fit,
+          objectPosition: props.position
+        }
+      };
+      if (props.lazyLoad) {
+        return _withDirectives(_createVNode("img", _mergeProps({
+          "ref": imageRef
+        }, attrs), null), [[_resolveDirective("lazy"), props.src]]);
+      }
+      return _createVNode("img", _mergeProps({
+        "src": props.src,
+        "onLoad": onLoad,
+        "onError": onError
+      }, attrs), null);
+    };
+    const onLazyLoaded = ({
+      el
+    }) => {
+      const check = () => {
+        if (el === imageRef.value && loading.value) {
+          onLoad();
+        }
+      };
+      if (imageRef.value) {
+        check();
+      } else {
+        nextTick(check);
+      }
+    };
+    const onLazyLoadError = ({
+      el
+    }) => {
+      if (el === imageRef.value && !error.value) {
+        onError();
+      }
+    };
+    if ($Lazyload && inBrowser) {
+      $Lazyload.$on("loaded", onLazyLoaded);
+      $Lazyload.$on("error", onLazyLoadError);
+      onBeforeUnmount(() => {
+        $Lazyload.$off("loaded", onLazyLoaded);
+        $Lazyload.$off("error", onLazyLoadError);
+      });
+    }
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem({
+          round: props.round,
+          block: props.block
+        }),
+        "style": style.value
+      }, [renderImage(), renderPlaceholder(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/image/index.css

@@ -0,0 +1 @@
+:root{--zt-image-placeholder-text-color: var(--zt-text-color-2);--zt-image-placeholder-font-size: var(--zt-font-size-md);--zt-image-placeholder-background: #e6ebf5;--zt-image-loading-icon-size: 32px;--zt-image-loading-icon-color: #afb9cd;--zt-image-error-icon-size: 32px;--zt-image-error-icon-color: #afb9cd}.zt-image{position:relative;display:inline-block}.zt-image--round{overflow:hidden;border-radius:var(--zt-radius-max)}.zt-image--round .zt-image__img{border-radius:inherit}.zt-image--block{display:block}.zt-image__img,.zt-image__error,.zt-image__loading{display:block;width:100%;height:100%}.zt-image__error,.zt-image__loading{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--zt-image-placeholder-text-color);font-size:var(--zt-image-placeholder-font-size);background:var(--zt-image-placeholder-background)}.zt-image__loading-icon{color:var(--zt-image-loading-icon-color);font-size:var(--zt-image-loading-icon-size)}.zt-image__error-icon{color:var(--zt-image-error-icon-color);font-size:var(--zt-image-error-icon-size)}

package/es/image/index.d.ts

@@ -0,0 +1,77 @@
+export declare const Image: import("../utils").WithInstall<import("vue").DefineComponent<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: import("vue").PropType<import("./Image").ImageFit>;
+    position: import("vue").PropType<string>;
+    round: BooleanConstructor;
+    block: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    loadingIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "load")[], "error" | "load", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fit: import("vue").PropType<import("./Image").ImageFit>;
+    position: import("vue").PropType<string>;
+    round: BooleanConstructor;
+    block: BooleanConstructor;
+    width: (NumberConstructor | StringConstructor)[];
+    height: (NumberConstructor | StringConstructor)[];
+    radius: (NumberConstructor | StringConstructor)[];
+    lazyLoad: BooleanConstructor;
+    iconSize: (NumberConstructor | StringConstructor)[];
+    showError: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    errorIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    iconPrefix: StringConstructor;
+    showLoading: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    loadingIcon: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}, {
+    showError: boolean;
+    round: boolean;
+    block: boolean;
+    lazyLoad: boolean;
+    errorIcon: string;
+    showLoading: boolean;
+    loadingIcon: string;
+}>>;
+export default Image;
+export type { ImageFit, ImageProps } from './Image';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtImage: typeof Image;
+    }
+}

package/es/image/index.mjs

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

package/es/image/style/index.d.ts

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

package/es/image/style/index.mjs

@@ -0,0 +1,4 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../index.css";

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

@@ -0,0 +1,188 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { Interceptor } from '../utils';
+import { PopupCloseIconPosition } from '../popup';
+import { ImageItem } from './types';
+export declare const imagePreviewProps: {
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: PropType<ImageItem[]>;
+        default: () => ImageItem[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: PropType<unknown>;
+    closeIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: PropType<Interceptor>;
+    overlayClass: PropType<unknown>;
+    overlayStyle: PropType<CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+};
+export declare type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>;
+declare const _default: import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: PropType<ImageItem[]>;
+        default: () => ImageItem[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: PropType<unknown>;
+    closeIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: PropType<Interceptor>;
+    overlayClass: PropType<unknown>;
+    overlayStyle: PropType<CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale")[], "change" | "close" | "closed" | "update:show" | "scale", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    show: BooleanConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    images: {
+        type: PropType<ImageItem[]>;
+        default: () => ImageItem[];
+    };
+    minZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxZoom: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeable: BooleanConstructor;
+    showIndex: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    className: PropType<unknown>;
+    closeIcon: {
+        type: PropType<string>;
+        default: string;
+    };
+    transition: StringConstructor;
+    beforeClose: PropType<Interceptor>;
+    overlayClass: PropType<unknown>;
+    overlayStyle: PropType<CSSProperties>;
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    startPosition: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showIndicators: BooleanConstructor;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeIconPosition: {
+        type: PropType<PopupCloseIconPosition>;
+        default: PopupCloseIconPosition;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onScale?: ((...args: any[]) => any) | undefined;
+}, {
+    loop: boolean;
+    show: boolean;
+    overlay: boolean;
+    closeIcon: string;
+    closeable: boolean;
+    closeOnPopstate: boolean;
+    closeIconPosition: PopupCloseIconPosition;
+    showIndicators: boolean;
+    swipeDuration: string | number;
+    minZoom: string | number;
+    maxZoom: string | number;
+    images: ImageItem[];
+    showIndex: boolean;
+    startPosition: string | number;
+}>;
+export default _default;