@minto-ai/mini-ui 1.0.1 → 1.0.102

package/dist/icon/index.d.ts

@@ -0,0 +1,80 @@
+export declare const MtIcon: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly size: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly validator: (value: number | string) => value is number | "inherit";
+            readonly default: "inherit";
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "inherit";
+        };
+        readonly name: {
+            readonly type: StringConstructor;
+            readonly required: true;
+        };
+        readonly rotate: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        readonly size: string | number;
+        readonly color: string;
+        readonly rotate: number;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly size: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly validator: (value: number | string) => value is number | "inherit";
+            readonly default: "inherit";
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "inherit";
+        };
+        readonly name: {
+            readonly type: StringConstructor;
+            readonly required: true;
+        };
+        readonly rotate: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        readonly size: string | number;
+        readonly color: string;
+        readonly rotate: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly size: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly validator: (value: number | string) => value is number | "inherit";
+        readonly default: "inherit";
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "inherit";
+    };
+    readonly name: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    readonly size: string | number;
+    readonly color: string;
+    readonly rotate: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & import('vue').Plugin;
+export default MtIcon;

package/dist/icon/src/icon.d.ts

@@ -0,0 +1,34 @@
+import { ExtractPropTypes, PropType } from 'vue';
+declare const iconProps: {
+    /**
+     * 图标大小
+     */
+    readonly size: {
+        readonly type: PropType<number | string>;
+        readonly validator: (value: number | string) => value is number | "inherit";
+        readonly default: "inherit";
+    };
+    /**
+     * 图标颜色
+     */
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "inherit";
+    };
+    /**
+     * 图标名称
+     */
+    readonly name: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    /**
+     * 图标旋转角度
+     */
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+};
+export type IconProps = ExtractPropTypes<typeof iconProps>;
+export { iconProps };

package/dist/icon/src/icon.vue.d.ts

@@ -0,0 +1,42 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly size: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly validator: (value: number | string) => value is number | "inherit";
+        readonly default: "inherit";
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "inherit";
+    };
+    readonly name: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly size: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly validator: (value: number | string) => value is number | "inherit";
+        readonly default: "inherit";
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "inherit";
+    };
+    readonly name: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+}>> & Readonly<{}>, {
+    readonly size: string | number;
+    readonly color: string;
+    readonly rotate: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/image/index.d.ts

@@ -0,0 +1,104 @@
+export declare const MtImage: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly src: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly width: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly default: "100%";
+        };
+        readonly height: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly default: "100%";
+        };
+        readonly fit: {
+            readonly type: import('vue').PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+            readonly validator: (value: string) => boolean;
+            readonly default: "cover";
+        };
+    }>> & Readonly<{
+        onLoad?: (() => any) | undefined;
+        onError?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        load: () => any;
+        error: () => any;
+    }, import('vue').PublicProps, {
+        readonly src: string;
+        readonly width: string | number;
+        readonly height: string | number;
+        readonly fit: "fill" | "contain" | "cover" | "none" | "scale-down";
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly src: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly width: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly default: "100%";
+        };
+        readonly height: {
+            readonly type: import('vue').PropType<number | string>;
+            readonly default: "100%";
+        };
+        readonly fit: {
+            readonly type: import('vue').PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+            readonly validator: (value: string) => boolean;
+            readonly default: "cover";
+        };
+    }>> & Readonly<{
+        onLoad?: (() => any) | undefined;
+        onError?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        readonly src: string;
+        readonly width: string | number;
+        readonly height: string | number;
+        readonly fit: "fill" | "contain" | "cover" | "none" | "scale-down";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly src: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly width: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly height: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly fit: {
+        readonly type: import('vue').PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+        readonly validator: (value: string) => boolean;
+        readonly default: "cover";
+    };
+}>> & Readonly<{
+    onLoad?: (() => any) | undefined;
+    onError?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    load: () => any;
+    error: () => any;
+}, string, {
+    readonly src: string;
+    readonly width: string | number;
+    readonly height: string | number;
+    readonly fit: "fill" | "contain" | "cover" | "none" | "scale-down";
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<{
+        error: any;
+    }> & {
+        error: any;
+    };
+}) & import('vue').Plugin;
+export default MtImage;

package/dist/image/src/image.d.ts

