From c3073861907abb01b57b9632bb9c2c9108203379 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 6 Sep 2022 15:59:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0compoent-list?=
 =?UTF-8?q?-item=20slot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                |   4 +
 .../layouts/sidebar/ComponentListPanel.vue    | 154 ++++++++----------
 .../editor/src/layouts/sidebar/Sidebar.vue    |   4 +
 .../editor/src/layouts/sidebar/TabPane.vue    |  12 ++
 4 files changed, 91 insertions(+), 83 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index b27aa3d5..9e40876d 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -14,6 +14,10 @@
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
+
+          <template #component-list-item="{ component }">
+            <slot name="component-list-item" :component="component"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index aa1e1614..71bbab95 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -24,11 +24,13 @@
             @dragend="dragendHandler"
             @drag="dragHandler"
           >
-            <m-icon :icon="item.icon"></m-icon>
+            <slot name="component-list-item" :component="item">
+              <MIcon :icon="item.icon"></MIcon>
 
-            <el-tooltip effect="dark" placement="bottom" :content="item.text">
-              <span>{{ item.text }}</span>
-            </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom" :content="item.text">
+                <span>{{ item.text }}</span>
+              </el-tooltip>
+            </slot>
           </div>
         </el-collapse-item>
       </template>
@@ -36,8 +38,8 @@
   </el-scrollbar>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
 import type StageCore from '@tmagic/stage';
@@ -46,89 +48,75 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 import MIcon from '../../components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
-export default defineComponent({
-  name: 'ui-component-panel',
+const searchText = ref('');
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
 
-  components: { MIcon },
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const list = computed(() =>
+  services?.componentListService.getList().map((group: ComponentGroup) => ({
+    ...group,
+    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+  })),
+);
+const collapseValue = computed(() =>
+  Array(list.value?.length)
+    .fill(1)
+    .map((x, i) => i),
+);
 
-  setup() {
-    const searchText = ref('');
-    const services = inject<Services>('services');
-    const stageOptions = inject<StageOptions>('stageOptions');
+let timeout: NodeJS.Timeout | undefined;
+let clientX: number;
+let clientY: number;
 
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
-    const list = computed(() =>
-      services?.componentListService.getList().map((group: ComponentGroup) => ({
-        ...group,
-        items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
-      })),
-    );
-    const collapseValue = computed(() =>
-      Array(list.value?.length)
-        .fill(1)
-        .map((x, i) => i),
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
+  services?.editorService.add({
+    name: text,
+    type,
+    ...data,
+  });
+};
+
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(
+      'data',
+      serialize({
+        name: text,
+        type,
+        ...data,
+      }).replace(/"(\w+)":\s/g, '$1: '),
     );
+  }
+};
 
-    let timeout: NodeJS.Timeout | undefined;
-    let clientX: number;
-    let clientY: number;
+const dragendHandler = () => {
+  if (timeout) {
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.contentWindow?.document;
+  if (doc && stageOptions) {
+    removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+  }
+  clientX = 0;
+  clientY = 0;
+};
 
-    return {
-      searchText,
-      collapseValue,
-      list,
+const dragHandler = (e: DragEvent) => {
+  if (e.clientX !== clientX || e.clientY !== clientY) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+      timeout = undefined;
+    }
+    return;
+  }
 
-      appendComponent({ text, type, data = {} }: ComponentItem): void {
-        services?.editorService.add({
-          name: text,
-          type,
-          ...data,
-        });
-      },
+  if (timeout || !stage.value) return;
 
-      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
-        if (e.dataTransfer) {
-          e.dataTransfer.effectAllowed = 'move';
-          e.dataTransfer.setData(
-            'data',
-            serialize({
-              name: text,
-              type,
-              ...data,
-            }).replace(/"(\w+)":\s/g, '$1: '),
-          );
-        }
-      },
-
-      dragendHandler() {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-          timeout = undefined;
-        }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-
-      dragHandler(e: DragEvent) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = undefined;
-          }
-          return;
-        }
-
-        if (timeout || !stage.value) return;
-
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
-      },
-    };
-  },
-});
+  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+};
 </script>
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 8dacdbe9..0f515e93 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -14,6 +14,10 @@
       <template #component-list-panel-header v-if="item === 'component-list'">
         <slot name="component-list-panel-header"></slot>
       </template>
+
+      <template #component-list-item="{ component }" v-if="item === 'component-list'">
+        <slot name="component-list-item" :component="component"></slot>
+      </template>
     </tab-pane>
   </el-tabs>
 </template>
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index b9f583cf..985bb1c7 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -13,6 +13,18 @@
         <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
+      <template
+        #component-list-item="{ component }"
+        v-if="data === 'component-list' || config.slots?.componentListItem"
+      >
+        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
+        <component
+          v-else-if="config.slots?.componentListItem"
+          :is="config.slots.componentListItem"
+          :component="component"
+        />
+      </template>
+
       <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
         <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
         <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />