Updates to naming conventions
This commit is contained in:
Conor_Mack
parent
06bbc88b3e
commit
8ad10976d3
|
|
@ -1,17 +1,19 @@
|
|||
<script>
|
||||
import PropertyGroup from "./PropertyGroup.svelte"
|
||||
|
||||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
const getProperties = prop => panelDefinition.props[prop]
|
||||
const getProperties = name => panelDefinition.properties[name]
|
||||
|
||||
$: props = !!panelDefinition.props && Object.keys(panelDefinition.props)
|
||||
$: propertyGroupNames =
|
||||
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
|
||||
</script>
|
||||
|
||||
{#each props as prop}
|
||||
{#each propertyGroupNames as groupName}
|
||||
<PropertyGroup
|
||||
title={prop}
|
||||
content={getProperties(prop)}
|
||||
name={groupName}
|
||||
properties={getProperties(groupName)}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
export let title = ""
|
||||
export let content = {}
|
||||
export let name = ""
|
||||
export let properties = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
|
||||
|
|
@ -8,24 +8,24 @@
|
|||
|
||||
const propExistsOnComponentDef = prop => prop in componentDefinition.props
|
||||
|
||||
const capitalize = title => title[0].toUpperCase() + title.slice(1)
|
||||
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
||||
|
||||
$: propertyKeys = Object.keys(content)
|
||||
$: propertyKeys = Object.keys(properties)
|
||||
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
|
||||
</script>
|
||||
|
||||
<div class="property-group-container" on:click={() => (show = !show)}>
|
||||
<div class="property-group-title">
|
||||
<div class="property-group-name">
|
||||
<div class="icon">
|
||||
<i class={icon} />
|
||||
</div>
|
||||
<div class="title">{capitalize(title)}</div>
|
||||
<div class="name">{capitalize(name)}</div>
|
||||
</div>
|
||||
<div class="property-panel" class:show>
|
||||
<ul>
|
||||
{#each propertyKeys as key}
|
||||
<!-- {#if propExistsOnComponentDef(key)} -->
|
||||
<li>{content[key].displayName || capitalize(key)}</li>
|
||||
<li>{properties[key].label || capitalize(key)}</li>
|
||||
<!-- {/if} -->
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.property-group-title {
|
||||
.property-group-name {
|
||||
cursor: pointer;
|
||||
flex: 0 0 20px;
|
||||
display: flex;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
.name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
TODO: all strings types are really inputs and could be typed as such
|
||||
TODO: Options types need option items
|
||||
|
|
@ -6,52 +5,52 @@
|
|||
*/
|
||||
|
||||
export const layout = {
|
||||
flexDirection: { displayName: "Direction", type: "string" },
|
||||
justifyContent: { displayName: "Justify", type: "string" },
|
||||
alignItems: { displayName: "Align", type: "string" },
|
||||
flexWrap: { displayName: "Wrap", type: "options" },
|
||||
flexDirection: { label: "Direction", control: "string" },
|
||||
justifyContent: { label: "Justify", control: "string" },
|
||||
alignItems: { label: "Align", control: "string" },
|
||||
flexWrap: { label: "Wrap", control: "options" },
|
||||
}
|
||||
|
||||
export const spacing = {
|
||||
padding: { type: "string" },
|
||||
margin: { type: "string" },
|
||||
padding: { control: "string" },
|
||||
margin: { control: "string" },
|
||||
}
|
||||
|
||||
export const size = {
|
||||
width: { type: "string" },
|
||||
height: { type: "string" },
|
||||
minWidth: { displayName: "Min W", type: "string" },
|
||||
minHeight: { displayName: "Min H", type: "string" },
|
||||
maxWidth: { displayName: "Max W", type: "string" },
|
||||
maxHeight: { displayName: "Max H", type: "string" },
|
||||
overflow: { type: "string" }, //custom
|
||||
width: { control: "string" },
|
||||
height: { control: "string" },
|
||||
minWidth: { label: "Min W", control: "string" },
|
||||
minHeight: { label: "Min H", control: "string" },
|
||||
maxWidth: { label: "Max W", control: "string" },
|
||||
maxHeight: { label: "Max H", control: "string" },
|
||||
overflow: { control: "string" }, //custom
|
||||
}
|
||||
|
||||
export const position = {
|
||||
position: { type: "options" },
|
||||
position: { control: "options" },
|
||||
}
|
||||
|
||||
export const typography = {
|
||||
font: { type: "options" },
|
||||
weight: { type: "options" },
|
||||
size: { type: "string" },
|
||||
lineHeight: { displayName: "Line H", type: "string" },
|
||||
color: { type: "colour" },
|
||||
align: { type: "string" }, //custom
|
||||
transform: { type: "string" }, //custom
|
||||
style: { type: "string" }, //custom
|
||||
font: { control: "options" },
|
||||
weight: { control: "options" },
|
||||
size: { control: "string" },
|
||||
lineHeight: { label: "Line H", control: "string" },
|
||||
color: { control: "colour" },
|
||||
align: { control: "string" }, //custom
|
||||
transform: { control: "string" }, //custom
|
||||
style: { control: "string" }, //custom
|
||||
}
|
||||
|
||||
export const background = {
|
||||
backgroundColor: { displayName: "Background Color", type: "colour" },
|
||||
image: { type: "string" }, //custom
|
||||
backgroundColor: { label: "Background Color", control: "colour" },
|
||||
image: { control: "string" }, //custom
|
||||
}
|
||||
|
||||
export const border = {
|
||||
radius: { type: "string" },
|
||||
width: { type: "string" }, //custom
|
||||
color: { type: "colour" },
|
||||
style: { type: "options" },
|
||||
radius: { control: "string" },
|
||||
width: { control: "string" }, //custom
|
||||
color: { control: "colour" },
|
||||
style: { control: "options" },
|
||||
}
|
||||
|
||||
export const effects = {
|
||||
|
|
@ -61,9 +60,9 @@ export const effects = {
|
|||
}
|
||||
|
||||
export const transitions = {
|
||||
property: { type: "options" },
|
||||
duration: { type: "string" },
|
||||
ease: { type: "options" },
|
||||
property: { control: "options" },
|
||||
duration: { control: "string" },
|
||||
ease: { control: "options" },
|
||||
}
|
||||
|
||||
export function excludeProps(props, propsToExclude) {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
icon: 'ri-layout-row-fill',
|
||||
commonProps: {},
|
||||
children: [],
|
||||
props: { layout, background },
|
||||
properties: { layout, background },
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
name: 'Headline',
|
||||
description: "A component for displaying heading text",
|
||||
icon: "ri-heading",
|
||||
props: {
|
||||
properties: {
|
||||
layout,
|
||||
background,
|
||||
},
|
||||
|
|
@ -36,7 +36,7 @@ export default {
|
|||
name: 'Paragraph',
|
||||
description: "A component for displaying paragraph text.",
|
||||
icon: 'ri-paragraph',
|
||||
props: {}
|
||||
properties: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -51,28 +51,28 @@ export default {
|
|||
name: "Textfield",
|
||||
description: "A textfield component that allows the user to input text.",
|
||||
icon: 'ri-edit-box-line',
|
||||
props: {}
|
||||
properties: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/checkbox",
|
||||
name: "Checkbox",
|
||||
description: "A selectable checkbox component",
|
||||
icon: 'ri-checkbox-line',
|
||||
props: {}
|
||||
properties: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/radiobutton",
|
||||
name: "Radiobutton",
|
||||
description: "A selectable radiobutton component",
|
||||
icon: 'ri-radio-button-line',
|
||||
props: {}
|
||||
properties: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/select",
|
||||
name: "Select",
|
||||
description: "A select component for choosing from different options",
|
||||
icon: 'ri-file-list-line',
|
||||
props: {}
|
||||
properties: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -82,14 +82,14 @@ export default {
|
|||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
children: [],
|
||||
props: {},
|
||||
properties: {},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/icon",
|
||||
name: 'Icon',
|
||||
description: 'A basic component for displaying icons',
|
||||
icon: 'ri-sun-fill',
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
name: 'Link',
|
||||
description: 'A basic link component for internal and external links',
|
||||
icon: 'ri-link',
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
|
|
@ -111,14 +111,14 @@ export default {
|
|||
name: 'Card',
|
||||
description: 'A basic card component that can contain content and actions.',
|
||||
icon: 'ri-layout-bottom-line',
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Login',
|
||||
description: 'A component that automatically generates a login screen for your app.',
|
||||
icon: 'ri-login-box-fill',
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
_component: "@budibase/standard-components/Navigation",
|
||||
description: "A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-fill",
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
|
|
@ -139,14 +139,14 @@ export default {
|
|||
name: 'Table',
|
||||
description: 'A component that generates a table from your data.',
|
||||
icon: 'ri-archive-drawer-fill',
|
||||
props: {},
|
||||
properties: {},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
description: 'A component that generates a form from your data.',
|
||||
icon: 'ri-file-edit-fill',
|
||||
props: {},
|
||||
properties: {},
|
||||
_component: "@budibase/materialdesign-components/Form",
|
||||
template: {
|
||||
component: "@budibase/materialdesign-components/Form",
|
||||
|
|
|
|||
Loading…
Reference in a new issue