mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
199 changed files with 1793 additions and 8693 deletions
@ -1,59 +0,0 @@ |
|||||
<script> |
|
||||
export let title |
|
||||
export let icon |
|
||||
|
|
||||
export let primary |
|
||||
export let secondary |
|
||||
export let tertiary |
|
||||
</script> |
|
||||
|
|
||||
<div on:click class:primary class:secondary class:tertiary> |
|
||||
<i class={icon} /> |
|
||||
<span>{title}</span> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
div { |
|
||||
height: 80px; |
|
||||
border-radius: 5px; |
|
||||
color: var(--ink); |
|
||||
font-weight: 400; |
|
||||
padding: 15px; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
transition: 0.3s transform; |
|
||||
background: var(--grey-1); |
|
||||
} |
|
||||
|
|
||||
i { |
|
||||
font-size: 24px; |
|
||||
color: var(--grey-7); |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
text-align: center; |
|
||||
margin-top: 8px; |
|
||||
line-height: 1.25; |
|
||||
} |
|
||||
|
|
||||
div:hover { |
|
||||
cursor: pointer; |
|
||||
background: var(--grey-2); |
|
||||
} |
|
||||
|
|
||||
.primary { |
|
||||
background: var(--ink); |
|
||||
color: var(--white); |
|
||||
} |
|
||||
|
|
||||
.secondary { |
|
||||
background: var(--blue-light); |
|
||||
} |
|
||||
|
|
||||
.tertiary { |
|
||||
background: var(--white); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,20 +0,0 @@ |
|||||
<script> |
|
||||
import { JavaScriptIcon } from "../common/Icons" |
|
||||
// todo: use https://ace.c9.io |
|
||||
export let text = "" |
|
||||
</script> |
|
||||
|
|
||||
<textarea class="uk-textarea" bind:value={text} /> |
|
||||
|
|
||||
<style> |
|
||||
textarea { |
|
||||
padding: 10px; |
|
||||
margin-top: 5px; |
|
||||
margin-bottom: 10px; |
|
||||
background: var(--grey-7); |
|
||||
color: var(--white); |
|
||||
font-family: "Courier New", Courier, monospace; |
|
||||
height: 200px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,13 +0,0 @@ |
|||||
<script> |
|
||||
export let name = "" |
|
||||
</script> |
|
||||
|
|
||||
<div> |
|
||||
<h4>Coming Sometime: {name}</h4> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
h4 { |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,45 +0,0 @@ |
|||||
<script> |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
import Select from "../common/Select.svelte" |
|
||||
|
|
||||
export let selected |
|
||||
export let label |
|
||||
export let options |
|
||||
export let valueMember |
|
||||
export let textMember |
|
||||
export let multiple = false |
|
||||
export let width = "medium" |
|
||||
export let size = "small" |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
</script> |
|
||||
|
|
||||
<div class="uk-margin"> |
|
||||
<label class="uk-form-label">{label}</label> |
|
||||
<div class="uk-form-controls"> |
|
||||
{#if multiple} |
|
||||
<Select |
|
||||
class="uk-select uk-form-width-{width} uk-form-{size}" |
|
||||
multiple |
|
||||
bind:value={selected} |
|
||||
on:change> |
|
||||
{#each options as option} |
|
||||
<option value={!valueMember ? option : valueMember(option)}> |
|
||||
{!textMember ? option : textMember(option)} |
|
||||
</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
{:else} |
|
||||
<Select |
|
||||
class="uk-select uk-form-width-{width} uk-form-{size}" |
|
||||
bind:value={selected} |
|
||||
on:change> |
|
||||
{#each options as option} |
|
||||
<option value={!valueMember ? option : valueMember(option)}> |
|
||||
{!textMember ? option : textMember(option)} |
|
||||
</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import { buildStyle } from "../../helpers.js" |
|
||||
export let value = "" |
|
||||
export let name = "" |
|
||||
export let textAlign = "left" |
|
||||
export let width = "160px" |
|
||||
export let placeholder = "" |
|
||||
export let suffix = "" |
|
||||
export let onChange = val => {} |
|
||||
|
|
||||
let centerPlaceholder = textAlign === "center" |
|
||||
|
|
||||
let style = buildStyle({ width, textAlign }) |
|
||||
|
|
||||
function handleChange(val) { |
|
||||
value = val |
|
||||
let _value = value !== "auto" ? value + suffix : value |
|
||||
onChange(_value) |
|
||||
} |
|
||||
|
|
||||
$: displayValue = |
|
||||
suffix && value && value.endsWith(suffix) |
|
||||
? value.replace(new RegExp(`${suffix}$`), "") |
|
||||
: value || "" |
|
||||
</script> |
|
||||
|
|
||||
<input |
|
||||
{name} |
|
||||
class:centerPlaceholder |
|
||||
type="text" |
|
||||
value={displayValue} |
|
||||
{placeholder} |
|
||||
{style} |
|
||||
on:change={e => handleChange(e.target.value)} /> |
|
||||
|
|
||||
<style> |
|
||||
input { |
|
||||
/* width: 32px; */ |
|
||||
height: 36px; |
|
||||
font-size: 14px; |
|
||||
font-weight: 400; |
|
||||
margin: 0px 0px 0px 2px; |
|
||||
color: var(--ink); |
|
||||
padding: 0px 8px; |
|
||||
font-family: inter; |
|
||||
width: 164px; |
|
||||
box-sizing: border-box; |
|
||||
background-color: var(--grey-2); |
|
||||
border-radius: 4px; |
|
||||
border: 1px solid var(--grey-2); |
|
||||
outline: none; |
|
||||
} |
|
||||
|
|
||||
input::placeholder { |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.centerPlaceholder::placeholder { |
|
||||
text-align: center; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,50 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import Input from "../Input.svelte" |
|
||||
|
|
||||
export let meta = [] |
|
||||
export let label = "" |
|
||||
export let value = ["0", "0", "0", "0"] |
|
||||
export let suffix = "" |
|
||||
|
|
||||
export let onChange = () => {} |
|
||||
|
|
||||
function handleChange(val, idx) { |
|
||||
value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val) |
|
||||
|
|
||||
value = value |
|
||||
let _value = value.map(v => |
|
||||
suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v |
|
||||
) |
|
||||
onChange(_value) |
|
||||
} |
|
||||
|
|
||||
$: displayValues = |
|
||||
value && suffix |
|
||||
? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) |
|
||||
: value || [] |
|
||||
</script> |
|
||||
|
|
||||
<div class="input-container"> |
|
||||
<div class="label">{label}</div> |
|
||||
<div class="inputs-group"> |
|
||||
{#each meta as m, i} |
|
||||
<Input |
|
||||
width="37px" |
|
||||
textAlign="center" |
|
||||
placeholder={m.placeholder || ''} |
|
||||
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]} |
|
||||
onChange={value => handleChange(value || 0, i)} /> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.label { |
|
||||
flex: 0; |
|
||||
} |
|
||||
|
|
||||
.inputs-group { |
|
||||
flex: 1; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,23 +0,0 @@ |
|||||
<button on:click> |
|
||||
<slot>+</slot> |
|
||||
</button> |
|
||||
|
|
||||
<style> |
|
||||
button { |
|
||||
cursor: pointer; |
|
||||
outline: none; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
min-width: 1.8rem; |
|
||||
min-height: 1.8rem; |
|
||||
padding-bottom: 10px; |
|
||||
|
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
font-size: 1.2rem; |
|
||||
font-weight: 600; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,65 +0,0 @@ |
|||||
<script> |
|
||||
import getIcon from "./icon" |
|
||||
|
|
||||
export let icon |
|
||||
export let value |
|
||||
</script> |
|
||||
|
|
||||
<div class="select-container"> |
|
||||
{#if icon} |
|
||||
<i class={icon} /> |
|
||||
{/if} |
|
||||
<select class:adjusted={icon} on:change bind:value> |
|
||||
<slot /> |
|
||||
</select> |
|
||||
<span class="arrow"> |
|
||||
{@html getIcon('chevron-down', '24')} |
|
||||
</span> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.select-container { |
|
||||
font-size: 14px; |
|
||||
position: relative; |
|
||||
border: var(--grey-4) 1px solid; |
|
||||
} |
|
||||
|
|
||||
.adjusted { |
|
||||
padding-left: 30px; |
|
||||
} |
|
||||
|
|
||||
i { |
|
||||
position: absolute; |
|
||||
left: 10px; |
|
||||
top: 10px; |
|
||||
} |
|
||||
|
|
||||
select { |
|
||||
height: 40px; |
|
||||
display: block; |
|
||||
font-family: sans-serif; |
|
||||
font-weight: 400; |
|
||||
font-size: 14px; |
|
||||
color: var(--ink); |
|
||||
padding: 0 40px 0px 20px; |
|
||||
width: 100%; |
|
||||
max-width: 100%; |
|
||||
box-sizing: border-box; |
|
||||
margin: 0; |
|
||||
-moz-appearance: none; |
|
||||
-webkit-appearance: none; |
|
||||
appearance: none; |
|
||||
background: var(--white); |
|
||||
} |
|
||||
|
|
||||
.arrow { |
|
||||
position: absolute; |
|
||||
right: 10px; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
pointer-events: none; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,33 +0,0 @@ |
|||||
<script> |
|
||||
export let text = "" |
|
||||
export let label = "" |
|
||||
export let width = "medium" |
|
||||
export let size = "small" |
|
||||
export let margin = true |
|
||||
export let infoText = "" |
|
||||
export let hasError = false |
|
||||
export let disabled = false |
|
||||
</script> |
|
||||
|
|
||||
<div class:uk-margin={margin}> |
|
||||
<label class="uk-form-label">{label}</label> |
|
||||
<div class="uk-form-controls"> |
|
||||
<input |
|
||||
data-cy={label} |
|
||||
class="budibase__input" |
|
||||
class:uk-form-danger={hasError} |
|
||||
on:change |
|
||||
bind:value={text} |
|
||||
{disabled} /> |
|
||||
</div> |
|
||||
{#if infoText} |
|
||||
<div class="info-text">{infoText}</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.info-text { |
|
||||
font-size: 0.7rem; |
|
||||
color: var(--secondary50); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,16 +0,0 @@ |
|||||
<script> |
|
||||
import RecordCard from "./RecordCard.svelte" |
|
||||
|
|
||||
export let record = {} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<div class="title">{record.name}</div> |
|
||||
<div class="inner"> |
|
||||
<div class="node-path">{record.nodeKey()}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,95 +0,0 @@ |
|||||
<script> |
|
||||
import { tick, onMount } from "svelte" |
|
||||
import { goto } from "@sveltech/routify" |
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import api from "builderStore/api" |
|
||||
import { CheckIcon } from "../common/Icons" |
|
||||
|
|
||||
$: instances = $store.appInstances |
|
||||
|
|
||||
async function selectDatabase(database) { |
|
||||
backendUiStore.actions.database.select(database) |
|
||||
} |
|
||||
|
|
||||
async function deleteDatabase(database) { |
|
||||
const DELETE_DATABASE_URL = `/api/instances/${database.name}` |
|
||||
const response = await api.delete(DELETE_DATABASE_URL) |
|
||||
store.update(state => { |
|
||||
state.appInstances = state.appInstances.filter( |
|
||||
db => db._id !== database._id |
|
||||
) |
|
||||
return state |
|
||||
}) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<ul> |
|
||||
{#each $store.appInstances as database} |
|
||||
<li> |
|
||||
<span class="icon"> |
|
||||
{#if database._id === $backendUiStore.selectedDatabase._id} |
|
||||
<CheckIcon /> |
|
||||
{/if} |
|
||||
</span> |
|
||||
<button |
|
||||
class:active={database._id === $backendUiStore.selectedDatabase._id} |
|
||||
on:click={() => { |
|
||||
$goto(`./database/${database._id}`), selectDatabase(database) |
|
||||
}}> |
|
||||
{database.name} |
|
||||
</button> |
|
||||
<i |
|
||||
class="ri-delete-bin-7-line hoverable alignment" |
|
||||
on:click={() => deleteDatabase(database)} /> |
|
||||
</li> |
|
||||
{/each} |
|
||||
</ul> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
font-size: 13px; |
|
||||
color: var(--ink); |
|
||||
position: relative; |
|
||||
padding-left: 20px; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
list-style: none; |
|
||||
} |
|
||||
|
|
||||
.alignment { |
|
||||
margin-left: auto; |
|
||||
padding-right: 20px; |
|
||||
} |
|
||||
|
|
||||
li { |
|
||||
margin: 0px 0px 10px 0px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
margin: 0 0 0 6px; |
|
||||
padding: 0; |
|
||||
border: none; |
|
||||
font-size: 13px; |
|
||||
outline: none; |
|
||||
cursor: pointer; |
|
||||
background: rgba(0, 0, 0, 0); |
|
||||
text-rendering: optimizeLegibility; |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
display: inline-block; |
|
||||
width: 14px; |
|
||||
color: #333; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,82 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import api from "builderStore/api" |
|
||||
import getIcon from "../common/icon" |
|
||||
import { CheckIcon } from "../common/Icons" |
|
||||
|
|
||||
const getPage = (s, name) => { |
|
||||
const props = s.pages[name] |
|
||||
return { name, props } |
|
||||
} |
|
||||
|
|
||||
$: currentAppInfo = { |
|
||||
name: $store.name, |
|
||||
} |
|
||||
|
|
||||
async function fetchUsers() { |
|
||||
const FETCH_USERS_URL = `/api/users` |
|
||||
const response = await api.get(FETCH_USERS_URL) |
|
||||
const users = await response.json() |
|
||||
backendUiStore.update(state => { |
|
||||
state.users = users |
|
||||
return state |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
onMount(fetchUsers) |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
<ul> |
|
||||
{#each $backendUiStore.users as user} |
|
||||
<li> |
|
||||
<i class="ri-user-4-line" /> |
|
||||
<button class:active={user.username === $store.currentUserName}> |
|
||||
{user.name} |
|
||||
</button> |
|
||||
</li> |
|
||||
{/each} |
|
||||
</ul> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
padding-bottom: 10px; |
|
||||
font-size: 0.9rem; |
|
||||
color: var(--secondary50); |
|
||||
font-weight: bold; |
|
||||
position: relative; |
|
||||
padding-left: 1.8rem; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
list-style: none; |
|
||||
} |
|
||||
|
|
||||
li { |
|
||||
margin: 0.5rem 0; |
|
||||
} |
|
||||
|
|
||||
button { |
|
||||
margin: 0 0 0 6px; |
|
||||
padding: 0; |
|
||||
border: none; |
|
||||
font-size: 13px; |
|
||||
outline: none; |
|
||||
cursor: pointer; |
|
||||
background: rgba(0, 0, 0, 0); |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
display: inline-block; |
|
||||
width: 14px; |
|
||||
color: #333; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,111 +0,0 @@ |
|||||
<script> |
|
||||
import { store } from "builderStore" |
|
||||
import UIkit from "uikit" |
|
||||
import ActionButton from "components/common/ActionButton.svelte" |
|
||||
import ButtonGroup from "components/common/ButtonGroup.svelte" |
|
||||
import CodeMirror from "codemirror" |
|
||||
import "codemirror/mode/javascript/javascript.js" |
|
||||
|
|
||||
export let onCodeChanged |
|
||||
export let code |
|
||||
|
|
||||
export const show = () => { |
|
||||
UIkit.modal(codeModal).show() |
|
||||
} |
|
||||
|
|
||||
let codeModal |
|
||||
let editor |
|
||||
let cmInstance |
|
||||
|
|
||||
$: currentCode = code |
|
||||
$: originalCode = code |
|
||||
$: { |
|
||||
if (editor) { |
|
||||
if (!cmInstance) { |
|
||||
cmInstance = CodeMirror.fromTextArea(editor, { |
|
||||
mode: "javascript", |
|
||||
lineNumbers: false, |
|
||||
lineWrapping: true, |
|
||||
smartIndent: true, |
|
||||
matchBrackets: true, |
|
||||
readOnly: false, |
|
||||
}) |
|
||||
cmInstance.on("change", () => (currentCode = cmInstance.getValue())) |
|
||||
} |
|
||||
cmInstance.focus() |
|
||||
cmInstance.setValue(code || "") |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const cancel = () => { |
|
||||
UIkit.modal(codeModal).hide() |
|
||||
currentCode = originalCode |
|
||||
} |
|
||||
|
|
||||
const save = () => { |
|
||||
originalCode = currentCode |
|
||||
onCodeChanged(currentCode) |
|
||||
UIkit.modal(codeModal).hide() |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={codeModal} uk-modal> |
|
||||
<div class="uk-modal-dialog" uk-overflow-auto> |
|
||||
|
|
||||
<div class="uk-modal-header"> |
|
||||
<h3>Code</h3> |
|
||||
</div> |
|
||||
|
|
||||
<div class="uk-modal-body uk-form-horizontal"> |
|
||||
|
|
||||
<p> |
|
||||
Use the code box below to control how this component is displayed, with |
|
||||
javascript. |
|
||||
</p> |
|
||||
|
|
||||
<div> |
|
||||
<div class="editor-code-surround"> |
|
||||
function(render, context, state, route) {'{'} |
|
||||
</div> |
|
||||
<div class="editor"> |
|
||||
<textarea bind:this={editor} /> |
|
||||
</div> |
|
||||
<div class="editor-code-surround">{'}'}</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="uk-modal-footer"> |
|
||||
<ButtonGroup> |
|
||||
<ActionButton primary on:click={save}>Save</ActionButton> |
|
||||
<ActionButton alert on:click={cancel}>Close</ActionButton> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
h3 { |
|
||||
text-transform: uppercase; |
|
||||
font-size: 13px; |
|
||||
font-weight: 700; |
|
||||
color: #8997ab; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
font-size: 13px; |
|
||||
color: #333; |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
|
|
||||
.editor { |
|
||||
border-style: dotted; |
|
||||
border-width: 1px; |
|
||||
border-color: gainsboro; |
|
||||
padding: 10px 30px; |
|
||||
} |
|
||||
|
|
||||
.editor-code-surround { |
|
||||
font-family: "Courier New", Courier, monospace; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,320 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount, createEventDispatcher } from "svelte" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import Swatch from "./Swatch.svelte" |
|
||||
import CheckedBackground from "./CheckedBackground.svelte" |
|
||||
import { buildStyle } from "./helpers.js" |
|
||||
import { |
|
||||
getColorFormat, |
|
||||
convertToHSVA, |
|
||||
convertHsvaToFormat, |
|
||||
} from "./utils.js" |
|
||||
import Slider from "./Slider.svelte" |
|
||||
import Palette from "./Palette.svelte" |
|
||||
import ButtonGroup from "./ButtonGroup.svelte" |
|
||||
import Input from "./Input.svelte" |
|
||||
import Portal from "./Portal.svelte" |
|
||||
|
|
||||
export let value = "#3ec1d3ff" |
|
||||
export let open = false |
|
||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console |
|
||||
export let disableSwatches = false |
|
||||
export let format = "hexa" |
|
||||
export let style = "" |
|
||||
export let pickerHeight = 0 |
|
||||
export let pickerWidth = 0 |
|
||||
|
|
||||
let colorPicker = null |
|
||||
let adder = null |
|
||||
|
|
||||
let h = null |
|
||||
let s = null |
|
||||
let v = null |
|
||||
let a = null |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
onMount(() => { |
|
||||
if (!swatches.length > 0) { |
|
||||
//Don't use locally stored recent colors if swatches have been passed as props |
|
||||
getRecentColors() |
|
||||
} |
|
||||
|
|
||||
if (colorPicker) { |
|
||||
colorPicker.focus() |
|
||||
} |
|
||||
|
|
||||
if (format) { |
|
||||
convertAndSetHSVA() |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
function getRecentColors() { |
|
||||
let colorStore = localStorage.getItem("cp:recent-colors") |
|
||||
if (colorStore) { |
|
||||
swatches = JSON.parse(colorStore) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function handleEscape(e) { |
|
||||
if (open && e.key === "Escape") { |
|
||||
open = false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function setRecentColor(color) { |
|
||||
if (swatches.length === 12) { |
|
||||
swatches.splice(0, 1) |
|
||||
} |
|
||||
if (!swatches.includes(color)) { |
|
||||
swatches = [...swatches, color] |
|
||||
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches)) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function convertAndSetHSVA() { |
|
||||
let hsva = convertToHSVA(value, format) |
|
||||
setHSVA(hsva) |
|
||||
} |
|
||||
|
|
||||
function setHSVA([hue, sat, val, alpha]) { |
|
||||
h = hue |
|
||||
s = sat |
|
||||
v = val |
|
||||
a = alpha |
|
||||
} |
|
||||
|
|
||||
//fired by choosing a color from the palette |
|
||||
function setSaturationAndValue({ detail }) { |
|
||||
s = detail.s |
|
||||
v = detail.v |
|
||||
value = convertHsvaToFormat([h, s, v, a], format) |
|
||||
dispatchValue() |
|
||||
} |
|
||||
|
|
||||
function setHue({ color, isDrag }) { |
|
||||
h = color |
|
||||
value = convertHsvaToFormat([h, s, v, a], format) |
|
||||
if (!isDrag) { |
|
||||
dispatchValue() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function setAlpha({ color, isDrag }) { |
|
||||
a = color === "1.00" ? "1" : color |
|
||||
value = convertHsvaToFormat([h, s, v, a], format) |
|
||||
if (!isDrag) { |
|
||||
dispatchValue() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function dispatchValue() { |
|
||||
dispatch("change", value) |
|
||||
} |
|
||||
|
|
||||
function changeFormatAndConvert(f) { |
|
||||
format = f |
|
||||
value = convertHsvaToFormat([h, s, v, a], format) |
|
||||
} |
|
||||
|
|
||||
function handleColorInput(text) { |
|
||||
let format = getColorFormat(text) |
|
||||
if (format) { |
|
||||
value = text |
|
||||
convertAndSetHSVA() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function dispatchInputChange() { |
|
||||
if (format) { |
|
||||
dispatchValue() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function addSwatch() { |
|
||||
if (format) { |
|
||||
dispatch("addswatch", value) |
|
||||
setRecentColor(value) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function removeSwatch(idx) { |
|
||||
let removedSwatch = swatches.splice(idx, 1) |
|
||||
swatches = swatches |
|
||||
dispatch("removeswatch", removedSwatch) |
|
||||
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches)) |
|
||||
} |
|
||||
|
|
||||
function applySwatch(color) { |
|
||||
if (value !== color) { |
|
||||
format = getColorFormat(color) |
|
||||
if (format) { |
|
||||
value = color |
|
||||
convertAndSetHSVA() |
|
||||
dispatchValue() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : "" |
|
||||
$: selectedColorStyle = buildStyle({ background: value, border }) |
|
||||
$: shrink = swatches.length > 0 |
|
||||
</script> |
|
||||
|
|
||||
<Portal> |
|
||||
<div |
|
||||
class="colorpicker-container" |
|
||||
transition:fade |
|
||||
bind:this={colorPicker} |
|
||||
{style} |
|
||||
tabindex="0" |
|
||||
on:keydown={handleEscape} |
|
||||
bind:clientHeight={pickerHeight} |
|
||||
bind:clientWidth={pickerWidth}> |
|
||||
|
|
||||
<div class="palette-panel"> |
|
||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} /> |
|
||||
</div> |
|
||||
|
|
||||
<div class="control-panel"> |
|
||||
<div class="alpha-hue-panel"> |
|
||||
<div> |
|
||||
<CheckedBackground borderRadius="50%" backgroundSize="8px"> |
|
||||
<div class="selected-color" style={selectedColorStyle} /> |
|
||||
</CheckedBackground> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Slider |
|
||||
type="hue" |
|
||||
value={h} |
|
||||
on:change={hue => setHue(hue.detail)} |
|
||||
on:dragend={dispatchValue} /> |
|
||||
|
|
||||
<CheckedBackground borderRadius="10px" backgroundSize="7px"> |
|
||||
<Slider |
|
||||
type="alpha" |
|
||||
value={a} |
|
||||
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)} |
|
||||
on:dragend={dispatchValue} /> |
|
||||
</CheckedBackground> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
{#if !disableSwatches} |
|
||||
<div transition:fade class="swatch-panel"> |
|
||||
{#if swatches.length > 0} |
|
||||
{#each swatches as color, idx} |
|
||||
<Swatch |
|
||||
{color} |
|
||||
on:click={() => applySwatch(color)} |
|
||||
on:removeswatch={() => removeSwatch(idx)} /> |
|
||||
{/each} |
|
||||
{/if} |
|
||||
{#if swatches.length !== 12} |
|
||||
<div |
|
||||
bind:this={adder} |
|
||||
transition:fade |
|
||||
class="adder" |
|
||||
on:click={addSwatch} |
|
||||
class:shrink> |
|
||||
<span>+</span> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
<div class="format-input-panel"> |
|
||||
<ButtonGroup {format} onclick={changeFormatAndConvert} /> |
|
||||
<Input |
|
||||
{value} |
|
||||
on:input={event => handleColorInput(event.target.value)} |
|
||||
on:change={dispatchInputChange} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</Portal> |
|
||||
|
|
||||
<style> |
|
||||
.colorpicker-container { |
|
||||
position: absolute; |
|
||||
outline: none; |
|
||||
z-index: 3; |
|
||||
display: flex; |
|
||||
font-size: 11px; |
|
||||
font-weight: 400; |
|
||||
flex-direction: column; |
|
||||
margin: 5px 0px; |
|
||||
height: auto; |
|
||||
width: 220px; |
|
||||
background: #ffffff; |
|
||||
border-radius: 2px; |
|
||||
box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), |
|
||||
0 0 1em 0 rgba(0, 0, 0, 0.03); |
|
||||
} |
|
||||
|
|
||||
.palette-panel { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.control-panel { |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
padding: 8px; |
|
||||
background: white; |
|
||||
border: 1px solid #d2d2d2; |
|
||||
color: #777373; |
|
||||
} |
|
||||
|
|
||||
.alpha-hue-panel { |
|
||||
display: grid; |
|
||||
grid-template-columns: 25px 1fr; |
|
||||
grid-gap: 15px; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.selected-color { |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.swatch-panel { |
|
||||
flex: 0 0 15px; |
|
||||
display: flex; |
|
||||
flex-flow: row wrap; |
|
||||
justify-content: flex-start; |
|
||||
padding: 0 5px; |
|
||||
max-height: 56px; |
|
||||
} |
|
||||
|
|
||||
.adder { |
|
||||
flex: 1; |
|
||||
height: 20px; |
|
||||
display: flex; |
|
||||
transition: flex 0.5s; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
background: #f1f3f4; |
|
||||
cursor: pointer; |
|
||||
border: 1px solid #d4d4d4; |
|
||||
border-radius: 8px; |
|
||||
margin-left: 5px; |
|
||||
margin-top: 3px; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.shrink { |
|
||||
flex: 0 0 20px; |
|
||||
} |
|
||||
|
|
||||
.format-input-panel { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
padding-top: 3px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,157 +0,0 @@ |
|||||
<script> |
|
||||
import Colorpicker from "./Colorpicker.svelte" |
|
||||
import CheckedBackground from "./CheckedBackground.svelte" |
|
||||
import { createEventDispatcher, beforeUpdate } from "svelte" |
|
||||
|
|
||||
import { buildStyle } from "./helpers.js" |
|
||||
import { fade } from "svelte/transition" |
|
||||
import { getColorFormat } from "./utils.js" |
|
||||
|
|
||||
export let value = "#3ec1d3ff" |
|
||||
export let swatches = [] |
|
||||
export let disableSwatches = false |
|
||||
export let open = false |
|
||||
export let width = "25px" |
|
||||
export let height = "25px" |
|
||||
|
|
||||
let format = "hexa" |
|
||||
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 } |
|
||||
let positionSide = "top" |
|
||||
let colorPreview = null |
|
||||
|
|
||||
let previewHeight = null |
|
||||
let previewWidth = null |
|
||||
let pickerWidth = 0 |
|
||||
let pickerHeight = 0 |
|
||||
|
|
||||
let errorMsg = null |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
beforeUpdate(() => { |
|
||||
format = getColorFormat(value) |
|
||||
if (!format) { |
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value` |
|
||||
console.error(errorMsg) |
|
||||
} else { |
|
||||
errorMsg = null |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
function openColorpicker(event) { |
|
||||
if (colorPreview) { |
|
||||
open = true |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function onColorChange(color) { |
|
||||
value = color.detail |
|
||||
dispatch("change", color.detail) |
|
||||
} |
|
||||
|
|
||||
$: if (open && colorPreview) { |
|
||||
const { |
|
||||
top: spaceAbove, |
|
||||
width, |
|
||||
bottom, |
|
||||
right, |
|
||||
left, |
|
||||
} = colorPreview.getBoundingClientRect() |
|
||||
|
|
||||
const spaceBelow = window.innerHeight - bottom |
|
||||
const previewCenter = previewWidth / 2 |
|
||||
|
|
||||
let y, x |
|
||||
|
|
||||
if (spaceAbove > spaceBelow) { |
|
||||
positionSide = "bottom" |
|
||||
y = window.innerHeight - spaceAbove |
|
||||
} else { |
|
||||
positionSide = "top" |
|
||||
y = bottom |
|
||||
} |
|
||||
|
|
||||
x = left + previewCenter - pickerWidth / 2 |
|
||||
|
|
||||
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) } |
|
||||
} |
|
||||
|
|
||||
$: previewStyle = buildStyle({ width, height, background: value }) |
|
||||
$: errorPreviewStyle = buildStyle({ width, height }) |
|
||||
$: pickerStyle = buildStyle({ |
|
||||
[positionSide]: `${dimensions[positionSide]}px`, |
|
||||
left: `${dimensions.left}px`, |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<div class="color-preview-container"> |
|
||||
{#if !errorMsg} |
|
||||
<CheckedBackground borderRadius="3px" backgroundSize="8px"> |
|
||||
<div |
|
||||
bind:this={colorPreview} |
|
||||
bind:clientHeight={previewHeight} |
|
||||
bind:clientWidth={previewWidth} |
|
||||
class="color-preview" |
|
||||
style={previewStyle} |
|
||||
on:click={openColorpicker} /> |
|
||||
</CheckedBackground> |
|
||||
|
|
||||
{#if open} |
|
||||
<Colorpicker |
|
||||
style={pickerStyle} |
|
||||
on:change={onColorChange} |
|
||||
on:addswatch |
|
||||
on:removeswatch |
|
||||
bind:format |
|
||||
bind:value |
|
||||
bind:pickerHeight |
|
||||
bind:pickerWidth |
|
||||
bind:open |
|
||||
{swatches} |
|
||||
{disableSwatches} /> |
|
||||
<div on:click|self={() => (open = false)} class="overlay" /> |
|
||||
{/if} |
|
||||
{:else} |
|
||||
<div class="color-preview preview-error" style={errorPreviewStyle}> |
|
||||
<span>×</span> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.color-preview-container { |
|
||||
display: flex; |
|
||||
flex-flow: row nowrap; |
|
||||
height: fit-content; |
|
||||
} |
|
||||
|
|
||||
.color-preview { |
|
||||
cursor: pointer; |
|
||||
border-radius: 3px; |
|
||||
border: 1px solid #dedada; |
|
||||
} |
|
||||
|
|
||||
.preview-error { |
|
||||
background: #cccccc; |
|
||||
color: #808080; |
|
||||
text-align: center; |
|
||||
font-size: 18px; |
|
||||
cursor: not-allowed; |
|
||||
} |
|
||||
|
|
||||
/* .picker-container { |
|
||||
position: absolute; |
|
||||
z-index: 3; |
|
||||
width: fit-content; |
|
||||
height: fit-content; |
|
||||
} */ |
|
||||
|
|
||||
.overlay { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 2; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,37 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
|
|
||||
export let target = document.body |
|
||||
|
|
||||
let targetEl |
|
||||
let portal |
|
||||
let componentInstance |
|
||||
|
|
||||
onMount(() => { |
|
||||
if (typeof target === "string") { |
|
||||
targetEl = document.querySelector(target) |
|
||||
// Force exit |
|
||||
if (targetEl === null) { |
|
||||
return () => {} |
|
||||
} |
|
||||
} else if (target instanceof HTMLElement) { |
|
||||
targetEl = target |
|
||||
} else { |
|
||||
throw new TypeError( |
|
||||
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.` |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
portal = document.createElement("div") |
|
||||
targetEl.appendChild(portal) |
|
||||
portal.appendChild(componentInstance) |
|
||||
|
|
||||
return () => { |
|
||||
targetEl.removeChild(portal) |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={componentInstance}> |
|
||||
<slot /> |
|
||||
</div> |
|
||||
@ -1,59 +0,0 @@ |
|||||
<script> |
|
||||
import { searchAllComponents } from "./pagesParsing/searchComponents" |
|
||||
import { store } from "../builderStore" |
|
||||
|
|
||||
export let onComponentChosen = () => {} |
|
||||
|
|
||||
let phrase = "" |
|
||||
|
|
||||
components = $store.components |
|
||||
|
|
||||
$: filteredComponents = !phrase ? [] : searchAllComponents(components, phrase) |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<form on:submit|preventDefault class="uk-search uk-search-large"> |
|
||||
<span uk-search-icon /> |
|
||||
<input |
|
||||
class="uk-search-input" |
|
||||
type="search" |
|
||||
placeholder="Based on component..." |
|
||||
bind:value={phrase} /> |
|
||||
</form> |
|
||||
|
|
||||
<div> |
|
||||
{#each filteredComponents as component} |
|
||||
<div class="component" on:click={() => onComponentChosen(component)}> |
|
||||
<div class="title">{component.name}</div> |
|
||||
<div class="description">{component.description}</div> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.component { |
|
||||
padding: 5px; |
|
||||
border-style: solid; |
|
||||
border-width: 0 0 1px 0; |
|
||||
border-color: var(--grey-1); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.component:hover { |
|
||||
background-color: var(--primary10); |
|
||||
} |
|
||||
|
|
||||
.component > .title { |
|
||||
font-size: 13pt; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.component > .description { |
|
||||
font-size: 10pt; |
|
||||
color: var(--blue); |
|
||||
font-style: italic; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,90 +0,0 @@ |
|||||
<script> |
|
||||
import PropsView from "./PropsView.svelte" |
|
||||
import { store } from "../builderStore" |
|
||||
import Textbox from "../common/Textbox.svelte" |
|
||||
import Button from "../common/Button.svelte" |
|
||||
import { LayoutIcon, PaintIcon, TerminalIcon } from "../common/Icons/" |
|
||||
|
|
||||
import { cloneDeep, join, split, last } from "lodash/fp" |
|
||||
import { assign } from "lodash" |
|
||||
|
|
||||
$: component = $store.currentPreviewItem |
|
||||
$: componentInfo = $store.currentComponentInfo |
|
||||
$: components = $store.components |
|
||||
|
|
||||
const updateComponent = doChange => doChange(cloneDeep(component)) |
|
||||
|
|
||||
const onPropsChanged = newProps => { |
|
||||
updateComponent(newComponent => assign(newComponent.props, newProps)) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<ul> |
|
||||
<li> |
|
||||
<button> |
|
||||
<PaintIcon /> |
|
||||
</button> |
|
||||
</li> |
|
||||
<li> |
|
||||
<button> |
|
||||
<LayoutIcon /> |
|
||||
</button> |
|
||||
</li> |
|
||||
<li> |
|
||||
<button> |
|
||||
<TerminalIcon /> |
|
||||
</button> |
|
||||
</li> |
|
||||
</ul> |
|
||||
|
|
||||
<div class="component-props-container"> |
|
||||
<PropsView {componentInfo} {onPropsChanged} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 100%; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.title > div:nth-child(1) { |
|
||||
grid-column-start: name; |
|
||||
color: var(--ink); |
|
||||
} |
|
||||
|
|
||||
.title > div:nth-child(2) { |
|
||||
grid-column-start: actions; |
|
||||
} |
|
||||
|
|
||||
.component-props-container { |
|
||||
flex: 1 1 auto; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
list-style: none; |
|
||||
display: flex; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
li { |
|
||||
margin-right: 20px; |
|
||||
background: none; |
|
||||
border-radius: 5px; |
|
||||
width: 45px; |
|
||||
height: 45px; |
|
||||
} |
|
||||
|
|
||||
li button { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background: none; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
padding: 13px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,170 +0,0 @@ |
|||||
<script> |
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte" |
|
||||
import LayoutTemplateControls from "./LayoutTemplateControls.svelte" |
|
||||
|
|
||||
export let onStyleChanged = () => {} |
|
||||
export let component |
|
||||
|
|
||||
const tbrl = [ |
|
||||
{ placeholder: "T" }, |
|
||||
{ placeholder: "R" }, |
|
||||
{ placeholder: "B" }, |
|
||||
{ placeholder: "L" }, |
|
||||
] |
|
||||
|
|
||||
const se = [{ placeholder: "START" }, { placeholder: "END" }] |
|
||||
|
|
||||
const single = [{ placeholder: "" }] |
|
||||
|
|
||||
$: layout = { |
|
||||
...component._styles.position, |
|
||||
...component._styles.layout, |
|
||||
} |
|
||||
|
|
||||
$: layouts = { |
|
||||
templaterows: ["Grid Rows", single], |
|
||||
templatecolumns: ["Grid Columns", single], |
|
||||
} |
|
||||
|
|
||||
$: display = { |
|
||||
direction: ["Direction", single], |
|
||||
align: ["Align", single], |
|
||||
justify: ["Justify", single], |
|
||||
} |
|
||||
|
|
||||
$: positions = { |
|
||||
column: ["Column", se], |
|
||||
row: ["Row", se], |
|
||||
} |
|
||||
|
|
||||
$: spacing = { |
|
||||
margin: ["Margin", tbrl, "small"], |
|
||||
padding: ["Padding", tbrl, "small"], |
|
||||
} |
|
||||
|
|
||||
$: size = { |
|
||||
height: ["Height", single], |
|
||||
width: ["Width", single], |
|
||||
} |
|
||||
|
|
||||
$: zindex = { |
|
||||
zindex: ["Z-Index", single], |
|
||||
} |
|
||||
|
|
||||
const newValue = n => Array(n).fill("") |
|
||||
</script> |
|
||||
|
|
||||
<h3>Layout</h3> |
|
||||
<div class="layout-pos"> |
|
||||
{#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)} |
|
||||
<div class="grid"> |
|
||||
<h5>{name}:</h5> |
|
||||
<LayoutTemplateControls |
|
||||
onStyleChanged={_value => onStyleChanged('layout', key, _value)} |
|
||||
values={layout[key] || newValue(meta.length)} |
|
||||
propertyName={name} |
|
||||
{meta} |
|
||||
{size} |
|
||||
type="text" /> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<!-- <h4>Positioning</h4> |
|
||||
<div class="layout-pos"> |
|
||||
{#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)} |
|
||||
<div class="grid"> |
|
||||
<h5>{name}:</h5> |
|
||||
<InputGroup |
|
||||
onStyleChanged={_value => onStyleChanged('position', key, _value)} |
|
||||
values={layout[key] || newValue(meta.length)} |
|
||||
{meta} |
|
||||
{size} /> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> --> |
|
||||
|
|
||||
<h3>Spacing</h3> |
|
||||
<div class="layout-spacing"> |
|
||||
{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)} |
|
||||
<div class="grid"> |
|
||||
<h5>{name}:</h5> |
|
||||
<InputGroup |
|
||||
onStyleChanged={_value => onStyleChanged('position', key, _value)} |
|
||||
values={layout[key] || newValue(meta.length)} |
|
||||
{meta} |
|
||||
{size} |
|
||||
type="text" /> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<h3>Size</h3> |
|
||||
<div class="layout-layer"> |
|
||||
{#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)} |
|
||||
<div class="grid"> |
|
||||
<h5>{name}:</h5> |
|
||||
<InputGroup |
|
||||
onStyleChanged={_value => onStyleChanged('position', key, _value)} |
|
||||
values={layout[key] || newValue(meta.length)} |
|
||||
type="text" |
|
||||
{meta} |
|
||||
{size} /> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<h3>Order</h3> |
|
||||
<div class="layout-layer"> |
|
||||
{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)} |
|
||||
<div class="grid"> |
|
||||
<h5>{name}:</h5> |
|
||||
<InputGroup |
|
||||
onStyleChanged={_value => onStyleChanged('position', key, _value)} |
|
||||
values={layout[key] || newValue(meta.length)} |
|
||||
{meta} |
|
||||
{size} /> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
h3 { |
|
||||
text-transform: uppercase; |
|
||||
font-size: 13px; |
|
||||
font-weight: 600; |
|
||||
color: var(--ink); |
|
||||
opacity: 0.6; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
h4 { |
|
||||
text-transform: uppercase; |
|
||||
font-size: 10px; |
|
||||
font-weight: 600; |
|
||||
color: var(--ink); |
|
||||
opacity: 0.4; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
h5 { |
|
||||
font-size: 13px; |
|
||||
font-weight: 400; |
|
||||
color: var(--ink); |
|
||||
opacity: 0.8; |
|
||||
padding-top: 13px; |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
|
|
||||
div > div { |
|
||||
display: grid; |
|
||||
grid-template-rows: 1fr; |
|
||||
grid-gap: 10px; |
|
||||
height: 40px; |
|
||||
margin-bottom: 15px; |
|
||||
} |
|
||||
|
|
||||
.grid { |
|
||||
grid-template-columns: 70px 2fr; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,33 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
export let value = "" |
|
||||
export let onChange = value => {} |
|
||||
export let options = [] |
|
||||
export let initialValue = "" |
|
||||
export let styleBindingProperty = "" |
|
||||
|
|
||||
const handleStyleBind = value => |
|
||||
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {} |
|
||||
|
|
||||
$: isOptionsObject = options.every(o => typeof o === "object") |
|
||||
|
|
||||
onMount(() => { |
|
||||
if (!value && !!initialValue) { |
|
||||
value = initialValue |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<select {value} on:change={ev => onChange(ev.target.value)}> |
|
||||
{#if isOptionsObject} |
|
||||
{#each options as { value, label }} |
|
||||
<option {...handleStyleBind(value || label)} value={value || label}> |
|
||||
{label} |
|
||||
</option> |
|
||||
{/each} |
|
||||
{:else} |
|
||||
{#each options as value} |
|
||||
<option {...handleStyleBind(value)} {value}>{value}</option> |
|
||||
{/each} |
|
||||
{/if} |
|
||||
</select> |
|
||||
@ -1,65 +0,0 @@ |
|||||
<script> |
|
||||
import Textbox from "components/common/Textbox.svelte" |
|
||||
import Dropdown from "components/common/Dropdown.svelte" |
|
||||
import Button from "components/common/Button.svelte" |
|
||||
import { store } from "builderStore" |
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents" |
|
||||
import { pipe } from "components/common/core" |
|
||||
import { filter, find, concat } from "lodash/fp" |
|
||||
|
|
||||
const notSelectedComponent = { name: "(none selected)" } |
|
||||
|
|
||||
$: page = $store.pages[$store.currentPageName] |
|
||||
$: title = page.index.title |
|
||||
$: components = pipe($store.components, [ |
|
||||
filter(store => !isRootComponent($store)), |
|
||||
concat([notSelectedComponent]), |
|
||||
]) |
|
||||
$: entryComponent = components[page.appBody] || notSelectedComponent |
|
||||
|
|
||||
const save = () => { |
|
||||
if (!title || !entryComponent || entryComponent === notSeletedComponent) |
|
||||
return |
|
||||
const page = { |
|
||||
index: { |
|
||||
title, |
|
||||
}, |
|
||||
appBody: entryComponent.name, |
|
||||
} |
|
||||
store.savePage(page) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<h3>{$store.currentPageName}</h3> |
|
||||
|
|
||||
<form on:submit|preventDefault class="uk-form-horizontal"> |
|
||||
<Textbox bind:text={title} label="Title" hasError={!title} /> |
|
||||
<div class="help-text"> |
|
||||
The title of your page, displayed in the bowser tab |
|
||||
</div> |
|
||||
<Dropdown |
|
||||
label="App Entry Component" |
|
||||
options={components} |
|
||||
bind:selected={entryComponent} |
|
||||
textMember={v => v.name} /> |
|
||||
|
|
||||
<div class="help-text"> |
|
||||
The component that will be loaded into the body of the page |
|
||||
</div> |
|
||||
<div style="margin-top: 20px" /> |
|
||||
<Button on:click={save}>Save</Button> |
|
||||
</form> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
padding: 15px; |
|
||||
} |
|
||||
.help-text { |
|
||||
color: var(--grey-2); |
|
||||
font-size: 10pt; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,46 +0,0 @@ |
|||||
<script> |
|
||||
import { store } from "builderStore" |
|
||||
import Checkbox from "../common/Checkbox.svelte" |
|
||||
import Textbox from "../common/Textbox.svelte" |
|
||||
import Dropdown from "../common/Dropdown.svelte" |
|
||||
import StateBindingControl from "./StateBindingControl.svelte" |
|
||||
|
|
||||
export let index |
|
||||
export let prop_name |
|
||||
export let prop_value |
|
||||
export let prop_definition = {} |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
{#if prop_definition.type !== 'event'} |
|
||||
<h5>{prop_name}</h5> |
|
||||
<StateBindingControl |
|
||||
value={prop_value} |
|
||||
type={prop_definition.type || prop_definition} |
|
||||
options={prop_definition.options} |
|
||||
styleBindingProperty={prop_definition.styleBindingProperty} |
|
||||
onChanged={v => store.setComponentProp(prop_name, v)} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
height: 40px; |
|
||||
margin-bottom: 15px; |
|
||||
display: grid; |
|
||||
grid-template-rows: 1fr; |
|
||||
grid-template-columns: 70px 1fr; |
|
||||
grid-gap: 10px; |
|
||||
align-items: baseline; |
|
||||
} |
|
||||
|
|
||||
h5 { |
|
||||
word-wrap: break-word; |
|
||||
font-size: 13px; |
|
||||
font-weight: 400; |
|
||||
color: var(--ink); |
|
||||
opacity: 0.8; |
|
||||
padding-top: 13px; |
|
||||
margin-bottom: 0; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,11 @@ |
|||||
|
<script> |
||||
|
/* |
||||
|
This file exists because of how we pass this control to the |
||||
|
properties panel - via a JS reference, not using svelte tags |
||||
|
... checkout the use of Input in propertyCategories to see what i mean |
||||
|
*/ |
||||
|
import { Input } from "@budibase/bbui" |
||||
|
export let name, value, placeholder, type |
||||
|
</script> |
||||
|
|
||||
|
<Input {name} {value} {placeholder} {type} thin on:change /> |
||||
@ -1,54 +0,0 @@ |
|||||
<script> |
|
||||
import { some, includes, filter } from "lodash/fp" |
|
||||
import Textbox from "../common/Textbox.svelte" |
|
||||
import Dropdown from "../common/Dropdown.svelte" |
|
||||
import PropControl from "./PropControl.svelte" |
|
||||
import IconButton from "../common/IconButton.svelte" |
|
||||
|
|
||||
export let component |
|
||||
export let components |
|
||||
|
|
||||
let errors = [] |
|
||||
const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"] |
|
||||
|
|
||||
$: componentDef = components[component._component] |
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
<form on:submit|preventDefault class="uk-form-stacked form-root"> |
|
||||
{#if componentDef} |
|
||||
{#each Object.entries(componentDef.props) as [prop_name, prop_def], index} |
|
||||
{#if prop_def !== 'event'} |
|
||||
<div class="prop-container"> |
|
||||
<PropControl |
|
||||
{prop_name} |
|
||||
prop_value={component[prop_name]} |
|
||||
prop_definition={prop_def} |
|
||||
{index} |
|
||||
disabled={false} /> |
|
||||
|
|
||||
</div> |
|
||||
{/if} |
|
||||
{/each} |
|
||||
{/if} |
|
||||
</form> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.root { |
|
||||
font-size: 10pt; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.form-root { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
|
|
||||
.prop-container { |
|
||||
flex: 1 1 auto; |
|
||||
min-width: 250px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,63 +0,0 @@ |
|||||
<script> |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import IconButton from "../common/IconButton.svelte" |
|
||||
import Input from "../common/Input.svelte" |
|
||||
|
|
||||
export let value = "" |
|
||||
export let onChanged = () => {} |
|
||||
export let type = "" |
|
||||
export let options = [] |
|
||||
export let styleBindingProperty = "" |
|
||||
|
|
||||
$: bindOptionToStyle = !!styleBindingProperty |
|
||||
</script> |
|
||||
|
|
||||
<div class="unbound-container"> |
|
||||
{#if type === 'bool'} |
|
||||
<div> |
|
||||
<IconButton |
|
||||
icon={value == true ? 'check-square' : 'square'} |
|
||||
size="19" |
|
||||
on:click={() => onChanged(!value)} /> |
|
||||
</div> |
|
||||
{:else if type === 'models'} |
|
||||
<select |
|
||||
class="uk-select uk-form-small" |
|
||||
bind:value |
|
||||
on:change={() => { |
|
||||
onChanged(value) |
|
||||
}}> |
|
||||
{#each $backendUiStore.models || [] as option} |
|
||||
<option value={option}>{option.name}</option> |
|
||||
{/each} |
|
||||
</select> |
|
||||
{:else if type === 'options' || type === 'models'} |
|
||||
<select |
|
||||
class="uk-select uk-form-small" |
|
||||
{value} |
|
||||
on:change={ev => onChanged(ev.target.value)}> |
|
||||
{#each options || [] as option} |
|
||||
{#if bindOptionToStyle} |
|
||||
<option style={`${styleBindingProperty}: ${option};`} value={option}> |
|
||||
{option} |
|
||||
</option> |
|
||||
{:else} |
|
||||
<option value={option}>{option}</option> |
|
||||
{/if} |
|
||||
{/each} |
|
||||
</select> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.unbound-container { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.bound-header > div:nth-child(1) { |
|
||||
flex: 1 0 auto; |
|
||||
width: 30px; |
|
||||
color: var(--secondary50); |
|
||||
padding-left: 5px; |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because it is too large
@ -1,6 +0,0 @@ |
|||||
.DS_Store |
|
||||
node_modules |
|
||||
yarn.lock |
|
||||
package-lock.json |
|
||||
dist/* |
|
||||
public/build |
|
||||
@ -1,3 +0,0 @@ |
|||||
* |
|
||||
!dist/* |
|
||||
!components.json |
|
||||
@ -1,33 +0,0 @@ |
|||||
*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)* |
|
||||
|
|
||||
--- |
|
||||
|
|
||||
# component-template |
|
||||
|
|
||||
A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit): |
|
||||
|
|
||||
```bash |
|
||||
npx degit sveltejs/component-template my-new-component |
|
||||
cd my-new-component |
|
||||
npm install # or yarn |
|
||||
``` |
|
||||
|
|
||||
Your component's source code lives in `src/index.html`. |
|
||||
|
|
||||
TODO |
|
||||
|
|
||||
* [ ] some firm opinions about the best way to test components |
|
||||
* [ ] update `degit` so that it automates some of the setup work |
|
||||
|
|
||||
|
|
||||
## Setting up |
|
||||
|
|
||||
* Run `npm init` (or `yarn init`) |
|
||||
* Replace this README with your own |
|
||||
|
|
||||
|
|
||||
## Consuming components |
|
||||
|
|
||||
Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.** |
|
||||
|
|
||||
For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json. |
|
||||
@ -1,458 +0,0 @@ |
|||||
{ |
|
||||
"_lib": "./dist/index.js", |
|
||||
"_templates": { |
|
||||
"indexDatatable": { |
|
||||
"description": "Datatable based on an Index", |
|
||||
"component": "Datatable" |
|
||||
}, |
|
||||
"recordForm": { |
|
||||
"description": "Form for saving a record", |
|
||||
"component": "Form" |
|
||||
} |
|
||||
}, |
|
||||
"Body1": { |
|
||||
"name": "Body1", |
|
||||
"description": "Sets the font properties as Roboto Body 1", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Body2": { |
|
||||
"name": "Body2", |
|
||||
"description": "Sets the font properties as Roboto Body 2", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Select": { |
|
||||
"name": "Select", |
|
||||
"description": "A material design select (aka Dropdown, aka Combobox)", |
|
||||
"props": { |
|
||||
"onSelect": "event", |
|
||||
"value": "string", |
|
||||
"width": "string", |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": [ |
|
||||
"filled", "outlined" |
|
||||
] |
|
||||
}, |
|
||||
"disabled": "bool", |
|
||||
"required": "bool", |
|
||||
"label": "string", |
|
||||
"helperText": "string", |
|
||||
"persistent": "bool" |
|
||||
} |
|
||||
}, |
|
||||
"List": { |
|
||||
"name": "List", |
|
||||
"description": "A Material Design List Component.", |
|
||||
"props": { |
|
||||
"onSelect": "event", |
|
||||
"singleSelection": "bool", |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": ["one-line", "two-line"], |
|
||||
"default": "one-line" |
|
||||
}, |
|
||||
"inputElement": { |
|
||||
"type": "options", |
|
||||
"options": ["None", "Radiobutton", "Checkbox"], |
|
||||
"default": "None" |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
"ListItem": { |
|
||||
"name": "ListItem", |
|
||||
"description": "Use as item in a 'List' or 'Select' component", |
|
||||
"props": { |
|
||||
"value": "string", |
|
||||
"text": "string", |
|
||||
"secondaryText": "string", |
|
||||
"leadingIcon": "string", |
|
||||
"trailingIcon": "string", |
|
||||
"disabled": "bool", |
|
||||
"dividerAfter": "bool" |
|
||||
} |
|
||||
}, |
|
||||
"Button": { |
|
||||
"name": "Button", |
|
||||
"children": false, |
|
||||
"description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.", |
|
||||
"props": { |
|
||||
"onClick": "event", |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": ["text", "raised", "unelevated", "outlined"], |
|
||||
"default": "text" |
|
||||
}, |
|
||||
"colour": { |
|
||||
"type": "options", |
|
||||
"options": ["primary", "secondary"], |
|
||||
"default": "primary" |
|
||||
}, |
|
||||
"size": { |
|
||||
"type": "options", |
|
||||
"options": ["small", "medium", "large"], |
|
||||
"default": "medium" |
|
||||
}, |
|
||||
"href": "string", |
|
||||
"icon": "string", |
|
||||
"trailingIcon": "bool", |
|
||||
"fullwidth": "bool", |
|
||||
"text": "string", |
|
||||
"disabled": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Caption": { |
|
||||
"name": "Caption", |
|
||||
"description": "Sets the font properties as Roboto Caption", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"BasicCard": { |
|
||||
"name": "BasicCard", |
|
||||
"description": "This is a basic card", |
|
||||
"props": { |
|
||||
"heading": "string", |
|
||||
"subheading": "string", |
|
||||
"content": "string", |
|
||||
"imageUrl": "string", |
|
||||
"button1Text": "string", |
|
||||
"button2Text": "string", |
|
||||
"cardClick": "event", |
|
||||
"button1Click": "event", |
|
||||
"button2Click": "event" |
|
||||
} |
|
||||
}, |
|
||||
"Card": { |
|
||||
"name": "Card", |
|
||||
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children", |
|
||||
"props": { |
|
||||
"width": {"type": "string", "default": "350px"}, |
|
||||
"height": "string", |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": ["standard", "outlined"], |
|
||||
"default": "outlined" |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
"CardBody": { |
|
||||
"name": "CardBody", |
|
||||
"description": "A Material CardBody component. Contains the main content of a Material Card component", |
|
||||
"props": { |
|
||||
"onClick": "event" |
|
||||
} |
|
||||
}, |
|
||||
"CardImage": { |
|
||||
"name": "CardImage", |
|
||||
"description": "An image component for the Material Card component", |
|
||||
"props": { |
|
||||
"displayHorizontal": "bool", |
|
||||
"url": "string", |
|
||||
"title": "string", |
|
||||
"subtitle": "string" |
|
||||
} |
|
||||
}, |
|
||||
"CardHeader": { |
|
||||
"name": "CardHeader", |
|
||||
"description": "Displays a icon, title and subtitle above main body of the Material Card component", |
|
||||
"props": { |
|
||||
"title": "string", |
|
||||
"subtitle": "string", |
|
||||
"icon": "string" |
|
||||
} |
|
||||
}, |
|
||||
"CardFooter": { |
|
||||
"name": "CardFooter", |
|
||||
"description": "Displays buttons / icon buttons as actions for the Material Card component", |
|
||||
"props": { |
|
||||
"padding": "string" |
|
||||
} |
|
||||
}, |
|
||||
"Checkbox": { |
|
||||
"name": "Checkbox", |
|
||||
"description": "A Material Design checkbox. Supports aligning label before or after checkbox.", |
|
||||
"props": { |
|
||||
"onClick": "event", |
|
||||
"id": "string", |
|
||||
"label": "string", |
|
||||
"disabled": "bool", |
|
||||
"alignEnd": "bool", |
|
||||
"indeterminate": "bool", |
|
||||
"checked": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Checkboxgroup": { |
|
||||
"name": "Checkboxgroup", |
|
||||
"description": "A group of material design checkboxes. Supports row and column orientation.", |
|
||||
"props": { |
|
||||
"onChange": "event", |
|
||||
"label":"string", |
|
||||
"orientation": { |
|
||||
"type": "options", |
|
||||
"options": ["row", "column"], |
|
||||
"default": "row" |
|
||||
}, |
|
||||
"disabled": "bool", |
|
||||
"alignEnd": "bool" |
|
||||
} |
|
||||
}, |
|
||||
"Datatable": { |
|
||||
"name": "Datatable", |
|
||||
"description": "A Material Design component to represent tabular data.", |
|
||||
"props": { |
|
||||
"onLoad":"event" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"DatatableHead": { |
|
||||
"name": "DatatableHead", |
|
||||
"description": "Material Design <thead>.", |
|
||||
"props": {} |
|
||||
}, |
|
||||
"DatatableCell": { |
|
||||
"name": "DatatableCell", |
|
||||
"description": "Material Design <td>.", |
|
||||
"props": {} |
|
||||
}, |
|
||||
"DatatableBody": { |
|
||||
"name": "DatatableBody", |
|
||||
"description": "Material Design <tbody>.", |
|
||||
"props": {} |
|
||||
}, |
|
||||
"DatatableRow": { |
|
||||
"name": "DatatableRow", |
|
||||
"description": "Material Design <tr>.", |
|
||||
"props": {} |
|
||||
}, |
|
||||
"DatePicker": { |
|
||||
"name": "DatePicker", |
|
||||
"description": "Material Design DatePicker", |
|
||||
"props": { |
|
||||
"date": "string", |
|
||||
"label": "string", |
|
||||
"onSelect": "event" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H1": { |
|
||||
"name": "H1", |
|
||||
"description": "Sets the font properties as Roboto Headline1", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H2": { |
|
||||
"name": "H2", |
|
||||
"description": "Sets the font properties as Roboto Headline2", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H3": { |
|
||||
"name": "H3", |
|
||||
"description": "Sets the font properties as Roboto Headline3", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H4": { |
|
||||
"name": "H4", |
|
||||
"description": "Sets the font properties as Roboto Headline4", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H5": { |
|
||||
"name": "H5", |
|
||||
"description": "Sets the font properties as Roboto Headline5", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"H6": { |
|
||||
"name": "H6", |
|
||||
"description": "Sets the font properties as Roboto Headline6", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"IconButton": { |
|
||||
"name": "IconButton", |
|
||||
"description": "An icon button component", |
|
||||
"props": { |
|
||||
"onClick": "event", |
|
||||
"disabled": "bool", |
|
||||
"href": "string", |
|
||||
"icon": "string", |
|
||||
"size": { |
|
||||
"type":"options", |
|
||||
"options": ["small", "medium", "large"], |
|
||||
"default": "medium" |
|
||||
} |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Label": { |
|
||||
"name": "Label", |
|
||||
"description": "A simple label component that displays its text in the standard Roboto Material Design font", |
|
||||
"props": { |
|
||||
"text": "string", |
|
||||
"bold": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Menu": { |
|
||||
"name": "Menu", |
|
||||
"description": "A Material Design menu component. Anchor to other components to create a pop-out menu.", |
|
||||
"props": { |
|
||||
"onSelect": "event", |
|
||||
"width": "string", |
|
||||
"open": "bool", |
|
||||
"useFixedPosition": "bool", |
|
||||
"absolutePositionX": "number", |
|
||||
"absolutePositionY": "number" |
|
||||
} |
|
||||
}, |
|
||||
"Overline": { |
|
||||
"name": "Overline", |
|
||||
"description": "Sets the font properties as Roboto Overline", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Radiobutton": { |
|
||||
"name": "Radiobutton", |
|
||||
"description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.", |
|
||||
"props": { |
|
||||
"onClick": "event", |
|
||||
"id": "string", |
|
||||
"label": "string", |
|
||||
"name": "string", |
|
||||
"disabled": "bool", |
|
||||
"alignEnd": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Radiobuttongroup": { |
|
||||
"name": "Radiobuttongroup", |
|
||||
"description": "A Material Design Radiobutton group. Supports row and column orientation.", |
|
||||
"props": { |
|
||||
"onChange": "event", |
|
||||
"label": "string", |
|
||||
"name": "string", |
|
||||
"orientation": { |
|
||||
"type": "options", |
|
||||
"options": ["row", "column"], |
|
||||
"default": "row" |
|
||||
}, |
|
||||
"fullwidth": "bool", |
|
||||
"alignEnd": "bool", |
|
||||
"disabled": "bool" |
|
||||
} |
|
||||
}, |
|
||||
"Sub1": { |
|
||||
"name": "Sub1", |
|
||||
"description": "Sets the font properties as Roboto Subtitle1", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Sub2": { |
|
||||
"name": "Sub2", |
|
||||
"description": "Sets the font properties as Roboto Subtitle2", |
|
||||
"props": { |
|
||||
"text": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Textfield": { |
|
||||
"name": "Textfield", |
|
||||
"description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.", |
|
||||
"props": { |
|
||||
"onChange": "event", |
|
||||
"value": "string", |
|
||||
"label": "string", |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": ["standard", "outlined", "filled"], |
|
||||
"default": "standard" |
|
||||
}, |
|
||||
"disabled": "bool", |
|
||||
"fullwidth": "bool", |
|
||||
"colour": { |
|
||||
"type": "options", |
|
||||
"options": ["primary", "secondary"], |
|
||||
"default": "primary" |
|
||||
}, |
|
||||
"size":{ |
|
||||
"type": "options", |
|
||||
"options": ["small", "medium", "large"], |
|
||||
"default": "medium" |
|
||||
}, |
|
||||
"type": { |
|
||||
"type": "options", |
|
||||
"options": ["text", "password"], |
|
||||
"default": "text" |
|
||||
}, |
|
||||
"required": "bool", |
|
||||
"minLength": "number", |
|
||||
"maxLength": "number", |
|
||||
"helperText": "string", |
|
||||
"placeholder": "string", |
|
||||
"icon": "string", |
|
||||
"trailingIcon": "bool", |
|
||||
"textarea": "bool", |
|
||||
"persistent": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Switch": { |
|
||||
"name": "Switch", |
|
||||
"description": "A material design switch component", |
|
||||
"props": { |
|
||||
"alignEnd": "bool", |
|
||||
"disabled": "bool", |
|
||||
"checked": "bool", |
|
||||
"label": "string", |
|
||||
"id": "string" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
}, |
|
||||
"Slider": { |
|
||||
"name": "Slider", |
|
||||
"description": "A material design slider component", |
|
||||
"props": { |
|
||||
"variant": { |
|
||||
"type": "options", |
|
||||
"options": ["continuous", "discrete"], |
|
||||
"default": "continuous" |
|
||||
}, |
|
||||
"showTicks": "bool", |
|
||||
"min": "number", |
|
||||
"max": "number", |
|
||||
"value": "number", |
|
||||
"step": "number", |
|
||||
"label": "string", |
|
||||
"disabled": "bool" |
|
||||
}, |
|
||||
"tags": [] |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@ -1,59 +0,0 @@ |
|||||
{ |
|
||||
"name": "@budibase/materialdesign-components", |
|
||||
"svelte": "src/index.svelte", |
|
||||
"main": "dist/index.js", |
|
||||
"module": "dist/index.js", |
|
||||
"scripts": { |
|
||||
"build": "rollup -c", |
|
||||
"prepublishOnly": "npm run build", |
|
||||
"testbuild": "rollup -w -c rollup.testconfig.js", |
|
||||
"dev": "run-p start:dev testbuild", |
|
||||
"start:dev": "sirv public --single --dev", |
|
||||
"dev:builder": "rollup -cw" |
|
||||
}, |
|
||||
"devDependencies": { |
|
||||
"@budibase/client": "^0.1.17", |
|
||||
"@budibase/standard-components": "^0.1.17", |
|
||||
"@material/button": "^4.0.0", |
|
||||
"@material/checkbox": "^4.0.0", |
|
||||
"@material/data-table": "4.0.0", |
|
||||
"@material/dialog": "4.0.0", |
|
||||
"@material/form-field": "^4.0.0", |
|
||||
"@material/icon-button": "4.0.0", |
|
||||
"@material/list": "4.0.0", |
|
||||
"@material/menu": "4.0.0", |
|
||||
"@material/radio": "^4.0.0", |
|
||||
"@material/select": "4.0.0", |
|
||||
"@material/slider": "4.0.0", |
|
||||
"@material/switch": "4.0.0", |
|
||||
"@material/textfield": "^4.0.0", |
|
||||
"@nx-js/compiler-util": "^2.0.0", |
|
||||
"bcryptjs": "^2.4.3", |
|
||||
"date-fns": "^2.10.0", |
|
||||
"fs-extra": "^8.1.0", |
|
||||
"lodash": "^4.17.15", |
|
||||
"npm-run-all": "^4.1.5", |
|
||||
"rollup": "^1.11.0", |
|
||||
"rollup-plugin-alias": "^2.2.0", |
|
||||
"rollup-plugin-commonjs": "^10.0.2", |
|
||||
"rollup-plugin-json": "^4.0.0", |
|
||||
"rollup-plugin-livereload": "^1.0.1", |
|
||||
"rollup-plugin-node-resolve": "^5.0.0", |
|
||||
"rollup-plugin-postcss": "^2.0.5", |
|
||||
"rollup-plugin-svelte": "^5.0.0", |
|
||||
"rollup-plugin-terser": "^5.1.1", |
|
||||
"sass": "^1.25.1-test.1", |
|
||||
"shortid": "^2.2.15", |
|
||||
"sirv-cli": "^0.4.4", |
|
||||
"svelte": "^3.12.1" |
|
||||
}, |
|
||||
"keywords": [ |
|
||||
"svelte" |
|
||||
], |
|
||||
"version": "0.1.17", |
|
||||
"license": "MIT", |
|
||||
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691", |
|
||||
"dependencies": { |
|
||||
"@material/card": "4.0.0" |
|
||||
} |
|
||||
} |
|
||||
@ -1,16 +0,0 @@ |
|||||
<!doctype html> |
|
||||
<html> |
|
||||
<head> |
|
||||
<meta charset='utf8'> |
|
||||
<meta name='viewport' content='width=device-width'> |
|
||||
|
|
||||
<title>Budibase-Material Design</title> |
|
||||
<link rel='icon' type='image/png' href='/favicon.png'> |
|
||||
<link rel='stylesheet' href='/build/bundle.css'> |
|
||||
|
|
||||
</head> |
|
||||
|
|
||||
<body> |
|
||||
<script src='/build/bundle.js'></script> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -1,50 +0,0 @@ |
|||||
import svelte from "rollup-plugin-svelte" |
|
||||
import postcss from "rollup-plugin-postcss" |
|
||||
import resolve from "rollup-plugin-node-resolve" |
|
||||
import commonjs from "rollup-plugin-commonjs" |
|
||||
|
|
||||
const postcssOptions = () => ({ |
|
||||
extensions: [".scss", ".sass"], |
|
||||
extract: false, |
|
||||
minimize: true, |
|
||||
use: [ |
|
||||
[ |
|
||||
"sass", |
|
||||
{ |
|
||||
includePaths: ["./node_modules"], |
|
||||
}, |
|
||||
], |
|
||||
], |
|
||||
}) |
|
||||
|
|
||||
const coreExternal = ["shortid"] |
|
||||
|
|
||||
export default { |
|
||||
input: "src/index.js", |
|
||||
output: [ |
|
||||
{ |
|
||||
file: "dist/index.js", |
|
||||
format: "esm", |
|
||||
name: "budibaseStandardComponents", |
|
||||
sourcemap: true, |
|
||||
}, |
|
||||
], |
|
||||
plugins: [ |
|
||||
svelte({ |
|
||||
hydratable: true, |
|
||||
}), |
|
||||
resolve({ |
|
||||
preferBuiltins: true, |
|
||||
browser: true, |
|
||||
dedupe: importee => { |
|
||||
return coreExternal.includes(importee) |
|
||||
}, |
|
||||
}), |
|
||||
commonjs({ |
|
||||
namedExports: { |
|
||||
shortid: ["generate"], |
|
||||
}, |
|
||||
}), |
|
||||
postcss(postcssOptions()), |
|
||||
], |
|
||||
} |
|
||||
@ -1,166 +0,0 @@ |
|||||
import svelte from "rollup-plugin-svelte" |
|
||||
import resolve from "rollup-plugin-node-resolve" |
|
||||
import commonjs from "rollup-plugin-commonjs" |
|
||||
import livereload from "rollup-plugin-livereload" |
|
||||
import { terser } from "rollup-plugin-terser" |
|
||||
import json from "rollup-plugin-json" |
|
||||
import alias from "rollup-plugin-alias" |
|
||||
import postcss from "rollup-plugin-postcss" |
|
||||
import path from "path" |
|
||||
|
|
||||
const aliases = { |
|
||||
resolve: [".js", ".svelte"], |
|
||||
entries: [ |
|
||||
// { find: "@BBMD", replacement: path.resolve(__dirname, "dist/index.js") },
|
|
||||
{ find: "@BBMD", replacement: path.resolve(__dirname, "src/index.js") }, |
|
||||
], |
|
||||
} |
|
||||
|
|
||||
const postcssOptions = () => ({ |
|
||||
extensions: [".scss", ".sass"], |
|
||||
extract: false, |
|
||||
minimize: true, |
|
||||
use: [ |
|
||||
[ |
|
||||
"sass", |
|
||||
{ |
|
||||
includePaths: ["./node_modules"], |
|
||||
}, |
|
||||
], |
|
||||
], |
|
||||
}) |
|
||||
|
|
||||
const production = !process.env.ROLLUP_WATCH |
|
||||
|
|
||||
const lodash_fp_exports = [ |
|
||||
"find", |
|
||||
"isUndefined", |
|
||||
"split", |
|
||||
"max", |
|
||||
"last", |
|
||||
"union", |
|
||||
"reduce", |
|
||||
"isObject", |
|
||||
"cloneDeep", |
|
||||
"some", |
|
||||
"isArray", |
|
||||
"map", |
|
||||
"filter", |
|
||||
"keys", |
|
||||
"isFunction", |
|
||||
"isEmpty", |
|
||||
"countBy", |
|
||||
"join", |
|
||||
"includes", |
|
||||
"flatten", |
|
||||
"constant", |
|
||||
"first", |
|
||||
"intersection", |
|
||||
"take", |
|
||||
"has", |
|
||||
"mapValues", |
|
||||
"isString", |
|
||||
"isBoolean", |
|
||||
"isNull", |
|
||||
"isNumber", |
|
||||
"isObjectLike", |
|
||||
"isDate", |
|
||||
"clone", |
|
||||
"values", |
|
||||
"keyBy", |
|
||||
"isNaN", |
|
||||
"isInteger", |
|
||||
"toNumber", |
|
||||
] |
|
||||
|
|
||||
const lodash_exports = [ |
|
||||
"flow", |
|
||||
"head", |
|
||||
"find", |
|
||||
"each", |
|
||||
"tail", |
|
||||
"findIndex", |
|
||||
"startsWith", |
|
||||
"dropRight", |
|
||||
"takeRight", |
|
||||
"trim", |
|
||||
"split", |
|
||||
"replace", |
|
||||
"merge", |
|
||||
"assign", |
|
||||
] |
|
||||
|
|
||||
const coreExternal = [ |
|
||||
"lodash", |
|
||||
"lodash/fp", |
|
||||
"date-fns", |
|
||||
"lunr", |
|
||||
"safe-buffer", |
|
||||
"shortid", |
|
||||
"@nx-js/compiler-util", |
|
||||
"bcryptjs", |
|
||||
] |
|
||||
|
|
||||
export default { |
|
||||
input: "src/Test/testMain.js", |
|
||||
output: { |
|
||||
sourcemap: true, |
|
||||
format: "iife", |
|
||||
name: "app", |
|
||||
file: "public/build/bundle.js", |
|
||||
globals: { |
|
||||
crypto: "crypto", |
|
||||
}, |
|
||||
}, |
|
||||
plugins: [ |
|
||||
alias(aliases), |
|
||||
svelte({ |
|
||||
// enable run-time checks when not in production
|
|
||||
dev: !production, |
|
||||
// we'll extract any component CSS out into
|
|
||||
// a separate file — better for performance
|
|
||||
css: css => { |
|
||||
css.write("public/build/bundle.css") |
|
||||
}, |
|
||||
|
|
||||
hydratable: true, |
|
||||
}), |
|
||||
|
|
||||
// If you have external dependencies installed from
|
|
||||
// npm, you'll most likely need these plugins. In
|
|
||||
// some cases you'll need additional configuration —
|
|
||||
// consult the documentation for details:
|
|
||||
// https://github.com/rollup/rollup-plugin-commonjs
|
|
||||
resolve({ |
|
||||
browser: true, |
|
||||
dedupe: importee => { |
|
||||
return ( |
|
||||
importee === "svelte" || |
|
||||
importee.startsWith("svelte/") || |
|
||||
coreExternal.includes(importee) |
|
||||
) |
|
||||
}, |
|
||||
preferBuiltins: true, |
|
||||
}), |
|
||||
commonjs({ |
|
||||
namedExports: { |
|
||||
"lodash/fp": lodash_fp_exports, |
|
||||
lodash: lodash_exports, |
|
||||
shortid: ["generate"], |
|
||||
}, |
|
||||
}), |
|
||||
json(), |
|
||||
|
|
||||
// Watch the `public` directory and refresh the
|
|
||||
// browser on changes when not in production
|
|
||||
!production && livereload("public"), |
|
||||
|
|
||||
// If we're building for production (npm run build
|
|
||||
// instead of npm run dev), minify
|
|
||||
production && terser(), |
|
||||
postcss(postcssOptions()), |
|
||||
], |
|
||||
watch: { |
|
||||
clearScreen: false, |
|
||||
}, |
|
||||
} |
|
||||
@ -1,74 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import Icon from "../Common/Icon.svelte" |
|
||||
import ripple from "../Common/Ripple.js" |
|
||||
import ClassBuilder from "../ClassBuilder.js" |
|
||||
|
|
||||
const cb = new ClassBuilder("button", ["primary", "medium", "text"]) |
|
||||
|
|
||||
export let _bb |
|
||||
export let onClick |
|
||||
|
|
||||
export let variant = "text" |
|
||||
export let colour = "primary" |
|
||||
export let size = "medium" |
|
||||
|
|
||||
export let href = "" |
|
||||
export let icon = "" |
|
||||
export let trailingIcon = false |
|
||||
export let fullwidth = false |
|
||||
|
|
||||
export let text = "" |
|
||||
export let disabled = false |
|
||||
|
|
||||
onMount(() => { |
|
||||
let ctx = _bb.getContext("BBMD:button:context") |
|
||||
extras = [ctx] |
|
||||
}) |
|
||||
|
|
||||
let extras = "" |
|
||||
let modifiers = {} |
|
||||
let customs = { size, colour } |
|
||||
|
|
||||
if (!href) modifiers = { variant } |
|
||||
|
|
||||
$: props = { modifiers, customs, extras } |
|
||||
|
|
||||
$: blockClasses = cb.build({ props }) |
|
||||
const labelClass = cb.elem("label") |
|
||||
|
|
||||
const clicked = () => _bb.call(onClick) |
|
||||
|
|
||||
$: renderLeadingIcon = !!icon && !trailingIcon |
|
||||
$: renderTrailingIcon = !!icon && trailingIcon |
|
||||
</script> |
|
||||
|
|
||||
{#if href} |
|
||||
<a class={blockClasses} {href} on:click={clicked}> |
|
||||
<span class={labelClass}>{text}</span> |
|
||||
</a> |
|
||||
{:else} |
|
||||
<button |
|
||||
use:ripple={{ colour }} |
|
||||
class={blockClasses} |
|
||||
class:fullwidth |
|
||||
{disabled} |
|
||||
on:click={clicked}> |
|
||||
{#if renderLeadingIcon} |
|
||||
<Icon context="button__icon" {icon} /> |
|
||||
{/if} |
|
||||
<span class={labelClass}>{text}</span> |
|
||||
{#if renderTrailingIcon} |
|
||||
<Icon context="button__icon" {icon} /> |
|
||||
{/if} |
|
||||
</button> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.mdc-button:not(.fullwidth) { |
|
||||
width: fit-content; |
|
||||
} |
|
||||
.fullwidth { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,5 +0,0 @@ |
|||||
@import "@material/button/mdc-button.scss"; |
|
||||
@import "@material/ripple/mdc-ripple.scss"; |
|
||||
@import "./mixins.scss"; |
|
||||
|
|
||||
@include bbmd-button-styles(); |
|
||||
@ -1,39 +0,0 @@ |
|||||
@import "@material/feature-targeting/functions"; |
|
||||
@import "@material/feature-targeting/mixins"; |
|
||||
|
|
||||
@mixin bbmd-button-styles($query: mdc-feature-all()) { |
|
||||
$feat-structure: mdc-feature-create-target($query, structure); |
|
||||
|
|
||||
.bbmd-mdc-button--size-large { |
|
||||
@include button-sizing($feat-structure, 21px, 40px, 15px); |
|
||||
} |
|
||||
|
|
||||
.bbmd-mdc-button--size-small { |
|
||||
@include button-sizing($feat-structure, 9px, 32px, 13px); |
|
||||
} |
|
||||
|
|
||||
.bbmd-mdc-button--colour-secondary { |
|
||||
//no feature target as relying on theme variable custom property |
|
||||
@include mdc-button-ink-color(secondary); |
|
||||
|
|
||||
&.mdc-button--raised, |
|
||||
&.mdc-button--unelevated { |
|
||||
@include mdc-button-container-fill-color(secondary); |
|
||||
@include mdc-button-ink-color(on-secondary); |
|
||||
} |
|
||||
|
|
||||
&.mdc-button--outlined { |
|
||||
@include mdc-button-outline-color(secondary); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@mixin button-sizing($feat, $padding, $height, $fontSize) { |
|
||||
@include mdc-feature-targets($feat) { |
|
||||
padding: 0px $padding; |
|
||||
height: $height; |
|
||||
} |
|
||||
> .mdc-button__label { |
|
||||
font-size: $fontSize; |
|
||||
} |
|
||||
} |
|
||||
@ -1,2 +0,0 @@ |
|||||
import "./_index.scss" |
|
||||
export { default as Button } from "./Button.svelte" |
|
||||
@ -1,67 +0,0 @@ |
|||||
<script> |
|
||||
export let heading = "" |
|
||||
export let subheading = "" |
|
||||
export let content = "" |
|
||||
export let imageUrl = "" |
|
||||
export let button1Text = "" |
|
||||
export let button2Text = "" |
|
||||
export let cardClick = () => {} |
|
||||
export let button1Click = () => {} |
|
||||
export let button2Click = () => {} |
|
||||
|
|
||||
$: showImage = !!imageUrl |
|
||||
$: showButton1 = !!button1Text |
|
||||
$: showButton2 = !!button2Text |
|
||||
$: showButtons = !!showButton1 && !!showButton2 |
|
||||
</script> |
|
||||
|
|
||||
<div class="mdc-card" on:click={cardClick}> |
|
||||
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0"> |
|
||||
{#if showImage} |
|
||||
<div |
|
||||
class="mdc-card__media mdc-card__media--16-9 demo-card__media" |
|
||||
style="background-image: url("{imageUrl}");" /> |
|
||||
{/if} |
|
||||
<div class="pad"> |
|
||||
<div class="demo-card__primary"> |
|
||||
<h2 class="demo-card__title mdc-typography mdc-typography--headline6"> |
|
||||
{heading} |
|
||||
</h2> |
|
||||
<h3 |
|
||||
class="demo-card__subtitle mdc-typography mdc-typography--subtitle2"> |
|
||||
{subheading} |
|
||||
</h3> |
|
||||
</div> |
|
||||
<div class="demo-card__secondary mdc-typography mdc-typography--body2"> |
|
||||
{content} |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
{#if showButtons} |
|
||||
<div class="mdc-card__actions"> |
|
||||
<div class="mdc-card__action-buttons"> |
|
||||
{#if showButton1} |
|
||||
<button class="mdc-button mdc-card__action mdc-card__action--button"> |
|
||||
<span class="mdc-button__ripple" on:click={button1Click} /> |
|
||||
{button1Text} |
|
||||
</button> |
|
||||
{/if} |
|
||||
{#if showButton2} |
|
||||
<button |
|
||||
class="mdc-button mdc-card__action mdc-card__action--button" |
|
||||
on:click={button2Click}> |
|
||||
<span class="mdc-button__ripple" /> |
|
||||
{button2Text} |
|
||||
</button> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.pad { |
|
||||
padding: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,39 +0,0 @@ |
|||||
<script> |
|
||||
import CardHeader from "./CardHeader.svelte" |
|
||||
import CardBody from "./CardBody.svelte" |
|
||||
import CardImage from "./CardImage.svelte" |
|
||||
import CardFooter from "./CardFooter.svelte" |
|
||||
import { H2, H6, Body2 } from "../Typography" |
|
||||
import { Button } from "../Button" |
|
||||
import { IconButton } from "../IconButton" |
|
||||
import ClassBuilder from "../ClassBuilder.js" |
|
||||
|
|
||||
export let width = "350px" |
|
||||
export let height = "auto" |
|
||||
export let variant = "standard" |
|
||||
|
|
||||
export let _bb |
|
||||
let card |
|
||||
|
|
||||
const cb = new ClassBuilder("card", ["standard"]) |
|
||||
|
|
||||
$: modifiers = { variant } |
|
||||
$: props = { modifiers } |
|
||||
$: cardClass = cb.build({ props }) |
|
||||
|
|
||||
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width |
|
||||
|
|
||||
$: safeHeight = |
|
||||
height !== "auto" && !/px$/.test(height) ? `${height}px` : height |
|
||||
|
|
||||
$: card && _bb.attachChildren(card) |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={card} class={`bbmd-card ${cardClass}`} /> |
|
||||
|
|
||||
<style> |
|
||||
.bbmd-card { |
|
||||
width: 350px; |
|
||||
height: auto; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,12 +0,0 @@ |
|||||
<script> |
|
||||
export let _bb |
|
||||
export let onClick = () => {} |
|
||||
|
|
||||
export let clicked = () => _bb.call(onClick) |
|
||||
|
|
||||
let cardBody |
|
||||
|
|
||||
$: cardBody && _bb.attachChildren(cardBody) |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={cardBody} class="mdc-card__primary-action" on:click={clicked} /> |
|
||||
@ -1,31 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
let cardFooter |
|
||||
export let _bb |
|
||||
export let padding = "5px" |
|
||||
|
|
||||
onMount(() => { |
|
||||
_bb.setContext( |
|
||||
"BBMD:icon-button:context", |
|
||||
"mdc-card__action mdc-card__action--icon" |
|
||||
) |
|
||||
_bb.setContext( |
|
||||
"BBMD:button:context", |
|
||||
"mdc-card__action mdc-card__action--button" |
|
||||
) |
|
||||
}) |
|
||||
|
|
||||
$: cardFooter && _bb.attachChildren(cardFooter) |
|
||||
</script> |
|
||||
|
|
||||
<div |
|
||||
bind:this={cardFooter} |
|
||||
style={`padding: ${padding}`} |
|
||||
class="mdc-card__actions bbmd-card__actions" /> |
|
||||
|
|
||||
<style> |
|
||||
.bbmd-card__actions { |
|
||||
display: flex; |
|
||||
flex-flow: row wrap; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,44 +0,0 @@ |
|||||
<script> |
|
||||
import { H6, Sub2 } from "../Typography" |
|
||||
import Icon from "../Common/Icon.svelte" |
|
||||
export let _bb |
|
||||
export let title = "" |
|
||||
export let subtitle = "" |
|
||||
export let icon = "" |
|
||||
|
|
||||
$: useIcon = !!icon |
|
||||
$: useSubtitle = !!subtitle |
|
||||
</script> |
|
||||
|
|
||||
<div class="card-header"> |
|
||||
{#if useIcon} |
|
||||
<div class="card-header__icon"> |
|
||||
<Icon {icon} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
<div class="card-header__title"> |
|
||||
<H6 text={title} /> |
|
||||
{#if useSubtitle} |
|
||||
<Sub2 text={subtitle} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.card-header { |
|
||||
display: flex; |
|
||||
flex-flow: row nowrap; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.card-header__icon { |
|
||||
flex: 0; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.card-header__title { |
|
||||
display: flex; |
|
||||
flex-flow: column nowrap; |
|
||||
flex: 1; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<script> |
|
||||
import { H6, Sub2 } from "../Typography" |
|
||||
export let _bb |
|
||||
export let displayHorizontal = false //aligns image on row with title and subtitle text |
|
||||
export let url = "" |
|
||||
export let title = "" |
|
||||
export let subtitle = "" |
|
||||
|
|
||||
$: useTitle = !!title |
|
||||
$: useSubTitle = !!subtitle |
|
||||
</script> |
|
||||
|
|
||||
{#if !displayHorizontal} |
|
||||
<div |
|
||||
class="my-card__media mdc-card__media mdc-card__media--16-9" |
|
||||
style={`background-image: url(${url})`}> |
|
||||
<div class="mdc-card__media-content bbmd-card-media__content"> |
|
||||
{#if useTitle} |
|
||||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|
||||
{#if useSubTitle} |
|
||||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|
||||
{/if} |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div class="bbmd-card--horizontal"> |
|
||||
<div |
|
||||
class="mdc-card__media mdc-card__media mdc-card__media--square |
|
||||
bbmd-card--horizontal-image" |
|
||||
style={`background-image: url(${url})`} /> |
|
||||
<div class="bbmd-card--horizontal-text"> |
|
||||
{#if useTitle} |
|
||||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|
||||
{#if useSubTitle} |
|
||||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|
||||
{/if} |
|
||||
{/if} |
|
||||
</div> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.bbmd-card--horizontal { |
|
||||
display: flex; |
|
||||
flex-flow: row nowrap; |
|
||||
} |
|
||||
|
|
||||
.bbmd-card--horizontal-image { |
|
||||
flex: 0 0 110px; |
|
||||
} |
|
||||
|
|
||||
.bbmd-card--horizontal-text { |
|
||||
flex: 1; |
|
||||
padding: 10px 5px; |
|
||||
} |
|
||||
|
|
||||
.bbmd-card-media__content { |
|
||||
top: 125px; |
|
||||
color: white; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1 +0,0 @@ |
|||||
@import "@material/card/mdc-card.scss" |
|
||||
@ -1,7 +0,0 @@ |
|||||
import "./_styles.scss" |
|
||||
export { default as Card } from "./Card.svelte" |
|
||||
export { default as BasicCard } from "./BasicCard.svelte" |
|
||||
export { default as CardBody } from "./CardBody.svelte" |
|
||||
export { default as CardFooter } from "./CardFooter.svelte" |
|
||||
export { default as CardHeader } from "./CardHeader.svelte" |
|
||||
export { default as CardImage } from "./CardImage.svelte" |
|
||||
@ -1,146 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount, onDestroy } from "svelte" |
|
||||
import Formfield from "../Common/Formfield.svelte" |
|
||||
import { fieldStore } from "../Common/FormfieldStore.js" |
|
||||
import ClassBuilder from "../ClassBuilder.js" |
|
||||
import { MDCCheckbox } from "@material/checkbox" |
|
||||
import { generate } from "shortid" |
|
||||
|
|
||||
export let onChange = item => {} |
|
||||
|
|
||||
export let _bb |
|
||||
|
|
||||
export let id = "" |
|
||||
export let value = null |
|
||||
export let label = "" |
|
||||
export let disabled = false |
|
||||
export let alignEnd = false |
|
||||
export let indeterminate = false |
|
||||
export let checked = false |
|
||||
|
|
||||
let _id |
|
||||
let instance = null |
|
||||
let checkbox = null |
|
||||
let selectedItems |
|
||||
let checkProps |
|
||||
|
|
||||
let context = _bb.getContext("BBMD:input:context") |
|
||||
|
|
||||
onMount(() => { |
|
||||
_id = generate() |
|
||||
|
|
||||
if (!!checkbox) { |
|
||||
instance = new MDCCheckbox(checkbox) |
|
||||
instance.indeterminate = indeterminate |
|
||||
if (context !== "list-item") { |
|
||||
let fieldStore = _bb.getContext("BBMD:field-element") |
|
||||
if (fieldStore) fieldStore.setInput(instance) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if (context === "checkboxgroup") { |
|
||||
selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore") |
|
||||
checkProps = _bb.getContext("BBMD:checkbox:props") |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
let extras = null |
|
||||
|
|
||||
if (context === "list-item") { |
|
||||
extras = ["mdc-list-item__meta"] |
|
||||
} |
|
||||
|
|
||||
const cb = new ClassBuilder("checkbox") |
|
||||
let modifiers = { disabled } |
|
||||
let props = { modifiers, extras } |
|
||||
|
|
||||
const blockClass = cb.build({ props }) |
|
||||
|
|
||||
function changed(e) { |
|
||||
const val = e.target.checked |
|
||||
checked = val |
|
||||
|
|
||||
handleOnClick() |
|
||||
if (_bb.isBound(_bb.props.checked)) { |
|
||||
_bb.setStateFromBinding(_bb.props.checked, val) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function handleOnClick() { |
|
||||
let item = { _id, checked, label, value } |
|
||||
if (context === "checkboxgroup") { |
|
||||
let idx = selectedItems.getItemIdx($selectedItems, _id) |
|
||||
if (idx > -1) { |
|
||||
selectedItems.removeItem(_id) |
|
||||
} else { |
|
||||
selectedItems.addItem(item) |
|
||||
} |
|
||||
} |
|
||||
_bb.call(onChange, item) |
|
||||
} |
|
||||
|
|
||||
$: isChecked = |
|
||||
context === "checkboxgroup" |
|
||||
? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1 |
|
||||
: checked |
|
||||
|
|
||||
$: isAlignedEnd = |
|
||||
context === "checkboxgroup" && !!checkProps ? checkProps.alignEnd : alignEnd |
|
||||
|
|
||||
$: isDisabled = |
|
||||
context === "checkboxgroup" && !!checkProps ? checkProps.disabled : disabled |
|
||||
</script> |
|
||||
|
|
||||
<!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? --> |
|
||||
|
|
||||
{#if context !== 'list-item'} |
|
||||
<div class="bbmd-checkbox"> |
|
||||
<Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}> |
|
||||
<div bind:this={checkbox} class={blockClass}> |
|
||||
<input |
|
||||
type="checkbox" |
|
||||
class={cb.elem`native-control`} |
|
||||
{id} |
|
||||
disabled={isDisabled} |
|
||||
checked={isChecked} |
|
||||
on:change={changed} /> |
|
||||
<div class={cb.elem`background`}> |
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24"> |
|
||||
<path |
|
||||
class={cb.elem`checkmark-path`} |
|
||||
fill="none" |
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" /> |
|
||||
</svg> |
|
||||
<div class={cb.elem`mixedmark`} /> |
|
||||
</div> |
|
||||
<div class={cb.elem`ripple`} /> |
|
||||
</div> |
|
||||
</Formfield> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<div bind:this={checkbox} class={blockClass}> |
|
||||
<input |
|
||||
type="checkbox" |
|
||||
class={cb.elem`native-control`} |
|
||||
{id} |
|
||||
disabled={isDisabled} |
|
||||
checked={isChecked} |
|
||||
on:change={changed} /> |
|
||||
<div class={cb.elem`background`}> |
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24"> |
|
||||
<path |
|
||||
class={cb.elem`checkmark-path`} |
|
||||
fill="none" |
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" /> |
|
||||
</svg> |
|
||||
<div class={cb.elem`mixedmark`} /> |
|
||||
</div> |
|
||||
<div class={cb.elem`ripple`} /> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.bbmd-checkbox { |
|
||||
width: fit-content; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,69 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from "svelte" |
|
||||
import Checkbox from "./Checkbox.svelte" |
|
||||
import Label from "../Common/Label.svelte" |
|
||||
import createItemsStore from "../Common/ItemStore.js" |
|
||||
|
|
||||
let selectedItemsStore |
|
||||
let checkItems |
|
||||
|
|
||||
export let _bb |
|
||||
export let label = "" |
|
||||
export let orientation = "row" |
|
||||
export let onChange = selectedItems => {} |
|
||||
|
|
||||
export let disabled = false |
|
||||
export let alignEnd = false |
|
||||
export let value = [] |
|
||||
|
|
||||
onMount(() => { |
|
||||
_bb.setContext("BBMD:input:context", "checkboxgroup") |
|
||||
selectedItemsStore = createItemsStore(() => { |
|
||||
value = $selectedItemsStore |
|
||||
if (_bb.isBound(_bb.props.value)) { |
|
||||
_bb.setStateFromBinding(_bb.props.value, value) |
|
||||
} |
|
||||
_bb.call(onChange, value) |
|
||||
}, value) |
|
||||
_bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore) |
|
||||
_bb.setContext("BBMD:checkbox:props", { alignEnd, disabled }) |
|
||||
}) |
|
||||
|
|
||||
$: checkItems && _bb.attachChildren(checkItems) |
|
||||
</script> |
|
||||
|
|
||||
<div class="checkbox-group"> |
|
||||
<div class="checkbox-group__label"> |
|
||||
<Label text={label} bold /> |
|
||||
</div> |
|
||||
<div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} /> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.checkbox-group { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
width: fit-content; |
|
||||
} |
|
||||
|
|
||||
.checkbox-group__boxes.row > div:not(:first-child) { |
|
||||
padding-left: 10px; |
|
||||
} |
|
||||
|
|
||||
.checkbox-group > div { |
|
||||
text-align: left; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.row { |
|
||||
display: flex; |
|
||||
flex-flow: row wrap; |
|
||||
align-items: flex-start; |
|
||||
} |
|
||||
|
|
||||
.column { |
|
||||
display: flex; |
|
||||
flex-flow: column wrap; |
|
||||
align-items: flex-start; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,2 +0,0 @@ |
|||||
@import "@material/form-field/mdc-form-field"; |
|
||||
@import "@material/checkbox/mdc-checkbox.scss"; |
|
||||
@ -1,3 +0,0 @@ |
|||||
import "./_style.scss" |
|
||||
export { default as Checkbox } from "./Checkbox.svelte" |
|
||||
export { default as Checkboxgroup } from "./CheckboxGroup.svelte" |
|
||||
@ -1,74 +0,0 @@ |
|||||
export default class ClassBuilder { |
|
||||
constructor(block, defaultIgnoreList) { |
|
||||
this.block = `mdc-${block}` |
|
||||
this.defaultIgnoreList = defaultIgnoreList //will be ignored when building custom classes
|
|
||||
} |
|
||||
|
|
||||
/* |
|
||||
handles both blocks and elementss (BEM MD Notation) |
|
||||
params = {elementName: string, props: {modifiers{}, customs:{}, extras: []}} |
|
||||
All are optional |
|
||||
*/ |
|
||||
build(params) { |
|
||||
if (!params) return this.block //return block if nothing passed
|
|
||||
const { props, elementName } = params |
|
||||
let base = elementName ? `${this.block}__${elementName}` : this.block |
|
||||
if (!props) return base |
|
||||
return this._handleProps(base, props) |
|
||||
} |
|
||||
|
|
||||
//Easily grab a simple element class
|
|
||||
elem(elementName) { |
|
||||
return this.build({ elementName }) |
|
||||
} |
|
||||
|
|
||||
//use if a different base is needed than whats defined by this.block
|
|
||||
debase(base, elementProps) { |
|
||||
if (!elementProps) return base |
|
||||
return this._handleProps(base, elementProps) |
|
||||
} |
|
||||
|
|
||||
//proxies bindProps and checks for which elementProps exist before binding
|
|
||||
_handleProps(base, elementProps) { |
|
||||
let cls = base |
|
||||
const { modifiers, customs, extras } = elementProps |
|
||||
if (modifiers) cls += this._bindProps(modifiers, base) |
|
||||
if (customs) cls += this._bindProps(customs, base, true) |
|
||||
if (extras) cls += ` ${extras.join(" ")}` |
|
||||
return cls.trim() |
|
||||
} |
|
||||
|
|
||||
/* |
|
||||
Handles both modifiers and customs. Use property, value or both depending |
|
||||
on whether it is passsed props for custom or modifiers |
|
||||
if custom uses the following convention for scss mixins: |
|
||||
bbmd-{this.block}--{property}-{value} |
|
||||
bbmd-mdc-button--size-large |
|
||||
*/ |
|
||||
_bindProps(elementProps, base, isCustom = false) { |
|
||||
return Object.entries(elementProps) |
|
||||
.map(([property, value]) => { |
|
||||
//disregard falsy and values set by defaultIgnoreList constructor param
|
|
||||
if ( |
|
||||
!!value && |
|
||||
(!this.defaultIgnoreList || !this.defaultIgnoreList.includes(value)) |
|
||||
) { |
|
||||
let classBase = isCustom ? `bbmd-${base}` : `${base}` |
|
||||
let valueType = typeof value |
|
||||
|
|
||||
if (valueType == "string" || valueType == "number") { |
|
||||
return isCustom |
|
||||
? ` ${classBase}--${this._convertCamel(property)}-${value}` |
|
||||
: ` ${classBase}--${value}` |
|
||||
} else if (valueType == "boolean") { |
|
||||
return ` ${classBase}--${this._convertCamel(property)}` |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
.join("") |
|
||||
} |
|
||||
|
|
||||
_convertCamel(str) { |
|
||||
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) |
|
||||
} |
|
||||
} |
|
||||
@ -1,7 +0,0 @@ |
|||||
<script> |
|
||||
import "@material/floating-label/mdc-floating-label.scss" |
|
||||
export let forInput = "" |
|
||||
export let text = "" |
|
||||
</script> |
|
||||
|
|
||||
<label for={forInput} class="mdc-floating-label">{text}</label> |
|
||||
@ -1,42 +0,0 @@ |
|||||
<script> |
|
||||
import "@material/form-field/mdc-form-field.scss" |
|
||||
import ClassBuilder from "../ClassBuilder.js" |
|
||||
import { fieldStore } from "./FormfieldStore.js" |
|
||||
import { MDCFormField } from "@material/form-field" |
|
||||
import { onMount, onDestroy } from "svelte" |
|
||||
|
|
||||
const cb = new ClassBuilder("form-field") |
|
||||
|
|
||||
let store |
|
||||
const unsubscribe = fieldStore.subscribe(s => (store = s)) |
|
||||
|
|
||||
export let _bb |
|
||||
export let id = "" |
|
||||
export let label = "" |
|
||||
export let alignEnd = false |
|
||||
|
|
||||
let formField = null |
|
||||
|
|
||||
$: modifiers = { alignEnd } |
|
||||
$: props = { modifiers, extras: ["bbmd-form-field"] } |
|
||||
|
|
||||
$: blockClasses = cb.build({ props }) |
|
||||
|
|
||||
onMount(() => { |
|
||||
if (!!formField) fieldStore.set(new MDCFormField(formField)) |
|
||||
_bb.setContext("BBMD:field-element", fieldStore) |
|
||||
}) |
|
||||
|
|
||||
onDestroy(unsubscribe) |
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={formField} class={blockClasses}> |
|
||||
<slot /> |
|
||||
<label for={id}>{label}</label> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.bbmd-form-field { |
|
||||
width: fit-content; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,19 +0,0 @@ |
|||||
import { writable } from "svelte/store" |
|
||||
|
|
||||
function store() { |
|
||||
const { set, update, subscribe } = writable({}) |
|
||||
|
|
||||
function setInput(inp) { |
|
||||
update(n => { |
|
||||
n.input = inp |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
subscribe, |
|
||||
set, |
|
||||
setInput, |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export const fieldStore = store() |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue