mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
13 changed files with 305 additions and 182 deletions
@ -1,23 +1,62 @@ |
|||
<script> |
|||
import PropertyGroup from "./PropertyGroup.svelte" |
|||
import FlatButtonGroup from "./FlatButtonGroup.svelte" |
|||
|
|||
export let panelDefinition = {} |
|||
export let componentInstance = {} |
|||
export let componentDefinition = {} |
|||
export let onPropChanged = () => {} |
|||
|
|||
let selectedCategory = "desktop" |
|||
|
|||
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 = |
|||
!!panelDefinition.properties && Object.keys(panelDefinition.properties) |
|||
</script> |
|||
|
|||
{#each propertyGroupNames as groupName} |
|||
<PropertyGroup |
|||
name={groupName} |
|||
properties={getProperties(groupName)} |
|||
{onPropChanged} |
|||
{componentDefinition} |
|||
{componentInstance} /> |
|||
{/each} |
|||
<div class="design-view-container"> |
|||
|
|||
<div class="design-view-state-categories"> |
|||
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} /> |
|||
</div> |
|||
|
|||
<div class="design-view-property-groups"> |
|||
{#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