fix: 解决冲突

jd/generate-nutui.cjs

@@ -6,10 +6,15 @@ let importStr = `import { App } from 'vue';
 import Locale from './locale';\n`;
 let importScssStr = `\n`;
 const packages = [];
+const methods = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
     let { name, type, exclude } = element;
-    importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${type === 'methods' ? '' : '.vue'}';\n`;
+    importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.vue';\n`;
+    if (type === 'methods') {
+      importStr += `import { show${name} } from './__VUE/${name.toLowerCase()}/index';\n`;
+      methods.push(`show${name}`);
+    }
     importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss';\n`;
     if (exclude != true) {
       packages.push(name);
@@ -29,7 +34,7 @@ let installFunction = `function install(app: App) {
 let fileStrBuild = `${importStr}
 ${installFunction}
 const version = '${packageConfig.version}';
-export { install, version, Locale, ${packages.join(',')}};
+export { install, version, Locale, ${packages.join(',')}, ${methods.join(',')}};
 export default { install, version, Locale};`;
 
 fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.vue.build.ts'), fileStrBuild, 'utf8', (error) => {
@@ -40,7 +45,7 @@ let fileStrDev = `${importStr}
 ${installFunction}
 ${importScssStr}
 export const testComponents = { ${packages.join(',')}};
-export { install, Locale, ${packages.join(',')}  };
+export { install, Locale, ${packages.join(',')}, ${methods.join(',')}  };
 export default { install, version:'${packageConfig.version}', Locale};`;
 fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.vue.ts'), fileStrDev, 'utf8', (error) => {
   // logger.success(`${package_config_path} 文件写入成功`);

jd/generate-unplugin-deps.cjs

@@ -1,4 +1,5 @@
 const config = require('../src/config.json');
+const packageConfig = require('../package.json');
 const path = require('path');
 const fs = require('fs-extra');
 
@@ -6,6 +7,7 @@ const fs = require('fs-extra');
 const styleMap = new Map();
 const tasks = [];
 let outputFileEntry = ``;
+let components = [];
 // import Locale from './packages/locale';\n
 config.nav.forEach((item) => {
   item.packages.forEach((element) => {
@@ -15,20 +17,54 @@ config.nav.forEach((item) => {
     });
     // gen entry
     if (element.exclude != true) {
-      const outputMjs = `import _${element.name} from '../_es/${element.name}.js';
+      let outputMjs = '';
+      if (element.type == 'methods') {
+        outputMjs = `import _${element.name} from '../_es/${element.name}.js';
+import { show${element.name} } from '../_es/${element.name}.js';
+const treeshaking = (t) => t;
+const ${element.name} = treeshaking(_${element.name});
+export { ${element.name}, show${element.name} };`;
+      } else {
+        outputMjs = `import _${element.name} from '../_es/${element.name}.js';
 const treeshaking = (t) => t;
 const ${element.name} = treeshaking(_${element.name});
 export { ${element.name} };`;
+      }
       tasks.push(
         fs.outputFile(path.resolve(__dirname, `../dist/packages/${element.name}/index.mjs`), outputMjs, 'utf8', () => {
           // console.log('')
         })
       );
-
-      outputFileEntry += `export * from "./packages/${element.name.toLowerCase()}/index.mjs";\n`;
+      let folderName = element.name.toLowerCase();
+      outputFileEntry += `export * from "./packages/${folderName}/index.mjs";\n`;
+      components.push(element.name);
     }
   });
 });
