Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toolbars): use toolbar base component in toolbar plugins #798

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1e2b563
fix(toolbars): 对于工具栏的定制化的改动,图标可替换,且可以替换展示方式(图标或按钮),同事按钮可以传入属性和样式
betterdancing Aug 12, 2024
7995809
fix(toolbars): 对于工具栏的定制化的改动,图标可替换,且可以替换展示方式(图标或按钮),同事按钮可以传入属性和样式
betterdancing Aug 12, 2024
21abd59
Merge branch 'refactor/develop' of https://github.com/betterdancing/t…
betterdancing Aug 12, 2024
e626722
fix(toolbars): 对于工具栏的定制化的改动,图标可替换,且可以替换展示方式(图标或按钮),同事按钮可以传入属性和样式
betterdancing Aug 16, 2024
49ffee5
feat: 工具栏定制化改造
betterdancing Sep 5, 2024
cc49279
feat(toolbars): 头部工具栏改造,新增公共可引入组件
betterdancing Sep 13, 2024
fe89b71
feat(toolbars): 头部工具栏改造,新增公共可引入组件
betterdancing Sep 13, 2024
612adc0
feat(toolbars): package.json添加layout依赖
betterdancing Sep 14, 2024
bedd71c
feat(toolbars): 头部工具栏改造,导出toolbar公共组件
betterdancing Sep 18, 2024
0a92bf7
feat(toolbar): 修复review意见,将配置项移动到options中
betterdancing Sep 20, 2024
4329155
feat(toolbar): 删除工具栏组件冗余属性,采用了import原组件并定制的方式扩展其余属性
betterdancing Sep 25, 2024
4e70edb
feat(toolbar): 处理工具栏代码冲突
betterdancing Sep 27, 2024
eb54ea5
feat(toolbar): 处理工具栏代码冲突
betterdancing Sep 27, 2024
c9d46de
Merge branch 'refactor/develop' of https://github.com/betterdancing/t…
betterdancing Sep 29, 2024
acd0934
feat(toolbar): 修改公共toolbar组件名称,并移到common目录下
betterdancing Sep 29, 2024
3a638cc
feat(toolbar): 修改部分review意见
betterdancing Sep 29, 2024
4393877
feat(toolbar): 默认工具栏按钮移除边框
betterdancing Sep 29, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions packages/common/component/ToolbarBase.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template>
<span class="toolbar-item-wrap" @click="click">
<component :is="getRender()" v-bind="state">
<template #default>
<slot name="button"></slot>
</template>
</component>
<slot></slot>
<span v-if="state.options?.collapsed">{{ state.content }}</span>
</span>
</template>

<script>
import { reactive, computed } from 'vue'
import ToolbarBaseIcon from './toolbar-built-in/ToolbarBaseIcon.vue'
import ToolbarBaseButton from './toolbar-built-in/ToolbarBaseButton.vue'

export default {
components: {
ToolbarBaseIcon,
ToolbarBaseButton
},
props: {
icon: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
options: {
type: Object,
default: () => {}
}
},
emits: ['click-api'],
setup(props, { emit }) {
const state = reactive({
icon: computed(() => props.icon),
content: computed(() => props.content),
options: computed(() => props.options)
})

const click = () => {
emit('click-api')
}

const getRender = () => {
switch (props.options.renderType) {
case 'button':
return ToolbarBaseButton
case 'icon':
return ToolbarBaseIcon
default:
return false
}
}

return {
state,
click,
getRender
}
}
}
</script>
<style scoped>
.split-line {
color: var(--ti-lowcode-toolbar-border-color);
margin: 0 4px;
font-size: 14px;
}
.toolbar-item-wrap div {
display: inline-block;
}
</style>
1 change: 1 addition & 0 deletions packages/common/component/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export { default as SplitPanes } from './SplitPanes.vue'
export { default as Pane } from './Pane.vue'
export { default as I18nInput } from './I18nInput.vue'
export { default as CanvasDragItem } from './CanvasDragItem.vue'
export { default as ToolbarBase } from './ToolbarBase.vue'
betterdancing marked this conversation as resolved.
Show resolved Hide resolved
export { default as Modal } from './Modal.jsx'
export { default as Notify } from './Notify.jsx'
export { ConfigGroup, ConfigItem }
Expand Down
71 changes: 71 additions & 0 deletions packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<tiny-button v-bind="extendAttrs" class="toolbar-button">
<span class="svg-wrap">
<svg-icon v-if="icon" :name="icon"></svg-icon>
<span v-if="options?.showDots" class="dots"></span>
</span>
<span class="save-title">{{ content }}</span>
<slot></slot>
</tiny-button>
</template>
<script>
import { inject } from 'vue'
import { Button } from '@opentiny/vue'

