fix(Drawer): export drawer component (#1030)

* fix(Drawer): export drawer component

* fix: fix type

---------

Co-authored-by: yaogengzhu <455947455@qq.com>

src/drawer/demos/plugin.vue

@@ -3,11 +3,10 @@
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { DrawerPlugin } from 'tdesign-mobile-vue';
 
-const $drawer: any = inject('$drawer');
 const showDrawer = () => {
-  const instance = $drawer({
+  const instance = DrawerPlugin({
     items: new Array(20).fill({ title: '菜单' }).map((item, index: number) => ({ title: `标题 ${index + 1}` })),
     onItemClick(index: number) {
       console.log(index);

src/drawer/index.ts

@@ -1,55 +1,15 @@
-import { createApp, App, h, ref, nextTick } from 'vue';
-import vueDrawer from './drawer.vue';
-import { WithInstallType } from '../shared';
-import { TdDrawerProps } from './type';
+import _Drawer from './drawer.vue';
+import { withInstall, WithInstallType } from '../shared';
 
 import './style';
 
-type DrawerOptions = Omit<TdDrawerProps, 'attach'>;
-
-const Drawer = (options: DrawerOptions) => {
-  const root = document.createElement('div');
-  document.body.appendChild(root);
-  const visible = ref(false);
-  const props = ref({});
-  const destroyOnClose = ref(false);
-
-  createApp(() =>
-    h(vueDrawer, { ...options, visible: visible.value, destroyOnClose: destroyOnClose.value, ...props.value }),
-  ).mount(root);
-
-  const handler = {
-    destroy() {
-      destroyOnClose.value = true;
-      nextTick(() => {
-        visible.value = false;
-        document.body.removeChild(root);
-      });
-    },
-    hide() {
-      visible.value = false;
-    },
-    show() {
-      visible.value = true;
-    },
-    update(options: DrawerOptions) {
-      props.value = options;
-    },
-  };
-
-  return handler;
-};
-
-Drawer.install = (app: App, name = '') => {
-  app.component(name || vueDrawer.name, vueDrawer);
-
-  // 添加插件入口
-  app.config.globalProperties.$drawer = Drawer;
-  app.provide('$drawer', Drawer);
-};
-
-const _Drawer: WithInstallType<typeof Drawer> = Drawer;
+import { TdDrawerProps } from './type';
 
-export default _Drawer;
+export type DividerProps = TdDrawerProps;
 
 export * from './type';
+export * from './plugin';
+export { default as DrawerPlugin } from './plugin';
+
+const Drawer: WithInstallType<typeof _Drawer> = withInstall(_Drawer);
+export default Drawer;

src/drawer/plugin.ts

@@ -0,0 +1,48 @@
+import { createApp, App, h, ref, nextTick } from 'vue';
+import vueDrawer from './drawer.vue';
+import { WithInstallType } from '../shared';
+import { TdDrawerProps } from './type';
+
+type DrawerOptions = Omit<TdDrawerProps, 'attach'>;
+
+const Drawer = (options: DrawerOptions) => {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+  const visible = ref(false);
+  const props = ref({});
+  const destroyOnClose = ref(false);
+
+  createApp(() =>
+    h(vueDrawer, { ...options, visible: visible.value, destroyOnClose: destroyOnClose.value, ...props.value }),
+  ).mount(root);
+
+  const handler = {
+    destroy() {
+      destroyOnClose.value = true;
+      nextTick(() => {
+        visible.value = false;
+        document.body.removeChild(root);
+      });
+    },
+    hide() {
+      visible.value = false;
+    },
+    show() {
+      visible.value = true;
+    },
+    update(options: DrawerOptions) {
+      props.value = options;
+    },
+  };
+
+  return handler;
+};
+
+Drawer.install = (app: App): void => {
+  // 添加插件入口
+  app.config.globalProperties.$drawer = Drawer;
+};
+
+const DrawerPlugin: WithInstallType<typeof Drawer> = Drawer;
+
+export default DrawerPlugin;

src/drawer/type.ts

@@ -98,7 +98,7 @@ export interface DrawerInstance {
 
 export interface DrawerItem {
   title: string;
-  icon: TNode;
+  icon?: TNode;
 }
 
 export type TriggerSource = 'overlay';

src/plugins.ts

@@ -1,3 +1,4 @@
 export { DialogPlugin } from './dialog';
 export { MessagePlugin } from './message';
 export { ToastPlugin } from './toast';
+export { DrawerPlugin } from './drawer';