makes the Component panel tabs more generic
This commit is contained in:
kevmodrome
parent
17e0b2d79a
commit
324157cfac
|
|
@ -20,7 +20,7 @@
|
|||
pipe,
|
||||
} from "components/common/core"
|
||||
|
||||
import Tab from "./ComponentTab/Tab.svelte"
|
||||
import Tab from "./ItemTab/Tab.svelte"
|
||||
import { store } from "builderStore"
|
||||
|
||||
export let toggleTab
|
||||
|
|
@ -51,6 +51,15 @@
|
|||
selectTemplateDialog.show()
|
||||
}
|
||||
|
||||
const onComponentChosen = component => {
|
||||
if (component.template) {
|
||||
onTemplateChosen(component.template)
|
||||
} else {
|
||||
store.addChildComponent(component._component)
|
||||
toggleTab()
|
||||
}
|
||||
}
|
||||
|
||||
const onTemplateInstanceChosen = () => {
|
||||
selectedComponent = null
|
||||
const instance = templateInstances.find(
|
||||
|
|
@ -63,16 +72,13 @@
|
|||
$: templatesByComponent = groupBy(t => t.component)($store.templates)
|
||||
$: hierarchy = $store.hierarchy
|
||||
$: libraryModules = $store.libraries
|
||||
$: standaloneTemplates = pipe(
|
||||
templatesByComponent,
|
||||
[
|
||||
$: standaloneTemplates = pipe(templatesByComponent, [
|
||||
values,
|
||||
flatten,
|
||||
filter(t => !$store.components.some(c => c.name === t.component)),
|
||||
map(t => ({ name: splitName(t.component).componentName, template: t })),
|
||||
uniqBy(t => t.name),
|
||||
]
|
||||
)
|
||||
])
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -86,7 +92,9 @@
|
|||
{/each}
|
||||
</ul>
|
||||
<div class="panel">
|
||||
<Tab list={selectedCategory} {onTemplateChosen} />
|
||||
<Tab
|
||||
list={selectedCategory}
|
||||
on:selectItem={e => onComponentChosen(e.detail)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<script>
|
||||
export let component
|
||||
export let item
|
||||
</script>
|
||||
|
||||
<div class="component-item" on:click>
|
||||
<div class="component-icon">
|
||||
<i class={component.icon} />
|
||||
<div class="item-item" on:click>
|
||||
<div class="item-icon">
|
||||
<i class={item.icon} />
|
||||
</div>
|
||||
<div class="component-text">
|
||||
<div class="component-name">{component.name}</div>
|
||||
<div class="component-description">
|
||||
<p>{component.description}</p>
|
||||
<div class="item-text">
|
||||
<div class="item-name">{item.name}</div>
|
||||
<div class="item-description">
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-item {
|
||||
.item-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0px 8px 10px;
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.component-item:hover {
|
||||
.item-item:hover {
|
||||
/* background: #f5f5f5; */
|
||||
background: #fbfbfb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.component-icon {
|
||||
.item-icon {
|
||||
flex: 0 0 40px;
|
||||
/* background: #efe9e9; */
|
||||
background: #f1f4fc;
|
||||
|
|
@ -40,19 +40,19 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.component-text {
|
||||
.item-text {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
padding-top: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.component-name {
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.component-description {
|
||||
.item-description {
|
||||
font-size: 12px;
|
||||
color: #808192;
|
||||
}
|
||||
|
|
@ -1,24 +1,17 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
import Item from "./Item.svelte"
|
||||
import { store } from "builderStore"
|
||||
export let list
|
||||
export let onTemplateChosen
|
||||
let category = list
|
||||
|
||||
const onComponentChosen = component => {
|
||||
if (component.template) {
|
||||
onTemplateChosen(component.template)
|
||||
const handleClick = item => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
list = item
|
||||
} else {
|
||||
store.addChildComponent(component._component)
|
||||
toggleTab()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = component => {
|
||||
if (component.type && component.type.length > 0) {
|
||||
list = component
|
||||
} else {
|
||||
onComponentChosen(component)
|
||||
dispatch("selectItem", item)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,8 +24,8 @@
|
|||
<button class="back-button" on:click={() => (list = category)}>Back</button>
|
||||
{/if}
|
||||
|
||||
{#each list.type as component}
|
||||
<Item {component} on:click={() => handleClick(component)} />
|
||||
{#each list.children as item}
|
||||
<Item {item} on:click={() => handleClick(item)} />
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
|
|
@ -3,20 +3,20 @@ export default {
|
|||
{
|
||||
name: 'Basic',
|
||||
isCategory: true,
|
||||
type: [
|
||||
children: [
|
||||
{
|
||||
name: 'Container',
|
||||
description: 'This component contains things within itself',
|
||||
icon: 'ri-layout-row-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
description: 'This is a simple text component',
|
||||
icon: 'ri-t-box-fill',
|
||||
commonProps: {},
|
||||
type: [
|
||||
children: [
|
||||
{
|
||||
_component: '@budibase/standard-components/heading',
|
||||
name: 'Headline',
|
||||
|
|
@ -45,102 +45,102 @@ export default {
|
|||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Icon',
|
||||
description: 'A basic component for displaying icons',
|
||||
icon: 'ri-sun-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Avatar',
|
||||
description: 'A basic component for rendering an avatar',
|
||||
icon: 'ri-user-smile-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Link',
|
||||
description: 'A basic link component for internal and external links',
|
||||
icon: 'ri-link',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
isCategory: true,
|
||||
type: [
|
||||
children: [
|
||||
{
|
||||
name: 'Button',
|
||||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Icon',
|
||||
description: 'A basic component for displaying icons',
|
||||
icon: 'ri-sun-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Avatar',
|
||||
description: 'A basic component for rendering an avatar',
|
||||
icon: 'ri-user-smile-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Link',
|
||||
description: 'A basic link component for internal and external links',
|
||||
icon: 'ri-link',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Blocks',
|
||||
isCategory: true,
|
||||
type: [
|
||||
children: [
|
||||
{
|
||||
name: 'Card',
|
||||
description: 'A basic card component that can contain content and actions.',
|
||||
icon: 'ri-layout-bottom-line',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Login',
|
||||
description: 'A component that automatically generates a login screen for your app.',
|
||||
icon: 'ri-login-box-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Navbar',
|
||||
description: 'A component for handling the navigation within your app.',
|
||||
icon: 'ri-navigation-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Data',
|
||||
isCategory: true,
|
||||
type: [
|
||||
children: [
|
||||
{
|
||||
name: 'Table',
|
||||
description: 'A component that generates a table from your data.',
|
||||
icon: 'ri-archive-drawer-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
|
|
@ -153,7 +153,7 @@ export default {
|
|||
description: "Form for saving a record",
|
||||
name: "@budibase/materialdesign-components/recordForm",
|
||||
},
|
||||
type: []
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue