Testing Complete - Resolve Post Issue
This commit is contained in:
Conor_Mack
parent
baec9f50d9
commit
5b8d1cead7
|
|
@ -110,30 +110,33 @@ const object_to_css_string = [
|
|||
join_with("\n"),
|
||||
]
|
||||
|
||||
export const generate_css = ({ layout, position }) => {
|
||||
let _layout = pipe(layout, object_to_css_string)
|
||||
if (_layout.length) {
|
||||
_layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
|
||||
}
|
||||
export const generate_css = style => {
|
||||
// let cssString = pipe(style, object_to_css_string)
|
||||
let cssString = Object.entries(style).reduce((str, [key, value]) => {
|
||||
//TODO Handle arrays and objects here also
|
||||
if (typeof value === "string") {
|
||||
if (value) {
|
||||
return (str += `${key}: ${value};\n`)
|
||||
}
|
||||
} else if (Array.isArray(value)) {
|
||||
return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`)
|
||||
}
|
||||
}, "")
|
||||
|
||||
return {
|
||||
layout: _layout,
|
||||
position: pipe(position, object_to_css_string),
|
||||
}
|
||||
return (cssString || "").trim()
|
||||
}
|
||||
|
||||
const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
|
||||
|
||||
export const generate_screen_css = component_array => {
|
||||
let styles = ""
|
||||
let emptyStyles = { layout: {}, position: {} }
|
||||
|
||||
let emptyStyles = {}
|
||||
for (let i = 0; i < component_array.length; i += 1) {
|
||||
const { _styles, _id, _children } = component_array[i]
|
||||
const { layout, position } = generate_css(_styles || emptyStyles)
|
||||
|
||||
styles += apply_class(_id, "pos", position) + "\n"
|
||||
styles += apply_class(_id, "lay", layout) + "\n"
|
||||
const cssString = generate_css(_styles || emptyStyles) || ""
|
||||
if (cssString) {
|
||||
styles += apply_class(_id, "element", cssString)
|
||||
}
|
||||
if (_children && _children.length) {
|
||||
styles += generate_screen_css(_children) + "\n"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,10 +140,12 @@ const _saveScreen = async (store, s, screen) => {
|
|||
return s
|
||||
}
|
||||
|
||||
const _saveScreenApi = (screen, s) =>
|
||||
const _saveScreenApi = (screen, s) => {
|
||||
|
||||
api
|
||||
.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
|
||||
.then(() => _savePage(s))
|
||||
}
|
||||
|
||||
const createScreen = store => (screenName, route, layoutComponentName) => {
|
||||
store.update(state => {
|
||||
|
|
@ -278,7 +280,6 @@ const removeStylesheet = store => stylesheet => {
|
|||
|
||||
const _savePage = async s => {
|
||||
const page = s.pages[s.currentPageName]
|
||||
|
||||
await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
|
||||
page: { componentLibraries: s.pages.componentLibraries, ...page },
|
||||
uiFunctions: s.currentPageFunctions,
|
||||
|
|
@ -426,7 +427,9 @@ const setComponentStyle = store => (type, name, value) => {
|
|||
if (!state.currentComponentInfo._styles) {
|
||||
state.currentComponentInfo._styles = {}
|
||||
}
|
||||
state.currentComponentInfo._styles[type][name] = value
|
||||
// state.currentComponentInfo._styles[type][name] = value
|
||||
state.currentComponentInfo._styles[name] = value
|
||||
|
||||
state.currentPreviewItem._css = generate_screen_css([
|
||||
state.currentPreviewItem.props,
|
||||
])
|
||||
|
|
|
|||
|
|
@ -2,36 +2,50 @@
|
|||
import { onMount } from "svelte"
|
||||
|
||||
export let meta = []
|
||||
export let size = ""
|
||||
export let label = ""
|
||||
export let values = []
|
||||
export let type = "number"
|
||||
export let onStyleChanged = () => {}
|
||||
export let onChange = () => {}
|
||||
|
||||
let _values = values.map(v => v)
|
||||
|
||||
$: onStyleChanged(_values)
|
||||
// $: onChange(_values)
|
||||
</script>
|
||||
|
||||
<div class="inputs {size}">
|
||||
{#each meta as { placeholder }, i}
|
||||
<input
|
||||
{type}
|
||||
{placeholder}
|
||||
value={values[i]}
|
||||
on:input={e => (_values[i] = e.target.value)} />
|
||||
{/each}
|
||||
<div class="input-container">
|
||||
<div class="label">{label}</div>
|
||||
<div class="inputs">
|
||||
{#each meta as { placeholder }, i}
|
||||
<input
|
||||
{type}
|
||||
placeholder={placeholder || ''}
|
||||
value={values[i]}
|
||||
on:input={e => (_values[i] = e.target.value)} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.inputs {
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
flex: 1;
|
||||
/* display: flex;
|
||||
justify-content: space-between; */
|
||||
}
|
||||
|
||||
input {
|
||||
width: 83px;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin: 0px 5px;
|
||||
color: #163057;
|
||||
opacity: 0.7;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -49,17 +63,11 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.small > input {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.small > input::placeholder {
|
||||
input::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: {},
|
||||
_id: "__screenslot__text",
|
||||
_code: "",
|
||||
className: "",
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: {},
|
||||
_id: "__screenslot__text_2",
|
||||
_code: "",
|
||||
text: "content",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default ({
|
|||
<style>
|
||||
${styles || ""}
|
||||
|
||||
.pos-${selectedComponentId} {
|
||||
.element-${selectedComponentId} {
|
||||
border: 2px solid #0055ff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { setContext, onMount } from "svelte"
|
||||
import PropsView from "./PropsView.svelte"
|
||||
import { store } from "builderStore"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
|
|
@ -16,27 +17,28 @@
|
|||
import panelStructure from "./temporaryPanelStructure.js"
|
||||
import CategoryTab from "./CategoryTab.svelte"
|
||||
import DesignView from "./DesignView.svelte"
|
||||
import SettingsView from "./SettingsView.svelte"
|
||||
|
||||
let current_view = "design"
|
||||
let codeEditor
|
||||
let flattenedPanel = flattenComponents(panelStructure.categories)
|
||||
let categories = [
|
||||
{ name: "Design" },
|
||||
{ name: "Settings" },
|
||||
{ name: "Actions" },
|
||||
{ value: "design", name: "Design" },
|
||||
{ value: "settings", name: "Settings" },
|
||||
{ value: "actions", name: "Actions" },
|
||||
]
|
||||
let selectedCategory = categories[0]
|
||||
|
||||
$: components = $store.components
|
||||
$: componentInstance = $store.currentComponentInfo
|
||||
$: componentDefinition = $store.components.find(
|
||||
c => c.name === componentInstance._component
|
||||
)
|
||||
|
||||
$: panelDefinition = flattenedPanel.find(
|
||||
$: componentDefinition = $store.components[componentInstance._component]
|
||||
$: componentPropDefinition = flattenedPanel.find(
|
||||
//use for getting controls for each component property
|
||||
c => c._component === componentInstance._component
|
||||
)
|
||||
$: panelDefinition = componentPropDefinition
|
||||
? componentPropDefinition.properties[selectedCategory.value]
|
||||
: {}
|
||||
|
||||
// SCREEN PROPS =============================================
|
||||
$: screen_props =
|
||||
|
|
@ -44,8 +46,11 @@
|
|||
? getProps($store.currentPreviewItem, ["name", "favicon"])
|
||||
: getProps($store.currentPreviewItem, ["name", "description", "route"])
|
||||
|
||||
// const onStyleChanged = store.setComponentStyle
|
||||
// const onStyleChanged = store.onStyleChanged
|
||||
|
||||
const onStyleChanged = store.setComponentStyle
|
||||
const onPropChanged = store.onPropChanged
|
||||
const onPropChanged = store.setComponentProp
|
||||
|
||||
function walkProps(component, action) {
|
||||
action(component)
|
||||
|
|
@ -81,12 +86,17 @@
|
|||
{selectedCategory} />
|
||||
|
||||
<div class="component-props-container">
|
||||
{#if current_view === 'design'}
|
||||
{#if selectedCategory.value === 'design'}
|
||||
<DesignView
|
||||
{panelDefinition}
|
||||
{componentInstance}
|
||||
{componentDefinition}
|
||||
{onPropChanged} />
|
||||
{onStyleChanged} />
|
||||
{:else if selectedCategory.value === 'settings'}
|
||||
<SettingsView
|
||||
{componentInstance}
|
||||
{panelDefinition}
|
||||
onChange={onPropChanged} />
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
export let onPropChanged = () => {}
|
||||
export let onStyleChanged = () => {}
|
||||
|
||||
let selectedCategory = "desktop"
|
||||
|
||||
const getProperties = name => panelDefinition.properties[name]
|
||||
const getProperties = name => panelDefinition[name]
|
||||
|
||||
function onChange(category) {
|
||||
selectedCategory = category
|
||||
|
|
@ -23,8 +23,7 @@
|
|||
{ value: "selected", text: "Selected" },
|
||||
]
|
||||
|
||||
$: propertyGroupNames =
|
||||
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
</script>
|
||||
|
||||
<div class="design-view-container">
|
||||
|
|
@ -38,7 +37,7 @@
|
|||
<PropertyGroup
|
||||
name={groupName}
|
||||
properties={getProperties(groupName)}
|
||||
{onPropChanged}
|
||||
{onStyleChanged}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script>
|
||||
import { onMount, getContext } from "svelte"
|
||||
|
||||
export let label = ""
|
||||
export let control = null
|
||||
export let value = ""
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
import PropertyControl from "./PropertyControl.svelte"
|
||||
|
||||
export let name = ""
|
||||
export let properties = {}
|
||||
export let properties = []
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
export let onPropChanged = () => {}
|
||||
export let onStyleChanged = () => {}
|
||||
|
||||
export let show = false
|
||||
let showComponentGroup = false
|
||||
|
|
@ -15,7 +15,10 @@
|
|||
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
||||
|
||||
function onChange(key, v) {
|
||||
!!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
|
||||
console.log("PROPERTY GROUP ON CHANGE")
|
||||
!!v.target
|
||||
? onStyleChanged(name, key, v.target.value)
|
||||
: onStyleChanged(name, key, v)
|
||||
}
|
||||
|
||||
$: {
|
||||
|
|
@ -29,7 +32,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
$: propertyDefinition = Object.entries(properties)
|
||||
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
|
||||
</script>
|
||||
|
||||
|
|
@ -43,14 +45,14 @@
|
|||
</div>
|
||||
<div class="property-panel" class:show>
|
||||
|
||||
{#each propertyDefinition as [key, definition]}
|
||||
{#each properties as props}
|
||||
<!-- {#if propExistsOnComponentDef(key)} -->
|
||||
<PropertyControl
|
||||
label={definition.label || capitalize(key)}
|
||||
control={definition.control}
|
||||
value={componentInstance[key]}
|
||||
onChange={value => onChange(key, value)}
|
||||
props={{ ...excludeProps(definition, ['control']) }} />
|
||||
label={props.label}
|
||||
control={props.control}
|
||||
value={componentInstance[props.cssKey]}
|
||||
onChange={value => onChange(props.cssKey, value)}
|
||||
props={{ ...excludeProps(props, ['control']) }} />
|
||||
<!-- {/if} -->
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
import PropertyControl from "./PropertyControl.svelte"
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||
import { excludeProps } from "./propertyCategories.js"
|
||||
|
||||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let onChange = () => {}
|
||||
|
||||
function handleChange(key, data) {
|
||||
data.target ? onChange(key, data.target.value) : onChange(key, data)
|
||||
}
|
||||
|
||||
const meta = [
|
||||
{ placeholder: "T" },
|
||||
{ placeholder: "R" },
|
||||
{ placeholder: "B" },
|
||||
{ placeholder: "L" },
|
||||
]
|
||||
|
||||
$: settingsControls = !!panelDefinition ? Object.entries(panelDefinition) : []
|
||||
</script>
|
||||
|
||||
<h4>Settings Panel</h4>
|
||||
|
||||
<InputGroup label="Testing" {meta} />
|
||||
|
||||
{#each settingsControls as [key, definition]}
|
||||
<PropertyControl
|
||||
control={definition.control}
|
||||
label={key}
|
||||
value={componentInstance[key]}
|
||||
onChange={value => handleChange(key, value)}
|
||||
props={{ ...excludeProps(definition, ['control']) }} />
|
||||
{/each}
|
||||
|
|
@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
|
|||
const props = {
|
||||
_id: uuid(),
|
||||
_component: componentDefinition._component,
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: {},
|
||||
_code: "",
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
|
|||
}
|
||||
|
||||
if (!props._styles) {
|
||||
props._styles = { layout: {}, position: {} }
|
||||
props._styles = {}
|
||||
}
|
||||
|
||||
return props
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
import Input from "../common/Input.svelte"
|
||||
import OptionSelect from "./OptionSelect.svelte"
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||
/*
|
||||
TODO: Allow for default values for all properties
|
||||
*/
|
||||
|
||||
export const general = {
|
||||
text: { control: Input },
|
||||
}
|
||||
|
||||
export const layout = {
|
||||
flexDirection: {
|
||||
export const layout = [
|
||||
{
|
||||
label: "Direction",
|
||||
cssKey: "flex-direction",
|
||||
control: OptionSelect,
|
||||
initialValue: "columnReverse",
|
||||
options: [
|
||||
|
|
@ -20,41 +18,45 @@ export const layout = {
|
|||
{ label: "column-reverse", value: "columnReverse" },
|
||||
],
|
||||
},
|
||||
justifyContent: { label: "Justify", control: Input },
|
||||
alignItems: { label: "Align", control: Input },
|
||||
flexWrap: {
|
||||
{ label: "Justify", cssKey: "justify-content", control: Input },
|
||||
{ label: "Align", cssKey: "align-items", control: Input },
|
||||
{
|
||||
label: "Wrap",
|
||||
cssKey: "flex-wrap",
|
||||
control: OptionSelect,
|
||||
options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
export const spacing = {
|
||||
padding: { control: Input },
|
||||
margin: { control: Input },
|
||||
}
|
||||
const spacingMeta = [
|
||||
{ placeholder: "T" },
|
||||
{ placeholder: "R" },
|
||||
{ placeholder: "B" },
|
||||
{ placeholder: "L" },
|
||||
]
|
||||
export const spacing = [
|
||||
{
|
||||
label: "Padding",
|
||||
cssKey: "padding",
|
||||
control: InputGroup,
|
||||
meta: spacingMeta,
|
||||
},
|
||||
{ label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
|
||||
]
|
||||
|
||||
export const size = {
|
||||
width: { control: Input },
|
||||
height: { control: Input },
|
||||
minWidth: { label: "Min W", control: Input },
|
||||
minHeight: { label: "Min H", control: Input },
|
||||
maxWidth: { label: "Max W", control: Input },
|
||||
maxHeight: { label: "Max H", control: Input },
|
||||
overflow: {
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "visible" },
|
||||
{ label: "auto" },
|
||||
{ label: "hidden" },
|
||||
{ label: "auto" },
|
||||
{ label: "scroll" },
|
||||
],
|
||||
}, //custom
|
||||
}
|
||||
export const size = [
|
||||
{ label: "Width", cssKey: "width", control: Input },
|
||||
{ label: "Height", cssKey: "height", control: Input },
|
||||
{ label: "Min W", cssKey: "min-width", control: Input },
|
||||
{ label: "Min H", cssKey: "min-height", control: Input },
|
||||
{ label: "Max W", cssKey: "max-width", control: Input },
|
||||
{ label: "Max H", cssKey: "max-height", control: Input },
|
||||
]
|
||||
|
||||
export const position = {
|
||||
position: {
|
||||
export const position = [
|
||||
{
|
||||
label: "Position",
|
||||
cssKey: "position",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "static" },
|
||||
|
|
@ -64,11 +66,12 @@ export const position = {
|
|||
{ label: "sticky" },
|
||||
],
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
export const typography = {
|
||||
fontFamily: {
|
||||
export const typography = [
|
||||
{
|
||||
label: "Font",
|
||||
cssKey: "font-family",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "initial" },
|
||||
|
|
@ -82,8 +85,9 @@ export const typography = {
|
|||
],
|
||||
styleBindingProperty: "font-family",
|
||||
},
|
||||
fontWeight: {
|
||||
label: "weight",
|
||||
{
|
||||
label: "Weight",
|
||||
cssKey: "font-weight",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "normal" },
|
||||
|
|
@ -92,9 +96,11 @@ export const typography = {
|
|||
{ label: "lighter" },
|
||||
],
|
||||
},
|
||||
fontSize: { label: "size", control: Input },
|
||||
lineHeight: { label: "Line H", control: Input },
|
||||
color: {
|
||||
{ label: "size", cssKey: "font-size", control: Input },
|
||||
{ label: "Line H", cssKey: "line-height", control: Input },
|
||||
{
|
||||
label: "Color",
|
||||
cssKey: "color",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "black" },
|
||||
|
|
@ -104,8 +110,9 @@ export const typography = {
|
|||
{ label: "green" },
|
||||
],
|
||||
},
|
||||
textAlign: {
|
||||
{
|
||||
label: "align",
|
||||
cssKey: "text-align",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "initial" },
|
||||
|
|
@ -115,13 +122,14 @@ export const typography = {
|
|||
{ label: "justify" },
|
||||
],
|
||||
}, //custom
|
||||
textTransform: { label: "transform", control: Input }, //custom
|
||||
fontStyle: { label: "style", control: Input }, //custom
|
||||
}
|
||||
{ label: "transform", cssKey: "text-transform", control: Input }, //custom
|
||||
{ label: "style", cssKey: "font-style", control: Input }, //custom
|
||||
]
|
||||
|
||||
export const background = {
|
||||
backgroundColor: {
|
||||
label: "Background Color",
|
||||
export const background = [
|
||||
{
|
||||
label: "Background",
|
||||
cssKey: "background",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "white" },
|
||||
|
|
@ -131,30 +139,29 @@ export const background = {
|
|||
{ label: "black" },
|
||||
],
|
||||
},
|
||||
image: { control: Input }, //custom
|
||||
}
|
||||
{ label: "Image", cssKey: "image", control: Input }, //custom
|
||||
]
|
||||
|
||||
export const border = {
|
||||
borderRadius: { label: "radius", control: Input },
|
||||
borderWidth: { label: "width", control: Input }, //custom
|
||||
borderColor: { label: "color", control: Input },
|
||||
borderStyle: { label: "style", control: Input },
|
||||
}
|
||||
export const border = [
|
||||
{ label: "Radius", cssKey: "border-radius", control: Input },
|
||||
{ label: "Width", cssKey: "border-width", control: Input }, //custom
|
||||
{ label: "Color", cssKey: "border-color", control: Input },
|
||||
{ label: "Style", cssKey: "border-style", control: Input },
|
||||
]
|
||||
|
||||
export const effects = {
|
||||
opacity: { control: Input },
|
||||
rotate: { control: Input },
|
||||
shadow: { control: Input },
|
||||
}
|
||||
export const effects = [
|
||||
{ label: "Opacity", cssKey: "opacity", control: Input },
|
||||
{ label: "Rotate", cssKey: "transform", control: Input }, //needs special control
|
||||
{ label: "Shadow", cssKey: "box-shadow", control: Input },
|
||||
]
|
||||
|
||||
export const transitions = {
|
||||
property: { control: Input },
|
||||
duration: { control: Input },
|
||||
ease: { control: Input },
|
||||
}
|
||||
export const transitions = [
|
||||
{ label: "Property", cssKey: "transition-property", control: Input },
|
||||
{ label: "Duration", cssKey: "transition-timing-function", control: Input },
|
||||
{ label: "Ease", cssKey: "transition-ease", control: Input },
|
||||
]
|
||||
|
||||
export const all = {
|
||||
general,
|
||||
layout,
|
||||
spacing,
|
||||
size,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
import {
|
||||
general,
|
||||
layout,
|
||||
typography,
|
||||
border,
|
||||
size,
|
||||
background,
|
||||
all,
|
||||
} from "./propertyCategories.js"
|
||||
import Input from "../common/Input.svelte"
|
||||
|
||||
import { all } from "./propertyCategories.js"
|
||||
|
||||
export default {
|
||||
categories: [
|
||||
|
|
@ -30,7 +24,7 @@ export default {
|
|||
icon: "ri-layout-row-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: { background, size },
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
name: "Text",
|
||||
|
|
@ -44,17 +38,29 @@ export default {
|
|||
description: "A component for displaying heading text",
|
||||
icon: "ri-heading",
|
||||
properties: {
|
||||
...all
|
||||
design: { ...all },
|
||||
settings: {
|
||||
text: {
|
||||
control: Input,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
name: "Paragraph",
|
||||
description: "A component for displaying paragraph text.",
|
||||
icon: 'ri-paragraph',
|
||||
properties: { general, typography },
|
||||
}
|
||||
]
|
||||
icon: "ri-paragraph",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: {
|
||||
text: {
|
||||
control: Input,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Input",
|
||||
|
|
@ -65,58 +71,60 @@ export default {
|
|||
{
|
||||
_component: "@budibase/standard-components/input",
|
||||
name: "Textfield",
|
||||
description: "A textfield component that allows the user to input text.",
|
||||
icon: 'ri-edit-box-line',
|
||||
properties: {}
|
||||
description:
|
||||
"A textfield component that allows the user to input text.",
|
||||
icon: "ri-edit-box-line",
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/checkbox",
|
||||
name: "Checkbox",
|
||||
description: "A selectable checkbox component",
|
||||
icon: 'ri-checkbox-line',
|
||||
properties: {}
|
||||
icon: "ri-checkbox-line",
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/radiobutton",
|
||||
name: "Radiobutton",
|
||||
description: "A selectable radiobutton component",
|
||||
icon: 'ri-radio-button-line',
|
||||
properties: {}
|
||||
icon: "ri-radio-button-line",
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/select",
|
||||
name: "Select",
|
||||
description: "A select component for choosing from different options",
|
||||
icon: 'ri-file-list-line',
|
||||
properties: {}
|
||||
}
|
||||
]
|
||||
description:
|
||||
"A select component for choosing from different options",
|
||||
icon: "ri-file-list-line",
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/button",
|
||||
name: 'Button',
|
||||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
name: "Button",
|
||||
description: "A basic html button that is ready for styling",
|
||||
icon: "ri-radio-button-fill",
|
||||
children: [],
|
||||
properties: { background, typography, border, size },
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/icon",
|
||||
name: 'Icon',
|
||||
description: 'A basic component for displaying icons',
|
||||
icon: 'ri-sun-fill',
|
||||
properties: {},
|
||||
children: []
|
||||
name: "Icon",
|
||||
description: "A basic component for displaying icons",
|
||||
icon: "ri-sun-fill",
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/link",
|
||||
name: 'Link',
|
||||
description: 'A basic link component for internal and external links',
|
||||
icon: 'ri-link',
|
||||
properties: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
name: "Link",
|
||||
description: "A basic link component for internal and external links",
|
||||
icon: "ri-link",
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Blocks",
|
||||
|
|
@ -124,18 +132,20 @@ export default {
|
|||
children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/BasicCard",
|
||||
name: 'Card',
|
||||
description: 'A basic card component that can contain content and actions.',
|
||||
icon: 'ri-layout-bottom-line',
|
||||
name: "Card",
|
||||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-layout-bottom-line",
|
||||
children: [],
|
||||
properties: { size, background, border },
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
name: 'Login',
|
||||
description: 'A component that automatically generates a login screen for your app.',
|
||||
icon: 'ri-login-box-fill',
|
||||
properties: {},
|
||||
children: []
|
||||
name: "Login",
|
||||
description:
|
||||
"A component that automatically generates a login screen for your app.",
|
||||
icon: "ri-login-box-fill",
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
name: "Navigation Bar",
|
||||
|
|
@ -143,27 +153,27 @@ export default {
|
|||
description:
|
||||
"A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-fill",
|
||||
properties: {},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Data",
|
||||
isCategory: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Table',
|
||||
description: 'A component that generates a table from your data.',
|
||||
icon: 'ri-archive-drawer-fill',
|
||||
properties: {},
|
||||
children: []
|
||||
name: "Table",
|
||||
description: "A component that generates a table from your data.",
|
||||
icon: "ri-archive-drawer-fill",
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
description: 'A component that generates a form from your data.',
|
||||
icon: 'ri-file-edit-fill',
|
||||
properties: {},
|
||||
name: "Form",
|
||||
description: "A component that generates a form from your data.",
|
||||
icon: "ri-file-edit-fill",
|
||||
properties: { design: { ...all } },
|
||||
_component: "@budibase/materialdesign-components/Form",
|
||||
template: {
|
||||
component: "@budibase/materialdesign-components/Form",
|
||||
|
|
@ -177,7 +187,7 @@ export default {
|
|||
name: "DataTable",
|
||||
description: "A table for displaying data from the backend.",
|
||||
icon: "ri-archive-drawer-fill",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -185,7 +195,7 @@ export default {
|
|||
name: "DataForm",
|
||||
description: "Form stuff",
|
||||
icon: "ri-file-edit-fill",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -193,7 +203,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datachart",
|
||||
description: "Shiny chart",
|
||||
icon: "ri-bar-chart-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -201,7 +211,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datalist",
|
||||
description: "Shiny list",
|
||||
icon: "ri-file-list-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -209,7 +219,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datamap",
|
||||
description: "Shiny map",
|
||||
icon: "ri-map-pin-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
|
|||
}
|
||||
}
|
||||
|
||||
htmlElement.classList.add(`lay-${treeNode.props._id}`)
|
||||
// htmlElement.classList.add(`lay-${treeNode.props._id}`)
|
||||
|
||||
const childNodes = []
|
||||
for (let childProps of treeNode.props._children) {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const prepareRenderComponent = ({
|
|||
htmlElement.children[htmlElement.children.length - 1]
|
||||
|
||||
if (props._id && thisNode.rootElement) {
|
||||
thisNode.rootElement.classList.add(`pos-${props._id}`)
|
||||
thisNode.rootElement.classList.add(`element-${props._id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue