JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-02 07:54:13 +08:00
Code Issues Projects Releases Wiki Activity

feat(editor): 添加props-panel-header slot;修改layer-panel,component-list-panel slot名称，加上-header

Browse Source
This commit is contained in:
roymondchen 2022-07-08 17:35:08 +08:00 committed by jia000
parent 5c74e0f296
commit e901ad4dd0
7 changed files with 72 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,12 +7,12 @@
<template #sidebar> <template #sidebar>
<slot name="sidebar" :editorService="editorService"> <slot name="sidebar" :editorService="editorService">
<sidebar :data="sidebar"> <sidebar :data="sidebar">
<template #layer-panel> <template #layer-panel-header>
<slot name="layer-panel"></slot> <slot name="layer-panel-header"></slot>
</template> </template>
<template #component-list-panel> <template #component-list-panel-header>
<slot name="component-list-panel"></slot> <slot name="component-list-panel-header"></slot>
</template> </template>
</sidebar> </sidebar>
</slot> </slot>
@ -30,7 +30,11 @@
<template #props-panel> <template #props-panel>
<slot name="props-panel"> <slot name="props-panel">
<props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel> <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
<template #props-panel-header>
<slot name="props-panel-header"></slot>
</template>
</props-panel>
</slot> </slot>
</template> </template>

21
packages/editor/src/layouts/PropsPanel.vue
View File

@ -1,13 +1,16 @@
<template> <template>
<m-form <div class="`m-editor-props-panel">
:class="`m-editor-props-panel ${propsPanelSize}`" <slot name="props-panel-header"></slot>
:popper-class="`m-editor-props-panel-popper ${propsPanelSize}`" <m-form
ref="configForm" :class="`m-editor-props-panel ${propsPanelSize}`"
:size="propsPanelSize" :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
:init-values="values" ref="configForm"
:config="curFormConfig" :size="propsPanelSize"
@change="submit" :init-values="values"
></m-form> :config="curFormConfig"
@change="submit"
></m-form>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">

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

@ -1,6 +1,7 @@
<template> <template>
<el-scrollbar> <el-scrollbar>
<slot name="component-list-panel"></slot> <slot name="component-list-panel-header"></slot>
<el-collapse class="ui-component-panel" :model-value="collapseValue"> <el-collapse class="ui-component-panel" :model-value="collapseValue">
<el-input <el-input
prefix-icon="el-icon-search" prefix-icon="el-icon-search"

2
packages/editor/src/layouts/sidebar/LayerPanel.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-scrollbar class="magic-editor-layer-panel"> <el-scrollbar class="magic-editor-layer-panel">
<slot name="layer-panel"></slot> <slot name="layer-panel-header"></slot>
<el-input <el-input
class="filterInput" class="filterInput"

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

@ -7,12 +7,12 @@
tab-position="left" tab-position="left"
> >
<tab-pane v-for="(item, index) in data.items" :key="index" :data="item"> <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
<template #layer-panel v-if="item === 'layer'"> <template #layer-panel-header v-if="item === 'layer'">
<slot name="layer-panel"></slot> <slot name="layer-panel-header"></slot>
</template> </template>
<template #component-list-panel v-if="item === 'component-list'"> <template #component-list-panel-header v-if="item === 'component-list'">
<slot name="component-list-panel"></slot> <slot name="component-list-panel-header"></slot>
</template> </template>
</tab-pane> </tab-pane>
</el-tabs> </el-tabs>

10
packages/editor/src/layouts/sidebar/TabPane.vue
View File

@ -8,12 +8,14 @@
</template> </template>
<component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}"> <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
<template #layer-panel v-if="data === 'layer'"> <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
<slot name="layer-panel"></slot> <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
<component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
</template> </template>
<template #component-list-panel v-if="data === 'component-list'"> <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
<slot name="component-list-panel"></slot> <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
<component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
</template> </template>
<template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent"> <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">

76
runtime/vue2/package-lock.json generated
View File

@ -1,15 +1,15 @@
{ {
"name": "runtime-vue2", "name": "runtime-vue2",
"version": "1.0.3", "version": "1.0.4",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "runtime-vue2", "name": "runtime-vue2",
"version": "1.0.3", "version": "1.0.4",
"dependencies": { "dependencies": {
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"@tmagic/stage": "1.0.3", "@tmagic/stage": "1.0.4",
"@vue/composition-api": "1.0.5", "@vue/composition-api": "1.0.5",
"vue": "^2.6.14" "vue": "^2.6.14"
}, },
@ -846,11 +846,11 @@
} }
}, },
"node_modules/@tmagic/core": { "node_modules/@tmagic/core": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.4.tgz",
"integrity": "sha512-agvOLNxXgLRD1gU/2PpJbqQETkwCakMQMDWYrFcrpgHsBB//x3lMZ75r3dwFkqNLMuoqIXUzhutqUS3e0fq3nw==", "integrity": "sha512-8UiC6MRuFxMW8jmERLJsi8d2r4bXKJEbyyGtYj1mlrAYFJPYf4Vv/xPYSjcoSMbD0TmqwUJooZApz3k6gns3qw==",
"dependencies": { "dependencies": {
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"events": "^3.3.0" "events": "^3.3.0"
}, },
"engines": { "engines": {
@ -858,22 +858,22 @@
} }
}, },
"node_modules/@tmagic/schema": { "node_modules/@tmagic/schema": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.4.tgz",
"integrity": "sha512-oqc0pVqfedntyA0GWx1WQN2xMYReKqCbdKxIZgpmL68zVpgktjxpmPiq8i0+Xt9b+H086GRbKlYFwuUZjsKYVw==", "integrity": "sha512-vatKARFKJecQrNlvW4KVYegXUD8ifH4oWgw3HYvt546LlreZdKLFdS3uobdvu5F4FSZ3aDjzJfltNXleNxmmgw==",
"engines": { "engines": {
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@tmagic/stage": { "node_modules/@tmagic/stage": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.4.tgz",
"integrity": "sha512-dUJJqg7NnvAva4Je0FDJYHAzdfRXQ4wLU/LiHNVCT5jAJx3tDD2xkgYYdN6zH6D5MlHrqFpVK+wzBo9FNb2NPQ==", "integrity": "sha512-7Neqk0Ca+/uqwA7NumUwNKosTBSiTzeq1479G9OsJ9Gx6a20zpBYNXhI2ljaJSWHCQIgMRciB/NVWrtuAfGbtg==",
"dependencies": { "dependencies": {
"@scena/guides": "^0.17.0", "@scena/guides": "^0.17.0",
"@tmagic/core": "1.0.3", "@tmagic/core": "1.0.4",
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"@tmagic/utils": "1.0.3", "@tmagic/utils": "1.0.4",
"events": "^3.3.0", "events": "^3.3.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"moveable": "^0.30.0", "moveable": "^0.30.0",
@ -884,11 +884,11 @@
} }
}, },
"node_modules/@tmagic/utils": { "node_modules/@tmagic/utils": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.4.tgz",
"integrity": "sha512-xk7D2IxzpJnGy4WmYKlBwJT+UaoWj5GuP4Zr3boui/upphXJf2h4ohg7QmryeQPzZBBsyfEjWifAlH9IdD7QuA==", "integrity": "sha512-+ggjPMsTXplOAsZ2o2P9mTNbkl8KnXAR9baUN9gJLYZZw7okr4e3fuFLsq60cp2EmQhuES7ONRIvhnA+mzja3g==",
"dependencies": { "dependencies": {
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"moment": "^2.29.2" "moment": "^2.29.2"
}, },
"engines": { "engines": {
@ -3415,28 +3415,28 @@
} }
}, },
"@tmagic/core": { "@tmagic/core": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.4.tgz",
"integrity": "sha512-agvOLNxXgLRD1gU/2PpJbqQETkwCakMQMDWYrFcrpgHsBB//x3lMZ75r3dwFkqNLMuoqIXUzhutqUS3e0fq3nw==", "integrity": "sha512-8UiC6MRuFxMW8jmERLJsi8d2r4bXKJEbyyGtYj1mlrAYFJPYf4Vv/xPYSjcoSMbD0TmqwUJooZApz3k6gns3qw==",
"requires": { "requires": {
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"events": "^3.3.0" "events": "^3.3.0"
} }
}, },
"@tmagic/schema": { "@tmagic/schema": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.4.tgz",
"integrity": "sha512-oqc0pVqfedntyA0GWx1WQN2xMYReKqCbdKxIZgpmL68zVpgktjxpmPiq8i0+Xt9b+H086GRbKlYFwuUZjsKYVw==" "integrity": "sha512-vatKARFKJecQrNlvW4KVYegXUD8ifH4oWgw3HYvt546LlreZdKLFdS3uobdvu5F4FSZ3aDjzJfltNXleNxmmgw=="
}, },
"@tmagic/stage": { "@tmagic/stage": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.4.tgz",
"integrity": "sha512-dUJJqg7NnvAva4Je0FDJYHAzdfRXQ4wLU/LiHNVCT5jAJx3tDD2xkgYYdN6zH6D5MlHrqFpVK+wzBo9FNb2NPQ==", "integrity": "sha512-7Neqk0Ca+/uqwA7NumUwNKosTBSiTzeq1479G9OsJ9Gx6a20zpBYNXhI2ljaJSWHCQIgMRciB/NVWrtuAfGbtg==",
"requires": { "requires": {
"@scena/guides": "^0.17.0", "@scena/guides": "^0.17.0",
"@tmagic/core": "1.0.3", "@tmagic/core": "1.0.4",
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"@tmagic/utils": "1.0.3", "@tmagic/utils": "1.0.4",
"events": "^3.3.0", "events": "^3.3.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"moveable": "^0.30.0", "moveable": "^0.30.0",
@ -3444,11 +3444,11 @@
} }
}, },
"@tmagic/utils": { "@tmagic/utils": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.4.tgz",
"integrity": "sha512-xk7D2IxzpJnGy4WmYKlBwJT+UaoWj5GuP4Zr3boui/upphXJf2h4ohg7QmryeQPzZBBsyfEjWifAlH9IdD7QuA==", "integrity": "sha512-+ggjPMsTXplOAsZ2o2P9mTNbkl8KnXAR9baUN9gJLYZZw7okr4e3fuFLsq60cp2EmQhuES7ONRIvhnA+mzja3g==",
"requires": { "requires": {
"@tmagic/schema": "1.0.3", "@tmagic/schema": "1.0.4",
"moment": "^2.29.2" "moment": "^2.29.2"
} }
}, },