CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 04:50:44 +12:00
Code Issues Projects Releases Wiki Activity

Use custom Input for component settings so that JS bindings can be displayed nicley

Browse source
This commit is contained in:
Andrew Kingston 2021-10-12 16:07:59 +01:00
parent d6a1e3d248
commit 932c332b81
4 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/builder/src/components/common/bindings/BindingPanel.svelte
View file

@ -1,6 +1,14 @@
<script>
import groupBy from "lodash/fp/groupBy"
import { Search, TextArea, DrawerContent, Tabs, Tab } from "@budibase/bbui"
import {
Search,
TextArea,
DrawerContent,
Tabs,
Tab,
Body,
Layout,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import {
isValid,
@ -17,7 +25,7 @@
export let bindableProperties
export let value = ""
export let valid
export let allowJS = true
export let allowJS = false
let helpers = handlebarsCompletions()
let getCaretPosition
@ -138,13 +146,19 @@
{#if allowJS}
<Tab title="JavaScript">
<div class="main-content">
<CodeMirrorEditor
bind:getCaretPosition
height={200}
value={decodeJSBinding(jsValue)}
on:change={onChangeJSValue}
hints={context?.map(x => `$("${x.readableBinding}")`)}
/>
<Layout noPadding gap="XS">
<CodeMirrorEditor
bind:getCaretPosition
height={200}
value={decodeJSBinding(jsValue)}
on:change={onChangeJSValue}
hints={context?.map(x => `$("${x.readableBinding}")`)}
/>
<Body size="S">
JavaScript expressions are executed as functions, so ensure that
your expression returns a value.
</Body>
</Layout>
</div>
</Tab>
{/if}

14
packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { Input } from "@budibase/bbui"
import { isJSBinding } from "@budibase/string-templates"
export let value
$: isJS = isJSBinding(value)
</script>
<Input
{...$$props}
value={isJS ? "(JavaScript function)" : value}
readonly={isJS}
/>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -105,6 +105,7 @@
value={safeValue}
on:change={e => (tempValue = e.detail)}
bindableProperties={bindings}
allowJS
/>
</Drawer>
{/if}

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
View file

@ -1,4 +1,4 @@
import { Checkbox, Input, Select, Stepper } from "@budibase/bbui"
import { Checkbox, Select, Stepper } from "@budibase/bbui"
import DataSourceSelect from "./DataSourceSelect.svelte"
import DataProviderSelect from "./DataProviderSelect.svelte"
import EventsEditor from "./EventsEditor"
@ -15,6 +15,7 @@ import URLSelect from "./URLSelect.svelte"
import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
import FormFieldSelect from "./FormFieldSelect.svelte"
import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
import Input from "./Input.svelte"
const componentMap = {
text: Input,