forked from tsai/budibase
Conor_Mack
6 years ago
13 changed files with 305 additions and 182 deletions
@ -1,23 +1,62 @@ |
|||||
<script> |
<script> |
||||
import PropertyGroup from "./PropertyGroup.svelte" |
import PropertyGroup from "./PropertyGroup.svelte" |
||||
|
import FlatButtonGroup from "./FlatButtonGroup.svelte" |
||||
|
|
||||
export let panelDefinition = {} |
export let panelDefinition = {} |
||||
export let componentInstance = {} |
export let componentInstance = {} |
||||
export let componentDefinition = {} |
export let componentDefinition = {} |
||||
export let onPropChanged = () => {} |
export let onPropChanged = () => {} |
||||
|
|
||||
|
let selectedCategory = "desktop" |
||||
|
|
||||
const getProperties = name => panelDefinition.properties[name] |
const getProperties = name => panelDefinition.properties[name] |
||||
|
|
||||
$: console.log("PDEF", panelDefinition) |
function onChange(category) { |
||||
|
selectedCategory = category |
||||
|
} |
||||
|
|
||||
|
const buttonProps = [ |
||||
|
{ value: "desktop", text: "Desktop" }, |
||||
|
{ value: "mobile", text: "Mobile" }, |
||||
|
{ value: "hover", text: "Hover" }, |
||||
|
{ value: "active", text: "Active" }, |
||||
|
{ value: "selected", text: "Selected" }, |
||||
|
] |
||||
|
|
||||
$: propertyGroupNames = |
$: propertyGroupNames = |
||||
!!panelDefinition.properties && Object.keys(panelDefinition.properties) |
!!panelDefinition.properties && Object.keys(panelDefinition.properties) |
||||
</script> |
</script> |
||||
|
|
||||
{#each propertyGroupNames as groupName} |
<div class="design-view-container"> |
||||
<PropertyGroup |
|
||||
name={groupName} |
<div class="design-view-state-categories"> |
||||
properties={getProperties(groupName)} |
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} /> |
||||
{onPropChanged} |
</div> |
||||
{componentDefinition} |
|
||||
{componentInstance} /> |
<div class="design-view-property-groups"> |
||||
{/each} |
{#each propertyGroupNames as groupName} |
||||
|
<PropertyGroup |
||||
|
name={groupName} |
||||
|
properties={getProperties(groupName)} |
||||
|
{onPropChanged} |
||||
|
{componentDefinition} |
||||
|
{componentInstance} /> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.design-view-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.design-view-state-categories { |
||||
|
flex: 0 0 50px; |
||||
|
} |
||||
|
|
||||
|
.design-view-property-groups { |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -0,0 +1,38 @@ |
|||||
|
<script> |
||||
|
export let value = "" |
||||
|
export let text = "" |
||||
|
export let icon = "" |
||||
|
export let onClick = value => {} |
||||
|
export let selected = false |
||||
|
|
||||
|
$: useIcon = !!icon |
||||
|
</script> |
||||
|
|
||||
|
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}> |
||||
|
{#if useIcon} |
||||
|
<i class={icon} /> |
||||
|
{:else} |
||||
|
<span>{text}</span> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.flatbutton { |
||||
|
cursor: pointer; |
||||
|
padding: 5px; |
||||
|
text-align: center; |
||||
|
background: #ffffff; |
||||
|
color: #808192; |
||||
|
border-radius: 4px; |
||||
|
font-family: Roboto; |
||||
|
font-size: 11px; |
||||
|
font-weight: 500; |
||||
|
letter-spacing: 0.11px; |
||||
|
transition: background 0.5s, color 0.5s ease; |
||||
|
} |
||||
|
|
||||
|
.selected { |
||||
|
background: #808192; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
import FlatButton from "./FlatButton.svelte" |
||||
|
export let buttonProps = [] |
||||
|
export let isMultiSelect = false |
||||
|
export let value = [] |
||||
|
export let initialValue = "" |
||||
|
export let onChange = selected => {} |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (!value && !!initialValue) { |
||||
|
value = initialValue |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function onButtonClicked(v) { |
||||
|
let val |
||||
|
if (isMultiSelect) { |
||||
|
if (value.includes(v)) { |
||||
|
let idx = value.findIndex(i => i === v) |
||||
|
val = [...value].splice(idx, 1) |
||||
|
} else { |
||||
|
val = [...value, v] |
||||
|
} |
||||
|
} else { |
||||
|
val = v |
||||
|
} |
||||
|
onChange(val) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="flatbutton-group"> |
||||
|
{#each buttonProps as props} |
||||
|
<div class="button-container"> |
||||
|
<FlatButton |
||||
|
selected={value.includes(props.value)} |
||||
|
onClick={onButtonClicked} |
||||
|
{...props} /> |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.flatbutton-group { |
||||
|
display: flex; |
||||
|
flex-flow: row nowrap; |
||||
|
} |
||||
|
|
||||
|
.button-container { |
||||
|
flex: 1; |
||||
|
margin: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,22 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
export let value = "" |
||||
|
export let onChange = value => {} |
||||
|
export let options = [] |
||||
|
export let initialValue = "" |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (!value && !!initialValue) { |
||||
|
value = initialValue |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<select |
||||
|
class="uk-select uk-form-small" |
||||
|
{value} |
||||
|
on:change={ev => onChange(ev.target.value)}> |
||||
|
{#each options as { value, label }} |
||||
|
<option value={value || label}>{label}</option> |
||||
|
{/each} |
||||
|
</select> |
||||
@ -0,0 +1,41 @@ |
|||||
|
<script> |
||||
|
export let label = "" |
||||
|
export let control = null |
||||
|
export let value = "" |
||||
|
export let props = {} |
||||
|
export let onChange = () => {} |
||||
|
</script> |
||||
|
|
||||
|
<div class="property-control"> |
||||
|
<div class="label">{label}</div> |
||||
|
<div class="control"> |
||||
|
<svelte:component |
||||
|
this={control} |
||||
|
{value} |
||||
|
on:change={onChange} |
||||
|
{onChange} |
||||
|
{...props} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.property-control { |
||||
|
display: flex; |
||||
|
flex-flow: row nowrap; |
||||
|
margin: 8px 0px; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
flex: 0 0 50px; |
||||
|
padding: 0px 5px; |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
letter-spacing: 0.12px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.control { |
||||
|
flex: 1; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
</style> |
||||
@ -1,14 +0,0 @@ |
|||||
<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> |
|
||||
Loading…
Reference in new issue