formatting and lint
This commit is contained in:
Joe
parent
b8c0678c87
commit
6a4f47a4c8
|
|
@ -16,7 +16,7 @@
|
|||
import Portal from "./Portal.svelte"
|
||||
|
||||
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 disableSwatches = false
|
||||
export let format = "hexa"
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
getRecentColors()
|
||||
}
|
||||
|
||||
if(colorPicker) {
|
||||
if (colorPicker) {
|
||||
colorPicker.focus()
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
function handleEscape(e) {
|
||||
if(open && e.key === "Escape") {
|
||||
if (open && e.key === "Escape") {
|
||||
open = false
|
||||
}
|
||||
}
|
||||
|
|
@ -159,10 +159,8 @@
|
|||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||
$: selectedColorStyle = buildStyle({ background: value, border })
|
||||
$: shrink = swatches.length > 0
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<Portal>
|
||||
<div
|
||||
class="colorpicker-container"
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
function openColorpicker(event) {
|
||||
if (colorPreview) {
|
||||
open = true
|
||||
|
|
@ -50,7 +49,7 @@
|
|||
dispatch("change", color.detail)
|
||||
}
|
||||
|
||||
$: if(open && colorPreview) {
|
||||
$: if (open && colorPreview) {
|
||||
const {
|
||||
top: spaceAbove,
|
||||
width,
|
||||
|
|
@ -62,17 +61,17 @@
|
|||
const spaceBelow = window.innerHeight - bottom
|
||||
const previewCenter = previewWidth / 2
|
||||
|
||||
let y, x;
|
||||
let y, x
|
||||
|
||||
if(spaceAbove > spaceBelow) {
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionSide = "bottom"
|
||||
y = (window.innerHeight - spaceAbove)
|
||||
}else{
|
||||
y = window.innerHeight - spaceAbove
|
||||
} else {
|
||||
positionSide = "top"
|
||||
y = bottom
|
||||
}
|
||||
|
||||
x = (left + previewCenter) - (pickerWidth / 2)
|
||||
x = left + previewCenter - pickerWidth / 2
|
||||
|
||||
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
||||
}
|
||||
|
|
@ -83,7 +82,6 @@
|
|||
[positionSide]: `${dimensions[positionSide]}px`,
|
||||
left: `${dimensions.left}px`,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<div class="color-preview-container">
|
||||
|
|
@ -99,19 +97,18 @@
|
|||
</CheckedBackground>
|
||||
|
||||
{#if open}
|
||||
<Colorpicker
|
||||
style={pickerStyle}
|
||||
on:change={onColorChange}
|
||||
on:addswatch
|
||||
on:removeswatch
|
||||
bind:format
|
||||
bind:value
|
||||
bind:pickerHeight
|
||||
bind:pickerWidth
|
||||
bind:open
|
||||
{swatches}
|
||||
{disableSwatches}
|
||||
/>
|
||||
<Colorpicker
|
||||
style={pickerStyle}
|
||||
on:change={onColorChange}
|
||||
on:addswatch
|
||||
on:removeswatch
|
||||
bind:format
|
||||
bind:value
|
||||
bind:pickerHeight
|
||||
bind:pickerWidth
|
||||
bind:open
|
||||
{swatches}
|
||||
{disableSwatches} />
|
||||
<div on:click|self={() => (open = false)} class="overlay" />
|
||||
{/if}
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let target = document.body;
|
||||
export let target = document.body
|
||||
|
||||
let targetEl;
|
||||
let portal;
|
||||
let componentInstance;
|
||||
let targetEl
|
||||
let portal
|
||||
let componentInstance
|
||||
|
||||
onMount(() => {
|
||||
if (typeof target === "string") {
|
||||
targetEl = document.querySelector(target);
|
||||
targetEl = document.querySelector(target)
|
||||
// Force exit
|
||||
if (targetEl === null) {
|
||||
return () => {};
|
||||
return () => {}
|
||||
}
|
||||
} else if (target instanceof HTMLElement) {
|
||||
targetEl = target;
|
||||
targetEl = target
|
||||
} else {
|
||||
throw new TypeError(
|
||||
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
portal = document.createElement("div");
|
||||
targetEl.appendChild(portal);
|
||||
portal.appendChild(componentInstance);
|
||||
portal = document.createElement("div")
|
||||
targetEl.appendChild(portal)
|
||||
portal.appendChild(componentInstance)
|
||||
|
||||
return () => {
|
||||
targetEl.removeChild(portal);
|
||||
};
|
||||
});
|
||||
targetEl.removeChild(portal)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={componentInstance}>
|
||||
|
|
|
|||
|
|
@ -99,9 +99,7 @@
|
|||
{selectedCategory} />
|
||||
|
||||
{#if displayName}
|
||||
<div class="instance-name">
|
||||
{componentInstance._instanceName}
|
||||
</div>
|
||||
<div class="instance-name">{componentInstance._instanceName}</div>
|
||||
{/if}
|
||||
|
||||
<div class="component-props-container">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script>
|
||||
import {onMount} from "svelte"
|
||||
import { onMount } from "svelte"
|
||||
import PropertyGroup from "./PropertyGroup.svelte"
|
||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||
|
||||
|
||||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
]
|
||||
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
|
||||
</script>
|
||||
|
||||
<div class="design-view-container">
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
{componentDefinition}
|
||||
{componentInstance}
|
||||
open={currentGroup === groupName}
|
||||
on:open={() => currentGroup = groupName} />
|
||||
on:open={() => (currentGroup = groupName)} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
let selectMenu
|
||||
let icon
|
||||
|
||||
let selectAnchor = null;
|
||||
let dimensions = {top: 0, bottom: 0, left: 0}
|
||||
let selectAnchor = null
|
||||
let dimensions = { top: 0, bottom: 0, left: 0 }
|
||||
|
||||
let positionSide = "top"
|
||||
let maxHeight = 0
|
||||
let scrollTop = 0;
|
||||
let containerEl = null;
|
||||
let scrollTop = 0
|
||||
let containerEl = null
|
||||
|
||||
const handleStyleBind = value =>
|
||||
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
||||
|
|
@ -32,51 +32,53 @@
|
|||
return () => {
|
||||
select.removeEventListener("keydown", handleEnter)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function handleEscape(e) {
|
||||
if(open && e.key === "Escape") {
|
||||
toggleSelect(false)
|
||||
if (open && e.key === "Escape") {
|
||||
toggleSelect(false)
|
||||
}
|
||||
}
|
||||
|
||||
function getDimensions() {
|
||||
const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
|
||||
const {
|
||||
bottom,
|
||||
top: spaceAbove,
|
||||
left,
|
||||
} = selectAnchor.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - bottom
|
||||
|
||||
let y;
|
||||
let y
|
||||
|
||||
if (spaceAbove > spaceBelow) {
|
||||
positionSide = "bottom"
|
||||
maxHeight = spaceAbove - 20
|
||||
y = (window.innerHeight - spaceAbove)
|
||||
maxHeight = spaceAbove - 20
|
||||
y = window.innerHeight - spaceAbove
|
||||
} else {
|
||||
positionSide = "top"
|
||||
y = bottom
|
||||
maxHeight = spaceBelow - 20
|
||||
}
|
||||
|
||||
dimensions = {[positionSide]: y, left}
|
||||
dimensions = { [positionSide]: y, left }
|
||||
}
|
||||
|
||||
function handleEnter(e) {
|
||||
if (!open && e.key === "Enter") {
|
||||
toggleSelect(true)
|
||||
}
|
||||
toggleSelect(true)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelect(isOpen) {
|
||||
getDimensions()
|
||||
if (isOpen) {
|
||||
icon.style.transform = "rotate(180deg)"
|
||||
icon.style.transform = "rotate(180deg)"
|
||||
} else {
|
||||
icon.style.transform = "rotate(0deg)"
|
||||
}
|
||||
open = isOpen
|
||||
}
|
||||
|
||||
|
||||
function handleClick(val) {
|
||||
value = val
|
||||
onChange(value)
|
||||
|
|
@ -86,7 +88,7 @@
|
|||
"max-height": `${maxHeight.toFixed(0)}px`,
|
||||
"transform-origin": `center ${positionSide}`,
|
||||
[positionSide]: `${dimensions[positionSide]}px`,
|
||||
"left": `${dimensions.left.toFixed(0)}px`,
|
||||
left: `${dimensions.left.toFixed(0)}px`,
|
||||
})
|
||||
|
||||
$: isOptionsObject = options.every(o => typeof o === "object")
|
||||
|
|
@ -95,7 +97,7 @@
|
|||
? options.find(o => o.value === value)
|
||||
: {}
|
||||
|
||||
$: if(open && selectMenu) {
|
||||
$: if (open && selectMenu) {
|
||||
selectMenu.focus()
|
||||
}
|
||||
|
||||
|
|
@ -113,38 +115,38 @@
|
|||
<i bind:this={icon} class="ri-arrow-down-s-fill" />
|
||||
</div>
|
||||
{#if open}
|
||||
<Portal>
|
||||
<div
|
||||
tabindex="0"
|
||||
class:open
|
||||
bind:this={selectMenu}
|
||||
style={menuStyle}
|
||||
on:keydown={handleEscape}
|
||||
class="bb-select-menu">
|
||||
<ul>
|
||||
{#if isOptionsObject}
|
||||
{#each options as { value: v, label }}
|
||||
<li
|
||||
{...handleStyleBind(v)}
|
||||
on:click|self={handleClick(v)}
|
||||
class:selected={value === v}>
|
||||
{label}
|
||||
</li>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each options as v}
|
||||
<li
|
||||
{...handleStyleBind(v)}
|
||||
on:click|self={handleClick(v)}
|
||||
class:selected={value === v}>
|
||||
{v}
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div on:click|self={() => toggleSelect(false)} class="overlay" />
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div
|
||||
tabindex="0"
|
||||
class:open
|
||||
bind:this={selectMenu}
|
||||
style={menuStyle}
|
||||
on:keydown={handleEscape}
|
||||
class="bb-select-menu">
|
||||
<ul>
|
||||
{#if isOptionsObject}
|
||||
{#each options as { value: v, label }}
|
||||
<li
|
||||
{...handleStyleBind(v)}
|
||||
on:click|self={handleClick(v)}
|
||||
class:selected={value === v}>
|
||||
{label}
|
||||
</li>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each options as v}
|
||||
<li
|
||||
{...handleStyleBind(v)}
|
||||
on:click|self={handleClick(v)}
|
||||
class:selected={value === v}>
|
||||
{v}
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div on:click|self={() => toggleSelect(false)} class="overlay" />
|
||||
</Portal>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||
</script>
|
||||
|
||||
<DetailSummary {name} on:open show={open} >
|
||||
<DetailSummary {name} on:open show={open}>
|
||||
{#each properties as props}
|
||||
<PropertyControl
|
||||
label={props.label}
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ export default {
|
|||
{ label: "Stripe Color", key: "stripeColor", control: Input },
|
||||
{ label: "Border Color", key: "borderColor", control: Input },
|
||||
{ label: "TH Color", key: "backgroundColor", control: Input },
|
||||
{ label: "TH Font Color", key: "color", control: Input }
|
||||
{ label: "TH Font Color", key: "color", control: Input },
|
||||
],
|
||||
},
|
||||
children: [],
|
||||
|
|
@ -336,7 +336,7 @@ export default {
|
|||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Model", key: "model", control: ModelSelect,},
|
||||
{ label: "Model", key: "model", control: ModelSelect },
|
||||
],
|
||||
},
|
||||
template: {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@
|
|||
if (!activeTopNav) return
|
||||
store.update(state => {
|
||||
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)
|
||||
return state
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<script>
|
||||
import { params } from "@sveltech/routify"
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { params } from "@sveltech/routify"
|
||||
import { backendUiStore } from "builderStore"
|
||||
|
||||
if ($params.selectedModel) {
|
||||
const model = $backendUiStore.models.find(m => m._id === $params.selectedModel)
|
||||
if (model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
if ($params.selectedModel) {
|
||||
const model = $backendUiStore.models.find(
|
||||
m => m._id === $params.selectedModel
|
||||
)
|
||||
if (model) {
|
||||
backendUiStore.actions.models.select(model)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
onMount(async () => {
|
||||
// navigate to first model in list, if not already selected
|
||||
// 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}`)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@
|
|||
}
|
||||
|
||||
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)
|
||||
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.
|
||||
$goto(`../${$backendUiStore.models[0]._id}`)
|
||||
}
|
||||
|
|
@ -18,7 +22,5 @@
|
|||
</script>
|
||||
|
||||
{#if $backendUiStore.models.length === 0}
|
||||
Please create a model
|
||||
{:else}
|
||||
Please select a model
|
||||
{/if}
|
||||
Please create a model
|
||||
{:else}Please select a model{/if}
|
||||
|
|
|
|||
|
|
@ -68,71 +68,76 @@
|
|||
</table>
|
||||
|
||||
<style>
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Zebra striping */
|
||||
tr:nth-of-type(odd) {
|
||||
background: var(--stripeColor);
|
||||
}
|
||||
tr:nth-of-type(odd) {
|
||||
background: var(--stripeColor);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--backgroundColor);
|
||||
color: var(--color);
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
th {
|
||||
background-color: var(--backgroundColor);
|
||||
color: var(--color);
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--borderColor);
|
||||
text-align: left;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--borderColor);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
/* Force table to not be like tables anymore */
|
||||
table,
|
||||
thead,
|
||||
tbody,
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
/* Hide table headers (but not display: none;, for accessibility) */
|
||||
thead tr {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
/* Force table to not be like tables anymore */
|
||||
table, thead, tbody, th, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide table headers (but not display: none;, for accessibility) */
|
||||
thead tr {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
tr { border: 1px solid var(--borderColor); }
|
||||
|
||||
td {
|
||||
/* Behave like a "row" */
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 10%;
|
||||
}
|
||||
tr {
|
||||
border: 1px solid var(--borderColor);
|
||||
}
|
||||
|
||||
td:before {
|
||||
/* Now like a table header */
|
||||
position: absolute;
|
||||
/* Top/left values mimic padding */
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 45%;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
/* Label the data */
|
||||
content: attr(data-column);
|
||||
}
|
||||
}
|
||||
td {
|
||||
/* Behave like a "row" */
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
td:before {
|
||||
/* Now like a table header */
|
||||
position: absolute;
|
||||
/* Top/left values mimic padding */
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 45%;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
/* Label the data */
|
||||
content: attr(data-column);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue