From 24604c9d36feb716a1f4c384f17fa152aa0b3c12 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 4 May 2023 15:42:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84tdesign-vue-next?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/design/src/Drawer.vue                |   1 +
 packages/design/src/DropdownMenu.vue          |   8 +-
 packages/design/src/Pagination.vue            |   1 +
 packages/design/src/Tree.vue                  |   2 +-
 packages/editor/src/fields/CodeSelect.vue     |   1 +
 packages/editor/src/fields/EventSelect.vue    |   1 +
 .../editor/src/layouts/sidebar/LayerPanel.vue |   2 +
 .../sidebar/code-block/CodeBlockList.vue      |   7 +
 packages/editor/src/utils/props.ts            |   1 +
 packages/form/src/containers/Container.vue    |   2 +-
 packages/form/src/theme/form.scss             |   6 +
 .../tdesign-vue-next-adapter/package.json     |   2 -
 .../src/Scrollbar.vue                         |   9 ++
 .../src/TableColumn.vue                       |   5 +
 .../tdesign-vue-next-adapter/src/Tree.vue     | 126 +++++++++++++++++
 .../tdesign-vue-next-adapter/src/index.ts     | 131 ++++++++++++++----
 pnpm-lock.yaml                                |   3 -
 17 files changed, 264 insertions(+), 44 deletions(-)
 create mode 100644 packages/tdesign-vue-next-adapter/src/Scrollbar.vue
 create mode 100644 packages/tdesign-vue-next-adapter/src/TableColumn.vue
 create mode 100644 packages/tdesign-vue-next-adapter/src/Tree.vue

diff --git a/packages/design/src/Drawer.vue b/packages/design/src/Drawer.vue
index 60b3f282..d9022fec 100644
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@@ -35,6 +35,7 @@ const props = defineProps<{
   fullscreen?: boolean;
   closeOnClickModal?: boolean;
   closeOnPressEscape?: boolean;
+  direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
 }>();
 
 const uiComponent = getConfig('components').drawer;
diff --git a/packages/design/src/DropdownMenu.vue b/packages/design/src/DropdownMenu.vue
index c290f9ad..38f13afc 100644
--- a/packages/design/src/DropdownMenu.vue
+++ b/packages/design/src/DropdownMenu.vue
@@ -1,17 +1,11 @@
 <template>
-  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>
 
 <script setup lang="ts" name="TMDropdownMenu">
-import { computed } from 'vue';
-
 import { getConfig } from './config';
 
-const props = defineProps();
-
 const uiComponent = getConfig('components').dropdownMenu;
-
-const uiProps = computed(() => uiComponent.props(props));
 </script>
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
index ab6c890c..8dd59d01 100644
--- a/packages/design/src/Pagination.vue
+++ b/packages/design/src/Pagination.vue
@@ -4,6 +4,7 @@
     :is="uiComponent.component"
     v-bind="uiProps"
     @size-change="handleSizeChange"
+    @page-size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   ></component>
 </template>
diff --git a/packages/design/src/Tree.vue b/packages/design/src/Tree.vue
index 5621db77..ed7a77d7 100644
--- a/packages/design/src/Tree.vue
+++ b/packages/design/src/Tree.vue
@@ -41,7 +41,7 @@ const props = defineProps<{
   checkStrictly?: boolean;
   defaultCheckedKeys?: any[];
   currentNodeKey?: string | number;
-  filterNodeMethod?: (value: any, data: any, node: any) => void;
+  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
   accordion?: boolean;
   indent?: number;
   icon?: any;
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index 9403cc18..4d7354f2 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/packages/editor/src/fields/CodeSelect.vue
@@ -35,6 +35,7 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      labelWidth: 0,
     },
   ],
 }));
