Yarn format and linting fix
This commit is contained in:
parent
72700bc4ca
commit
4ba3095c2c
12 changed files with 119 additions and 121 deletions
|
@ -16,7 +16,7 @@
|
||||||
import Portal from "./Portal.svelte"
|
import Portal from "./Portal.svelte"
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff"
|
||||||
export let open = false;
|
export let open = false
|
||||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false
|
||||||
export let format = "hexa"
|
export let format = "hexa"
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
getRecentColors()
|
getRecentColors()
|
||||||
}
|
}
|
||||||
|
|
||||||
if(colorPicker) {
|
if (colorPicker) {
|
||||||
colorPicker.focus()
|
colorPicker.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,7 +57,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEscape(e) {
|
function handleEscape(e) {
|
||||||
if(open && e.key === "Escape") {
|
if (open && e.key === "Escape") {
|
||||||
open = false
|
open = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -159,10 +159,8 @@
|
||||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||||
$: selectedColorStyle = buildStyle({ background: value, border })
|
$: selectedColorStyle = buildStyle({ background: value, border })
|
||||||
$: shrink = swatches.length > 0
|
$: shrink = swatches.length > 0
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<Portal>
|
<Portal>
|
||||||
<div
|
<div
|
||||||
class="colorpicker-container"
|
class="colorpicker-container"
|
||||||
|
|
|
@ -38,7 +38,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
function openColorpicker(event) {
|
function openColorpicker(event) {
|
||||||
if (colorPreview) {
|
if (colorPreview) {
|
||||||
open = true
|
open = true
|
||||||
|
@ -50,7 +49,7 @@
|
||||||
dispatch("change", color.detail)
|
dispatch("change", color.detail)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if(open && colorPreview) {
|
$: if (open && colorPreview) {
|
||||||
const {
|
const {
|
||||||
top: spaceAbove,
|
top: spaceAbove,
|
||||||
width,
|
width,
|
||||||
|
@ -62,17 +61,17 @@
|
||||||
const spaceBelow = window.innerHeight - bottom
|
const spaceBelow = window.innerHeight - bottom
|
||||||
const previewCenter = previewWidth / 2
|
const previewCenter = previewWidth / 2
|
||||||
|
|
||||||
let y, x;
|
let y, x
|
||||||
|
|
||||||
if(spaceAbove > spaceBelow) {
|
if (spaceAbove > spaceBelow) {
|
||||||
positionSide = "bottom"
|
positionSide = "bottom"
|
||||||
y = (window.innerHeight - spaceAbove)
|
y = window.innerHeight - spaceAbove
|
||||||
}else{
|
} else {
|
||||||
positionSide = "top"
|
positionSide = "top"
|
||||||
y = bottom
|
y = bottom
|
||||||
}
|
}
|
||||||
|
|
||||||
x = (left + previewCenter) - (pickerWidth / 2)
|
x = left + previewCenter - pickerWidth / 2
|
||||||
|
|
||||||
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
||||||
}
|
}
|
||||||
|
@ -83,7 +82,6 @@
|
||||||
[positionSide]: `${dimensions[positionSide]}px`,
|
[positionSide]: `${dimensions[positionSide]}px`,
|
||||||
left: `${dimensions.left}px`,
|
left: `${dimensions.left}px`,
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
|
@ -99,19 +97,18 @@
|
||||||
</CheckedBackground>
|
</CheckedBackground>
|
||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<Colorpicker
|
<Colorpicker
|
||||||
style={pickerStyle}
|
style={pickerStyle}
|
||||||
on:change={onColorChange}
|
on:change={onColorChange}
|
||||||
on:addswatch
|
on:addswatch
|
||||||
on:removeswatch
|
on:removeswatch
|
||||||
bind:format
|
bind:format
|
||||||
bind:value
|
bind:value
|
||||||
bind:pickerHeight
|
bind:pickerHeight
|
||||||
bind:pickerWidth
|
bind:pickerWidth
|
||||||
bind:open
|
bind:open
|
||||||
{swatches}
|
{swatches}
|
||||||
{disableSwatches}
|
{disableSwatches} />
|
||||||
/>
|
|
||||||
<div on:click|self={() => (open = false)} class="overlay" />
|
<div on:click|self={() => (open = false)} class="overlay" />
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
@ -1,35 +1,35 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
export let target = document.body;
|
export let target = document.body
|
||||||
|
|
||||||
let targetEl;
|
let targetEl
|
||||||
let portal;
|
let portal
|
||||||
let componentInstance;
|
let componentInstance
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (typeof target === "string") {
|
if (typeof target === "string") {
|
||||||
targetEl = document.querySelector(target);
|
targetEl = document.querySelector(target)
|
||||||
// Force exit
|
// Force exit
|
||||||
if (targetEl === null) {
|
if (targetEl === null) {
|
||||||
return () => {};
|
return () => {}
|
||||||
}
|
}
|
||||||
} else if (target instanceof HTMLElement) {
|
} else if (target instanceof HTMLElement) {
|
||||||
targetEl = target;
|
targetEl = target
|
||||||
} else {
|
} else {
|
||||||
throw new TypeError(
|
throw new TypeError(
|
||||||
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
|
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
portal = document.createElement("div");
|
portal = document.createElement("div")
|
||||||
targetEl.appendChild(portal);
|
targetEl.appendChild(portal)
|
||||||
portal.appendChild(componentInstance);
|
portal.appendChild(componentInstance)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
targetEl.removeChild(portal);
|
targetEl.removeChild(portal)
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={componentInstance}>
|
<div bind:this={componentInstance}>
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import {onMount} from "svelte"
|
import { onMount } from "svelte"
|
||||||
import PropertyGroup from "./PropertyGroup.svelte"
|
import PropertyGroup from "./PropertyGroup.svelte"
|
||||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||||
|
|
||||||
|
|
||||||
export let panelDefinition = {}
|
export let panelDefinition = {}
|
||||||
export let componentInstance = {}
|
export let componentInstance = {}
|
||||||
export let componentDefinition = {}
|
export let componentDefinition = {}
|
||||||
|
@ -34,7 +33,6 @@
|
||||||
]
|
]
|
||||||
|
|
||||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="design-view-container">
|
<div class="design-view-container">
|
||||||
|
@ -55,7 +53,7 @@
|
||||||
{componentDefinition}
|
{componentDefinition}
|
||||||
{componentInstance}
|
{componentInstance}
|
||||||
open={currentGroup === groupName}
|
open={currentGroup === groupName}
|
||||||
on:open={() => currentGroup = groupName} />
|
on:open={() => (currentGroup = groupName)} />
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="no-design">
|
<div class="no-design">
|
||||||
|
|
|
@ -13,13 +13,13 @@
|
||||||
let selectMenu
|
let selectMenu
|
||||||
let icon
|
let icon
|
||||||
|
|
||||||
let selectAnchor = null;
|
let selectAnchor = null
|
||||||
let dimensions = {top: 0, bottom: 0, left: 0}
|
let dimensions = { top: 0, bottom: 0, left: 0 }
|
||||||
|
|
||||||
let positionSide = "top"
|
let positionSide = "top"
|
||||||
let maxHeight = 0
|
let maxHeight = 0
|
||||||
let scrollTop = 0;
|
let scrollTop = 0
|
||||||
let containerEl = null;
|
let containerEl = null
|
||||||
|
|
||||||
const handleStyleBind = value =>
|
const handleStyleBind = value =>
|
||||||
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
||||||
|
@ -32,37 +32,40 @@
|
||||||
return () => {
|
return () => {
|
||||||
select.removeEventListener("keydown", handleEnter)
|
select.removeEventListener("keydown", handleEnter)
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function handleEscape(e) {
|
function handleEscape(e) {
|
||||||
if(open && e.key === "Escape") {
|
if (open && e.key === "Escape") {
|
||||||
toggleSelect(false)
|
toggleSelect(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDimensions() {
|
function getDimensions() {
|
||||||
const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
|
const {
|
||||||
|
bottom,
|
||||||
|
top: spaceAbove,
|
||||||
|
left,
|
||||||
|
} = selectAnchor.getBoundingClientRect()
|
||||||
const spaceBelow = window.innerHeight - bottom
|
const spaceBelow = window.innerHeight - bottom
|
||||||
|
|
||||||
let y;
|
let y
|
||||||
|
|
||||||
if (spaceAbove > spaceBelow) {
|
if (spaceAbove > spaceBelow) {
|
||||||
positionSide = "bottom"
|
positionSide = "bottom"
|
||||||
maxHeight = spaceAbove - 20
|
maxHeight = spaceAbove - 20
|
||||||
y = (window.innerHeight - spaceAbove)
|
y = window.innerHeight - spaceAbove
|
||||||
} else {
|
} else {
|
||||||
positionSide = "top"
|
positionSide = "top"
|
||||||
y = bottom
|
y = bottom
|
||||||
maxHeight = spaceBelow - 20
|
maxHeight = spaceBelow - 20
|
||||||
}
|
}
|
||||||
|
|
||||||
dimensions = {[positionSide]: y, left}
|
dimensions = { [positionSide]: y, left }
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEnter(e) {
|
function handleEnter(e) {
|
||||||
if (!open && e.key === "Enter") {
|
if (!open && e.key === "Enter") {
|
||||||
toggleSelect(true)
|
toggleSelect(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -76,7 +79,6 @@
|
||||||
open = isOpen
|
open = isOpen
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function handleClick(val) {
|
function handleClick(val) {
|
||||||
value = val
|
value = val
|
||||||
onChange(value)
|
onChange(value)
|
||||||
|
@ -86,7 +88,7 @@
|
||||||
"max-height": `${maxHeight.toFixed(0)}px`,
|
"max-height": `${maxHeight.toFixed(0)}px`,
|
||||||
"transform-origin": `center ${positionSide}`,
|
"transform-origin": `center ${positionSide}`,
|
||||||
[positionSide]: `${dimensions[positionSide]}px`,
|
[positionSide]: `${dimensions[positionSide]}px`,
|
||||||
"left": `${dimensions.left.toFixed(0)}px`,
|
left: `${dimensions.left.toFixed(0)}px`,
|
||||||
})
|
})
|
||||||
|
|
||||||
$: isOptionsObject = options.every(o => typeof o === "object")
|
$: isOptionsObject = options.every(o => typeof o === "object")
|
||||||
|
@ -95,7 +97,7 @@
|
||||||
? options.find(o => o.value === value)
|
? options.find(o => o.value === value)
|
||||||
: {}
|
: {}
|
||||||
|
|
||||||
$: if(open && selectMenu) {
|
$: if (open && selectMenu) {
|
||||||
selectMenu.focus()
|
selectMenu.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,38 +115,38 @@
|
||||||
<i bind:this={icon} class="ri-arrow-down-s-fill" />
|
<i bind:this={icon} class="ri-arrow-down-s-fill" />
|
||||||
</div>
|
</div>
|
||||||
{#if open}
|
{#if open}
|
||||||
<Portal>
|
<Portal>
|
||||||
<div
|
<div
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class:open
|
class:open
|
||||||
bind:this={selectMenu}
|
bind:this={selectMenu}
|
||||||
style={menuStyle}
|
style={menuStyle}
|
||||||
on:keydown={handleEscape}
|
on:keydown={handleEscape}
|
||||||
class="bb-select-menu">
|
class="bb-select-menu">
|
||||||
<ul>
|
<ul>
|
||||||
{#if isOptionsObject}
|
{#if isOptionsObject}
|
||||||
{#each options as { value: v, label }}
|
{#each options as { value: v, label }}
|
||||||
<li
|
<li
|
||||||
{...handleStyleBind(v)}
|
{...handleStyleBind(v)}
|
||||||
on:click|self={handleClick(v)}
|
on:click|self={handleClick(v)}
|
||||||
class:selected={value === v}>
|
class:selected={value === v}>
|
||||||
{label}
|
{label}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
{#each options as v}
|
{#each options as v}
|
||||||
<li
|
<li
|
||||||
{...handleStyleBind(v)}
|
{...handleStyleBind(v)}
|
||||||
on:click|self={handleClick(v)}
|
on:click|self={handleClick(v)}
|
||||||
class:selected={value === v}>
|
class:selected={value === v}>
|
||||||
{v}
|
{v}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div on:click|self={() => toggleSelect(false)} class="overlay" />
|
<div on:click|self={() => toggleSelect(false)} class="overlay" />
|
||||||
</Portal>
|
</Portal>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
$: style = componentInstance["_styles"][styleCategory] || {}
|
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DetailSummary {name} on:open show={open} >
|
<DetailSummary {name} on:open show={open}>
|
||||||
{#each properties as props}
|
{#each properties as props}
|
||||||
<PropertyControl
|
<PropertyControl
|
||||||
label={props.label}
|
label={props.label}
|
||||||
|
|
|
@ -38,7 +38,9 @@
|
||||||
if (!activeTopNav) return
|
if (!activeTopNav) return
|
||||||
store.update(state => {
|
store.update(state => {
|
||||||
if (!state.previousTopNavPath) state.previousTopNavPath = {}
|
if (!state.previousTopNavPath) state.previousTopNavPath = {}
|
||||||
state.previousTopNavPath[activeTopNav.path] = window.location.pathname.replace("/_builder", "")
|
state.previousTopNavPath[
|
||||||
|
activeTopNav.path
|
||||||
|
] = window.location.pathname.replace("/_builder", "")
|
||||||
$goto(state.previousTopNavPath[path] || path)
|
$goto(state.previousTopNavPath[path] || path)
|
||||||
return state
|
return state
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,14 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { params } from "@sveltech/routify"
|
import { params } from "@sveltech/routify"
|
||||||
import { backendUiStore } from "builderStore"
|
import { backendUiStore } from "builderStore"
|
||||||
|
|
||||||
if ($params.selectedModel) {
|
if ($params.selectedModel) {
|
||||||
const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
|
const model = $backendUiStore.models.find(
|
||||||
if (model) {
|
m => m._id === $params.selectedModel
|
||||||
backendUiStore.actions.models.select(model)
|
)
|
||||||
|
if (model) {
|
||||||
|
backendUiStore.actions.models.select(model)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -10,7 +10,11 @@
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
// navigate to first model in list, if not already selected
|
// navigate to first model in list, if not already selected
|
||||||
// and this is the final url (i.e. no selectedModel)
|
// and this is the final url (i.e. no selectedModel)
|
||||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
if (
|
||||||
|
!$leftover &&
|
||||||
|
$backendUiStore.models.length > 0 &&
|
||||||
|
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
|
||||||
|
) {
|
||||||
$goto(`./${$backendUiStore.models[0]._id}`)
|
$goto(`./${$backendUiStore.models[0]._id}`)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -8,9 +8,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
// navigate to first model in list, if not already selected
|
// navigate to first model in list, if not already selected
|
||||||
// and this is the final url (i.e. no selectedModel)
|
// and this is the final url (i.e. no selectedModel)
|
||||||
if (!$leftover && $backendUiStore.models.length > 0 && (!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)) {
|
if (
|
||||||
|
!$leftover &&
|
||||||
|
$backendUiStore.models.length > 0 &&
|
||||||
|
(!$backendUiStore.selectedModel || !$backendUiStore.selectedModel._id)
|
||||||
|
) {
|
||||||
// this file routes as .../models/index, so, go up one.
|
// this file routes as .../models/index, so, go up one.
|
||||||
$goto(`../${$backendUiStore.models[0]._id}`)
|
$goto(`../${$backendUiStore.models[0]._id}`)
|
||||||
}
|
}
|
||||||
|
@ -18,7 +22,5 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $backendUiStore.models.length === 0}
|
{#if $backendUiStore.models.length === 0}
|
||||||
Please create a model
|
Please create a model
|
||||||
{:else}
|
{:else}Please select a model{/if}
|
||||||
Please select a model
|
|
||||||
{/if}
|
|
||||||
|
|
|
@ -40,10 +40,7 @@
|
||||||
|
|
||||||
<div class="nav-section">
|
<div class="nav-section">
|
||||||
<div class="nav-section-title">Contact</div>
|
<div class="nav-section-title">Contact</div>
|
||||||
<Link
|
<Link icon={ContributionIcon} title="Contribute" href="/" />
|
||||||
icon={ContributionIcon}
|
|
||||||
title="Contribute"
|
|
||||||
href="/" />
|
|
||||||
<Link icon={BugIcon} title="Report bug" href="/" />
|
<Link icon={BugIcon} title="Report bug" href="/" />
|
||||||
<Link icon={EmailIcon} title="Email" href="/" />
|
<Link icon={EmailIcon} title="Email" href="/" />
|
||||||
<Link icon={TwitterIcon} title="Twitter" href="/" />
|
<Link icon={TwitterIcon} title="Twitter" href="/" />
|
||||||
|
|
|
@ -46,9 +46,7 @@
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="welcome">Welcome to the Budibase Beta</div>
|
<div class="welcome">Welcome to the Budibase Beta</div>
|
||||||
<Button purple large on:click={showCreateAppModal}>
|
<Button purple large on:click={showCreateAppModal}>Create New Web App</Button>
|
||||||
Create New Web App
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
|
@ -69,7 +67,6 @@
|
||||||
{/await}
|
{/await}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
Loading…
Reference in a new issue