<svelte:component> solution for rendering
This commit is contained in:
parent
8ad10976d3
commit
b52b9fdd2f
8 changed files with 71 additions and 28 deletions
|
@ -2,7 +2,7 @@
|
||||||
import { onMount, beforeUpdate, afterUpdate } from "svelte"
|
import { onMount, beforeUpdate, afterUpdate } from "svelte"
|
||||||
|
|
||||||
export let value = null
|
export let value = null
|
||||||
export let onChanged = () => {}
|
export let onChange = () => {}
|
||||||
export let swatches = []
|
export let swatches = []
|
||||||
|
|
||||||
let picker
|
let picker
|
||||||
|
@ -58,13 +58,10 @@
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
getRecentColors()
|
getRecentColors()
|
||||||
createPicker()
|
createPicker()
|
||||||
|
return () => {
|
||||||
picker.on("save", (colour, instance) => {
|
picker.destroyAndRemove()
|
||||||
let color = colour.toHEXA().toString()
|
picker = null
|
||||||
onChanged(color)
|
}
|
||||||
setRecentColor(color)
|
|
||||||
picker.hide()
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -86,8 +86,11 @@
|
||||||
|
|
||||||
<div class="component-props-container">
|
<div class="component-props-container">
|
||||||
{#if current_view === 'design'}
|
{#if current_view === 'design'}
|
||||||
<!-- <PropsView {component} {components} {onPropChanged} /> -->
|
<DesignView
|
||||||
<DesignView {panelDefinition} {componentInstance} {componentDefinition} />
|
{panelDefinition}
|
||||||
|
{componentInstance}
|
||||||
|
{componentDefinition}
|
||||||
|
{onPropChanged} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,8 +4,11 @@
|
||||||
export let panelDefinition = {}
|
export let panelDefinition = {}
|
||||||
export let componentInstance = {}
|
export let componentInstance = {}
|
||||||
export let componentDefinition = {}
|
export let componentDefinition = {}
|
||||||
|
export let onPropChanged = () => {}
|
||||||
|
|
||||||
const getProperties = name => panelDefinition.properties[name]
|
const getProperties = name => panelDefinition.properties[name]
|
||||||
|
|
||||||
|
$: console.log("PDEF", panelDefinition)
|
||||||
$: propertyGroupNames =
|
$: propertyGroupNames =
|
||||||
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
|
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
|
||||||
</script>
|
</script>
|
||||||
|
@ -14,6 +17,7 @@
|
||||||
<PropertyGroup
|
<PropertyGroup
|
||||||
name={groupName}
|
name={groupName}
|
||||||
properties={getProperties(groupName)}
|
properties={getProperties(groupName)}
|
||||||
|
{onPropChanged}
|
||||||
{componentDefinition}
|
{componentDefinition}
|
||||||
{componentInstance} />
|
{componentInstance} />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -1,20 +1,27 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { excludeProps } from "./propertyCategories.js"
|
||||||
export let name = ""
|
export let name = ""
|
||||||
export let properties = {}
|
export let properties = {}
|
||||||
export let componentInstance = {}
|
export let componentInstance = {}
|
||||||
export let componentDefinition = {}
|
export let componentDefinition = {}
|
||||||
|
export let onPropChanged = () => {}
|
||||||
|
|
||||||
let show = false
|
let show = true
|
||||||
|
|
||||||
const propExistsOnComponentDef = prop => prop in componentDefinition.props
|
const propExistsOnComponentDef = prop => prop in componentDefinition.props
|
||||||
|
|
||||||
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
||||||
|
|
||||||
$: propertyKeys = Object.keys(properties)
|
function onChange(v) {
|
||||||
|
!!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: propertyDefinition = Object.entries(properties)
|
||||||
|
$: console.log("props group", properties)
|
||||||
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
|
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="property-group-container" on:click={() => (show = !show)}>
|
<!-- () => (show = !show) -->
|
||||||
|
<div class="property-group-container" on:click={() => {}}>
|
||||||
<div class="property-group-name">
|
<div class="property-group-name">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<i class={icon} />
|
<i class={icon} />
|
||||||
|
@ -22,13 +29,20 @@
|
||||||
<div class="name">{capitalize(name)}</div>
|
<div class="name">{capitalize(name)}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="property-panel" class:show>
|
<div class="property-panel" class:show>
|
||||||
<ul>
|
|
||||||
{#each propertyKeys as key}
|
{#each propertyDefinition as [key, definition]}
|
||||||
<!-- {#if propExistsOnComponentDef(key)} -->
|
<div class="property-control">
|
||||||
<li>{properties[key].label || capitalize(key)}</li>
|
{#if propExistsOnComponentDef(key)}
|
||||||
<!-- {/if} -->
|
<span>{definition.label || capitalize(key)}</span>
|
||||||
{/each}
|
<svelte:component
|
||||||
</ul>
|
this={definition.control}
|
||||||
|
value={componentInstance[key]}
|
||||||
|
on:change={onChange}
|
||||||
|
{onChange}
|
||||||
|
{...excludeProps(definition, ['control'])} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -62,7 +76,11 @@
|
||||||
.property-panel {
|
.property-panel {
|
||||||
height: 0px;
|
height: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* transition: height 2s ease-in-out; */
|
}
|
||||||
|
|
||||||
|
.property-control {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show {
|
.show {
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
export let value = ""
|
||||||
|
export let onChange = value => {}
|
||||||
|
export let options = []
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select
|
||||||
|
class="uk-select uk-form-small"
|
||||||
|
{value}
|
||||||
|
on:change={ev => onChange(ev.target.value)}>
|
||||||
|
{#each options || [] as option}
|
||||||
|
<option value={option}>{option}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
|
@ -1,9 +1,16 @@
|
||||||
|
import ColorPicker from "../common/Colorpicker.svelte"
|
||||||
|
import Input from "../common/Input.svelte"
|
||||||
|
import TempSelect from "./TempSelect.svelte"
|
||||||
/*
|
/*
|
||||||
TODO: all strings types are really inputs and could be typed as such
|
TODO: all strings types are really inputs and could be typed as such
|
||||||
TODO: Options types need option items
|
TODO: Options types need option items
|
||||||
TODO: Allow for default values for all properties
|
TODO: Allow for default values for all properties
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
export const general = {
|
||||||
|
text: { control: Input }
|
||||||
|
}
|
||||||
|
|
||||||
export const layout = {
|
export const layout = {
|
||||||
flexDirection: { label: "Direction", control: "string" },
|
flexDirection: { label: "Direction", control: "string" },
|
||||||
justifyContent: { label: "Justify", control: "string" },
|
justifyContent: { label: "Justify", control: "string" },
|
||||||
|
@ -42,8 +49,8 @@ export const typography = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const background = {
|
export const background = {
|
||||||
backgroundColor: { label: "Background Color", control: "colour" },
|
backgroundColor: { label: "Background Color", control: ColorPicker },
|
||||||
image: { control: "string" }, //custom
|
image: { control: Input }, //custom
|
||||||
}
|
}
|
||||||
|
|
||||||
export const border = {
|
export const border = {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { layout, background } from "./propertyCategories.js"
|
import { general, layout, background } from "./propertyCategories.js"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
categories: [
|
categories: [
|
||||||
|
@ -13,7 +13,7 @@ export default {
|
||||||
icon: 'ri-layout-row-fill',
|
icon: 'ri-layout-row-fill',
|
||||||
commonProps: {},
|
commonProps: {},
|
||||||
children: [],
|
children: [],
|
||||||
properties: { layout, background },
|
properties: { background },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Text',
|
name: 'Text',
|
||||||
|
@ -27,6 +27,7 @@ export default {
|
||||||
description: "A component for displaying heading text",
|
description: "A component for displaying heading text",
|
||||||
icon: "ri-heading",
|
icon: "ri-heading",
|
||||||
properties: {
|
properties: {
|
||||||
|
general,
|
||||||
layout,
|
layout,
|
||||||
background,
|
background,
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,7 +11,6 @@
|
||||||
|
|
||||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||||
$: style = buildStyle({ "font-family": fontFamily, color })
|
$: style = buildStyle({ "font-family": fontFamily, color })
|
||||||
// $: console.log("HEADING", color)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if type === 'h1'}
|
{#if type === 'h1'}
|
||||||
|
|
Loading…
Reference in a new issue