forked from tsai/budibase
Andrew Kingston
4 years ago
28 changed files with 312 additions and 82 deletions
@ -0,0 +1,114 @@ |
|||
<script> |
|||
import { createEventDispatcher } from "svelte" |
|||
import RowSelectorTypes from "./RowSelectorTypes.svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
export let value |
|||
export let bindings |
|||
export let block |
|||
export let isTestModal |
|||
|
|||
let schemaFields |
|||
|
|||
$: { |
|||
let fields = {} |
|||
|
|||
for (const [key, type] of Object.entries(block?.inputs?.fields)) { |
|||
fields = { |
|||
...fields, |
|||
[key]: { |
|||
type: type, |
|||
name: key, |
|||
fieldName: key, |
|||
constraints: { type: type }, |
|||
}, |
|||
} |
|||
|
|||
if (value[key] === type) { |
|||
value[key] = INITIAL_VALUES[type.toUpperCase()] |
|||
} |
|||
} |
|||
|
|||
schemaFields = Object.entries(fields) |
|||
} |
|||
|
|||
const INITIAL_VALUES = { |
|||
BOOLEAN: null, |
|||
NUMBER: null, |
|||
DATETIME: null, |
|||
STRING: "", |
|||
OPTIONS: [], |
|||
ARRAY: [], |
|||
} |
|||
|
|||
const coerce = (value, type) => { |
|||
const re = new RegExp(/{{([^{].*?)}}/g) |
|||
if (re.test(value)) { |
|||
return value |
|||
} |
|||
|
|||
if (type === "boolean") { |
|||
if (typeof value === "boolean") { |
|||
return value |
|||
} |
|||
return value === "true" |
|||
} |
|||
if (type === "number") { |
|||
if (typeof value === "number") { |
|||
return value |
|||
} |
|||
return Number(value) |
|||
} |
|||
if (type === "options") { |
|||
return [value] |
|||
} |
|||
if (type === "array") { |
|||
if (Array.isArray(value)) { |
|||
return value |
|||
} |
|||
return value.split(",").map(x => x.trim()) |
|||
} |
|||
|
|||
if (type === "link") { |
|||
if (Array.isArray(value)) { |
|||
return value |
|||
} |
|||
|
|||
return [value] |
|||
} |
|||
|
|||
return value |
|||
} |
|||
|
|||
const onChange = (e, field, type) => { |
|||
value[field] = coerce(e.detail, type) |
|||
dispatch("change", value) |
|||
} |
|||
</script> |
|||
|
|||
{#if schemaFields.length && isTestModal} |
|||
<div class="schema-fields"> |
|||
{#each schemaFields as [field, schema]} |
|||
<RowSelectorTypes |
|||
{isTestModal} |
|||
{field} |
|||
{schema} |
|||
{bindings} |
|||
{value} |
|||
{onChange} |
|||
/> |
|||
{/each} |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.schema-fields { |
|||
display: grid; |
|||
grid-gap: var(--spacing-s); |
|||
margin-top: var(--spacing-s); |
|||
} |
|||
.schema-fields :global(label) { |
|||
text-transform: capitalize; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,16 @@ |
|||
.spectrum--midnight { |
|||
--hue: 220; |
|||
--sat: 10%; |
|||
--spectrum-global-color-gray-50: hsl(var(--hue), var(--sat), 12%); |
|||
--spectrum-global-color-gray-75: hsl(var(--hue), var(--sat), 15%); |
|||
--spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%); |
|||
--spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%); |
|||
--spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%); |
|||
--spectrum-global-color-gray-400: hsl(var(--hue), var(--sat), 32%); |
|||
--spectrum-global-color-gray-500: hsl(var(--hue), var(--sat), 40%); |
|||
--spectrum-global-color-gray-600: hsl(var(--hue), var(--sat), 60%); |
|||
--spectrum-global-color-gray-700: hsl(var(--hue), var(--sat), 70%); |
|||
--spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 80%); |
|||
--spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%); |
|||
} |
|||
|
|||
@ -0,0 +1,46 @@ |
|||
.spectrum--nord { |
|||
--spectrum-global-color-red-400: #bf616a; |
|||
--spectrum-global-color-red-500: #c26971; |
|||
--spectrum-global-color-red-600: #c57179; |
|||
--spectrum-global-color-red-700: #c97980; |
|||
--spectrum-global-color-static-red-400: #bf616a; |
|||
--spectrum-global-color-static-red-500: #c26971; |
|||
--spectrum-global-color-static-red-600: #c57179; |
|||
--spectrum-global-color-static-red-700: #c97980; |
|||
|
|||
--spectrum-global-color-green-400: #719453; |
|||
--spectrum-global-color-green-500: #789d58; |
|||
--spectrum-global-color-green-600: #7fa55e; |
|||
--spectrum-global-color-green-700: #86aa67; |
|||
--spectrum-global-color-static-green-400: #719453; |
|||
--spectrum-global-color-static-green-500: #789d58; |
|||
--spectrum-global-color-static-green-600: #7fa55e; |
|||
--spectrum-global-color-static-green-700: #86aa67; |
|||
|
|||
--spectrum-global-color-blue-400: #5680b4; |
|||
--spectrum-global-color-blue-500: #5e86b8; |
|||
--spectrum-global-color-blue-600: #668dbb; |
|||
--spectrum-global-color-blue-700: #6f93bf; |
|||
--spectrum-global-color-static-blue-200: #7799c4; |
|||
--spectrum-global-color-static-blue-300: #6f93bf; |
|||
--spectrum-global-color-static-blue-400: #668dbb; |
|||
--spectrum-global-color-static-blue-500: #5e86b8; |
|||
--spectrum-global-color-static-blue-600: #5680b4; |
|||
--spectrum-global-color-static-blue-700: #4e79af; |
|||
--spectrum-global-color-static-blue-800: #4a73a6; |
|||
|
|||
--spectrum-global-color-gray-50: #2e3440; |
|||
--spectrum-global-color-gray-75: #353b4a; |
|||
--spectrum-global-color-gray-100: #3b4252; |
|||
--spectrum-global-color-gray-200: #4a5367; |
|||
--spectrum-global-color-gray-300: #4c566a; |
|||
--spectrum-global-color-gray-400: #5a657d; |
|||
--spectrum-global-color-gray-500: #677590; |
|||
--spectrum-global-color-gray-600: #79869f; |
|||
--spectrum-global-color-gray-700: #a9b1c1; |
|||
--spectrum-global-color-gray-800: #bac1cd; |
|||
--spectrum-global-color-gray-900: #eceff4; |
|||
|
|||
--spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.06); |
|||
--spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1); |
|||
} |
|||
Loading…
Reference in new issue