lint ✨
This commit is contained in:
Martin McKeaveney
parent
8ab2e0b6aa
commit
83da838fcd
|
|
@ -12,7 +12,13 @@
|
|||
let linkedRecords = new Set(linked)
|
||||
|
||||
$: linked = [...linkedRecords]
|
||||
$: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
|
||||
$: FIELDS_TO_HIDE = [
|
||||
"modelId",
|
||||
"type",
|
||||
"_id",
|
||||
"_rev",
|
||||
$backendUiStore.selectedModel.name,
|
||||
]
|
||||
|
||||
async function fetchRecords() {
|
||||
const FETCH_RECORDS_URL = `/api/${modelId}/records`
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
|
||||
function linkRecord(id) {
|
||||
if (linkedRecords.has(id)) {
|
||||
linkedRecords.delete(id);
|
||||
linkedRecords.delete(id)
|
||||
} else {
|
||||
linkedRecords.add(id)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,18 +4,23 @@
|
|||
import { backendUiStore } from "builderStore"
|
||||
import api from "builderStore/api"
|
||||
|
||||
|
||||
export let ids = []
|
||||
export let header
|
||||
|
||||
let records = []
|
||||
let open = false
|
||||
|
||||
$: FIELDS_TO_HIDE = ["modelId", "type", "_id", "_rev", $backendUiStore.selectedModel.name]
|
||||
$: FIELDS_TO_HIDE = [
|
||||
"modelId",
|
||||
"type",
|
||||
"_id",
|
||||
"_rev",
|
||||
$backendUiStore.selectedModel.name,
|
||||
]
|
||||
|
||||
async function fetchRecords() {
|
||||
const response = await api.post("/api/records/search", {
|
||||
keys: ids
|
||||
const response = await api.post("/api/records/search", {
|
||||
keys: ids,
|
||||
})
|
||||
records = await response.json()
|
||||
}
|
||||
|
|
@ -35,10 +40,10 @@
|
|||
<a on:click={toggleOpen}>{records.length}</a>
|
||||
{#if open}
|
||||
<div class="popover" transition:fade>
|
||||
<header>
|
||||
<h3>{header}</h3>
|
||||
<i class="ri-close-circle-fill" on:click={toggleOpen} />
|
||||
</header>
|
||||
<header>
|
||||
<h3>{header}</h3>
|
||||
<i class="ri-close-circle-fill" on:click={toggleOpen} />
|
||||
</header>
|
||||
{#each records as record}
|
||||
<div class="linked-record">
|
||||
<div class="fields">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import { Button } from "@budibase/bbui"
|
||||
import Select from "components/common/Select.svelte"
|
||||
import ActionButton from "components/common/ActionButton.svelte"
|
||||
import LinkedRecord from "./LinkedRecord.svelte";
|
||||
import LinkedRecord from "./LinkedRecord.svelte"
|
||||
import TablePagination from "./TablePagination.svelte"
|
||||
import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
|
||||
import * as api from "./api"
|
||||
|
|
@ -46,14 +46,12 @@
|
|||
|
||||
$: {
|
||||
if ($backendUiStore.selectedView) {
|
||||
api
|
||||
.fetchDataForView($backendUiStore.selectedView)
|
||||
.then(records => {
|
||||
data = records || []
|
||||
headers = Object.keys($backendUiStore.selectedModel.schema).filter(
|
||||
key => !INTERNAL_HEADERS.includes(key)
|
||||
)
|
||||
})
|
||||
api.fetchDataForView($backendUiStore.selectedView).then(records => {
|
||||
data = records || []
|
||||
headers = Object.keys($backendUiStore.selectedModel.schema).filter(
|
||||
key => !INTERNAL_HEADERS.includes(key)
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -91,10 +89,6 @@
|
|||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="search">
|
||||
<i class="ri-search-line"></i>
|
||||
<input placeholder="Search" class="budibase__input" bind:value={search} />
|
||||
</div>
|
||||
<table class="uk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -135,11 +129,9 @@
|
|||
</td>
|
||||
{#each headers as header}
|
||||
<td>
|
||||
{#if Array.isArray(row[header])}
|
||||
<LinkedRecord {header} ids={row[header]} />
|
||||
{:else}
|
||||
{row[header] || 0}
|
||||
{/if}
|
||||
{#if Array.isArray(row[header])}
|
||||
<LinkedRecord {header} ids={row[header]} />
|
||||
{:else}{row[header] || 0}{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
export let record
|
||||
export let onClosed
|
||||
|
||||
</script>
|
||||
|
||||
<section>
|
||||
|
|
@ -26,7 +25,7 @@
|
|||
alert
|
||||
on:click={async () => {
|
||||
await api.deleteRecord(record)
|
||||
notifier.danger("Record deleted")
|
||||
notifier.danger('Record deleted')
|
||||
backendUiStore.actions.records.delete(record)
|
||||
onClosed()
|
||||
}}>
|
||||
|
|
|
|||
|
|
@ -63,4 +63,4 @@
|
|||
input {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import * as blockDefinitions from "constants/backend"
|
||||
import { backendUiStore } from "builderStore";
|
||||
import { backendUiStore } from "builderStore"
|
||||
import Block from "components/common/Block.svelte"
|
||||
|
||||
const HEADINGS = [
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
{
|
||||
title: "Blocks",
|
||||
key: "BLOCKS",
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
let selectedTab = "FIELDS"
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@
|
|||
function createModel(model) {
|
||||
const { schema, ...rest } = $backendUiStore.selectedModel
|
||||
|
||||
backendUiStore.actions.models.save({
|
||||
backendUiStore.actions.models.save({
|
||||
model: {
|
||||
...model,
|
||||
...rest
|
||||
...rest,
|
||||
},
|
||||
instanceId: $backendUiStore.selectedDatabase._id
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -60,7 +59,11 @@
|
|||
<p>Blocks are pre-made fields and help you build your model quicker.</p>
|
||||
<div class="blocks">
|
||||
{#each Object.values(MODELS) as model}
|
||||
<Block tertiary title={model.name} icon={model.icon} on:click={() => createModel(model)}/>
|
||||
<Block
|
||||
tertiary
|
||||
title={model.name}
|
||||
icon={model.icon}
|
||||
on:click={() => createModel(model)} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,12 +30,11 @@
|
|||
|
||||
async function deleteModel() {
|
||||
const model = $backendUiStore.selectedModel
|
||||
const instanceId = $backendUiStore.selectedDatabase._id
|
||||
const field = $backendUiStore.selectedField
|
||||
|
||||
if (field) {
|
||||
delete model.schema[field]
|
||||
backendUiStore.actions.models.save({ model, instanceId })
|
||||
backendUiStore.actions.models.save({ model })
|
||||
notifier.danger(`Field ${field} deleted.`)
|
||||
return
|
||||
}
|
||||
|
|
@ -52,7 +51,6 @@
|
|||
|
||||
async function saveModel() {
|
||||
await backendUiStore.actions.models.save({
|
||||
instanceId: $backendUiStore.selectedDatabase._id,
|
||||
model: $backendUiStore.draftModel,
|
||||
})
|
||||
notifier.success(
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
<script>
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import {fade} from "svelte/transition"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
export let backgroundSize = "10px"
|
||||
export let borderRadius = ""
|
||||
export let height = ""
|
||||
export let width = ""
|
||||
export let margin = ""
|
||||
|
||||
$: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
|
||||
export let backgroundSize = "10px"
|
||||
export let borderRadius = ""
|
||||
export let height = ""
|
||||
export let width = ""
|
||||
export let margin = ""
|
||||
|
||||
$: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
|
||||
</script>
|
||||
|
||||
<div in:fade {style}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
||||
|
|
@ -19,7 +22,3 @@
|
|||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div in:fade {style}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import { fade } from 'svelte/transition';
|
||||
import Swatch from "./Swatch.svelte";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import Swatch from "./Swatch.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
import {
|
||||
getColorFormat,
|
||||
convertToHSVA,
|
||||
|
|
@ -14,16 +14,16 @@
|
|||
import ButtonGroup from "./ButtonGroup.svelte"
|
||||
import Input from "./Input.svelte"
|
||||
|
||||
export let value = "#3ec1d3ff";
|
||||
export let value = "#3ec1d3ff"
|
||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
||||
export let disableSwatches = false
|
||||
export let format = "hexa";
|
||||
export let open = false;
|
||||
|
||||
export let pickerHeight = 0;
|
||||
export let pickerWidth = 0;
|
||||
export let format = "hexa"
|
||||
export let open = false
|
||||
|
||||
let adder = null;
|
||||
export let pickerHeight = 0
|
||||
export let pickerWidth = 0
|
||||
|
||||
let adder = null
|
||||
|
||||
let h = null
|
||||
let s = null
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
const dispatch = createEventDispatcher()
|
||||
|
||||
onMount(() => {
|
||||
if(!swatches.length > 0) {
|
||||
if (!swatches.length > 0) {
|
||||
//Don't use locally stored recent colors if swatches have been passed as props
|
||||
getRecentColors()
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
function getRecentColors() {
|
||||
let colorStore = localStorage.getItem("cp:recent-colors")
|
||||
if (colorStore) {
|
||||
swatches = JSON.parse(colorStore)
|
||||
swatches = JSON.parse(colorStore)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,26 +74,26 @@
|
|||
|
||||
//fired by choosing a color from the palette
|
||||
function setSaturationAndValue({ detail }) {
|
||||
s = detail.s;
|
||||
v = detail.v;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
s = detail.s
|
||||
v = detail.v
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
dispatchValue()
|
||||
}
|
||||
|
||||
function setHue({color, isDrag}) {
|
||||
h = color;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
if(!isDrag) {
|
||||
function setHue({ color, isDrag }) {
|
||||
h = color
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
if (!isDrag) {
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setAlpha({color, isDrag}) {
|
||||
a = color === "1.00" ? "1" : color;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
if(!isDrag) {
|
||||
dispatchValue()
|
||||
}
|
||||
function setAlpha({ color, isDrag }) {
|
||||
a = color === "1.00" ? "1" : color
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
if (!isDrag) {
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchValue() {
|
||||
|
|
@ -101,43 +101,42 @@
|
|||
}
|
||||
|
||||
function changeFormatAndConvert(f) {
|
||||
format = f;
|
||||
value = convertHsvaToFormat([h, s, v, a], format);
|
||||
format = f
|
||||
value = convertHsvaToFormat([h, s, v, a], format)
|
||||
}
|
||||
|
||||
function handleColorInput(text) {
|
||||
let format = getColorFormat(text)
|
||||
if(format) {
|
||||
if (format) {
|
||||
value = text
|
||||
convertAndSetHSVA()
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchInputChange() {
|
||||
if(format) {
|
||||
if (format) {
|
||||
dispatchValue()
|
||||
}
|
||||
}
|
||||
|
||||
function addSwatch() {
|
||||
if(format) {
|
||||
if (format) {
|
||||
dispatch("addswatch", value)
|
||||
setRecentColor(value)
|
||||
}
|
||||
}
|
||||
|
||||
function removeSwatch(idx) {
|
||||
let removedSwatch = swatches.splice(idx, 1);
|
||||
let removedSwatch = swatches.splice(idx, 1)
|
||||
swatches = swatches
|
||||
dispatch("removeswatch", removedSwatch)
|
||||
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
|
||||
}
|
||||
|
||||
|
||||
function applySwatch(color) {
|
||||
if(value !== color) {
|
||||
if (value !== color) {
|
||||
format = getColorFormat(color)
|
||||
if(format) {
|
||||
if (format) {
|
||||
value = color
|
||||
convertAndSetHSVA()
|
||||
dispatchValue()
|
||||
|
|
@ -145,9 +144,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
$: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
|
||||
$: style = buildStyle({background: value, border})
|
||||
$: shrink = swatches.length > 0
|
||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||
$: style = buildStyle({ background: value, border })
|
||||
$: shrink = swatches.length > 0
|
||||
</script>
|
||||
|
||||
<div class="colorpicker-container">
|
||||
|
|
@ -174,6 +173,73 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="colorpicker-container"
|
||||
bind:clientHeight={pickerHeight}
|
||||
bind:clientWidth={pickerWidth}>
|
||||
|
||||
<div class="palette-panel">
|
||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="alpha-hue-panel">
|
||||
<div>
|
||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||
<div class="selected-color" {style} />
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
<div>
|
||||
<Slider
|
||||
type="hue"
|
||||
value={h}
|
||||
on:change={hue => setHue(hue.detail)}
|
||||
on:dragend={dispatchValue} />
|
||||
|
||||
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||
<Slider
|
||||
type="alpha"
|
||||
value={a}
|
||||
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
||||
on:dragend={dispatchValue} />
|
||||
</CheckedBackground>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !disableSwatches}
|
||||
<div transition:fade class="swatch-panel">
|
||||
{#if swatches.length > 0}
|
||||
{#each swatches as color, idx}
|
||||
<Swatch
|
||||
{color}
|
||||
on:click={() => applySwatch(color)}
|
||||
on:removeswatch={() => removeSwatch(idx)} />
|
||||
{/each}
|
||||
{/if}
|
||||
{#if swatches.length !== 12}
|
||||
<div
|
||||
bind:this={adder}
|
||||
transition:fade
|
||||
class="adder"
|
||||
on:click={addSwatch}
|
||||
class:shrink>
|
||||
<span>+</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="format-input-panel">
|
||||
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
||||
<Input
|
||||
{value}
|
||||
on:input={event => handleColorInput(event.target.value)}
|
||||
on:change={dispatchInputChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -219,7 +285,7 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.swatch-panel {
|
||||
.swatch-panel {
|
||||
flex: 0 0 15px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
@ -230,7 +296,7 @@
|
|||
|
||||
.adder {
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
transition: flex 0.5s;
|
||||
justify-content: center;
|
||||
|
|
@ -244,7 +310,7 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shrink {
|
||||
.shrink {
|
||||
flex: 0 0 20px;
|
||||
}
|
||||
|
||||
|
|
@ -255,54 +321,3 @@
|
|||
padding-top: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
|
||||
|
||||
<div class="palette-panel">
|
||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="alpha-hue-panel">
|
||||
<div>
|
||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||
<div class="selected-color" {style} />
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
<div>
|
||||
<Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
|
||||
|
||||
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||
<Slider
|
||||
type="alpha"
|
||||
value={a}
|
||||
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
||||
on:dragend={dispatchValue}
|
||||
/>
|
||||
</CheckedBackground>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !disableSwatches}
|
||||
<div transition:fade class="swatch-panel">
|
||||
{#if swatches.length > 0}
|
||||
{#each swatches as color, idx}
|
||||
<Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
|
||||
{/each}
|
||||
{/if}
|
||||
{#if swatches.length !== 12}
|
||||
<div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
|
||||
<span>+</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="format-input-panel">
|
||||
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
||||
<Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,151 +1,184 @@
|
|||
<script>
|
||||
import Colorpicker from "./Colorpicker.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
|
||||
import Colorpicker from "./Colorpicker.svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
|
||||
|
||||
import {buildStyle} from "./helpers.js"
|
||||
import { fade } from 'svelte/transition';
|
||||
import {getColorFormat} from "./utils.js"
|
||||
import { buildStyle } from "./helpers.js"
|
||||
import { fade } from "svelte/transition"
|
||||
import { getColorFormat } from "./utils.js"
|
||||
|
||||
export let value = "#3ec1d3ff"
|
||||
export let swatches = []
|
||||
export let disableSwatches = false
|
||||
export let open = false;
|
||||
export let width = "25px"
|
||||
export let height = "25px"
|
||||
export let value = "#3ec1d3ff"
|
||||
export let swatches = []
|
||||
export let disableSwatches = false
|
||||
export let open = false
|
||||
export let width = "25px"
|
||||
export let height = "25px"
|
||||
|
||||
let format = "hexa";
|
||||
let dimensions = {top: 0, left: 0}
|
||||
let colorPreview = null
|
||||
let format = "hexa"
|
||||
let dimensions = { top: 0, left: 0 }
|
||||
let colorPreview = null
|
||||
|
||||
let previewHeight = null
|
||||
let previewWidth = null
|
||||
let pickerWidth = 0
|
||||
let pickerHeight = 0
|
||||
let previewHeight = null
|
||||
let previewWidth = null
|
||||
let pickerWidth = 0
|
||||
let pickerHeight = 0
|
||||
|
||||
let anchorEl = null
|
||||
let parentNodes = [];
|
||||
let errorMsg = null
|
||||
let anchorEl = null
|
||||
let parentNodes = []
|
||||
let errorMsg = null
|
||||
|
||||
$: previewStyle = buildStyle({width, height, background: value})
|
||||
$: errorPreviewStyle = buildStyle({width, height})
|
||||
$: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})
|
||||
$: previewStyle = buildStyle({ width, height, background: value })
|
||||
$: errorPreviewStyle = buildStyle({ width, height })
|
||||
$: pickerStyle = buildStyle({
|
||||
top: `${dimensions.top}px`,
|
||||
left: `${dimensions.left}px`,
|
||||
})
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
beforeUpdate(() => {
|
||||
format = getColorFormat(value)
|
||||
if(!format) {
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||
console.error(errorMsg)
|
||||
}else{
|
||||
errorMsg = null
|
||||
}
|
||||
})
|
||||
beforeUpdate(() => {
|
||||
format = getColorFormat(value)
|
||||
if (!format) {
|
||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||
console.error(errorMsg)
|
||||
} else {
|
||||
errorMsg = null
|
||||
}
|
||||
})
|
||||
|
||||
afterUpdate(() => {
|
||||
if(colorPreview && colorPreview.offsetParent && !anchorEl) {
|
||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
||||
anchorEl = colorPreview.offsetParent
|
||||
let curEl = colorPreview
|
||||
let els = []
|
||||
//Travel up dom tree from preview element to find parent elements that scroll
|
||||
while(!anchorEl.isSameNode(curEl)) {
|
||||
curEl = curEl.parentNode
|
||||
let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")
|
||||
if(/scroll|auto/.test(elOverflow)) {
|
||||
els.push(curEl)
|
||||
}
|
||||
}
|
||||
parentNodes = els
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function openColorpicker(event) {
|
||||
if(colorPreview) {
|
||||
open = true;
|
||||
afterUpdate(() => {
|
||||
if (colorPreview && colorPreview.offsetParent && !anchorEl) {
|
||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
||||
anchorEl = colorPreview.offsetParent
|
||||
let curEl = colorPreview
|
||||
let els = []
|
||||
//Travel up dom tree from preview element to find parent elements that scroll
|
||||
while (!anchorEl.isSameNode(curEl)) {
|
||||
curEl = curEl.parentNode
|
||||
let elOverflow = window
|
||||
.getComputedStyle(curEl)
|
||||
.getPropertyValue("overflow")
|
||||
if (/scroll|auto/.test(elOverflow)) {
|
||||
els.push(curEl)
|
||||
}
|
||||
}
|
||||
parentNodes = els
|
||||
}
|
||||
})
|
||||
|
||||
$: if(open && colorPreview) {
|
||||
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()
|
||||
const {innerHeight, innerWidth} = window
|
||||
|
||||
const {offsetLeft, offsetTop} = colorPreview
|
||||
//get the scrollTop value for all scrollable parent elements
|
||||
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
|
||||
|
||||
const spaceBelow = (innerHeight - spaceAbove) - previewHeight
|
||||
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop
|
||||
|
||||
//TOO: Testing and Scroll Awareness for x Scroll
|
||||
const spaceRight = (innerWidth - spaceLeft) + previewWidth
|
||||
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
|
||||
|
||||
dimensions = {top, left}
|
||||
function openColorpicker(event) {
|
||||
if (colorPreview) {
|
||||
open = true
|
||||
}
|
||||
}
|
||||
|
||||
function onColorChange(color) {
|
||||
value = color.detail;
|
||||
dispatch("change", color.detail)
|
||||
}
|
||||
$: if (open && colorPreview) {
|
||||
const {
|
||||
top: spaceAbove,
|
||||
width,
|
||||
bottom,
|
||||
right,
|
||||
left: spaceLeft,
|
||||
} = colorPreview.getBoundingClientRect()
|
||||
const { innerHeight, innerWidth } = window
|
||||
|
||||
const { offsetLeft, offsetTop } = colorPreview
|
||||
//get the scrollTop value for all scrollable parent elements
|
||||
let scrollTop = parentNodes.reduce(
|
||||
(scrollAcc, el) => (scrollAcc += el.scrollTop),
|
||||
0
|
||||
)
|
||||
|
||||
const spaceBelow = innerHeight - spaceAbove - previewHeight
|
||||
const top =
|
||||
spaceAbove > spaceBelow
|
||||
? offsetTop - pickerHeight - scrollTop
|
||||
: offsetTop + previewHeight - scrollTop
|
||||
|
||||
//TOO: Testing and Scroll Awareness for x Scroll
|
||||
const spaceRight = innerWidth - spaceLeft + previewWidth
|
||||
const left =
|
||||
spaceRight > spaceLeft
|
||||
? offsetLeft + previewWidth
|
||||
: offsetLeft - pickerWidth
|
||||
|
||||
dimensions = { top, left }
|
||||
}
|
||||
|
||||
function onColorChange(color) {
|
||||
value = color.detail
|
||||
dispatch("change", color.detail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="color-preview-container">
|
||||
{#if !errorMsg}
|
||||
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
||||
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />
|
||||
</CheckedBackground>
|
||||
{#if !errorMsg}
|
||||
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
||||
<div
|
||||
bind:this={colorPreview}
|
||||
bind:clientHeight={previewHeight}
|
||||
bind:clientWidth={previewWidth}
|
||||
class="color-preview"
|
||||
style={previewStyle}
|
||||
on:click={openColorpicker} />
|
||||
</CheckedBackground>
|
||||
|
||||
{#if open}
|
||||
<div transition:fade class="picker-container" style={pickerStyle}>
|
||||
<Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
|
||||
</div>
|
||||
<div on:click|self={() => open = false} class="overlay"></div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
||||
<span>×</span>
|
||||
</div>
|
||||
{#if open}
|
||||
<div transition:fade class="picker-container" style={pickerStyle}>
|
||||
<Colorpicker
|
||||
on:change={onColorChange}
|
||||
on:addswatch
|
||||
on:removeswatch
|
||||
bind:format
|
||||
bind:value
|
||||
bind:pickerHeight
|
||||
bind:pickerWidth
|
||||
{swatches}
|
||||
{disableSwatches}
|
||||
{open} />
|
||||
</div>
|
||||
<div on:click|self={() => (open = false)} class="overlay" />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
||||
<span>×</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.color-preview-container{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
.color-preview-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
.color-preview {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #dedada;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.preview-error {
|
||||
background: #cccccc;
|
||||
color: #808080;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.picker-container {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.overlay{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
<div>
|
||||
<input on:input type="text" {value} maxlength="25" />
|
||||
</div>
|
||||
<div>
|
||||
<input on:input on:change type="text" {value} maxlength="25" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
@ -26,7 +29,3 @@
|
|||
font-weight: 550;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<input on:input on:change type="text" {value} maxlength="25" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { onMount, createEventDispatcher } from "svelte";
|
||||
import { onMount, createEventDispatcher } from "svelte"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
if (
|
||||
clickX > 0 &&
|
||||
clickY > 0 &&
|
||||
clickX < paletteWidth && clickY < paletteHeight
|
||||
clickX < paletteWidth &&
|
||||
clickY < paletteHeight
|
||||
) {
|
||||
let s = (clickX / paletteWidth) * 100
|
||||
let v = 100 - (clickY / paletteHeight) * 100
|
||||
|
|
@ -49,6 +50,17 @@
|
|||
{style}>
|
||||
<div class="picker" style={pickerStyle} />
|
||||
</div>
|
||||
<CheckedBackground width="100%">
|
||||
<div
|
||||
bind:this={palette}
|
||||
bind:clientHeight={paletteHeight}
|
||||
bind:clientWidth={paletteWidth}
|
||||
on:click={handleClick}
|
||||
class="palette"
|
||||
{style}>
|
||||
<div class="picker" style={pickerStyle} />
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
|
||||
<style>
|
||||
.palette {
|
||||
|
|
@ -68,9 +80,3 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<CheckedBackground width="100%">
|
||||
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
||||
<div class="picker" style={pickerStyle} />
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
|
|
|
|||
|
|
@ -11,18 +11,15 @@
|
|||
let sliderWidth = 0
|
||||
|
||||
function onSliderChange(mouseX, isDrag = false) {
|
||||
const { left, width } = slider.getBoundingClientRect();
|
||||
let clickPosition = mouseX - left;
|
||||
const { left, width } = slider.getBoundingClientRect()
|
||||
let clickPosition = mouseX - left
|
||||
|
||||
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
||||
|
||||
if (percentageClick >= 0 && percentageClick <= 1) {
|
||||
let value =
|
||||
type === "hue"
|
||||
? 360 * percentageClick
|
||||
: percentageClick;
|
||||
|
||||
dispatch("change", {color: value, isDrag});
|
||||
let value = type === "hue" ? 360 * percentageClick : percentageClick
|
||||
|
||||
dispatch("change", { color: value, isDrag })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +42,20 @@
|
|||
class="slider-thumb"
|
||||
{style} />
|
||||
</div>
|
||||
<div
|
||||
bind:this={slider}
|
||||
bind:clientWidth={sliderWidth}
|
||||
on:click={event => onSliderChange(event.clientX)}
|
||||
class="color-format-slider"
|
||||
class:hue={type === 'hue'}
|
||||
class:alpha={type === 'alpha'}>
|
||||
<div
|
||||
use:dragable
|
||||
on:drag={e => onSliderChange(e.detail, true)}
|
||||
on:dragend
|
||||
class="slider-thumb"
|
||||
{style} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.color-format-slider {
|
||||
|
|
@ -86,18 +97,3 @@
|
|||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
bind:this={slider}
|
||||
bind:clientWidth={sliderWidth}
|
||||
on:click={event => onSliderChange(event.clientX)}
|
||||
class="color-format-slider"
|
||||
class:hue={type === 'hue'}
|
||||
class:alpha={type === 'alpha'}>
|
||||
<div
|
||||
use:dragable
|
||||
on:drag={e => onSliderChange(e.detail, true)}
|
||||
on:dragend
|
||||
class="slider-thumb"
|
||||
{style} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,47 @@
|
|||
<script>
|
||||
import {createEventDispatcher} from "svelte"
|
||||
import { fade } from 'svelte/transition';
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import CheckedBackground from "./CheckedBackground.svelte"
|
||||
|
||||
export let hovered = false
|
||||
export let color = "#fff"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
export let hovered = false
|
||||
export let color = "#fff"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="space">
|
||||
<CheckedBackground borderRadius="6px">
|
||||
<div
|
||||
in:fade
|
||||
class="swatch"
|
||||
style={`background: ${color};`}
|
||||
on:click|self
|
||||
on:mouseover={() => (hovered = true)}
|
||||
on:mouseleave={() => (hovered = false)}>
|
||||
{#if hovered}
|
||||
<div
|
||||
in:fade
|
||||
class="remove-icon"
|
||||
on:click|self={() => dispatch('removeswatch')}>
|
||||
<span on:click|self={() => dispatch('removeswatch')}>×</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.swatch {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dedada;
|
||||
height: 20px;
|
||||
border: 1px solid #dedada;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.space {
|
||||
padding: 3px 5px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
|
|
@ -29,7 +49,7 @@
|
|||
right: 0;
|
||||
top: -5px;
|
||||
right: -4px;
|
||||
width:10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: #800000;
|
||||
|
|
@ -39,15 +59,3 @@
|
|||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="space">
|
||||
<CheckedBackground borderRadius="6px">
|
||||
<div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
|
||||
{#if hovered}
|
||||
<div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
|
||||
<span on:click|self={()=> dispatch("removeswatch")}>×</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</CheckedBackground>
|
||||
</div>
|
||||
|
|
@ -162,7 +162,7 @@ export const MODELS = {
|
|||
Name: BLOCKS.NAME,
|
||||
Cuisine: {
|
||||
...FIELDS.PLAIN_TEXT,
|
||||
name: "Cuisine"
|
||||
name: "Cuisine",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -173,8 +173,8 @@ export const MODELS = {
|
|||
Name: BLOCKS.NAME,
|
||||
Championships: {
|
||||
...FIELDS.NUMBER,
|
||||
name: "Championships"
|
||||
}
|
||||
name: "Championships",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
const CouchDB = require("../../db")
|
||||
const validateJs = require("validate.js")
|
||||
const newid = require("../../db/newid")
|
||||
const { link } = require("pouchdb-adapter-memory")
|
||||
|
||||
exports.save = async function(ctx) {
|
||||
const db = new CouchDB(ctx.user.instanceId)
|
||||
|
|
@ -46,7 +45,6 @@ exports.save = async function(ctx) {
|
|||
|
||||
// create links in other tables
|
||||
for (let key in record) {
|
||||
// link
|
||||
if (Array.isArray(record[key])) {
|
||||
const linked = await db.allDocs({
|
||||
include_docs: true,
|
||||
|
|
@ -58,7 +56,9 @@ exports.save = async function(ctx) {
|
|||
const doc = row.doc
|
||||
return {
|
||||
...doc,
|
||||
[model.name]: doc[model.name] ? [...doc[model.name], record._id] : [record._id]
|
||||
[model.name]: doc[model.name]
|
||||
? [...doc[model.name], record._id]
|
||||
: [record._id],
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ exports.find = async function(ctx) {
|
|||
const db = new CouchDB(ctx.user.instanceId)
|
||||
const record = await db.get(ctx.params.recordId)
|
||||
if (record.modelId !== ctx.params.modelId) {
|
||||
ctx.throw(400, "Supplied modelId doe not match the record's modelId")
|
||||
ctx.throw(400, "Supplied modelId does not match the records modelId")
|
||||
return
|
||||
}
|
||||
ctx.body = record
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@
|
|||
|
||||
const login = async () => {
|
||||
loading = true
|
||||
const response = await _bb.api.post("/api/authenticate", { username, password })
|
||||
const response = await _bb.api.post("/api/authenticate", {
|
||||
username,
|
||||
password,
|
||||
})
|
||||
if (response.status === 200) {
|
||||
const json = await response.json()
|
||||
localStorage.setItem("budibase:token", json.token)
|
||||
|
|
|
|||
Loading…
Reference in New Issue