feat: 完善tdesign-vue-next适配

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;

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>

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>

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;

packages/editor/src/fields/CodeSelect.vue

@@ -35,6 +35,7 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      labelWidth: 0,
     },
   ],
 }));

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 };

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 '';

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') || {};
 
 // 代码块列表

packages/editor/src/utils/props.ts

@@ -182,6 +182,7 @@ export const fillConfig = (config: FormConfig = []) => [
           {
             name: 'events',
             type: 'event-select',
+            labelWidth: 0,
           },
         ],
       },

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;

packages/form/src/theme/form.scss

@@ -34,4 +34,10 @@
       display: none;
     }
   }
+
+  .t-form__item.hidden {
+    > .t-form__label {
+      display: none;
+    }
+  }
 }

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"
   },

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>

packages/tdesign-vue-next-adapter/src/TableColumn.vue

@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>

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>

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: {

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)