+outputFileEntry += components.map(name => `import { ${name} } from "./packages/${name}/index.mjs";`).join('\n');
+outputFileEntry += `\nimport { Locale } from "./packages/locale/lang";
+function install(app) {
+  const packages = [${components.join(',')}];
+  packages.forEach((item) => {
+      if (item.install) {
+          app.use(item);
+      } else if (item.name) {
+          app.component(item.name, item);
+      }
+  });
+}
+const version = '${packageConfig.version}';
+var stdin_default = {
+  install,
+  version,
+  Locale
+};
+export {
+  stdin_default as default,
+  install,
+  version,
+  Locale
+};`;
 
 tasks.push(
   fs.outputFile(path.resolve(__dirname, `../dist/nutui.es.js`), outputFileEntry, 'utf8', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-beta.9",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",

publish/nutui-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-taro",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-beta.9",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",

publish/nutui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-beta.9",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",

src/packages/__VUE/dialog/demo.vue

@@ -39,7 +39,7 @@
 import { createVNode, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('dialog');
-import { Dialog } from '@/packages/nutui.vue';
+import { showDialog } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 const initTranslate = () =>
   useTranslate({
@@ -94,7 +94,7 @@ export default createDemo({
     };
 
     const baseClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('basic'),
         content: createVNode('span', { style: { color: 'red' } }, translate('content3')),
         onCancel,
@@ -103,7 +103,7 @@ export default createDemo({
     };
 
     const transparentClick = (): void => {
-      Dialog({
+      showDialog({
         overlayStyle: { background: 'rgba(0,0,0,0)' },
         title: translate('transparent'),
         content: 'Content',
@@ -113,7 +113,7 @@ export default createDemo({
     };
 
     const htmlClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('html'),
         content:
           "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -123,7 +123,7 @@ export default createDemo({
     };
 
     const beforeCloseClick = (): void => {
-      Dialog({
+      showDialog({
         title: translate('beforeClose'),
         content: translate('content4'),
         onCancel,
@@ -139,14 +139,14 @@ export default createDemo({
     };
 
     const noTitleClick = () => {
-      Dialog({
+      showDialog({
         content: translate('noTitle'),
         onCancel,
         onOk
       });
     };
     const tipsClick = () => {
-      Dialog({
+      showDialog({
         title: translate('tips'),
         content: translate('content'),
         noCancelBtn: true,
@@ -155,7 +155,7 @@ export default createDemo({
       });
     };
     const verticalClick = () => {
-      Dialog({
+      showDialog({
         title: translate('tips'),
         content: translate('content1'),
         footerDirection: 'vertical',
@@ -172,7 +172,7 @@ export default createDemo({
     };
 
     const teleportClick = (teleport: string) => {
-      Dialog({
+      showDialog({
         teleport,
         title: 'teleport to ' + teleport,
         content: translate('content2'),

src/packages/__VUE/dialog/doc.en-US.md

@@ -36,7 +36,8 @@ app.use(Dialog);
 </template>
 <script lang="ts">
 import { ref,createVNode } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 export default {
     setup() {
         const onCancel = () => {
@@ -46,7 +47,7 @@ export default {
           console.log('event ok');
         };
         const baseClick = (): void => {
-          Dialog({
+          showDialog({
             title: 'Basic spring frame',
             content: createVNode('span', { style: { color: 'red' } }, 'I can be a custom component'),
             onCancel,
@@ -54,7 +55,7 @@ export default {
           });
         };
         const transparentClick = (): void => {
-          Dialog({
+          showDialog({
             overlayStyle: { background: 'rgba(0,0,0,0)' },
             title: 'Transparent Dialog',
             content: 'Content',
@@ -63,7 +64,7 @@ export default {
           });
         };
         const htmlClick = (): void => {
-          Dialog({
+          showDialog({
             title: "Use html",
             content:
               "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -72,7 +73,7 @@ export default {
           });
         };
         const beforeCloseClick = (): void => {
-          Dialog({
+          showDialog({
             title: 'Before Close',
             content: 'Click confirm to close it in 1 second',
             onCancel,
@@ -87,14 +88,14 @@ export default {
           });
         };
         const noTitleClick = () => {
-          Dialog({
+          showDialog({
             content: 'Content',
             onCancel,
             onOk
           });
         };
         const tipsClick = () => {
-          Dialog({
+          showDialog({
             title: 'Title',
             content: 'Function call and component call are supported.',
             noCancelBtn: true,
@@ -103,7 +104,7 @@ export default {
           });
         };
         const verticalClick = () => {
-          Dialog({
+          showDialog({
             title: 'Title',
             content: 'Support vertical arrangement of bottom buttons.',
             footerDirection: 'vertical',
@@ -133,11 +134,11 @@ export default {
 ```
 
 ``` javascript
-Dialog({
+showDialog({
   teleport: '#app',
   ...
 });
-Dialog({
+showDialog({
   teleport: '.demo',
   ...
 });
@@ -147,7 +148,8 @@ Dialog({
 
 ```javascript
 import { ref } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 import { getCurrentInstance } from 'vue';
 
 export default {

src/packages/__VUE/dialog/doc.md

@@ -36,7 +36,8 @@ app.use(Dialog);
 </template>
 <script lang="ts">
 import { ref,createVNode } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 export default {
     setup() {
         const onCancel = () => {
@@ -46,7 +47,7 @@ export default {
           console.log('event ok');
         };
         const baseClick = (): void => {
-          Dialog({
+          showDialog({
             title: '基础弹框',
             content: createVNode('span', { style: { color: 'red' } }, '我可以是一个自定义组件'),
             onCancel,
@@ -54,7 +55,7 @@ export default {
           });
         };
         const transparentClick = (): void => {
-          Dialog({
+          showDialog({
             overlayStyle: { background: 'rgba(0,0,0,0)' },
             title: '透明弹框',
             content: 'Content',
@@ -63,7 +64,7 @@ export default {
           });
         };
         const htmlClick = (): void => {
-          Dialog({
+          showDialog({
             title: "支持富文本 html",
             content:
               "<p style='color:red'>html</p><img src='https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif' />",
@@ -72,7 +73,7 @@ export default {
           });
         };
         const beforeCloseClick = (): void => {
-          Dialog({
+          showDialog({
             title: '异步关闭',
             content: '点击确认后，1秒后关闭',
             onCancel,
@@ -87,14 +88,14 @@ export default {
           });
         };
         const noTitleClick = () => {
-          Dialog({
+          showDialog({
             content: '无标题弹框',
             onCancel,
             onOk
           });
         };
         const tipsClick = () => {
-          Dialog({
+          showDialog({
             title: '温馨提示',
             content: '支持函数调用和组件调用两种方式。',
             noCancelBtn: true,
@@ -103,7 +104,7 @@ export default {
           });
         };
         const verticalClick = () => {
-          Dialog({
+          showDialog({
             title: '温馨提示',
             content: '支持底部按钮纵向排列。',
             footerDirection: 'vertical',
@@ -133,11 +134,11 @@ export default {
 ```
 
 ``` javascript
-Dialog({
+showDialog({
   teleport: '#app',
   ...
 });
-Dialog({
+showDialog({
   teleport: '.demo',
   ...
 });
@@ -147,7 +148,8 @@ Dialog({
 
 ```javascript
 import { ref } from 'vue';
-import { Dialog } from '@nutui/nutui';
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
 import { getCurrentInstance } from 'vue';
 
 export default {

src/packages/__VUE/dialog/index.ts

@@ -20,12 +20,12 @@ export class DialogOptions {
   footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical
 
   // function
-  onUpdate?: Function = (value: boolean) => {};
-  onOk?: Function = () => {};
-  onCancel?: Function = () => {};
-  onOpened?: Function = () => {};
-  onClosed?: Function = () => {};
-  beforeClose?: Function;
+  onUpdate?: (value: boolean) => any | void;
+  onOk?: () => void;
+  onCancel?: () => void;
+  onOpened?: () => void;
+  onClosed?: () => void;
+  beforeClose?: (action: string) => any;
 
   visible?: boolean = true;
   noFooter?: boolean = false;
@@ -40,7 +40,7 @@ class DialogFunction {
   options: DialogOptions = new DialogOptions();
   instance: any;
   constructor(_options: DialogOptions) {
-    let options = Object.assign(this.options, _options);
+    const options = Object.assign(this.options, _options);
     const { unmount } = CreateComponent(options, {
       name: 'dialog',
       components: [Popup, Button, Overlay],
@@ -66,12 +66,12 @@ class DialogFunction {
   }
 }
 
-const _Dialog = function (options: DialogOptions) {
+const showDialog = function (options: DialogOptions) {
   return new DialogFunction(options);
 };
-_Dialog.install = (app: any) => {
+showDialog.install = (app: any) => {
   app.use(Dialog);
-  app.config.globalProperties.$dialog = _Dialog;
+  app.config.globalProperties.$dialog = showDialog;
 };
-export { Dialog };
-export default _Dialog;
+export { showDialog };
+export default Dialog;

src/packages/__VUE/imagepreview/demo.vue

@@ -30,9 +30,9 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('imagepreview');
+const { createDemo, translate } = createComponent('image-preview');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { ImagePreview } from '@/packages/nutui.vue';
+import { showImagePreview } from '@/packages/nutui.vue';
 const initTranslate = () =>
   useTranslate({
     'zh-CN': {
@@ -113,7 +113,7 @@ export default createDemo({
     };
 
     const fnShow = () => {
-      ImagePreview({
+      showImagePreview({
         show: true,
         images: resData.imgData,
         onClose: () => onClose()

src/packages/__VUE/imagepreview/doc.en-US.md

@@ -252,7 +252,8 @@ app.use(ImagePreview);
 </template>
 
 <script lang="ts">
-  import { ImagePreview } from '@nutui/nutui';
+  import { showImagePreview } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/imagepreview/style';
   import { reactive, toRefs } from 'vue';
   export default {
     setup() {
@@ -278,11 +279,11 @@ app.use(ImagePreview);
         };
 
         const fnShow = () => {
-        ImagePreview({
-            show: true,
-            images: resData.imgData,
-            onClose
-        })
+            showImagePreview({
+                show: true,
+                images: resData.imgData,
+                onClose
+            })
         };
         
         return {

src/packages/__VUE/imagepreview/doc.md

@@ -252,7 +252,8 @@ app.use(ImagePreview);
 </template>
 
 <script lang="ts">
-  import { ImagePreview } from '@nutui/nutui';
+  import { showImagePreview } from '@nutui/nutui';
+  import '@nutui/nutui/dist/packages/imagepreview/style';
   import { reactive, toRefs } from 'vue';
   export default {
     setup() {
@@ -274,15 +275,15 @@ app.use(ImagePreview);
         });
 
         const onClose = () => {
-        console.log('imagepreview closed');
+            console.log('imagepreview closed');
         };
 
         const fnShow = () => {
-        ImagePreview({
-            show: true,
-            images: resData.imgData,
-            onClose
-        })
+            showImagePreview({
+                show: true,
+                images: resData.imgData,
+                onClose
+            })
         };
         
         return {

src/packages/__VUE/imagepreview/index.ts

@@ -10,24 +10,24 @@ import SwiperItem from '../swiperitem/index.vue';
 import Overlay from '../overlay/index.vue';
 
 export class ImagePreviewOptions {
-  show: Boolean = false;
+  show = false;
   images: ImageInterface[] = [];
   videos?: [] = [];
-  contentClose?: Boolean = true;
-  initNo?: Number = 0;
-  paginationVisible?: Boolean = false;
-  paginationColor?: String = '';
-  autoplay?: Number | String = 0;
-  isWrapTeleport?: Boolean = false;
+  contentClose?: boolean = true;
+  initNo?: number = 0;
+  paginationVisible?: boolean = false;
+  paginationColor?: string = '';
+  autoplay?: number | string = 0;
+  isWrapTeleport?: boolean = false;
   showIndex?: boolean = true;
   closeable?: boolean = false;
   closeIcon?: string = 'circle-close';
-  closeIconPosition?: String = 'top-right';
+  closeIconPosition?: string = 'top-right';
   beforeClose?: Interceptor;
   maxZoom?: number = 3;
   minZoom?: number = 1 / 3;
   isLoop?: boolean = true;
-  onClose?: Function = () => {};
+  onClose?(): void;
   onChange?(index: number): void;
   teleport?: string | HTMLElement = 'body';
 }
@@ -37,7 +37,7 @@ class ImagePreviewFunction {
 
   constructor(_options: ImagePreviewOptions) {
     const options = Object.assign(this.options, _options);
-    const { instance, unmount } = CreateComponent(options, {
+    const { unmount } = CreateComponent(options, {
       name: 'image-preview',
       components: [Popup, Video, Swiper, SwiperItem, Overlay],
       wrapper: () => {
@@ -56,11 +56,11 @@ class ImagePreviewFunction {
   }
 }
 
-const _ImagePreview = (options: ImagePreviewOptions): ImagePreviewFunction => new ImagePreviewFunction(options);
-_ImagePreview.install = (app: any) => {
+const showImagePreview = (options: ImagePreviewOptions): ImagePreviewFunction => new ImagePreviewFunction(options);
+showImagePreview.install = (app: any) => {
   app.use(ImagePreview);
-  app.config.globalProperties.$imagepreview = _ImagePreview;
+  app.config.globalProperties.$imagepreview = showImagePreview;
 };
 
-export { ImagePreview };
-export default _ImagePreview;
+export { showImagePreview };
+export default ImagePreview;

src/packages/__VUE/notify/demo.vue

@@ -15,7 +15,7 @@
       <nut-cell is-Link @click="positionNotify(translate('cusPostion'))"> {{ translate('cusPostion') }} </nut-cell>
     </nut-cell-group>
     <nut-cell-group :title="translate('useTemplate')">
-      <nut-cell is-Link @click="showNotify">{{ translate('useTemplate') }}</nut-cell>
+      <nut-cell is-Link @click="onClick">{{ translate('useTemplate') }}</nut-cell>
       <nut-notify v-model:visible="show" :duration="2000">
         <span>Content</span>
       </nut-notify>
@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { Notify } from '../../nutui.vue';
+import { showNotify } from '../../nutui.vue';
 import { ref } from 'vue';
 const { createDemo, translate } = createComponent('notify');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -62,7 +62,7 @@ export default createDemo({
   setup() {
     initTranslate();
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -72,28 +72,28 @@ export default createDemo({
       });
     };
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg, { duration: 1000 });
+      showNotify.primary(msg, { duration: 1000 });
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 1000 });
+      showNotify.text(msg, { duration: 1000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
@@ -106,7 +106,7 @@ export default createDemo({
       timeNotify,
       positionNotify,
       show,
-      showNotify,
+      onClick,
       translate
     };
   }

src/packages/__VUE/notify/doc.en-US.md

@@ -23,11 +23,12 @@ app.use(Notify);
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -59,20 +60,21 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg);
+      showNotify.primary(msg);
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     return {
       primaryNotify,
@@ -101,17 +103,18 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 10000 });
+      showNotify.text(msg, { duration: 10000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     return {
       cusBgNotify,
@@ -131,7 +134,7 @@ export default {
 ```html
 <template>
   <nut-cell-group title="Template use">
-    <nut-cell is-Link @click="showNotify">Template use</nut-cell>
+    <nut-cell is-Link @click="onClick">Template use</nut-cell>
     <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
@@ -139,16 +142,17 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
       show,
-      showNotify
+      onClick
     };
   }
 }

src/packages/__VUE/notify/doc.md

@@ -20,11 +20,12 @@ app.use(Notify);
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const baseNotify = (msg: string) => {
-      Notify.text(msg, {
+      showNotify.text(msg, {
         onClose: () => {
           console.log('close');
         },
@@ -54,20 +55,21 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const primaryNotify = (msg: string) => {
-      Notify.primary(msg);
+      showNotify.primary(msg);
     };
     const successNotify = (msg: string) => {
-      Notify.success(msg);
+      showNotify.success(msg);
     };
     const errorNotify = (msg: string) => {
-      Notify.danger(msg);
+      showNotify.danger(msg);
     };
     const warningNotify = (msg: string) => {
-      Notify.warn(msg);
+      showNotify.warn(msg);
     };
     return {
       primaryNotify,
@@ -96,17 +98,18 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const cusBgNotify = (msg: string) => {
-      Notify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
+      showNotify.text(msg, { color: '#ad0000', background: '#ffe1e1' });
     };
     const timeNotify = (msg: string) => {
-      Notify.text(msg, { duration: 10000 });
+      showNotify.text(msg, { duration: 10000 });
     };
     const positionNotify = (msg: string) => {
-      Notify.text(msg, { position: 'bottom' });
+      showNotify.text(msg, { position: 'bottom' });
     };
     return {
       cusBgNotify,
@@ -124,7 +127,7 @@ export default {
 ```html
 <template>
   <nut-cell-group title="组件调用">
-    <nut-cell is-Link @click="showNotify">组件调用</nut-cell>
+    <nut-cell is-Link @click="onClick">组件调用</nut-cell>
     <nut-notify v-model:visible="show" :duration="2000">
       <span>Content</span>
     </nut-notify>
@@ -132,16 +135,17 @@ export default {
 </template>
 <script lang="ts">
 import { ref } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { showNotify } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/notify/style';
 export default {
   setup() {
     const show = ref(false);
-    const showNotify = () => {
+    const onClick = () => {
       show.value = true;
     };
     return {
       show,
-      showNotify
+      onClick
     };
   }
 }

src/packages/__VUE/notify/index.ts

@@ -1,5 +1,4 @@
-import { createVNode, render, h, onMounted, VNode, ComponentInternalInstance, Component } from 'vue';
-import { App } from 'vue';
+import { createVNode, render, h, onMounted, VNode, ComponentInternalInstance } from 'vue';
 import Notify from './index.vue';
 const defaultOptions = {
   type: 'base',
@@ -75,12 +74,6 @@ const mountNotify = (opts: TDOptions) => {
   root.id = 'notify-' + opts.id;
   const Wrapper = {
     setup() {
-      // opts.onUpdate = (val: boolean) => {
-      //   console.log(val);
-      //   if (val == false) {
-      //     document.body.removeChild(root);
-      //   }
-      // };
       opts.teleport = `#notify-${opts.id}`;
       onMounted(() => {
         setTimeout(() => {
@@ -96,16 +89,6 @@ const mountNotify = (opts: TDOptions) => {
   const instance: VNode = createVNode(Wrapper);
   document.body.appendChild(root);
   render(instance, root);
-  // const container = document.createElement('view');
-  // container.id = opts.id;
-  // const instance: any = createVNode(Notify, opts);
-  // render(instance, container);
-  // console.log(container);
-  // teleport.appendChild(container);
-  // setTimeout(() => {
-  //   instance.visible = true;
-  // }, 0);
-  // return instance.component.ctx;
 };
 
 const errorMsg = (msg: string) => {
@@ -115,7 +98,7 @@ const errorMsg = (msg: string) => {
   }
 };
 
-export const NotifyFunction = {
+const showNotify = {
   text(msg: string, obj = {}) {
     errorMsg(msg);
     return mountNotify({ ...obj, msg });
@@ -141,9 +124,9 @@ export const NotifyFunction = {
   },
   install(app: any): void {
     app.use(Notify);
-    app.config.globalProperties.$notify = NotifyFunction;
+    app.config.globalProperties.$notify = showNotify;
   }
 };
 
-export default NotifyFunction;
-export { Notify };
+export { showNotify };
+export default Notify;

src/packages/__VUE/toast/demo.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('toast');
-import { Toast } from '@/packages/nutui.vue';
+import { showToast } from '@/packages/nutui.vue';
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { onUnmounted } from 'vue';
 const initTranslate = () =>
@@ -57,28 +57,28 @@ export default createDemo({
   setup() {
     initTranslate();
     const textToast = (msg: string) => {
-      Toast.text(msg);
+      showToast.text(msg);
     };
     const titleToast = (msg: string) => {
-      Toast.text(msg, {
+      showToast.text(msg, {
         title: translate('toastTitle')
       });
     };
     const successToast = (msg: string) => {
-      Toast.success(msg);
+      showToast.success(msg);
     };
     const errorToast = (msg: string) => {
-      Toast.fail(msg);
+      showToast.fail(msg);
     };
     const warningToast = (msg: string) => {
-      Toast.warn(msg);
+      showToast.warn(msg);
     };
     const loadingToast = (msg: string) => {
-      Toast.loading(msg);
+      showToast.loading(msg);
     };
     let t: any;
     const NoToast = (msg: string) => {
-      t = Toast.text(msg, {
+      t = showToast.text(msg, {
         duration: 0
       });
     };
@@ -88,14 +88,14 @@ export default createDemo({
     });
 
     const BottomToast = (msg: string) => {
-      Toast.text(msg, {
+      showToast.text(msg, {
         id: 'taset11',
         center: false,
         bottom: '10%'
       });
     };
     const NoLoading = (msg: string) => {
-      Toast.loading(msg, {
+      showToast.loading(msg, {
         cover: true
       });
     };

src/packages/__VUE/toast/doc.en-US.md

@@ -40,11 +40,12 @@ export default {
   <nut-cell title="Text" is-link @click="textToast('text message~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg);
+    const textToast = (msg) => {
+      showToast.text(msg);
     };
     return {
       textToast,
@@ -62,11 +63,12 @@ export default {
   <nut-cell title="Toast Title" is-link @click="textToast('title message~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         title: 'title'
       });
     };
@@ -86,11 +88,12 @@ export default {
   <nut-cell title="Toast Success" is-link @click="textToast('Success')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.success(msg);
+    const textToast = (msg) => {
+      showToast.success(msg);
     };
     return {
       textToast,
@@ -109,11 +112,12 @@ export default {
   <nut-cell title="Toast Fail" is-link @click="textToast('Fail')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.fail(msg);
+    const textToast = (msg) => {
+      showToast.fail(msg);
     };
     return {
       textToast,
@@ -132,11 +136,12 @@ export default {
   <nut-cell title="Toast Warn" is-link @click="textToast('Warn')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.warn(msg);
+    const textToast = (msg) => {
+      showToast.warn(msg);
     };
     return {
       textToast,
@@ -155,11 +160,12 @@ export default {
   <nut-cell title="Toast Loading" is-link @click="textToast('Loading')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.loading(msg);
+    const textToast = (msg) => {
+      showToast.loading(msg);
     };
     return {
       textToast,
@@ -178,11 +184,12 @@ export default {
   <nut-cell title="Toast Not Disappear" is-link @click="textToast('Toast Not Disappear')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-     Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         duration: 0
       });
     };
@@ -202,11 +209,12 @@ export default {
   <nut-cell title="Custom Bottom Height" is-link @click="textToast('Custom Bottom Height')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         center: false,
         bottom: '10%'
       });
@@ -227,11 +235,12 @@ export default {
   <nut-cell title="Loading with transparent cover" is-link @click="textToast('Loading')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.loading(msg, {
+    const textToast = (msg) => {
+      showToast.loading(msg, {
         cover: true
       });
     };
@@ -247,10 +256,11 @@ export default {
 
 ###  Support import and use in JS modules
 ``` javascript
-import { Toast } from "@nutui/nutui";
-Toast.text('use in js module');
+import { showToast } from "@nutui/nutui";
+import '@nutui/nutui/dist/packages/toast/style';
+showToast.text('use in js module');
 // Return the instance, you can manually call the hide method in the instance to close the prompt
-const toast = Toast.loading('use in js module');
+const toast = showToast.loading('use in js module');
 toast.hide();
 ```
 
@@ -259,12 +269,12 @@ toast.hide();
 ### Methods
 | Methods       | Description        | Attribute         | Return value                                  |
 |---------------|--------------------|-------------------|-----------------------------------------------|
-| Toast.text    | Show text toast    | message｜ options | toast instance(message support incoming HTML) |
-| Toast.success | Show success toast | message｜ options | toast instance                                |
-| Toast.fail    | Show fail toast    | message｜ options | toast instance                                |
-| Toast.warn    | Show warn toast    | message｜ options | toast instance                                |
-| Toast.hide    | Close toast        | clearAll: boolean | void                                          |
-| Toast.loading | Show loading toast | message｜ options | toast instance                                |
+| showToast.text    | Show text toast    | message｜ options | toast instance(message support incoming HTML) |
+| showToast.success | Show success toast | message｜ options | toast instance                                |
+| showToast.fail    | Show fail toast    | message｜ options | toast instance                                |
+| showToast.warn    | Show warn toast    | message｜ options | toast instance                                |
+| showToast.hide    | Close toast        | clearAll: boolean | void                                          |
+| showToast.loading | Show loading toast | message｜ options | toast instance                                |
 
 ### ToastOptions
 

src/packages/__VUE/toast/doc.md

@@ -40,11 +40,12 @@ export default {
   <nut-cell title="Text 文字提示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg);
+    const textToast = (msg) => {
+      showToast.text(msg);
     };
     return {
       textToast,
@@ -62,11 +63,12 @@ export default {
   <nut-cell title="Toast 标题展示" is-link @click="textToast('网络失败，请稍后再试~')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         title: '标题文字'
       });
     };
@@ -86,11 +88,12 @@ export default {
   <nut-cell title="Toast 成功提示" is-link @click="textToast('成功提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.success(msg);
+    const textToast = (msg) => {
+      showToast.success(msg);
     };
     return {
       textToast,
@@ -109,11 +112,12 @@ export default {
   <nut-cell title="Toast 失败提示" is-link @click="textToast('失败提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.fail(msg);
+    const textToast = (msg) => {
+      showToast.fail(msg);
     };
     return {
       textToast,
@@ -132,11 +136,12 @@ export default {
   <nut-cell title="Toast 警告提示" is-link @click="textToast('警告提示')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.warn(msg);
+    const textToast = (msg) => {
+      showToast.warn(msg);
     };
     return {
       textToast,
@@ -155,11 +160,12 @@ export default {
   <nut-cell title="Toast 加载提示" is-link @click="textToast('加载中')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.loading(msg);
+    const textToast = (msg) => {
+      showToast.loading(msg);
     };
     return {
       textToast,
@@ -178,11 +184,12 @@ export default {
   <nut-cell title="Toast不消失" is-link @click="textToast('Toast不消失')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-     Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         duration: 0
       });
     };
@@ -202,11 +209,12 @@ export default {
   <nut-cell title="Toast 自定义底部高度" is-link @click="textToast('自定义距离')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-      Toast.text(msg, {
+    const textToast = (msg) => {
+      showToast.text(msg, {
         center: false,
         bottom: '10%'
       });
@@ -227,11 +235,12 @@ export default {
   <nut-cell title="Loading带透明罩" is-link @click="textToast('加载中')"></nut-cell>
 </template>
 <script>
-import { Toast } from '@nutui/nutui';
+import { showToast } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/toast/style';
 export default {
   setup() {
-     const textToast = (msg) => {
-       Toast.loading(msg, {
+    const textToast = (msg) => {
+      showToast.loading(msg, {
         cover: true
       });
     };
@@ -247,10 +256,11 @@ export default {
 
 ###  支持在JS模块中导入使用
 ``` javascript
-import { Toast } from "@nutui/nutui";
-Toast.text('在js模块中使用');
+import { showToast } from "@nutui/nutui";
+import '@nutui/nutui/dist/packages/toast/style';
+showToast.text('在js模块中使用');
 // 返回实例，可以手动调用实例中的hide方法关闭提示
-const toast = Toast.loading('在js模块中使用');
+const toast = showToast.loading('在js模块中使用');
 toast.hide();
 ```
 
@@ -259,12 +269,12 @@ toast.hide();
 ### 方法
 | 方法名        | 说明         | 参数                                 | 返回值                          |
 |---------------|--------------|--------------------------------------|---------------------------------|
-| Toast.text    | 展示文字提示 | message｜ options                    | toast 实例(message支持传入HTML) |
-| Toast.success | 展示成功提示 | message｜ options                    | toast 实例                      |
-| Toast.fail    | 展示失败提示 | message｜ options                    | toast 实例                      |
-| Toast.warn    | 展示警告提示 | message｜ options                    | toast 实例                      |
-| Toast.hide    | 关闭提示     | 默认关闭所有实例，可传id关闭指定实例 | void                            |
-| Toast.loading | 展示加载提示 | message｜ options                    | toast 实例                      |
+| showToast.text    | 展示文字提示 | message｜ options                    | toast 实例(message支持传入HTML) |
+| showToast.success | 展示成功提示 | message｜ options                    | toast 实例                      |
+| showToast.fail    | 展示失败提示 | message｜ options                    | toast 实例                      |
+| showToast.warn    | 展示警告提示 | message｜ options                    | toast 实例                      |
+| showToast.hide    | 关闭提示     | 默认关闭所有实例，可传id关闭指定实例 | void                            |
+| showToast.loading | 展示加载提示 | message｜ options                    | toast 实例                      |
 
 ### ToastOptions 数据结构
 

src/packages/__VUE/toast/index.ts

@@ -1,4 +1,4 @@
-import { createVNode, render, h } from 'vue';
+import { createVNode, render } from 'vue';
 import Toast from './index.vue';
 import { CreateComponent } from '@/packages/utils/create';
 import { Failure, Loading, Success, Tips } from '@nutui/icons-vue';
@@ -57,7 +57,7 @@ const updateToast = (opts: any) => {
     }
     const instance: any = createVNode(Toast, opts);
     render(instance, container);
-    return ToastFunction;
+    return showToast;
   }
 };
 
@@ -82,7 +82,7 @@ const mountToast = (opts: any) => {
     wrapper: Toast
   });
 
-  return ToastFunction;
+  return showToast;
 };
 
 const errorMsg = (msg: string) => {
@@ -92,7 +92,7 @@ const errorMsg = (msg: string) => {
   }
 };
 
-export const ToastFunction = {
+const showToast = {
   text(msg: string, opts = {}) {
     errorMsg(msg);
     return mountToast({ ...opts, type: 'text', msg });
@@ -122,9 +122,9 @@ export const ToastFunction = {
   },
   install(app: any): void {
     app.use(Toast);
-    app.config.globalProperties.$toast = ToastFunction;
+    app.config.globalProperties.$toast = showToast;
   }
 };
 
-export { Toast };
-export default ToastFunction;
+export { showToast };
+export default Toast;

vite.config.build.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   },
   plugins: [vue()],
   build: {
-    minify: false,
+    minify: true,
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
       external: ['vue', 'vue-router', '@nutui/icons-vue'],