diff --git a/packages/editor/src/fields/EventSelect.vue b/packages/editor/src/fields/EventSelect.vue
index 8c2a67ff..4beb118a 100644
--- a/packages/editor/src/fields/EventSelect.vue
+++ b/packages/editor/src/fields/EventSelect.vue
@@ -132,6 +132,7 @@ const compActionConfig = computed(() => {
 const codeActionConfig = computed(() => {
   const defaultCodeActionConfig = {
     type: 'code-select-col',
+    labelWidth: 0,
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.CODE,
   };
   return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index b2b1a14d..40b645a2 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -87,6 +87,8 @@ const clicked = ref(false);
 
 const treeProps = {
   children: 'items',
+  label: 'name',
+  value: 'id',
   disabled: (data: MNode) => Boolean(data.items?.length),
   class: (data: MNode) => {
     if (clicked.value || isPage(data)) return '';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
index 1412b87b..da09655a 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
@@ -18,6 +18,7 @@
       :default-expanded-keys="expandedKeys"
       :expand-on-click-node="false"
       :data="codeList"
+      :props="treeProps"
       :highlight-current="true"
       :filter-node-method="filterNode"
       @node-click="clickHandler"
@@ -75,6 +76,12 @@ const props = defineProps<{
   paramsColConfig?: ColumnConfig;
 }>();
 
+const treeProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+
 const { codeBlockService, depService, editorService } = inject<Services>('services') || {};
 
 // 代码块列表
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index 98cd42a7..23a6ded4 100644
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@@ -182,6 +182,7 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'events',
             type: 'event-select',
+            labelWidth: 0,
           },
         ],
       },
diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
index e3dd7f61..31f31ff3 100644
--- a/packages/form/src/containers/Container.vue
+++ b/packages/form/src/containers/Container.vue
@@ -317,7 +317,7 @@ const display = computed((): boolean => {
   return value;
 });
 
-const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
+const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
 
 watchEffect(() => {
   expand.value = props.expandMore;
diff --git a/packages/form/src/theme/form.scss b/packages/form/src/theme/form.scss
index ac8efad4..62f6e2ec 100644
--- a/packages/form/src/theme/form.scss
+++ b/packages/form/src/theme/form.scss
@@ -34,4 +34,10 @@
       display: none;
     }
   }
+
+  .t-form__item.hidden {
+    > .t-form__label {
+      display: none;
+    }
+  }
 }
diff --git a/packages/tdesign-vue-next-adapter/package.json b/packages/tdesign-vue-next-adapter/package.json
index 52980c38..4a02bb81 100644
--- a/packages/tdesign-vue-next-adapter/package.json
+++ b/packages/tdesign-vue-next-adapter/package.json
@@ -36,12 +36,10 @@
     "typescript"
   ],
   "dependencies": {
-    "element-plus": "^2.2.32",
     "tdesign-vue-next": "^1.3.1",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "element-plus": "^2.2.32",
     "tdesign-vue-next": "^1.3.1",
     "vue": "^3.2.37"
   },
diff --git a/packages/tdesign-vue-next-adapter/src/Scrollbar.vue b/packages/tdesign-vue-next-adapter/src/Scrollbar.vue
new file mode 100644
index 00000000..7fe609c4
--- /dev/null
+++ b/packages/tdesign-vue-next-adapter/src/Scrollbar.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="tdesign-scrollbar" style="overflow: hidden; height: 100%">
+    <div style="overflow: auto; height: 100%">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/packages/tdesign-vue-next-adapter/src/TableColumn.vue b/packages/tdesign-vue-next-adapter/src/TableColumn.vue
new file mode 100644
index 00000000..8f01dcfc
--- /dev/null
+++ b/packages/tdesign-vue-next-adapter/src/TableColumn.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/packages/tdesign-vue-next-adapter/src/Tree.vue b/packages/tdesign-vue-next-adapter/src/Tree.vue
new file mode 100644
index 00000000..ba566472
--- /dev/null
+++ b/packages/tdesign-vue-next-adapter/src/Tree.vue
@@ -0,0 +1,126 @@
+<template>
+  <TTree
+    ref="tree"
+    :data="data"
+    :empty="emptyText"
+    :keys="nodeKeys"
+    :load="loadChildren"
+    :activable="highlightCurrent"
+    :expandAll="defaultExpandAll"
+    :expandParent="autoExpandParent"
+    :defaultExpanded="defaultExpandedKeys"
+    :actived="currentNodeKey"
+    :filter="filterNode"
+    :expandMutex="accordion"
+    :draggable="draggable"
+    :icon="iconRender"
+    :lazy="lazy"
+    :allowDrag="allowDrag"
+    :allowDrop="allowDrop"
+    :onClick="nodeClickHandler"
+    :onExpand="handleExpand"
+    @contextmenu="contextmenu"
+  ></TTree>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, ref } from 'vue';
+import { Tree as TTree, TreeNodeModel, TreeNodeValue } from 'tdesign-vue-next';
+
+const props = defineProps<{
+  data?: any[];
+  emptyText?: string;
+  nodeKey?: string;
+  props?: any;
+  renderAfterExpand?: boolean;
+  load?: any;
+  renderContent?: any;
+  highlightCurrent?: boolean;
+  defaultExpandAll?: boolean;
+  checkOnClickNode?: boolean;
+  autoExpandParent?: boolean;
+  defaultExpandedKeys?: any[];
+  showCheckbox?: boolean;
+  checkStrictly?: boolean;
+  defaultCheckedKeys?: any[];
+  currentNodeKey?: string | number;
+  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
+  accordion?: boolean;
+  indent?: number;
+  icon?: any;
+  lazy?: boolean;
+  draggable?: boolean;
+  allowDrag?: (node: any) => boolean;
+  allowDrop?: any;
+}>();
+
+const nodeKeys = computed(() => ({
+  value: props.props?.value || 'value',
+  label: props.props?.label || 'label',
+  children: props.props?.children || 'children',
+}));
+
+const loadChildren = (node: TreeNodeModel<any>) =>
+  props.load
+    ? new Promise((resolve) => {
+        props.load(node, resolve);
+      })
+    : undefined;
+
+let filterValue: any;
+
+const filterNode = (node: TreeNodeModel<any>) => props.filterNodeMethod?.(filterValue, node.data, node);
+
+const iconRender = () => props.icon && h(props.icon);
+
+const emit = defineEmits([
+  'node-click',
+  'node-contextmenu',
+  'node-drag-end',
+  'node-collapse',
+  'node-expand',
+  'check',
+  'mousedown',
+  'mouseup',
+]);
+
+const nodeClickHandler = (context: { node: TreeNodeModel<any>; e: MouseEvent }) => {
+  emit('node-click', context.node.data, context.node, context, context.e);
+};
+
+const contextmenu = (...args: any[]) => {
+  emit('node-contextmenu', ...args);
+};
+
+const handleExpand = (value: Array<TreeNodeValue>, context: { node: TreeNodeModel<any>; e: MouseEvent }) => {
+  emit('node-expand', context.node.data, context.node);
+};
+
+const tree = ref<InstanceType<typeof TTree>>();
+
+defineExpose({
+  getData() {
+    return tree.value?.data;
+  },
+
+  getStore() {
+    return tree.value?.store;
+  },
+
+  filter(value: any) {
+    filterValue = value;
+  },
+
+  getNode(...args: any[]) {
+    return tree.value?.getNode(...args);
+  },
+
+  setCheckedKeys(...args: any[]) {
+    console.log(args);
+  },
+
+  setCurrentKey(...args: any[]) {
+    console.log(args);
+  },
+});
+</script>
diff --git a/packages/tdesign-vue-next-adapter/src/index.ts b/packages/tdesign-vue-next-adapter/src/index.ts
index 4c8c9364..886854db 100644
--- a/packages/tdesign-vue-next-adapter/src/index.ts
+++ b/packages/tdesign-vue-next-adapter/src/index.ts
@@ -1,17 +1,4 @@
 import { h } from 'vue';
-import {
-  ElDrawer,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElMessageBox,
-  ElPagination,
-  ElPopover,
-  ElScrollbar,
-  ElTable,
-  ElTableColumn,
-  ElTree,
-} from 'element-plus';
 import {
   Badge as TBadge,
   Button as TButton,
@@ -24,13 +11,19 @@ import {
   CollapsePanel as TCollapsePanel,
   ColorPicker as TColorPicker,
   Dialog as TDialog,
+  DialogPlugin,
   Divider as TDivider,
+  Drawer as TDrawer,
+  Dropdown as TDropdown,
+  DropdownItem as TDropdownItem,
   Form as TForm,
   FormItem as TFormItem,
   InputNumber as TInputNumber,
   MessagePlugin,
   Option as TOption,
   OptionGroup as TOptionGroup,
+  Pagination as TPagination,
+  Popup as TPopup,
   Radio as TRadio,
   RadioButton as TRadioButton,
   RadioGroup as TRadioGroup,
@@ -39,11 +32,13 @@ import {
   StepItem as TStepItem,
   Steps as TSteps,
   Switch as TSwitch,
+  Table as TTable,
   TabPanel as TTabPanel,
   Tabs as TTabs,
   Tag as TTag,
   TimePicker as TTimePicker,
   Tooltip as TTooltip,
+  TreeNodeModel,
   Upload as TUpload,
 } from 'tdesign-vue-next';
 
@@ -51,10 +46,27 @@ import DatePicker from './DatePicker.vue';
 import Icon from './Icon.vue';
 import Input from './Input.vue';
 import { vLoading } from './loading';
+import Scrollbar from './Scrollbar.vue';
+import TableColumn from './TableColumn.vue';
+import Tree from './Tree.vue';
 
 const adapter: any = {
   message: MessagePlugin,
-  messageBox: ElMessageBox,
+  messageBox: {
+    alert: (msg: string) => {
+      DialogPlugin.alert({
+        body: msg,
+      });
+    },
+    confirm: (msg: string) => {
+      DialogPlugin.confirm({
+        body: msg,
+      });
+    },
+    close: (msg: string) => {
+      console.log(msg);
+    },
+  },
   loading: vLoading,
   components: {
     badge: {
@@ -183,22 +195,49 @@ const adapter: any = {
     },
 
     drawer: {
-      component: ElDrawer,
-      props: (props: any) => props,
+      component: TDrawer,
+      props: (props: any) => ({
+        visible: props.modelValue,
+        size: props.size,
+        closeOnEscKeydown: props.closeOnPressEscape,
+        closeOnOverlayClick: props.closeOnClickModal,
+        attach: props.appendToBody ? 'body' : undefined,
+        placement: {
+          rtl: 'right',
+          ltr: 'left',
+          ttb: 'top',
+          bt: 'bottom',
+        }[props.direction as string],
+      }),
     },
 
     dropdown: {
-      component: ElDropdown,
-      props: (props: any) => props,
+      component: TDropdown,
+      props: (props: any) => ({
+        maxHeight: props.maxHeight,
+        disabled: props.disable,
+        direction: props.placement,
+        trigger: props.trigger,
+        hideAfterItemClick: props.hideOnClick,
+        popupProps: {
+          overlayClassName: props.popperClass,
+          ...(props.popperOptions || {}),
+        },
+      }),
     },
 
     dropdownItem: {
-      component: ElDropdownItem,
-      props: (props: any) => props,
+      component: TDropdownItem,
+      props: (props: any) => ({
+        disabled: props.disabled,
+        divider: props.divided,
+        prefixIcon: props.icon && (() => h(props.icon)),
+        onClick: props.command?.(),
+      }),
     },
 
     dropdownMenu: {
-      component: ElDropdownMenu,
+      component: TDropdown,
       props: (props: any) => props,
     },
 
@@ -261,13 +300,24 @@ const adapter: any = {
     },
 
     pagination: {
-      component: ElPagination,
-      props: (props: any) => props,
+      component: TPagination,
+      props: (props: any) => ({
+        current: props.curPage,
+        pageSizeOptions: props.pageSizes,
+        pageSize: props.pagesize,
+        total: props.total,
+      }),
     },
 
     popover: {
-      component: ElPopover,
-      props: (props: any) => props,
+      component: TPopup,
+      props: (props: any) => ({
+        placement: props.placement,
+        trigger: props.trigger,
+        content: props.content,
+        disabled: props.disabled,
+        overlayClassName: props.popperClass,
+      }),
     },
 
     radio: {
@@ -298,7 +348,7 @@ const adapter: any = {
     },
 
     scrollbar: {
-      component: ElScrollbar,
+      component: Scrollbar,
       props: (props: any) => props,
     },
 
@@ -347,12 +397,12 @@ const adapter: any = {
     },
 
     table: {
-      component: ElTable,
+      component: TTable,
       props: (props: any) => props,
     },
 
     tableColumn: {
-      component: ElTableColumn,
+      component: TableColumn,
       props: (props: any) => props,
     },
 
@@ -400,8 +450,29 @@ const adapter: any = {
     },
 
     tree: {
-      component: ElTree,
-      props: (props: any) => props,
+      component: Tree,
+      props: (props: any) => ({
+        ...props,
+        data: props.data,
+        draggable: props.draggable,
+        activable: props.highlightCurrent,
+        activeMultiple: props.highlightCurrent,
+        defaultActived: props.defaultCheckedKeys,
+        checkable: props.showCheckbox,
+        empty: props.emptyText,
+        expandAll: props.defaultExpandAll,
+        checkStrictly: props.checkStrictly,
+        load: props.load,
+        keys: props.props,
+      }),
+      listeners: {
+        click(context: { node: TreeNodeModel<any>; e: MouseEvent }) {
+          return {
+            node: context.node,
+            data: context.node.data,
+          };
+        },
+      },
     },
 
     upload: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9f5a7e5..005a996a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -519,9 +519,6 @@ importers:
 
   packages/tdesign-vue-next-adapter:
     dependencies:
-      element-plus:
-        specifier: ^2.2.32
-        version: 2.2.32(vue@3.2.37)
       tdesign-vue-next:
         specifier: ^1.3.1
         version: 1.3.1(vue@3.2.37)