maz-ui 3.12.2 → 3.14.0

package/nuxt/index.ts

@@ -3,40 +3,79 @@ import { defu } from 'defu'
 import { componentList } from '../components/component-list'
 import { dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import type { AosOptions, ToasterOptions, ThemeHandlerOptions, vLazyImgOptions } from 'modules'
 
 export interface MazUiNuxtOptions {
   /**
-   * Enable auto import of main css file
+   * Enable auto-import of main css file
    * @default true
    */
   injectCss?: boolean
   /**
-   * Enable auto import of main css file
+   * Install aos plugin and enable auto-import of useAos composable
    * @default false
    */
-  injectAosCss?: boolean
+  injectAos?:
+    | boolean
+    | (Omit<AosOptions, 'router'> & {
+        /**
+         * Auto inject aos CSS file
+         * @default true
+         */
+        injectCss?: boolean
+        /**
+         * Set `true` to re-run animations on page change
+         * @default false
+         */
+        router?: boolean
+      })
   /**
-   * Install the toaster plugin and enable auto import of toaster composable
+   * Install toaster plugin and enable auto-import of useToast composable
    * @default false
    */
-  injectToaster?: boolean
-  // /**
-  //  * Enable auto import of useCurrency composable
-  //  * @default false
-  //  */
-  // injectUseCurrency?: boolean
+  injectUseToast?: boolean | ToasterOptions
   /**
-   * Enable auto import of useTheme composable
+   * Install wait plugin and enable auto-import of useWait composable
    * @default false
    */
-  injectUseThemeHandler?: boolean
-  // /**
-  //  * install global of v-fullscreen-img directive
-  //  * @default false
-  //  */
-  // installFullscreenImgDirective?: boolean
+  injectUseWait?: boolean
+  /**
+   * Enable auto-import of useThemeHandler composable
+   * @default false
+   */
+  injectUseThemeHandler?: boolean | ThemeHandlerOptions
+  /**
+   * Enable auto-import of useIdleTimeout composable
+   * @default false
+   */
+  injectUseIdleTimeout?: boolean
   /**
-   * Enable auto import of all components
+   * Enable auto-import of useUserVisibility composable
+   * @default false
+   */
+  injectUseUserVisibility?: boolean
+  /**
+   * Globally install of v-zoom-img directive
+   * @default false
+   */
+  installVZoomImg?: boolean
+  /**
+   * Globally install of v-click-outside directive
+   * @default false
+   */
+  installVClickOutside?: boolean
+  /**
+   * Globally install of v-fullscreen-img directive
+   * @default false
+   */
+  installVFullscreenImg?: boolean
+  /**
+   * Globally install of v-lazy-img directive
+   * @default false
+   */
+  installVLazyImg?: boolean | vLazyImgOptions
+  /**
+   * Enable auto-import of all components
    * @default true
    */
   injectComponents?: boolean
@@ -45,6 +84,11 @@ export interface MazUiNuxtOptions {
    * @default true
    */
   devtools?: boolean
+  // /**
+  //  * Enable auto-import of useCurrency composable
+  //  * @default false
+  //  */
+  // injectUseCurrency?: boolean
 }
 
 declare module '@nuxt/schema' {
@@ -87,13 +131,6 @@ export default defineNuxtModule<MazUiNuxtOptions>({
       nuxt.options.css = [resolve(path), ...nuxt.options.css]
     }
 
-    if (moduleOptions.injectAosCss && process.env.MAZ_UI_DEV === 'true') {
-      // the library should be built
-      nuxt.options.css = [resolve('./../dist/css/aos.css'), ...nuxt.options.css]
-    } else if (moduleOptions.injectAosCss) {
-      nuxt.options.css = [resolve('./../css/aos.css'), ...nuxt.options.css]
-    }
-
     if (moduleOptions.injectComponents) {
       for (const componentName of componentList) {
         addComponent({
@@ -106,16 +143,68 @@ export default defineNuxtModule<MazUiNuxtOptions>({
       }
     }
 
-    if (moduleOptions.injectToaster) {
+    if (moduleOptions.injectAos) {
+      addPlugin(resolve(_dirname, './runtime/plugins/aos'))
+
+      addImports({
+        from: 'maz-ui',
+        name: 'useAos',
+        as: 'useAos',
+      })
+
+      const injectAosCSS =
+        typeof moduleOptions.injectAos === 'object' &&
+        typeof moduleOptions.injectAos.injectCss === 'boolean'
+          ? moduleOptions.injectAos.injectCss
+          : true
+
+      if (
+        typeof moduleOptions.injectAos === 'object' &&
+        injectAosCSS &&
+        process.env.MAZ_UI_DEV === 'true'
+      ) {
+        nuxt.options.css = [resolve('./../dist/css/aos.css'), ...nuxt.options.css]
+      } else if (typeof moduleOptions.injectAos === 'object' && injectAosCSS) {
+        nuxt.options.css = [resolve('./../css/aos.css'), ...nuxt.options.css]
+      }
+    }
+
+    if (moduleOptions.injectUseToast) {
       addPlugin(resolve(_dirname, './runtime/plugins/toaster'))
 
       addImports({
-        from: resolve(_dirname, './runtime/composables/use-toast'),
+        from: 'maz-ui',
         name: 'useToast',
         as: 'useToast',
       })
     }
 
+    if (moduleOptions.injectUseWait) {
+      addPlugin(resolve(_dirname, './runtime/plugins/wait'))
+
+      addImports({
+        from: 'maz-ui',
+        name: 'useWait',
+        as: 'useWait',
+      })
+    }
+
+    if (moduleOptions.installVZoomImg) {
+      addPlugin(resolve(_dirname, './runtime/plugins/v-zoom-img'))
+    }
+
+    if (moduleOptions.installVLazyImg) {
+      addPlugin(resolve(_dirname, './runtime/plugins/v-lazy-img'))
+    }
+
+    if (moduleOptions.installVClickOutside) {
+      addPlugin(resolve(_dirname, './runtime/plugins/v-click-outside'))
+    }
+
+    if (moduleOptions.installVFullscreenImg) {
+      addPlugin(resolve(_dirname, './runtime/plugins/v-fullscreen-img'))
+    }
+
     // if (moduleOptions.injectUseCurrency) {
     //   addImports({
     //     from: 'maz-ui',
@@ -126,12 +215,28 @@ export default defineNuxtModule<MazUiNuxtOptions>({
 
     if (moduleOptions.injectUseThemeHandler) {
       addImports({
-        from: 'maz-ui',
+        from: resolve(_dirname, './runtime/composables/use-theme-handler'),
         name: 'useThemeHandler',
         as: 'useThemeHandler',
       })
     }
 
+    if (moduleOptions.injectUseIdleTimeout) {
+      addImports({
+        from: 'maz-ui',
+        name: 'useIdleTimeout',
+        as: 'useIdleTimeout',
+      })
+    }
+
+    if (moduleOptions.injectUseUserVisibility) {
+      addImports({
+        from: 'maz-ui',
+        name: 'useUserVisibility',
+        as: 'useUserVisibility',
+      })
+    }
+
     // if (moduleOptions.installFullscreenImgDirective) {
     //   addPlugin(resolve(_dirname, './runtime/plugins/v-fullscreen-img'))
     // }

package/nuxt/runtime/composables/use-theme-handler.ts

@@ -0,0 +1,12 @@
+import { useThemeHandler as useThemeHandlerComposable } from '../../../modules'
+import { useNuxtApp } from 'nuxt/app'
+
+export function useThemeHandler() {
+  const { $config } = useNuxtApp()
+
+  const themeHandlerOptions = $config.public.mazUi?.injectUseThemeHandler
+
+  const options = typeof themeHandlerOptions === 'object' ? themeHandlerOptions : undefined
+
+  return useThemeHandlerComposable(options)
+}

package/nuxt/runtime/plugins/aos.ts

@@ -0,0 +1,14 @@
+import { installAos } from './../../../modules'
+import { defineNuxtPlugin, useRouter } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp, $config }) => {
+  const aosOptions = $config.public.mazUi?.injectAos
+  const router = useRouter()
+
+  const options =
+    typeof aosOptions === 'object'
+      ? { ...aosOptions, router: aosOptions.router ? router : undefined }
+      : {}
+
+  vueApp.use(installAos, options)
+})

package/nuxt/runtime/plugins/toaster.ts

@@ -1,26 +1,10 @@
-import { ToasterHandler } from './../../../modules'
+import { installToaster } from './../../../modules'
 import { defineNuxtPlugin } from 'nuxt/app'
 
-export default defineNuxtPlugin(({ vueApp }) => {
-  const instance = new ToasterHandler(vueApp, {
-    position: 'top',
-    timeout: 10_000,
-    persistent: false,
-  })
+export default defineNuxtPlugin(({ vueApp, $config }) => {
+  const toasterOptions = $config.public.mazUi?.injectUseToast
 
-  /* eslint-disable @typescript-eslint/no-empty-function */
-  const toasterServer = {
-    show: () => {},
-    success: () => {},
-    error: () => {},
-    warning: () => {},
-    info: () => {},
-  } as unknown as ToasterHandler
-  /* eslint-enable @typescript-eslint/no-empty-function */
+  const options = typeof toasterOptions === 'object' ? toasterOptions : undefined
 
-  return {
-    provide: {
-      toast: (process.client ? instance : toasterServer) as ToasterHandler,
-    },
-  }
+  vueApp.use(installToaster, options)
 })

package/nuxt/runtime/plugins/v-click-outside.ts

@@ -0,0 +1,6 @@
+import { vClickOutsideInstall } from '../../../modules'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(vClickOutsideInstall)
+})

package/nuxt/runtime/plugins/v-fullscreen-img.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import { vFullscreenImgInstall } from '../../../modules'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(vFullscreenImgInstall)
+})

package/nuxt/runtime/plugins/v-lazy-img.ts

@@ -0,0 +1,10 @@
+import { vLazyImgInstall } from '../../../modules'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp, $config }) => {
+  const vLazyImgOptions = $config.public.mazUi?.installVLazyImg
+
+  const options = typeof vLazyImgOptions === 'object' ? vLazyImgOptions : undefined
+
+  vueApp.use(vLazyImgInstall, options)
+})

package/nuxt/runtime/plugins/v-zoom-img.ts

@@ -0,0 +1,6 @@
+import { vZoomImgInstall } from '../../../modules'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(vZoomImgInstall)
+})

package/nuxt/runtime/plugins/wait.ts

@@ -0,0 +1,6 @@
+import { installWait } from '../../../modules'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  vueApp.use(installWait)
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maz-ui",
-  "version": "3.12.2",
+  "version": "3.14.0",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "main": "./modules/index.mjs",
@@ -8,20 +8,20 @@
   "types": "./types/modules/index.d.ts",
   "exports": {
     ".": {
-      "default": "./modules/index.mjs",
-      "types": "./types/modules/index.d.ts"
+      "types": "./types/modules/index.d.ts",
+      "default": "./modules/index.mjs"
     },
     "./components": {
-      "default": "./components/index.mjs",
-      "types": "./types/components/index.d.ts"
+      "types": "./types/components/index.d.ts",
+      "default": "./components/index.mjs"
     },
     "./components/*": {
-      "default": "./components/*",
-      "types": "./types/components/*.vue.d.ts"
+      "types": "./types/components/*.vue.d.ts",
+      "default": "./components/*"
     },
     "./nuxt": {
-      "default": "./nuxt/index.ts",
-      "types": "./types/nuxt/index.d.ts"
+      "types": "./types/nuxt/index.d.ts",
+      "default": "./nuxt/index.ts"
     },
     "./styles": "./css/main.css",
     "./aos-styles": "./css/aos.css",
@@ -51,7 +51,8 @@
     "libphonenumber-js": "^1.9.44",
     "nuxt": "^3.4.0",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "vue-scrollto": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "dropzone": {
@@ -75,6 +76,9 @@
     "@nuxt/kit": {
       "optional": true
     },
+    "vue-scrollto": {
+      "optional": true
+    },
     "defu": {
       "optional": true
     }
@@ -87,18 +91,18 @@
     "@nuxt/schema": "^3.7.3",
     "@types/dropzone": "^5.7.4",
     "@types/google.maps": "^3.54.1",
-    "@types/node": "^20.6.2",
+    "@types/node": "^20.6.3",
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "@vitejs/plugin-vue": "^4.3.4",
-    "@vitest/coverage-v8": "^0.34.4",
+    "@vitest/coverage-v8": "^0.34.5",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "c8": "^8.0.1",
     "chalk": "^4.1.2",
     "chart.js": "^4.4.0",
@@ -131,7 +135,7 @@
     "replace-in-file": "^7.0.1",
     "rimraf": "^5.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.67.0",
+    "sass": "^1.68.0",
     "semver": "^7.5.4",
     "sirv": "^2.0.3",
     "stylelint": "^15.10.3",
@@ -140,20 +144,21 @@
     "stylelint-config-standard-scss": "^11.0.0",
     "stylelint-config-tailwindcss": "^0.0.7",
     "tailwindcss": "^3.3.3",
-    "terser": "^5.19.4",
+    "terser": "^5.20.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-static-copy": "^0.17.0",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.34.4",
+    "vitest": "^0.34.5",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
     "vue-loader": "^17.2.2",
     "vue-router": "^4.2.4",
-    "vue-tsc": "^1.8.11",
+    "vue-scrollto": "^2.20.0",
+    "vue-tsc": "^1.8.13",
     "vuedraggable": "^2.24.3"
   },
   "engines": {

package/types/components/MazAvatar.vue.d.ts

@@ -126,15 +126,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
+    size: string;
     caption: string | null | undefined;
+    alt: string;
     src: string | null | undefined;
-    size: string;
-    target: string;
     href: string;
-    to: Record<string, any>;
+    target: string;
     noLoader: boolean;
     imageHeightFull: boolean;
-    alt: string;
+    to: Record<string, any>;
     bordered: boolean;
     clickable: boolean;
     square: boolean;

package/types/components/MazBackdrop.vue.d.ts

@@ -75,8 +75,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...args: any[]) => any) | undefined;
     "onBefore-close"?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
     persistent: boolean;

package/types/components/MazBadge.vue.d.ts

@@ -56,8 +56,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         validator: (value: string) => boolean;
     };
 }>>, {
-    color: BadgeColor;
     size: string;
+    color: BadgeColor;
     nowrap: boolean;
     outline: boolean;
     pastel: boolean;

package/types/components/MazBtn.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     type: {
-        type: PropType<"button" | "reset" | "submit">;
+        type: PropType<"button" | "submit" | "reset">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -97,7 +97,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     type: {
-        type: PropType<"button" | "reset" | "submit">;
+        type: PropType<"button" | "submit" | "reset">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -162,10 +162,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    type: "button" | "reset" | "submit";
+    size: Size;
     color: Color;
+    type: "button" | "submit" | "reset";
     disabled: boolean;
-    size: Size;
     loading: boolean;
     noElevation: boolean;
     outline: boolean;

package/types/components/MazCard.vue.d.ts

@@ -158,20 +158,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>>, {
-    elevation: boolean;
-    href: string;
     orientation: string;
-    radius: boolean;
-    scale: boolean;
+    href: string;
+    zoom: boolean;
     bordered: boolean;
     noPadding: boolean;
     images: MazGalleryImage[];
     noRemaining: boolean;
+    scale: boolean;
     hrefTarget: string;
     footerAlign: string;
     galleryWidth: string | number;
     galleryHeight: string | number;
-    zoom: boolean;
+    elevation: boolean;
+    radius: boolean;
     imagesShowCount: number;
     wrapperClass: string;
     overflowHidden: boolean;

package/types/components/MazChart.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     updateMode: {
-        type: PropType<"default" | "reset" | "resize" | "none" | "hide" | "show" | "active">;
+        type: PropType<"default" | "none" | "reset" | "resize" | "hide" | "show" | "active">;
         default: undefined;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -83,13 +83,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     updateMode: {
-        type: PropType<"default" | "reset" | "resize" | "none" | "hide" | "show" | "active">;
+        type: PropType<"default" | "none" | "reset" | "resize" | "hide" | "show" | "active">;
         default: undefined;
     };
 }>>, {
     options: Record<string, any>;
     plugins: unknown[];
     datasetIdKey: string;
-    updateMode: "default" | "reset" | "resize" | "none" | "hide" | "show" | "active";
+    updateMode: "default" | "none" | "reset" | "resize" | "hide" | "show" | "active";
 }, {}>;
 export default _default;

package/types/components/MazCheckbox.vue.d.ts

@@ -38,9 +38,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }>> & {
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
-    id: string;
     color: Color;
     name: string;
+    id: string;
 }, {}>, {
     default?(_: {}): any;
 }>;

package/types/components/MazDrawer.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
-    title: string;
     size: string;
+    title: string;
     backdropClass: string;
     variant: "top" | "bottom" | "left" | "right";
     noClose: boolean;

package/types/components/MazDropzone.vue.d.ts

@@ -75,7 +75,7 @@ declare const _default: import("vue").DefineComponent<{
     getUploadingFiles: () => Dropzone.DropzoneFile[];
     getAddedFiles: () => Dropzone.DropzoneFile[];
     getActiveFiles: () => Dropzone.DropzoneFile[];
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "error" | "paste" | "reset" | "thumbnail" | "addedfile" | "addedfiles" | "removedfile" | "processing" | "processingmultiple" | "uploadprogress" | "totaluploadprogress" | "sending" | "sendingmultiple" | "canceled" | "canceledmultiple" | "complete" | "completemultiple" | "maxfilesexceeded" | "maxfilesreached" | "queuecomplete")[], "success" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "error" | "paste" | "reset" | "thumbnail" | "addedfile" | "addedfiles" | "removedfile" | "processing" | "processingmultiple" | "uploadprogress" | "totaluploadprogress" | "sending" | "sendingmultiple" | "canceled" | "canceledmultiple" | "complete" | "completemultiple" | "maxfilesexceeded" | "maxfilesreached" | "queuecomplete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "reset" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "error" | "paste" | "thumbnail" | "addedfile" | "addedfiles" | "removedfile" | "processing" | "processingmultiple" | "uploadprogress" | "totaluploadprogress" | "sending" | "sendingmultiple" | "canceled" | "canceledmultiple" | "complete" | "completemultiple" | "maxfilesexceeded" | "maxfilesreached" | "queuecomplete")[], "success" | "reset" | "dragend" | "dragenter" | "dragleave" | "dragover" | "dragstart" | "drop" | "error" | "paste" | "thumbnail" | "addedfile" | "addedfiles" | "removedfile" | "processing" | "processingmultiple" | "uploadprogress" | "totaluploadprogress" | "sending" | "sendingmultiple" | "canceled" | "canceledmultiple" | "complete" | "completemultiple" | "maxfilesexceeded" | "maxfilesreached" | "queuecomplete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     options: {
         type: PropType<MazDropzoneOptions>;
         required: true;
@@ -121,8 +121,8 @@ declare const _default: import("vue").DefineComponent<{
     onMaxfilesreached?: ((...args: any[]) => any) | undefined;
     onQueuecomplete?: ((...args: any[]) => any) | undefined;
 }, {
-    height: string | number;
     width: string | number;
+    height: string | number;
     noDestroyOnUnmount: boolean;
 }, {}>;
 export default _default;

package/types/components/MazFullscreenLoader.vue.d.ts

@@ -0,0 +1,31 @@
+import type { Color } from './types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    color: {
+        type: import("vue").PropType<Color>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    color: {
+        type: import("vue").PropType<Color>;
+        default: string;
+    };
+}>>, {
+    size: string;
+    color: Color;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};