screens can now select a transition rather than only use fade
This commit is contained in:
parent
cda7c7f4c1
commit
ba7cc5c479
4 changed files with 16 additions and 19 deletions
|
@ -18,9 +18,7 @@
|
||||||
<!-- Ensure to fully remount when screen changes -->
|
<!-- Ensure to fully remount when screen changes -->
|
||||||
{#key screenDefinition?._id}
|
{#key screenDefinition?._id}
|
||||||
<Provider key="url" data={params}>
|
<Provider key="url" data={params}>
|
||||||
<div in:fade>
|
|
||||||
<Component definition={screenDefinition} />
|
<Component definition={screenDefinition} />
|
||||||
</div>
|
|
||||||
</Provider>
|
</Provider>
|
||||||
{/key}
|
{/key}
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"icon": "ri-layout-column-line",
|
"icon": "ri-layout-column-line",
|
||||||
"hasChildren": true,
|
"hasChildren": true,
|
||||||
"styleable": true,
|
"styleable": true,
|
||||||
|
"transitionable": true,
|
||||||
"settings": [
|
"settings": [
|
||||||
{
|
{
|
||||||
"type": "select",
|
"type": "select",
|
||||||
|
@ -286,7 +287,6 @@
|
||||||
"description": "A basic component for displaying images",
|
"description": "A basic component for displaying images",
|
||||||
"icon": "ri-image-line",
|
"icon": "ri-image-line",
|
||||||
"styleable": true,
|
"styleable": true,
|
||||||
"transitionable": true,
|
|
||||||
"settings": [
|
"settings": [
|
||||||
{
|
{
|
||||||
"type": "text",
|
"type": "text",
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -17,5 +17,4 @@
|
||||||
class={className}
|
class={className}
|
||||||
src={url}
|
src={url}
|
||||||
alt={description}
|
alt={description}
|
||||||
use:styleable={$component.styles}
|
use:styleable={$component.styles} />
|
||||||
in:transition={{type: $component.transition}} />
|
|
||||||
|
|
Loading…
Reference in a new issue