forked from tsai/budibase
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