feat(design,element-plus-adapter,tdesign-vue-next-adapter): 新增drawer

packages/design/src/Dialog.vue

@@ -27,6 +27,7 @@ const props = defineProps<{
   width?: string | number;
   fullscreen?: boolean;
   closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
 }>();
 
 const uiComponent = getConfig('components').dialog;

packages/design/src/Drawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <component
+    class="tmagic-design-drawer"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @open="openHandler"
+    @opened="openedHandler"
+    @close="closeHandler"
+    @closed="closedHandler"
+  >
+    <slot></slot>
+
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts" name="TMDrawer">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  beforeClose?: any;
+  title?: string;
+  size?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+}>();
+
+const uiComponent = getConfig('components').drawer;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['open', 'opened', 'close', 'closed']);
+
+const openHandler = (...args: any[]) => {
+  emit('open', ...args);
+};
+const openedHandler = (...args: any[]) => {
+  emit('opened', ...args);
+};
+const closeHandler = (...args: any[]) => {
+  emit('close', ...args);
+};
+const closedHandler = (...args: any[]) => {
+  emit('closed', ...args);
+};
+</script>

packages/design/src/defaultAdapter.ts

@@ -60,6 +60,11 @@ export default {
       props: (props: any) => props,
     },
 
+    drawer: {
+      component: 'el-drawer',
+      props: (props: any) => props,
+    },
+
     dropdown: {
       component: 'el-dropdown',
       props: (props: any) => props,

packages/design/src/index.ts

@@ -19,6 +19,7 @@ export { default as TMagicColorPicker } from './ColorPicker.vue';
 export { default as TMagicDatePicker } from './DatePicker.vue';
 export { default as TMagicDialog } from './Dialog.vue';
 export { default as TMagicDivider } from './Divider.vue';
+export { default as TMagicDrawer } from './Drawer.vue';
 export { default as TMagicDropdown } from './Dropdown.vue';
 export { default as TMagicDropdownItem } from './DropdownItem.vue';
 export { default as TMagicDropdownMenu } from './DropdownMenu.vue';

packages/element-plus-adapter/src/index.ts

@@ -11,6 +11,7 @@ import {
   ElDatePicker,
   ElDialog,
   ElDivider,
+  ElDrawer,
   ElDropdown,
   ElDropdownItem,
   ElDropdownMenu,
@@ -108,6 +109,11 @@ const adapter: any = {
       props: (props: any) => props,
     },
 
+    drawer: {
+      component: ElDrawer,
+      props: (props: any) => props,
+    },
+
     dropdown: {
       component: ElDropdown,
       props: (props: any) => props,

packages/tdesign-vue-next-adapter/src/index.ts

@@ -1,4 +1,5 @@
 import {
+  ElDrawer,
   ElDropdown,
   ElDropdownItem,
   ElDropdownMenu,
@@ -167,6 +168,11 @@ const adapter: any = {
       }),
     },
 
+    drawer: {
+      component: ElDrawer,
+      props: (props: any) => props,
+    },
+
     dropdown: {
       component: ElDropdown,
       props: (props: any) => props,