@@ -0,0 +1,34 @@
+import { ExtractPropTypes, PropType } from 'vue';
+declare const imageProps: {
+    /**
+     * 图片地址
+     */
+    readonly src: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * 图片的宽度（基于375px设计稿）
+     */
+    readonly width: {
+        readonly type: PropType<number | string>;
+        readonly default: "100%";
+    };
+    /**
+     * 图片的高度（基于375px设计稿）
+     */
+    readonly height: {
+        readonly type: PropType<number | string>;
+        readonly default: "100%";
+    };
+    /**
+     * 图片缩放模式
+     */
+    readonly fit: {
+        readonly type: PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+        readonly validator: (value: string) => boolean;
+        readonly default: "cover";
+    };
+};
+export type ImageProps = ExtractPropTypes<typeof imageProps>;
+export { imageProps };

package/dist/image/src/image.vue.d.ts

@@ -0,0 +1,66 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        error: any;
+    }> & {
+        error: any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly src: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly width: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly height: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly fit: {
+        readonly type: import('vue').PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+        readonly validator: (value: string) => boolean;
+        readonly default: "cover";
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    load: () => any;
+    error: () => any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly src: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly width: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly height: {
+        readonly type: import('vue').PropType<number | string>;
+        readonly default: "100%";
+    };
+    readonly fit: {
+        readonly type: import('vue').PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+        readonly validator: (value: string) => boolean;
+        readonly default: "cover";
+    };
+}>> & Readonly<{
+    onLoad?: (() => any) | undefined;
+    onError?: (() => any) | undefined;
+}>, {
+    readonly src: string;
+    readonly width: string | number;
+    readonly height: string | number;
+    readonly fit: "fill" | "contain" | "cover" | "none" | "scale-down";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 import { App } from 'vue';
+import { MtIcon } from './icon';
+import { MtImage } from './image';
 import { MtLoading } from './loading';
 declare const _default: {
     install: (app: App) => void;
 };
 export default _default;
-export { MtLoading, };
+export { MtIcon, MtImage, MtLoading, };
 declare module 'vue' {
     interface GlobalComponents {
+        MtImage: typeof MtImage;
         MtLoading: typeof MtLoading;
+        MtIcon: typeof MtIcon;
     }
 }

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { isNumber, isString, isArray, multiply, divide, beParsedAsNumber, checkEmpty } from "@minto-ai/tools";
-import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeStyle, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, ref, watch, onMounted, createVNode, unref, Fragment } from "vue";
 const VALID_CSS_KEYWORD_REGEX = /^(?:fit-content|min-content|max-content|auto|inherit|initial|unset)$/;
 const NUMERIC_STRING_REGEX = /^\d+(?:\.\d+)?$/;
 const PIXEL_UNIT_STRING_REGEX = /^\d+(?:\.\d+)?px$/;
@@ -48,6 +48,81 @@ function withInstall(component) {
   };
   return component;
 }
