forked from tsai/budibase
Mel O'Hagan
4 years ago
58 changed files with 1968 additions and 1749 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> |
||||
@ -1,7 +1,4 @@ |
|||||
<script> |
<!-- |
||||
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte" |
Placeholder file so that routify works. |
||||
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte" |
No unique content is needed in this index page. |
||||
</script> |
--> |
||||
|
|
||||
<ComponentListPanel /> |
|
||||
<ComponentSettingsPanel /> |
|
||||
|
|||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<NewComponentPanel /> |
||||
@ -1,21 +0,0 @@ |
|||||
<script> |
|
||||
import Panel from "components/design/Panel.svelte" |
|
||||
import { Body, Layout } from "@budibase/bbui" |
|
||||
import { selectedComponent, selectedScreen, store } from "builderStore" |
|
||||
|
|
||||
$: componentDefinition = store.actions.components.getDefinition( |
|
||||
$selectedComponent?._component |
|
||||
) |
|
||||
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id |
|
||||
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName |
|
||||
$: position = componentDefinition?.hasChildren ? "inside" : "below" |
|
||||
</script> |
|
||||
|
|
||||
<Panel {title} icon={componentDefinition?.icon} borderLeft> |
|
||||
<Layout paddingX="L" paddingY="XL"> |
|
||||
<Body size="S"> |
|
||||
Components that you add will be placed {position} |
|
||||
{title} |
|
||||
</Body> |
|
||||
</Layout> |
|
||||
</Panel> |
|
||||
@ -1,26 +0,0 @@ |
|||||
<script> |
|
||||
import NewComponentPanel from "./_components/NewComponentPanel.svelte" |
|
||||
import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte" |
|
||||
import { onMount } from "svelte" |
|
||||
import { store, selectedComponent, selectedScreen } from "builderStore" |
|
||||
import { redirect } from "@roxi/routify" |
|
||||
|
|
||||
// Select the screen slot as the target to add to, if no component |
|
||||
// is selected |
|
||||
onMount(() => { |
|
||||
if (!$selectedComponent) { |
|
||||
if ($selectedScreen) { |
|
||||
store.update(state => { |
|
||||
state.selectedComponentId = $selectedScreen.props._id |
|
||||
return state |
|
||||
}) |
|
||||
} else { |
|
||||
// Otherwise go back out of the add screen |
|
||||
$redirect("../") |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<NewComponentPanel /> |
|
||||
<NewComponentTargetPanel /> |
|
||||
@ -0,0 +1,58 @@ |
|||||
|
<script> |
||||
|
import { RoleUtils } from "@budibase/frontend-core" |
||||
|
import { Tooltip, StatusLight } from "@budibase/bbui" |
||||
|
import { roles } from "stores/backend" |
||||
|
import { Roles } from "constants/backend" |
||||
|
|
||||
|
export let roleId |
||||
|
|
||||
|
let showTooltip = false |
||||
|
|
||||
|
$: color = RoleUtils.getRoleColour(roleId) |
||||
|
$: role = $roles.find(role => role._id === roleId) |
||||
|
$: tooltip = |
||||
|
roleId === Roles.PUBLIC |
||||
|
? "This screen is open to the public" |
||||
|
: `Requires at least ${role?.name} access` |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
class="container" |
||||
|
on:mouseover={() => (showTooltip = true)} |
||||
|
on:mouseleave={() => (showTooltip = false)} |
||||
|
style="--color: {color};" |
||||
|
> |
||||
|
<StatusLight square {color} /> |
||||
|
{#if showTooltip} |
||||
|
<div class="tooltip"> |
||||
|
<Tooltip textWrapping text={tooltip} direction="left" /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
position: relative; |
||||
|
} |
||||
|
.tooltip { |
||||
|
z-index: 1; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: calc(50% - 8px); |
||||
|
transform: translateX(-100%) translateY(-50%); |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
width: 130px; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.tooltip :global(.spectrum-Tooltip) { |
||||
|
background: var(--color); |
||||
|
color: white; |
||||
|
font-weight: 600; |
||||
|
max-width: 130px; |
||||
|
} |
||||
|
.tooltip :global(.spectrum-Tooltip-tip) { |
||||
|
border-top-color: var(--color); |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue