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

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

View File

@ -7,12 +7,12 @@
<template #sidebar>
<slot name="sidebar" :editorService="editorService">
<sidebar :data="sidebar">
<template #layer-panel>
<slot name="layer-panel"></slot>
<template #layer-panel-header>
<slot name="layer-panel-header"></slot>
</template>
<template #component-list-panel>
<slot name="component-list-panel"></slot>
<template #component-list-panel-header>
<slot name="component-list-panel-header"></slot>
</template>
</sidebar>
</slot>
@ -30,7 +30,11 @@
<template #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>
</template>

View File

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

View File

@ -1,6 +1,7 @@
<template>
<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-input
prefix-icon="el-icon-search"

View File

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

View File

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

View File

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

View File

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