+const iconProps = {
+  /**
+   * 图标大小
+   */
+  size: {
+    type: [Number, String],
+    validator: (value) => {
+      return isNumber(value) || isString(value) && value === "inherit";
+    },
+    default: "inherit"
+  },
+  /**
+   * 图标颜色
+   */
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  /**
+   * 图标名称
+   */
+  name: {
+    type: String,
+    required: true
+  },
+  /**
+   * 图标旋转角度
+   */
+  rotate: {
+    type: Number,
+    default: 0
+  }
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MtIcon"
+  },
+  __name: "icon",
+  props: iconProps,
+  setup(__props) {
+    const props = __props;
+    const iconClasses = computed(() => {
+      const classes = [];
+      classes.push("mt-icon");
+      if (props.name) {
+        classes.push(props.name);
+      }
+      return classes;
+    });
+    const iconStyles = computed(() => {
+      const styles = {};
+      if (!checkEmpty(props.color)) {
+        styles["--mt-icon-color"] = props.color;
+      }
+      if (!checkEmpty(props.size)) {
+        if (typeof props.size === "number") {
+          styles["--mt-icon-font-size"] = `${props.size}px`;
+        } else {
+          styles["--mt-icon-font-size"] = props.size;
+        }
+      }
+      Object.assign(styles, {
+        transform: `rotate(${props.rotate}deg)`
+      });
+      return styles;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("i", {
+        class: normalizeClass(iconClasses.value),
+        style: normalizeStyle(iconStyles.value)
+      }, null, 6);
+    };
+  }
+});
+const MtIcon = withInstall(_sfc_main$2);
 const loadingProps = {
   /**
    * 加载动画的类型
@@ -74,12 +149,12 @@ const loadingProps = {
     default: ""
   }
 };
-const _hoisted_1 = { class: "mt-loading" };
-const _hoisted_2 = {
+const _hoisted_1$1 = { class: "mt-loading" };
+const _hoisted_2$1 = {
   key: 0,
   class: "mt-loading__text"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MtLoading"
   },
@@ -101,12 +176,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return styles;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createElementVNode("div", {
           class: normalizeClass(iconClass.value),
           style: normalizeStyle(iconStyles.value)
         }, null, 6),
-        props.text || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        props.text || _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(props.text), 1)
           ])
@@ -115,9 +190,140 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MtLoading = withInstall(_sfc_main);
+const MtLoading = withInstall(_sfc_main$1);
+const imageProps = {
+  /**
+   * 图片地址
+   */
+  src: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 图片的宽度（基于375px设计稿）
+   */
+  width: {
+    type: [Number, String],
+    default: "100%"
+  },
+  /**
+   * 图片的高度（基于375px设计稿）
+   */
+  height: {
+    type: [Number, String],
+    default: "100%"
+  },
+  /**
+   * 图片缩放模式
+   */
+  fit: {
+    type: String,
+    validator: (value) => {
+      return ["fill", "contain", "cover", "none", "scale-down"].includes(value);
+    },
+    default: "cover"
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "mt-image__error"
+};
+const _hoisted_2 = { class: "mt-image__error-icon" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 1,
+  class: "mt-image__loading"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MtImage"
+  },
+  __name: "image",
+  props: imageProps,
+  emits: ["load", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const imageClasses = computed(() => {
+      const classes = ["mt-image"];
+      return classes;
+    });
+    const imageStyles = computed(() => {
+      const styles = {};
+      if (!checkEmpty(props.width)) {
+        styles["--mt-image-width"] = convertValueToViewportWidth(props.width);
+      }
+      if (!checkEmpty(props.height)) {
+        styles["--mt-image-height"] = convertValueToViewportWidth(props.height);
+      }
+      return styles;
+    });
+    const hasLoadError = ref(false);
+    const isLoading = ref(true);
+    const imageSrc = ref("");
+    function loadImage() {
+      isLoading.value = true;
+      hasLoadError.value = false;
+      imageSrc.value = props.src;
+    }
+    function handleLoad() {
+      isLoading.value = false;
+      hasLoadError.value = false;
+      emits("load");
+    }
+    function handleError() {
+      isLoading.value = false;
+      hasLoadError.value = true;
+      emits("error");
+    }
+    watch(
+      () => props.src,
+      () => {
+        loadImage();
+      }
+    );
+    onMounted(() => {
+      loadImage();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(imageClasses.value),
+        style: normalizeStyle(imageStyles.value)
+      }, [
+        hasLoadError.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "error", {}, () => [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(unref(MtIcon), {
+                name: "icon-image-error",
+                size: 50,
+                color: "#ccc"
+              })
+            ])
+          ])
+        ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: imageSrc.value,
+            class: "mt-image__img",
+            style: normalizeStyle({
+              objectFit: _ctx.fit
+            }),
+            onLoad: handleLoad,
+            onError: handleError
+          }, null, 44, _hoisted_3)) : createCommentVNode("", true),
+          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(unref(MtLoading), { size: 38 })
+          ])) : createCommentVNode("", true)
+        ], 64))
+      ], 6);
+    };
+  }
+});
+const MtImage = withInstall(_sfc_main);
 const components = [
-  MtLoading
+  MtImage,
+  MtLoading,
+  MtIcon
 ];
 const index = {
   install: (app) => {
@@ -125,6 +331,8 @@ const index = {
   }
 };
 export {
+  MtIcon,
+  MtImage,
   MtLoading,
   index as default
 };

package/dist/loading/index.d.ts

@@ -14,8 +14,8 @@ export declare const MtLoading: {
             readonly default: "";
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
-        readonly type: "spinner";
         readonly size: number;
+        readonly type: "spinner";
         readonly text: string;
     }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
@@ -39,8 +39,8 @@ export declare const MtLoading: {
             readonly default: "";
         };
     }>> & Readonly<{}>, {}, {}, {}, {}, {
-        readonly type: "spinner";
         readonly size: number;
+        readonly type: "spinner";
         readonly text: string;
     }>;
     __isFragment?: never;
@@ -61,8 +61,8 @@ export declare const MtLoading: {
         readonly default: "";
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
-    readonly type: "spinner";
     readonly size: number;
+    readonly type: "spinner";
     readonly text: string;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {

package/dist/loading/src/loading.vue.d.ts

@@ -36,8 +36,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: "";
     };
 }>> & Readonly<{}>, {
-    readonly type: "spinner";
     readonly size: number;
+    readonly type: "spinner";
     readonly text: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;