export default {
components: {
TinyButton: Button
},
props: {
icon: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
options: {
type: Object,
default: () => ({})
}
},
setup() {
const extendAttrs = inject('extend-attributes') || {}
return {
extendAttrs
}
}
}
</script>
<style lang="less" scoped>
.toolbar-button {
background-color: var(--ti-lowcode-toolbar-button-bg) !important;
border: none !important;
min-width: 70px;
height: 26px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
margin-right: 4px;
}

.svg-wrap {
position: relative;
.dots {
width: 6px;
height: 6px;
background: var(--ti-lowcode-toolbar-dot-color);
border-radius: 50%;
display: inline-block;
position: absolute;
top: -2px;
right: -2px;
z-index: 100;
}
}

.save-title {
margin: 0 6px;
}
</style>
62 changes: 62 additions & 0 deletions packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<tiny-popover
trigger="hover"
:open-delay="1000"
popper-class="toolbar-right-popover"
append-to-body
:content="content"
>
<template #reference>
<span class="icon">
<span class="icon-hides" v-bind="extendAttrs">
<svg-icon :name="icon"></svg-icon>
<span v-if="options?.showDots" class="dots"></span>
</span>
</span>
</template>
</tiny-popover>
</template>
betterdancing marked this conversation as resolved.
Show resolved Hide resolved
<script>
import { inject } from 'vue'
import { Popover } from '@opentiny/vue'

export default {
components: {
TinyPopover: Popover
},
props: {
icon: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
options: {
type: Object,
default: () => {}
}
},
setup() {
const extendAttrs = inject('extend-attributes') || {}
return {
extendAttrs
}
}
}
</script>

<style lang="less" scoped>
.dots {
width: 6px;
height: 6px;
background: var(--ti-lowcode-toolbar-dot-color);
border-radius: 50%;
display: inline-block;
position: absolute;
top: 4px;
right: 3px;
z-index: 100;
}
</style>
4 changes: 2 additions & 2 deletions packages/design-core/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles'
export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout'
export { default as Canvas } from '@opentiny/tiny-engine-canvas'
export { initPreview } from './src/preview/src/main'
export { GenerateCodeService, PluginPanel } from '@opentiny/tiny-engine-common'
export { PluginPanel, ToolbarBase } from '@opentiny/tiny-engine-common'

export { default as defaultRegistry } from './registry'

export * from '@opentiny/tiny-engine-meta-register'

export { EditorInfoService, AppService } from '@opentiny/tiny-engine-common'
export { EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine-common'
19 changes: 15 additions & 4 deletions packages/layout/src/DesignToolbars.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
<template>
<div class="tiny-engine-toolbar">
<div class="toolbar-left">
<component :is="getMergeMeta(comp).entry" v-for="comp in state.leftBar" :key="comp"></component>
<component
:is="getMergeMeta(comp).entry"
v-for="comp in state.leftBar"
:key="comp"
:options="getMergeMeta(comp).options"
></component>
</div>
<div class="toolbar-center">
<component :is="getMergeMeta(comp).entry" v-for="comp in state.centerBar" :key="comp"></component>
<component
:is="getMergeMeta(comp).entry"
v-for="comp in state.centerBar"
:key="comp"
:options="getMergeMeta(comp).options"
></component>
</div>
<div class="toolbar-right">
<div class="toolbar-right-content">
<div class="toolbar-right-item" v-for="(item, idx) in state.rightBar" :key="idx">
<div v-if="typeof item === 'string'">
<component :is="getMergeMeta(item)?.entry"></component>
<component :is="getMergeMeta(item)?.entry" :options="getMergeMeta(item)?.options"></component>
</div>
<div class="toolbar-right-item-arr" v-if="Array.isArray(item)">
<div class="toolbar-right-item-comp" v-for="comp in item" :key="comp">
<component :is="getMergeMeta(comp)?.entry"></component>
<component :is="getMergeMeta(comp)?.entry" :options="getMergeMeta(comp)?.options"></component>
</div>
<span class="toolbar-right-line" v-if="layoutRegistry.options?.isShowLine">|</span>
</div>
Expand Down Expand Up @@ -94,6 +104,7 @@ export default {
}

.toolbar-left,
.toolbar-center,
.toolbar-right {
:deep(.icon) {
display: inline-flex;
Expand Down
12 changes: 2 additions & 10 deletions packages/layout/src/ToolbarCollapse.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<div class="collapse-content">
<div class="empty-bar" v-for="(item, idx) in collapseBar" :key="idx">
<div class="toolbar-list-button" v-if="typeof item === 'string'">
<component :is="getMergeMeta(item)?.entry"></component>
<component :is="getMergeMeta(item)?.entry" :options="getMergeMeta(comp).options"></component>
</div>
<div v-if="Array.isArray(item)">
<div class="toolbar-list-button" v-for="comp in item" :key="comp">
<component :is="getMergeMeta(comp)?.entry"></component>
<component :is="getMergeMeta(comp)?.entry" :options="getMergeMeta(comp).options"></component>
</div>
<div class="empty-line"></div>
</div>
Expand Down Expand Up @@ -70,14 +70,6 @@ export default {
background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
cursor: pointer;
}

.operate-title {
vertical-align: middle;
}

.reference-wrapper {
padding-left: 8px;
}
}

.empty-line {
Expand Down
7 changes: 6 additions & 1 deletion packages/toolbars/breadcrumb/meta.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,10 @@ export default {
id: 'engine.toolbars.breadcrumb',
type: 'toolbars',
title: 'breadcrumb',
icon: ''
options: {
icon: {
default: ''
},
renderType: 'slot'
}
}
59 changes: 37 additions & 22 deletions packages/toolbars/breadcrumb/src/Main.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,54 @@
<template>
<div class="top-panel-breadcrumb">
<div
:class="[
'top-panel-breadcrumb-title',
{ 'top-panel-breadcrumb-title-block': breadcrumbData[0] === CONSTANTS.BLOCKTEXT }
]"
>
<tiny-breadcrumb separator=":" @select="open">
<tiny-breadcrumb-item v-for="item in breadcrumbData.slice(0, 2)" :key="item">{{ item }} </tiny-breadcrumb-item>
</tiny-breadcrumb>
</div>
<tiny-button
class="publish"
v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
@click="publishBlock()"
type="primary"
size="small"
>区块</tiny-button
>
</div>
<block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
<toolbar-base :options="options">
<template #default>
<div class="top-panel-breadcrumb">
<div
:class="[
'top-panel-breadcrumb-title',
{ 'top-panel-breadcrumb-title-block': breadcrumbData[0] === CONSTANTS.BLOCKTEXT }
]"
>
<tiny-breadcrumb separator=":" @select="open">
<tiny-breadcrumb-item v-for="item in breadcrumbData.slice(0, 2)" :key="item"
>{{ item }}
</tiny-breadcrumb-item>
</tiny-breadcrumb>
</div>

<tiny-button
class="publish"
v-if="breadcrumbData[0] === CONSTANTS.BLOCKTEXT"
@click="publishBlock()"
type="primary"
size="small"
>发布区块
</tiny-button>
</div>
<block-deploy-dialog v-model:visible="state.showDeployBlock" :nextVersion="nextVersion"></block-deploy-dialog>
</template>
</toolbar-base>
</template>

<script>
import { reactive, computed } from 'vue'
import { Breadcrumb, BreadcrumbItem, Button } from '@opentiny/vue'
import { useBreadcrumb, useLayout } from '@opentiny/tiny-engine-meta-register'
import { ToolbarBase } from '@opentiny/tiny-engine-common'
import { BlockDeployDialog } from '@opentiny/tiny-engine-common'

export default {
components: {
TinyBreadcrumb: Breadcrumb,
TinyBreadcrumbItem: BreadcrumbItem,
BlockDeployDialog,
TinyButton: Button
TinyButton: Button,
ToolbarBase
},
props: {
options: {
type: Object,
default: () => ({})
}
},
setup() {
const PLUGINS_ID = {
Expand Down
Loading