CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 22:11:23 +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 39e98800d3
commit b1e421651d
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> <script>
import groupBy from "lodash/fp/groupBy" 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 { createEventDispatcher } from "svelte"
import { import {
isValid, isValid,
@ -17,7 +25,7 @@
export let bindableProperties export let bindableProperties
export let value = "" export let value = ""
export let valid export let valid
export let allowJS = true export let allowJS = false
let helpers = handlebarsCompletions() let helpers = handlebarsCompletions()
let getCaretPosition let getCaretPosition
@ -138,13 +146,19 @@
{#if allowJS} {#if allowJS}
<Tab title="JavaScript"> <Tab title="JavaScript">
<div class="main-content"> <div class="main-content">
<CodeMirrorEditor <Layout noPadding gap="XS">
bind:getCaretPosition <CodeMirrorEditor
height={200} bind:getCaretPosition
value={decodeJSBinding(jsValue)} height={200}
on:change={onChangeJSValue} value={decodeJSBinding(jsValue)}
hints={context?.map(x => `$("${x.readableBinding}")`)} 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> </div>
</Tab> </Tab>
{/if} {/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} value={safeValue}
on:change={e => (tempValue = e.detail)} on:change={e => (tempValue = e.detail)}
bindableProperties={bindings} bindableProperties={bindings}
allowJS
/> />
</Drawer> </Drawer>
{/if} {/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 DataSourceSelect from "./DataSourceSelect.svelte"
import DataProviderSelect from "./DataProviderSelect.svelte" import DataProviderSelect from "./DataProviderSelect.svelte"
import EventsEditor from "./EventsEditor" import EventsEditor from "./EventsEditor"
@ -15,6 +15,7 @@ import URLSelect from "./URLSelect.svelte"
import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte" import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
import FormFieldSelect from "./FormFieldSelect.svelte" import FormFieldSelect from "./FormFieldSelect.svelte"
import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte" import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
import Input from "./Input.svelte"
const componentMap = { const componentMap = {
text: Input, text: Input,