JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 添加component-list slot，用于自定义组件列表

Browse Source 
re #621
This commit is contained in:
roymondchen 2024-07-25 17:49:40 +08:00
parent 16d4eff385
commit 0bbf7c5643
4 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/Editor.vue
View File

@ -33,6 +33,10 @@
<slot name="layer-node-tool" :data="data"></slot> <slot name="layer-node-tool" :data="data"></slot>
</template> </template>
<template #component-list="{ componentGroupList }">
<slot name="component-list" :component-group-list="componentGroupList"></slot>
</template>
<template #component-list-panel-header> <template #component-list-panel-header>
<slot name="component-list-panel-header"></slot> <slot name="component-list-panel-header"></slot>
</template> </template>

57
packages/editor/src/layouts/sidebar/ComponentListPanel.vue
View File

@ -2,31 +2,34 @@
<TMagicScrollbar> <TMagicScrollbar>
<slot name="component-list-panel-header"></slot> <slot name="component-list-panel-header"></slot>
<TMagicCollapse class="ui-component-panel" :model-value="collapseValue"> <SearchInput @search="filterTextChangeHandler"></SearchInput>
<SearchInput @search="filterTextChangeHandler"></SearchInput>
<template v-for="(group, index) in list"> <slot name="component-list" :component-group-list="list">
<TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`"> <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
<template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template> <template v-for="(group, index) in list">
<div <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
v-for="item in group.items" <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
class="component-item" <div
draggable="true" v-for="item in group.items"
:key="item.type" class="component-item"
@click="appendComponent(item)" draggable="true"
@dragstart="dragstartHandler(item, $event)" :key="item.type"
@dragend="dragendHandler" @click="appendComponent(item)"
@drag="dragHandler" @dragstart="dragstartHandler(item, $event)"
> @dragend="dragendHandler"
<slot name="component-list-item" :component="item"> @drag="dragHandler"
<TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc"> >
<MIcon :icon="item.icon"></MIcon> <slot name="component-list-item" :component="item">
</TMagicTooltip> <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
<span :title="item.text">{{ item.text }}</span> <MIcon :icon="item.icon"></MIcon>
</slot> </TMagicTooltip>
</div> <span :title="item.text">{{ item.text }}</span>
</TMagicCollapseItem> </slot>
</template> </div>
</TMagicCollapse> </TMagicCollapseItem>
</template>
</TMagicCollapse>
</slot>
</TMagicScrollbar> </TMagicScrollbar>
</template> </template>
@ -65,8 +68,8 @@ const services = inject<Services>('services');
const stageOptions = inject<StageOptions>('stageOptions'); const stageOptions = inject<StageOptions>('stageOptions');
const stage = computed(() => services?.editorService.get('stage')); const stage = computed(() => services?.editorService.get('stage'));
const list = computed(() => const list = computed<ComponentGroup[]>(() =>
services?.componentListService.getList().map((group: ComponentGroup) => ({ (services?.componentListService.getList() || []).map((group: ComponentGroup) => ({
...group, ...group,
items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)), items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
})), })),

12
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -29,6 +29,18 @@
v-bind="config.props || {}" v-bind="config.props || {}"
v-on="config?.listeners || {}" v-on="config?.listeners || {}"
> >
<template
#component-list="{ componentGroupList }"
v-if="config.$key === 'component-list' || config.slots?.componentList"
>
<slot
v-if="config.$key === 'component-list'"
name="component-list"
:component-group-list="componentGroupList"
></slot>
<component v-else-if="config.slots?.componentList" :is="config.slots.componentList" />
</template>
<template <template
#component-list-panel-header #component-list-panel-header
v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader" v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"

1
packages/editor/src/type.ts
View File

@ -81,6 +81,7 @@ export interface WorkspaceSlots {
export interface ComponentListPanelSlots { export interface ComponentListPanelSlots {
'component-list-panel-header'(props: {}): any; 'component-list-panel-header'(props: {}): any;
'component-list'(props: { componentGroupList: ComponentGroup[] }): any;
'component-list-item'(props: { component: ComponentItem }): any; 'component-list-item'(props: { component: ComponentItem }): any;
} }