forked from tsai/budibase
Martin McKeaveney
6 years ago
committed by
GitHub
GitHub
62 changed files with 595 additions and 580 deletions
@ -0,0 +1,190 @@ |
|||||
|
<script> |
||||
|
import groupBy from "lodash/fp/groupBy" |
||||
|
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
import { isValid } from "@budibase/string-templates" |
||||
|
import { handlebarsCompletions } from "constants/completions" |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
export let value = "" |
||||
|
export let bindingDrawer |
||||
|
export let bindableProperties = [] |
||||
|
|
||||
|
let originalValue = value |
||||
|
let helpers = handlebarsCompletions() |
||||
|
let getCaretPosition |
||||
|
let search = "" |
||||
|
let validity = true |
||||
|
|
||||
|
$: categories = Object.entries(groupBy("category", bindableProperties)) |
||||
|
$: value && checkValid() |
||||
|
$: dispatch("update", value) |
||||
|
$: searchRgx = new RegExp(search, "ig") |
||||
|
|
||||
|
function checkValid() { |
||||
|
validity = isValid(value) |
||||
|
} |
||||
|
|
||||
|
function addToText(binding) { |
||||
|
const position = getCaretPosition() |
||||
|
const toAdd = `{{ ${binding.path} }}` |
||||
|
if (position.start) { |
||||
|
value = |
||||
|
value.substring(0, position.start) + |
||||
|
toAdd + |
||||
|
value.substring(position.end, value.length) |
||||
|
} else { |
||||
|
value += toAdd |
||||
|
} |
||||
|
} |
||||
|
export function cancel() { |
||||
|
dispatch("update", originalValue) |
||||
|
bindingDrawer.close() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="container"> |
||||
|
<div class="list"> |
||||
|
<Heading small>Available bindings</Heading> |
||||
|
<Spacer medium /> |
||||
|
<Input extraThin placeholder="Search" bind:value={search} /> |
||||
|
<Spacer medium /> |
||||
|
{#each categories as [categoryName, bindings]} |
||||
|
<Heading extraSmall>{categoryName}</Heading> |
||||
|
<Spacer extraSmall /> |
||||
|
{#each bindableProperties.filter(binding => |
||||
|
binding.label.match(searchRgx) |
||||
|
) as binding} |
||||
|
<div class="binding" on:click={() => addToText(binding)}> |
||||
|
<span class="binding__label">{binding.label}</span> |
||||
|
<span class="binding__type">{binding.type}</span> |
||||
|
<br /> |
||||
|
<div class="binding__description"> |
||||
|
{binding.description || ''} |
||||
|
</div> |
||||
|
</div> |
||||
|
{/each} |
||||
|
{/each} |
||||
|
<Heading extraSmall>Helpers</Heading> |
||||
|
<Spacer extraSmall /> |
||||
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} |
||||
|
<div class="binding" on:click={() => addToText(helper)}> |
||||
|
<span class="binding__label">{helper.label}</span> |
||||
|
<br /> |
||||
|
<div class="binding__description"> |
||||
|
{@html helper.description || ''} |
||||
|
</div> |
||||
|
<pre>{helper.example || ''}</pre> |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
<div class="text"> |
||||
|
<TextArea |
||||
|
bind:getCaretPosition |
||||
|
thin |
||||
|
bind:value |
||||
|
placeholder="Add text, or click the objects on the left to add them to the textbox." /> |
||||
|
{#if !validity} |
||||
|
<p class="syntax-error"> |
||||
|
Current Handlebars syntax is invalid, please check the guide |
||||
|
<a href="https://handlebarsjs.com/guide/">here</a> |
||||
|
for more details. |
||||
|
</p> |
||||
|
{/if} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
height: 40vh; |
||||
|
overflow-y: auto; |
||||
|
display: grid; |
||||
|
grid-template-columns: 280px 1fr; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
border-right: var(--border-light); |
||||
|
padding: var(--spacing-l); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.list { |
||||
|
border-right: var(--border-light); |
||||
|
padding: var(--spacing-l); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.list::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
padding: var(--spacing-l); |
||||
|
font-family: var(--font-sans); |
||||
|
} |
||||
|
.text :global(textarea) { |
||||
|
min-height: 100px; |
||||
|
} |
||||
|
.text :global(p) { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.binding { |
||||
|
font-size: 12px; |
||||
|
padding: var(--spacing-s); |
||||
|
border-radius: var(--border-radius-m); |
||||
|
} |
||||
|
.binding:hover { |
||||
|
background-color: var(--grey-2); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.binding__label { |
||||
|
font-weight: 500; |
||||
|
text-transform: capitalize; |
||||
|
} |
||||
|
.binding__description { |
||||
|
color: var(--grey-8); |
||||
|
margin-top: 2px; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
pre { |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
.binding__type { |
||||
|
font-family: monospace; |
||||
|
background-color: var(--grey-2); |
||||
|
border-radius: var(--border-radius-m); |
||||
|
padding: 2px; |
||||
|
margin-left: 2px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.editor { |
||||
|
padding-left: var(--spacing-l); |
||||
|
} |
||||
|
.editor :global(textarea) { |
||||
|
min-height: 60px; |
||||
|
} |
||||
|
|
||||
|
.controls { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr auto; |
||||
|
grid-gap: var(--spacing-l); |
||||
|
align-items: center; |
||||
|
margin-top: var(--spacing-m); |
||||
|
} |
||||
|
|
||||
|
.syntax-error { |
||||
|
color: var(--red); |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.syntax-error a { |
||||
|
color: var(--red); |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -1,219 +0,0 @@ |
|||||
<script> |
|
||||
import groupBy from "lodash/fp/groupBy" |
|
||||
import { |
|
||||
TextArea, |
|
||||
Input, |
|
||||
Heading, |
|
||||
Body, |
|
||||
Spacer, |
|
||||
Button, |
|
||||
Popover, |
|
||||
} from "@budibase/bbui" |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
import { isValid } from "@budibase/string-templates" |
|
||||
import { handlebarsCompletions } from "constants/completions" |
|
||||
import { readableToRuntimeBinding } from "builderStore/dataBinding" |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
export let value = "" |
|
||||
export let bindings = [] |
|
||||
export let anchor |
|
||||
export let align |
|
||||
export let popover = null |
|
||||
|
|
||||
let helpers = handlebarsCompletions() |
|
||||
let getCaretPosition |
|
||||
let validity = true |
|
||||
let search = "" |
|
||||
|
|
||||
$: categories = Object.entries(groupBy("category", bindings)) |
|
||||
$: value && checkValid() |
|
||||
$: searchRgx = new RegExp(search, "ig") |
|
||||
|
|
||||
function onClickBinding(binding) { |
|
||||
const position = getCaretPosition() |
|
||||
const toAdd = `{{ ${binding.path} }}` |
|
||||
if (position.start) { |
|
||||
value = |
|
||||
value.substring(0, position.start) + |
|
||||
toAdd + |
|
||||
value.substring(position.end, value.length) |
|
||||
} else { |
|
||||
value += toAdd |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function checkValid() { |
|
||||
const runtimeValue = readableToRuntimeBinding(bindings, value) |
|
||||
validity = isValid(runtimeValue) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<Popover {anchor} {align} bind:this={popover}> |
|
||||
<div class="container"> |
|
||||
<div class="bindings"> |
|
||||
<Heading small>Available bindings</Heading> |
|
||||
<Spacer medium /> |
|
||||
<Input extraThin placeholder="Search" bind:value={search} /> |
|
||||
<Spacer medium /> |
|
||||
<div class="bindings__wrapper"> |
|
||||
<div class="bindings__list"> |
|
||||
{#each categories as [categoryName, bindings]} |
|
||||
<Heading extraSmall>{categoryName}</Heading> |
|
||||
<Spacer extraSmall /> |
|
||||
{#each bindings.filter(binding => |
|
||||
binding.label.match(searchRgx) |
|
||||
) as binding} |
|
||||
<div class="binding" on:click={() => onClickBinding(binding)}> |
|
||||
<span class="binding__label">{binding.label}</span> |
|
||||
<span class="binding__type">{binding.type}</span> |
|
||||
<br /> |
|
||||
<div class="binding__description"> |
|
||||
{binding.description || ''} |
|
||||
</div> |
|
||||
</div> |
|
||||
{/each} |
|
||||
{/each} |
|
||||
<Heading extraSmall>Helpers</Heading> |
|
||||
<Spacer extraSmall /> |
|
||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} |
|
||||
<div class="binding" on:click={() => onClickBinding(helper)}> |
|
||||
<span class="binding__label">{helper.label}</span> |
|
||||
<br /> |
|
||||
<div class="binding__description"> |
|
||||
{@html helper.description || ''} |
|
||||
</div> |
|
||||
<pre>{helper.example || ''}</pre> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="editor"> |
|
||||
<Heading small>Data binding</Heading> |
|
||||
<Body small lh black> |
|
||||
Binding connects one piece of data to another and makes it dynamic. |
|
||||
Click the objects on the left to add them to the textbox. |
|
||||
</Body> |
|
||||
<TextArea |
|
||||
thin |
|
||||
bind:getCaretPosition |
|
||||
bind:value |
|
||||
placeholder="Add options from the left, type text, or do both" /> |
|
||||
{#if !validity} |
|
||||
<p class="syntax-error"> |
|
||||
Current Handlebars syntax is invalid, please check the guide |
|
||||
<a href="https://handlebarsjs.com/guide/">here</a> |
|
||||
for more details. |
|
||||
</p> |
|
||||
{/if} |
|
||||
<div class="controls"> |
|
||||
<a href="https://docs.budibase.com/design/binding"> |
|
||||
<Body small>Learn more about binding</Body> |
|
||||
</a> |
|
||||
<Button on:click={popover.hide} disabled={!validity} primary> |
|
||||
Done |
|
||||
</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Popover> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-template-columns: 280px 1fr; |
|
||||
width: 800px; |
|
||||
} |
|
||||
|
|
||||
.bindings { |
|
||||
border-right: 1px solid var(--grey-4); |
|
||||
flex: 0 0 240px; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-start; |
|
||||
align-items: stretch; |
|
||||
padding-right: var(--spacing-l); |
|
||||
} |
|
||||
.bindings :global(label) { |
|
||||
margin: var(--spacing-m) 0; |
|
||||
} |
|
||||
.bindings :global(label:first-child) { |
|
||||
margin-top: 0; |
|
||||
} |
|
||||
.bindings__wrapper { |
|
||||
overflow-y: scroll; |
|
||||
overflow-x: hidden; |
|
||||
position: relative; |
|
||||
flex: 1 1 auto; |
|
||||
-ms-overflow-style: none; |
|
||||
} |
|
||||
|
|
||||
.bindings__wrapper::-webkit-scrollbar { |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
} |
|
||||
|
|
||||
.bindings__list { |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.binding { |
|
||||
font-size: 12px; |
|
||||
padding: var(--spacing-s); |
|
||||
border-radius: var(--border-radius-m); |
|
||||
} |
|
||||
.binding:hover { |
|
||||
background-color: var(--grey-2); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.binding__label { |
|
||||
font-weight: 500; |
|
||||
text-transform: capitalize; |
|
||||
} |
|
||||
.binding__description { |
|
||||
color: var(--grey-8); |
|
||||
margin-top: 2px; |
|
||||
white-space: normal; |
|
||||
} |
|
||||
|
|
||||
pre { |
|
||||
white-space: normal; |
|
||||
} |
|
||||
|
|
||||
.binding__type { |
|
||||
font-family: monospace; |
|
||||
background-color: var(--grey-2); |
|
||||
border-radius: var(--border-radius-m); |
|
||||
padding: 2px; |
|
||||
margin-left: 2px; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.editor { |
|
||||
padding-left: var(--spacing-l); |
|
||||
} |
|
||||
.editor :global(textarea) { |
|
||||
min-height: 60px; |
|
||||
} |
|
||||
|
|
||||
.controls { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr auto; |
|
||||
grid-gap: var(--spacing-l); |
|
||||
align-items: center; |
|
||||
margin-top: var(--spacing-m); |
|
||||
} |
|
||||
|
|
||||
.syntax-error { |
|
||||
color: var(--red); |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
|
|
||||
.syntax-error a { |
|
||||
color: var(--red); |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,63 +0,0 @@ |
|||||
<script> |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte" |
|
||||
import { Input, Icon } from "@budibase/bbui" |
|
||||
|
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
export let bindings = [] |
|
||||
export let value |
|
||||
|
|
||||
let anchor |
|
||||
let popover = undefined |
|
||||
let enrichedValue |
|
||||
let inputProps |
|
||||
|
|
||||
// Extract all other props to pass to input component |
|
||||
$: { |
|
||||
let { bindings, ...otherProps } = $$props |
|
||||
inputProps = otherProps |
|
||||
} |
|
||||
$: value && dispatch("change", value) |
|
||||
</script> |
|
||||
|
|
||||
<div class="container" bind:this={anchor}> |
|
||||
<Input {...inputProps} bind:value /> |
|
||||
<div class="icon" on:click={popover.show}> |
|
||||
<Icon name="lightning" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<GenericBindingPopover |
|
||||
{anchor} |
|
||||
{bindings} |
|
||||
bind:value |
|
||||
bind:popover |
|
||||
align="right" /> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
right: 2px; |
|
||||
top: 5px; |
|
||||
bottom: 2px; |
|
||||
position: absolute; |
|
||||
align-items: center; |
|
||||
display: flex; |
|
||||
box-sizing: border-box; |
|
||||
padding-left: var(--spacing-xs); |
|
||||
border-left: 1px solid var(--grey-4); |
|
||||
background-color: var(--grey-2); |
|
||||
border-top-right-radius: var(--border-radius-m); |
|
||||
border-bottom-right-radius: var(--border-radius-m); |
|
||||
color: var(--grey-7); |
|
||||
font-size: 16px; |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
.icon:hover { |
|
||||
color: var(--ink); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,36 @@ |
|||||
|
<script> |
||||
|
import { Label } from "@budibase/bbui" |
||||
|
import { getBindableProperties } from "builderStore/dataBinding" |
||||
|
import { currentAsset, store } from "builderStore" |
||||
|
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte" |
||||
|
|
||||
|
export let parameters |
||||
|
|
||||
|
let bindingDrawer |
||||
|
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId) |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
<Label small>Email</Label> |
||||
|
<DrawerBindableInput |
||||
|
title="Email" |
||||
|
value={parameters.email} |
||||
|
on:change={value => (parameters.email = value.detail)} |
||||
|
{bindings} /> |
||||
|
<Label small>Password</Label> |
||||
|
<DrawerBindableInput |
||||
|
title="Password" |
||||
|
value={parameters.password} |
||||
|
on:change={value => (parameters.password = value.detail)} |
||||
|
{bindings} /> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-l); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: auto 1fr auto 1fr; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,7 @@ |
|||||
|
<div class="root">This action doesn't require any additional settings.</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
font-size: var(--font-size-s); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,16 @@ |
|||||
|
import { fade, blur, scale, fly } from "svelte/transition" |
||||
|
|
||||
|
// Default options
|
||||
|
const transitions = new Map([ |
||||
|
["fade", { tn: fade, opt: {} }], |
||||
|
["blur", { tn: blur, opt: {} }], |
||||
|
// This one seems to not result in any effect
|
||||
|
// ["slide", { tn: slide, opt: {} }],
|
||||
|
["scale", { tn: scale, opt: {} }], |
||||
|
["fly", { tn: fly, opt: { y: 80 } }], |
||||
|
]) |
||||
|
|
||||
|
export default function transition(node, { type, options = {} }) { |
||||
|
const { tn, opt } = transitions.get(type) || { tn: () => {}, opt: {} } |
||||
|
return tn(node, { ...opt, ...options }) |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
<script> |
||||
|
import { getContext } from "svelte" |
||||
|
|
||||
|
const { styleable } = getContext("sdk") |
||||
|
const component = getContext("component") |
||||
|
|
||||
|
export let url |
||||
|
export let position |
||||
|
|
||||
|
let style = "" |
||||
|
$: { |
||||
|
if (url) { |
||||
|
style += `background-image: url("${url}");` |
||||
|
} |
||||
|
if (position) { |
||||
|
style += `background-position: ${position};` |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="outer" use:styleable={$component.styles}> |
||||
|
<div class="inner" {style} /> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.outer { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.inner { |
||||
|
position: absolute; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
background-position: center center; |
||||
|
} |
||||
|
</style> |
||||
@ -1,62 +1,62 @@ |
|||||
<script> |
<script> |
||||
import { getContext } from "svelte" |
import { getContext } from "svelte" |
||||
|
|
||||
const { styleable } = getContext("sdk") |
const { styleable, transition } = getContext("sdk") |
||||
const component = getContext("component") |
const component = getContext("component") |
||||
|
|
||||
export let type = "div" |
export let type = "div" |
||||
</script> |
</script> |
||||
|
|
||||
{#if type === 'div'} |
{#if type === 'div'} |
||||
<div use:styleable={$component.styles}> |
<div in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</div> |
</div> |
||||
{:else if type === 'header'} |
{:else if type === 'header'} |
||||
<header use:styleable={$component.styles}> |
<header in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</header> |
</header> |
||||
{:else if type === 'main'} |
{:else if type === 'main'} |
||||
<main use:styleable={$component.styles}> |
<main in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</main> |
</main> |
||||
{:else if type === 'footer'} |
{:else if type === 'footer'} |
||||
<footer use:styleable={$component.styles}> |
<footer in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</footer> |
</footer> |
||||
{:else if type === 'aside'} |
{:else if type === 'aside'} |
||||
<aside use:styleable={$component.styles}> |
<aside in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</aside> |
</aside> |
||||
{:else if type === 'summary'} |
{:else if type === 'summary'} |
||||
<summary use:styleable={$component.styles}> |
<summary in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</summary> |
</summary> |
||||
{:else if type === 'details'} |
{:else if type === 'details'} |
||||
<details use:styleable={$component.styles}> |
<details in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</details> |
</details> |
||||
{:else if type === 'article'} |
{:else if type === 'article'} |
||||
<article use:styleable={$component.styles}> |
<article in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</article> |
</article> |
||||
{:else if type === 'nav'} |
{:else if type === 'nav'} |
||||
<nav use:styleable={$component.styles}> |
<nav in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</nav> |
</nav> |
||||
{:else if type === 'mark'} |
{:else if type === 'mark'} |
||||
<mark use:styleable={$component.styles}> |
<mark in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</mark> |
</mark> |
||||
{:else if type === 'figure'} |
{:else if type === 'figure'} |
||||
<figure use:styleable={$component.styles}> |
<figure in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</figure> |
</figure> |
||||
{:else if type === 'figcaption'} |
{:else if type === 'figcaption'} |
||||
<figcaption use:styleable={$component.styles}> |
<figcaption in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</figcaption> |
</figcaption> |
||||
{:else if type === 'paragraph'} |
{:else if type === 'paragraph'} |
||||
<p use:styleable={$component.styles}> |
<p in:transition={{type: $component.transition}} use:styleable={$component.styles}> |
||||
<slot /> |
<slot /> |
||||
</p> |
</p> |
||||
{/if} |
{/if} |
||||
|
|||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import StringField from "./StringField.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<StringField {...$$props} type="password" /> |
||||
Loading…
Reference in new issue