Merge pull request #15545 from Budibase/execute-script-tweaks
Pull out new code editor field and drawer bindable slot into single component
This commit is contained in:
Andrew Kingston
GitHub
commit
ca0630c620
|
|
@ -62,8 +62,7 @@
|
|||
} from "@budibase/types"
|
||||
import PropField from "./PropField.svelte"
|
||||
import { utils } from "@budibase/shared-core"
|
||||
import { encodeJSBinding } from "@budibase/string-templates"
|
||||
import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
|
||||
import DrawerBindableCodeEditorField from "@/components/common/bindings/DrawerBindableCodeEditorField.svelte"
|
||||
|
||||
export let automation
|
||||
export let block
|
||||
|
|
@ -908,33 +907,15 @@
|
|||
/>
|
||||
{:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT_V2}
|
||||
<div class="scriptv2-wrapper">
|
||||
<DrawerBindableSlot
|
||||
title={"Edit Code"}
|
||||
panel={AutomationBindingPanel}
|
||||
type={"longform"}
|
||||
<DrawerBindableCodeEditorField
|
||||
{bindings}
|
||||
{schema}
|
||||
panel={AutomationBindingPanel}
|
||||
on:change={e => onChange({ [key]: e.detail })}
|
||||
value={inputData[key]}
|
||||
{bindings}
|
||||
allowJS={true}
|
||||
allowHBS={false}
|
||||
updateOnChange={false}
|
||||
context={$memoContext}
|
||||
>
|
||||
<div class="field-wrap code-editor">
|
||||
<CodeEditorField
|
||||
value={inputData[key]}
|
||||
{bindings}
|
||||
context={$memoContext}
|
||||
allowHBS={false}
|
||||
allowJS
|
||||
placeholder={"Add bindings by typing $"}
|
||||
on:blur={e =>
|
||||
onChange({ [key]: encodeJSBinding(e.detail) })}
|
||||
/>
|
||||
</div>
|
||||
</DrawerBindableSlot>
|
||||
</div>
|
||||
{:else if value.customType === "code" && stepId === ActionStepID.EXECUTE_SCRIPT}
|
||||
<!-- DEPRECATED -->
|
||||
<CodeEditorModal
|
||||
|
|
@ -1086,23 +1067,4 @@
|
|||
flex: 3;
|
||||
margin-top: calc((var(--spacing-xl) * -1) + 1px);
|
||||
}
|
||||
|
||||
.field-wrap :global(.cm-editor),
|
||||
.field-wrap :global(.cm-scroller) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.field-wrap {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--spectrum-global-color-gray-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.field-wrap.code-editor {
|
||||
height: 180px;
|
||||
}
|
||||
.scriptv2-wrapper :global(.icon.slot-icon) {
|
||||
top: 1px;
|
||||
border-bottom-left-radius: var(--spectrum-alias-border-radius-regular);
|
||||
border-right: 0px;
|
||||
border-bottom: 1px solid var(--spectrum-alias-border-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@
|
|||
let mode: BindingMode | null
|
||||
let sidePanel: SidePanel | null
|
||||
let initialValueJS = value?.startsWith?.("{{ js ")
|
||||
let jsValue = initialValueJS ? value : null
|
||||
let hbsValue = initialValueJS ? null : value
|
||||
let getCaretPosition: CaretPositionFn | undefined
|
||||
let insertAtPos: InsertAtPositionFn | undefined
|
||||
let targetMode: BindingMode | null = null
|
||||
|
|
@ -69,10 +71,6 @@
|
|||
let expressionError: string | undefined
|
||||
let evaluating = false
|
||||
|
||||
// Ensure these values are not stale
|
||||
$: jsValue = initialValueJS ? value : null
|
||||
$: hbsValue = initialValueJS ? null : value
|
||||
|
||||
$: useSnippets = allowSnippets && !$licensing.isFreePlan
|
||||
$: editorModeOptions = getModeOptions(allowHBS, allowJS)
|
||||
$: sidePanelOptions = getSidePanelOptions(
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
export let context = null
|
||||
export let autofocusEditor = false
|
||||
export let placeholder = null
|
||||
export let height = 180
|
||||
|
||||
let getCaretPosition: CaretPositionFn | undefined
|
||||
let insertAtPos: InsertAtPositionFn | undefined
|
||||
|
|
@ -131,7 +132,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="code-panel">
|
||||
<div class="code-panel" style="height:{height}px;">
|
||||
<div class="editor">
|
||||
{#key jsCompletions}
|
||||
<CodeEditor
|
||||
|
|
@ -154,7 +155,6 @@
|
|||
|
||||
<style>
|
||||
.code-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import {
|
||||
ClientBindingPanel,
|
||||
DrawerBindableSlot,
|
||||
} from "@/components/common/bindings"
|
||||
import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
|
||||
|
||||
export let value = ""
|
||||
export let panel = ClientBindingPanel
|
||||
export let schema = null
|
||||
export let bindings = []
|
||||
export let context = {}
|
||||
export let height = 180
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<DrawerBindableSlot
|
||||
{panel}
|
||||
{schema}
|
||||
{value}
|
||||
{bindings}
|
||||
{context}
|
||||
title="Edit Code"
|
||||
type="longform"
|
||||
allowJS={true}
|
||||
allowHBS={false}
|
||||
updateOnChange={false}
|
||||
on:change={e => {
|
||||
value = e.detail
|
||||
dispatch("change", value)
|
||||
}}
|
||||
>
|
||||
<div class="code-editor-wrapper">
|
||||
<CodeEditorField
|
||||
{value}
|
||||
{bindings}
|
||||
{context}
|
||||
{height}
|
||||
allowHBS={false}
|
||||
allowJS
|
||||
placeholder={"Add bindings by typing $"}
|
||||
on:change={e => (value = e.detail)}
|
||||
on:blur={() => dispatch("change", value)}
|
||||
/>
|
||||
</div>
|
||||
</DrawerBindableSlot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper :global(.icon.slot-icon) {
|
||||
top: 1px;
|
||||
border-radius: 0 4px 0 4px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--spectrum-alias-border-color);
|
||||
}
|
||||
.wrapper :global(.cm-editor),
|
||||
.wrapper :global(.cm-scroller) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.code-editor-wrapper {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--spectrum-global-color-gray-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
export let updateOnChange = true
|
||||
export let type
|
||||
export let schema
|
||||
|
||||
export let allowHBS = true
|
||||
export let context = {}
|
||||
|
||||
|
|
@ -174,7 +173,7 @@
|
|||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
{#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
|
||||
{#if !disabled && type !== "formula" && !attachmentTypes.includes(type)}
|
||||
<div
|
||||
class={`icon ${getIconClass(value, type)}`}
|
||||
on:click={() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue