feat: 增加四个函数式组件导出

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

@@ -17,10 +17,19 @@ 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('')

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) => void;
+  onOk?: () => void;
+  onCancel?: () => void;
+  onOpened?: () => void;
+  onClosed?: () => void;
+  beforeClose?: () => void;
 
   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/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/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',
@@ -10,9 +9,6 @@ const defaultOptions = {
   duration: 3000,
   className: '',
   onClose: Function,
-  // onClick: null,
-  // onOpened: null,
-  // textTimer: null,
   teleport: '',
   unmount: new Function()
 };
@@ -75,12 +71,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 +86,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 +95,7 @@ const errorMsg = (msg: string) => {
   }
 };
 
-export const NotifyFunction = {
+const showNotify = {
   text(msg: string, obj = {}) {
     errorMsg(msg);
     return mountNotify({ ...obj, msg });
@@ -141,9 +121,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/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;