Merge pull request #7414 from Budibase/feature/binding-ux-update
Feature/binding ux update
This commit is contained in:
commit
1403c66021
7 changed files with 305 additions and 90 deletions
|
@ -1,4 +1,4 @@
|
||||||
export default function positionDropdown(element, { anchor, align }) {
|
export default function positionDropdown(element, { anchor, align, maxWidth }) {
|
||||||
let positionSide = "top"
|
let positionSide = "top"
|
||||||
let maxHeight = 0
|
let maxHeight = 0
|
||||||
let dimensions = getDimensions(anchor)
|
let dimensions = getDimensions(anchor)
|
||||||
|
@ -34,13 +34,24 @@ export default function positionDropdown(element, { anchor, align }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function calcLeftPosition() {
|
function calcLeftPosition() {
|
||||||
return align === "right"
|
let left
|
||||||
? dimensions.left + dimensions.width - dimensions.containerWidth
|
|
||||||
: dimensions.left
|
if (align == "right") {
|
||||||
|
left = dimensions.left + dimensions.width - dimensions.containerWidth
|
||||||
|
} else if (align == "right-side") {
|
||||||
|
left = dimensions.left + dimensions.width
|
||||||
|
} else {
|
||||||
|
left = dimensions.left
|
||||||
|
}
|
||||||
|
|
||||||
|
return left
|
||||||
}
|
}
|
||||||
|
|
||||||
element.style.position = "absolute"
|
element.style.position = "absolute"
|
||||||
element.style.zIndex = "9999"
|
element.style.zIndex = "9999"
|
||||||
|
if (maxWidth) {
|
||||||
|
element.style.maxWidth = `${maxWidth}px`
|
||||||
|
}
|
||||||
element.style.minWidth = `${dimensions.width}px`
|
element.style.minWidth = `${dimensions.width}px`
|
||||||
element.style.maxHeight = `${maxHeight.toFixed(0)}px`
|
element.style.maxHeight = `${maxHeight.toFixed(0)}px`
|
||||||
element.style.transformOrigin = `center ${positionSide}`
|
element.style.transformOrigin = `center ${positionSide}`
|
||||||
|
@ -54,10 +65,8 @@ export default function positionDropdown(element, { anchor, align }) {
|
||||||
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
resizeObserver.observe(anchor)
|
resizeObserver.observe(anchor)
|
||||||
resizeObserver.observe(element)
|
resizeObserver.observe(element)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
destroy() {
|
destroy() {
|
||||||
resizeObserver.disconnect()
|
resizeObserver.disconnect()
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
export let align = "right"
|
export let align = "right"
|
||||||
export let portalTarget
|
export let portalTarget
|
||||||
export let dataCy
|
export let dataCy
|
||||||
|
export let maxWidth
|
||||||
|
|
||||||
export let direction = "bottom"
|
export let direction = "bottom"
|
||||||
export let showTip = false
|
export let showTip = false
|
||||||
|
@ -45,7 +46,7 @@
|
||||||
<Portal target={portalTarget}>
|
<Portal target={portalTarget}>
|
||||||
<div
|
<div
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
use:positionDropdown={{ anchor, align }}
|
use:positionDropdown={{ anchor, align, maxWidth }}
|
||||||
use:clickOutside={hide}
|
use:clickOutside={hide}
|
||||||
on:keydown={handleEscape}
|
on:keydown={handleEscape}
|
||||||
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
|
class={"spectrum-Popover is-open " + (tooltipClasses || "")}
|
||||||
|
|
|
@ -10,7 +10,7 @@ filterTests(['smoke', 'all'], () => {
|
||||||
|
|
||||||
it("should add a current user binding", () => {
|
it("should add a current user binding", () => {
|
||||||
cy.searchAndAddComponent("Paragraph").then(() => {
|
cy.searchAndAddComponent("Paragraph").then(() => {
|
||||||
addSettingBinding("text", "Current User._id")
|
addSettingBinding("text", ["Current User", "_id"], "Current User._id")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ filterTests(['smoke', 'all'], () => {
|
||||||
const paramName = "foo"
|
const paramName = "foo"
|
||||||
cy.createScreen(`/test/:${paramName}`)
|
cy.createScreen(`/test/:${paramName}`)
|
||||||
cy.searchAndAddComponent("Paragraph").then(componentId => {
|
cy.searchAndAddComponent("Paragraph").then(componentId => {
|
||||||
addSettingBinding("text", `URL.${paramName}`)
|
addSettingBinding("text", ["URL", paramName], `URL.${paramName}`)
|
||||||
// The builder preview pages don't have a real URL, so all we can do
|
// The builder preview pages don't have a real URL, so all we can do
|
||||||
// is check that we were able to bind to the property, and that the
|
// is check that we were able to bind to the property, and that the
|
||||||
// component exists on the page
|
// component exists on the page
|
||||||
|
@ -47,11 +47,13 @@ filterTests(['smoke', 'all'], () => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
const addSettingBinding = (setting, bindingText, clickOption = true) => {
|
const addSettingBinding = (setting, bindingCategories, bindingText, clickOption = true) => {
|
||||||
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
|
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
|
||||||
|
cy.get(".category-list li").contains(bindingCategories[0])
|
||||||
cy.get(".drawer").within(() => {
|
cy.get(".drawer").within(() => {
|
||||||
if (clickOption) {
|
if (clickOption) {
|
||||||
cy.contains(bindingText).click()
|
cy.get(".category-list li").contains(bindingCategories[0]).click()
|
||||||
|
cy.get("li.binding").contains(bindingCategories[1]).click()
|
||||||
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
|
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
|
||||||
} else {
|
} else {
|
||||||
cy.get("textarea").type(bindingText)
|
cy.get("textarea").type(bindingText)
|
||||||
|
|
|
@ -299,7 +299,10 @@ const getProviderContextBindings = (asset, dataProviders) => {
|
||||||
schema = {}
|
schema = {}
|
||||||
const values = context.values || []
|
const values = context.values || []
|
||||||
values.forEach(value => {
|
values.forEach(value => {
|
||||||
schema[value.key] = { name: value.label, type: "string" }
|
schema[value.key] = {
|
||||||
|
name: value.label,
|
||||||
|
type: value.type || "string",
|
||||||
|
}
|
||||||
})
|
})
|
||||||
} else if (context.type === "schema") {
|
} else if (context.type === "schema") {
|
||||||
// Schema contexts are generated dynamically depending on their data
|
// Schema contexts are generated dynamically depending on their data
|
||||||
|
@ -359,6 +362,12 @@ const getProviderContextBindings = (asset, dataProviders) => {
|
||||||
providerId,
|
providerId,
|
||||||
// Table ID is used by JSON fields to know what table the field is in
|
// Table ID is used by JSON fields to know what table the field is in
|
||||||
tableId: table?._id,
|
tableId: table?._id,
|
||||||
|
category: component._instanceName,
|
||||||
|
icon: def.icon,
|
||||||
|
display: {
|
||||||
|
name: fieldSchema.name || key,
|
||||||
|
type: fieldSchema.type,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -385,6 +394,9 @@ const getUserBindings = () => {
|
||||||
// datasource options, based on bindable properties
|
// datasource options, based on bindable properties
|
||||||
fieldSchema,
|
fieldSchema,
|
||||||
providerId: "user",
|
providerId: "user",
|
||||||
|
category: "Current User",
|
||||||
|
icon: "User",
|
||||||
|
display: fieldSchema,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
return bindings
|
return bindings
|
||||||
|
@ -401,11 +413,17 @@ const getDeviceBindings = () => {
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
|
runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
|
||||||
readableBinding: `Device.Mobile`,
|
readableBinding: `Device.Mobile`,
|
||||||
|
category: "Device",
|
||||||
|
icon: "DevicePhone",
|
||||||
|
display: { type: "boolean", name: "mobile" },
|
||||||
})
|
})
|
||||||
bindings.push({
|
bindings.push({
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
|
runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
|
||||||
readableBinding: `Device.Tablet`,
|
readableBinding: `Device.Tablet`,
|
||||||
|
category: "Device",
|
||||||
|
icon: "DevicePhone",
|
||||||
|
display: { type: "boolean", name: "tablet" },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return bindings
|
return bindings
|
||||||
|
@ -429,6 +447,8 @@ const getSelectedRowsBindings = asset => {
|
||||||
"selectedRows"
|
"selectedRows"
|
||||||
)}`,
|
)}`,
|
||||||
readableBinding: `${table._instanceName}.Selected rows`,
|
readableBinding: `${table._instanceName}.Selected rows`,
|
||||||
|
category: "Selected rows",
|
||||||
|
icon: "ViewRow",
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -460,6 +480,9 @@ const getStateBindings = () => {
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: `${safeState}.${makePropSafe(key)}`,
|
runtimeBinding: `${safeState}.${makePropSafe(key)}`,
|
||||||
readableBinding: `State.${key}`,
|
readableBinding: `State.${key}`,
|
||||||
|
category: "State",
|
||||||
|
icon: "AutomatedSegment",
|
||||||
|
display: { name: key },
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
return bindings
|
return bindings
|
||||||
|
@ -482,11 +505,17 @@ const getUrlBindings = asset => {
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
|
runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
|
||||||
readableBinding: `URL.${param}`,
|
readableBinding: `URL.${param}`,
|
||||||
|
category: "URL",
|
||||||
|
icon: "RailTop",
|
||||||
|
display: { type: "string" },
|
||||||
}))
|
}))
|
||||||
const queryParamsBinding = {
|
const queryParamsBinding = {
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: makePropSafe("query"),
|
runtimeBinding: makePropSafe("query"),
|
||||||
readableBinding: "Query params",
|
readableBinding: "Query params",
|
||||||
|
category: "URL",
|
||||||
|
icon: "RailTop",
|
||||||
|
display: { type: "object" },
|
||||||
}
|
}
|
||||||
return urlParamBindings.concat([queryParamsBinding])
|
return urlParamBindings.concat([queryParamsBinding])
|
||||||
}
|
}
|
||||||
|
@ -497,6 +526,9 @@ const getRoleBindings = () => {
|
||||||
type: "context",
|
type: "context",
|
||||||
runtimeBinding: `trim "${role._id}"`,
|
runtimeBinding: `trim "${role._id}"`,
|
||||||
readableBinding: `Role.${role.name}`,
|
readableBinding: `Role.${role.name}`,
|
||||||
|
category: "Role",
|
||||||
|
icon: "UserGroup",
|
||||||
|
display: { type: "string", name: role.name },
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -518,6 +550,7 @@ export const getEventContextBindings = (
|
||||||
// Check if any context bindings are provided by the component for this
|
// Check if any context bindings are provided by the component for this
|
||||||
// setting
|
// setting
|
||||||
const component = findComponent(asset.props, componentId)
|
const component = findComponent(asset.props, componentId)
|
||||||
|
const def = store.actions.components.getDefinition(component?._component)
|
||||||
const settings = getComponentSettings(component?._component)
|
const settings = getComponentSettings(component?._component)
|
||||||
const eventSetting = settings.find(setting => setting.key === settingKey)
|
const eventSetting = settings.find(setting => setting.key === settingKey)
|
||||||
if (eventSetting?.context?.length) {
|
if (eventSetting?.context?.length) {
|
||||||
|
@ -527,6 +560,8 @@ export const getEventContextBindings = (
|
||||||
runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
|
runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
|
||||||
contextEntry.key
|
contextEntry.key
|
||||||
)}`,
|
)}`,
|
||||||
|
category: component._instanceName,
|
||||||
|
icon: def.icon,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -548,6 +583,8 @@ export const getEventContextBindings = (
|
||||||
bindings.push({
|
bindings.push({
|
||||||
readableBinding: `Action ${idx + 1}.${contextValue.label}`,
|
readableBinding: `Action ${idx + 1}.${contextValue.label}`,
|
||||||
runtimeBinding: `actions.${idx}.${contextValue.value}`,
|
runtimeBinding: `actions.${idx}.${contextValue.value}`,
|
||||||
|
category: "Actions",
|
||||||
|
icon: "JourneyAction",
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,9 @@
|
||||||
Body,
|
Body,
|
||||||
Layout,
|
Layout,
|
||||||
Button,
|
Button,
|
||||||
|
ActionButton,
|
||||||
|
Icon,
|
||||||
|
Popover,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { createEventDispatcher, onMount } from "svelte"
|
import { createEventDispatcher, onMount } from "svelte"
|
||||||
import {
|
import {
|
||||||
|
@ -45,9 +48,25 @@
|
||||||
let jsValue = initialValueJS ? value : null
|
let jsValue = initialValueJS ? value : null
|
||||||
let hbsValue = initialValueJS ? null : value
|
let hbsValue = initialValueJS ? null : value
|
||||||
|
|
||||||
|
let selectedCategory = null
|
||||||
|
|
||||||
|
let popover
|
||||||
|
let popoverAnchor
|
||||||
|
let hoverTarget
|
||||||
|
|
||||||
$: usingJS = mode === "JavaScript"
|
$: usingJS = mode === "JavaScript"
|
||||||
$: searchRgx = new RegExp(search, "ig")
|
$: searchRgx = new RegExp(search, "ig")
|
||||||
$: categories = Object.entries(groupBy("category", bindings))
|
$: categories = Object.entries(groupBy("category", bindings))
|
||||||
|
|
||||||
|
$: bindingIcons = bindings?.reduce((acc, ele) => {
|
||||||
|
if (ele.icon) {
|
||||||
|
acc[ele.category] = acc[ele.category] || ele.icon
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
$: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
|
||||||
|
|
||||||
$: filteredCategories = categories
|
$: filteredCategories = categories
|
||||||
.map(([name, categoryBindings]) => ({
|
.map(([name, categoryBindings]) => ({
|
||||||
name,
|
name,
|
||||||
|
@ -55,10 +74,19 @@
|
||||||
return binding.readableBinding.match(searchRgx)
|
return binding.readableBinding.match(searchRgx)
|
||||||
}),
|
}),
|
||||||
}))
|
}))
|
||||||
.filter(category => category.bindings?.length > 0)
|
.filter(category => {
|
||||||
|
return (
|
||||||
|
category.bindings?.length > 0 &&
|
||||||
|
(!selectedCategory ? true : selectedCategory === category.name)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
$: filteredHelpers = helpers?.filter(helper => {
|
$: filteredHelpers = helpers?.filter(helper => {
|
||||||
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
|
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
$: categoryNames = [...categories.map(cat => cat[0]), "Helpers"]
|
||||||
|
|
||||||
$: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
|
$: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
|
||||||
|
|
||||||
const updateValue = val => {
|
const updateValue = val => {
|
||||||
|
@ -140,58 +168,163 @@
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<span class="detailPopover">
|
||||||
|
<Popover
|
||||||
|
align="right-side"
|
||||||
|
bind:this={popover}
|
||||||
|
anchor={popoverAnchor}
|
||||||
|
maxWidth={300}
|
||||||
|
>
|
||||||
|
<Layout gap="S">
|
||||||
|
<div class="helper">
|
||||||
|
{#if hoverTarget.title}
|
||||||
|
<div class="helper__name">{hoverTarget.title}</div>
|
||||||
|
{/if}
|
||||||
|
{#if hoverTarget.description}
|
||||||
|
<div class="helper__description">
|
||||||
|
{@html hoverTarget.description}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if hoverTarget.example}
|
||||||
|
<pre class="helper__example">{hoverTarget.example}</pre>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</Popover>
|
||||||
|
</span>
|
||||||
|
|
||||||
<DrawerContent>
|
<DrawerContent>
|
||||||
<svelte:fragment slot="sidebar">
|
<svelte:fragment slot="sidebar">
|
||||||
<div class="container">
|
<Layout noPadding gap="S">
|
||||||
<section>
|
{#if selectedCategory}
|
||||||
|
<div>
|
||||||
|
<ActionButton
|
||||||
|
secondary
|
||||||
|
icon={"ArrowLeft"}
|
||||||
|
on:click={() => {
|
||||||
|
selectedCategory = null
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !selectedCategory}
|
||||||
<div class="heading">Search</div>
|
<div class="heading">Search</div>
|
||||||
<Search placeholder="Search" bind:value={search} />
|
<Search placeholder="Search" bind:value={search} />
|
||||||
</section>
|
{/if}
|
||||||
{#each filteredCategories as category}
|
|
||||||
{#if category.bindings?.length}
|
{#if !selectedCategory && !search}
|
||||||
<section>
|
<ul class="category-list">
|
||||||
<div class="heading">{category.name}</div>
|
{#each categoryNames as categoryName}
|
||||||
|
<li
|
||||||
|
on:click={() => {
|
||||||
|
selectedCategory = categoryName
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon name={categoryIcons[categoryName]} />
|
||||||
|
<span class="category-name">{categoryName} </span>
|
||||||
|
<span class="category-chevron"><Icon name="ChevronRight" /></span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if selectedCategory || search}
|
||||||
|
{#each filteredCategories as category}
|
||||||
|
{#if category.bindings?.length}
|
||||||
|
<div class="cat-heading">
|
||||||
|
<Icon name={categoryIcons[category.name]} />{category.name}
|
||||||
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
{#each category.bindings as binding}
|
{#each category.bindings as binding}
|
||||||
<li on:click={() => addBinding(binding)}>
|
<li
|
||||||
<span class="binding__label">{binding.readableBinding}</span>
|
class="binding"
|
||||||
{#if binding.type}
|
on:mouseenter={e => {
|
||||||
<span class="binding__type">{binding.type}</span>
|
popoverAnchor = e.target
|
||||||
{/if}
|
if (!binding.description) {
|
||||||
{#if binding.description}
|
return
|
||||||
<br />
|
}
|
||||||
<div class="binding__description">
|
hoverTarget = {
|
||||||
{binding.description || ""}
|
title: binding.display.name || binding.fieldSchema.name,
|
||||||
</div>
|
description: binding.description,
|
||||||
|
}
|
||||||
|
popover.show()
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
on:mouseleave={() => {
|
||||||
|
popover.hide()
|
||||||
|
popoverAnchor = null
|
||||||
|
hoverTarget = null
|
||||||
|
}}
|
||||||
|
on:focus={() => {}}
|
||||||
|
on:blur={() => {}}
|
||||||
|
on:click={() => addBinding(binding)}
|
||||||
|
>
|
||||||
|
<span class="binding__label">
|
||||||
|
{#if binding.display?.name}
|
||||||
|
{binding.display.name}
|
||||||
|
{:else if binding.fieldSchema?.name}
|
||||||
|
{binding.fieldSchema?.name}
|
||||||
|
{:else}
|
||||||
|
{binding.readableBinding}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{#if binding.display?.type || binding.fieldSchema?.type}
|
||||||
|
<span class="binding__typeWrap">
|
||||||
|
<span class="binding__type">
|
||||||
|
{binding.display?.type || binding.fieldSchema?.type}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if selectedCategory === "Helpers" || search}
|
||||||
|
{#if filteredHelpers?.length}
|
||||||
|
<div class="heading">Helpers</div>
|
||||||
|
<ul class="helpers">
|
||||||
|
{#each filteredHelpers as helper}
|
||||||
|
<li
|
||||||
|
class="binding"
|
||||||
|
on:click={() => addHelper(helper, usingJS)}
|
||||||
|
on:mouseenter={e => {
|
||||||
|
popoverAnchor = e.target
|
||||||
|
if (!helper.displayText && helper.description) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
hoverTarget = {
|
||||||
|
title: helper.displayText,
|
||||||
|
description: helper.description,
|
||||||
|
example: getHelperExample(helper, usingJS),
|
||||||
|
}
|
||||||
|
popover.show()
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
on:mouseleave={() => {
|
||||||
|
popover.hide()
|
||||||
|
popoverAnchor = null
|
||||||
|
hoverTarget = null
|
||||||
|
}}
|
||||||
|
on:focus={() => {}}
|
||||||
|
on:blur={() => {}}
|
||||||
|
>
|
||||||
|
<span class="binding__label">{helper.displayText}</span>
|
||||||
|
<span class="binding__typeWrap">
|
||||||
|
<span class="binding__type">function</span>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
|
||||||
{#if filteredHelpers?.length}
|
|
||||||
<section>
|
|
||||||
<div class="heading">Helpers</div>
|
|
||||||
<ul>
|
|
||||||
{#each filteredHelpers as helper}
|
|
||||||
<li on:click={() => addHelper(helper, usingJS)}>
|
|
||||||
<div class="helper">
|
|
||||||
<div class="helper__name">{helper.displayText}</div>
|
|
||||||
<div class="helper__description">
|
|
||||||
{@html helper.description}
|
|
||||||
</div>
|
|
||||||
<pre class="helper__example">{getHelperExample(
|
|
||||||
helper,
|
|
||||||
usingJS
|
|
||||||
)}</pre>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</Layout>
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<Tabs selected={mode} on:select={onChangeMode}>
|
<Tabs selected={mode} on:select={onChangeMode}>
|
||||||
|
@ -241,6 +374,35 @@
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
ul.helpers li * {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
ul.category-list li {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-m);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ul.category-list .category-name {
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
ul.category-list .category-chevron {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
ul.category-list .category-chevron :global(div.icon),
|
||||||
|
.cat-heading :global(div.icon) {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
li.binding {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
li.binding .binding__typeWrap {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
.main :global(textarea) {
|
.main :global(textarea) {
|
||||||
min-height: 202px !important;
|
min-height: 202px !important;
|
||||||
}
|
}
|
||||||
|
@ -251,23 +413,20 @@
|
||||||
padding: var(--spacing-s) var(--spacing-xl);
|
padding: var(--spacing-s) var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.heading,
|
||||||
margin: calc(-1 * var(--spacing-xl));
|
.cat-heading {
|
||||||
}
|
|
||||||
.heading {
|
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--spectrum-global-color-gray-600);
|
color: var(--spectrum-global-color-gray-600);
|
||||||
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
.cat-heading {
|
||||||
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
|
display: flex;
|
||||||
}
|
gap: var(--spacing-m);
|
||||||
section:not(:first-child) {
|
align-items: center;
|
||||||
border-top: var(--border-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -278,7 +437,7 @@
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
padding: var(--spacing-m);
|
padding: var(--spacing-m);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: var(--border-light);
|
background-color: var(--spectrum-global-color-gray-200);
|
||||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||||
border-color 130ms ease-in-out;
|
border-color 130ms ease-in-out;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
@ -292,22 +451,14 @@
|
||||||
li:hover {
|
li:hover {
|
||||||
color: var(--spectrum-global-color-gray-900);
|
color: var(--spectrum-global-color-gray-900);
|
||||||
background-color: var(--spectrum-global-color-gray-50);
|
background-color: var(--spectrum-global-color-gray-50);
|
||||||
border-color: var(--spectrum-global-color-gray-500);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
li:hover :global(*) {
|
|
||||||
color: var(--spectrum-global-color-gray-900) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.binding__label {
|
.binding__label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.binding__description {
|
|
||||||
color: var(--spectrum-global-color-gray-700);
|
|
||||||
margin: 0.5rem 0 0 0;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.binding__type {
|
.binding__type {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background-color: var(--spectrum-global-color-gray-200);
|
background-color: var(--spectrum-global-color-gray-200);
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
}
|
}
|
||||||
return bindings?.map(binding => ({
|
return bindings?.map(binding => ({
|
||||||
...binding,
|
...binding,
|
||||||
category: "Bindable Values",
|
|
||||||
type: null,
|
type: null,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
|
@ -544,7 +544,8 @@
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"label": "Row Index",
|
"label": "Row Index",
|
||||||
"key": "index"
|
"key": "index",
|
||||||
|
"type": "number"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -2314,19 +2315,23 @@
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"label": "Value",
|
"label": "Value",
|
||||||
"key": "__value"
|
"key": "__value",
|
||||||
|
"type": "object"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Valid",
|
"label": "Valid",
|
||||||
"key": "__valid"
|
"key": "__valid",
|
||||||
|
"type": "boolean"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Current Step",
|
"label": "Current Step",
|
||||||
"key": "__currentStep"
|
"key": "__currentStep",
|
||||||
|
"type": "number"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Current Step Valid",
|
"label": "Current Step Valid",
|
||||||
"key": "__currentStepValid"
|
"key": "__currentStepValid",
|
||||||
|
"type": "boolean"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -3550,23 +3555,28 @@
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"label": "Rows",
|
"label": "Rows",
|
||||||
"key": "rows"
|
"key": "rows",
|
||||||
|
"type": "array"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Extra Info",
|
"label": "Extra Info",
|
||||||
"key": "info"
|
"key": "info",
|
||||||
|
"type": "string"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Rows Length",
|
"label": "Rows Length",
|
||||||
"key": "rowsLength"
|
"key": "rowsLength",
|
||||||
|
"type": "number"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Schema",
|
"label": "Schema",
|
||||||
"key": "schema"
|
"key": "schema",
|
||||||
|
"type": "object"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Page Number",
|
"label": "Page Number",
|
||||||
"key": "pageNumber"
|
"key": "pageNumber",
|
||||||
|
"type": "number"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -4328,23 +4338,28 @@
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"label": "Rows",
|
"label": "Rows",
|
||||||
"key": "rows"
|
"key": "rows",
|
||||||
|
"type": "array"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Extra Info",
|
"label": "Extra Info",
|
||||||
"key": "info"
|
"key": "info",
|
||||||
|
"type": "string"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Rows Length",
|
"label": "Rows Length",
|
||||||
"key": "rowsLength"
|
"key": "rowsLength",
|
||||||
|
"type": "number"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Schema",
|
"label": "Schema",
|
||||||
"key": "schema"
|
"key": "schema",
|
||||||
|
"type": "object"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "Page Number",
|
"label": "Page Number",
|
||||||
"key": "pageNumber"
|
"key": "pageNumber",
|
||||||
|
"type": "number"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -4354,7 +4369,8 @@
|
||||||
"values": [
|
"values": [
|
||||||
{
|
{
|
||||||
"label": "Row Index",
|
"label": "Row Index",
|
||||||
"key": "index"
|
"key": "index",
|
||||||
|
"type": "number"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue