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,