Merge pull request #1918 from Budibase/spectrum-apps
Spectrum themed apps
This commit is contained in:
Andrew Kingston
GitHub
commit
50d59924ad
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
export let value
|
||||
export let size = "M"
|
||||
export let spectrumTheme
|
||||
|
||||
let open = false
|
||||
|
||||
$: color = value || "transparent"
|
||||
$: customValue = getCustomValue(value)
|
||||
$: checkColor = getCheckColor(value)
|
||||
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
{
|
||||
label: "Grays",
|
||||
colors: [
|
||||
"white",
|
||||
"gray-50",
|
||||
"gray-75",
|
||||
"gray-100",
|
||||
"gray-200",
|
||||
"gray-300",
|
||||
|
|
@ -31,7 +32,6 @@
|
|||
"gray-700",
|
||||
"gray-800",
|
||||
"gray-900",
|
||||
"black",
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
return value
|
||||
}
|
||||
let found = false
|
||||
const comparisonValue = value.substring(35, value.length - 1)
|
||||
const comparisonValue = value.substring(28, value.length - 1)
|
||||
for (let category of categories) {
|
||||
found = category.colors.includes(comparisonValue)
|
||||
if (found) {
|
||||
|
|
@ -102,17 +102,19 @@
|
|||
|
||||
const getCheckColor = value => {
|
||||
return /^.*(white|(gray-(50|75|100|200|300|400|500)))\)$/.test(value)
|
||||
? "black"
|
||||
: "white"
|
||||
? "var(--spectrum-global-color-gray-900)"
|
||||
: "var(--spectrum-global-color-gray-50)"
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
|
||||
<div
|
||||
class="preview size--{size || 'M'}"
|
||||
style="background: {color};"
|
||||
on:click={() => (open = true)}
|
||||
class="fill {spectrumTheme || ''}"
|
||||
style={value ? `background: ${value};` : ""}
|
||||
class:placeholder={!value}
|
||||
/>
|
||||
</div>
|
||||
{#if open}
|
||||
<div
|
||||
use:clickOutside={() => (open = false)}
|
||||
|
|
@ -126,16 +128,20 @@
|
|||
{#each category.colors as color}
|
||||
<div
|
||||
on:click={() => {
|
||||
onChange(`var(--spectrum-global-color-static-${color})`)
|
||||
onChange(`var(--spectrum-global-color-${color})`)
|
||||
}}
|
||||
class="color"
|
||||
style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
|
||||
title={prettyPrint(color)}
|
||||
>
|
||||
{#if value === `var(--spectrum-global-color-static-${color})`}
|
||||
<div
|
||||
class="fill {spectrumTheme || ''}"
|
||||
style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
|
||||
>
|
||||
{#if value === `var(--spectrum-global-color-${color})`}
|
||||
<Icon name="Checkmark" size="S" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,12 +176,43 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
transition: border-color 130ms ease-in-out;
|
||||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
|
||||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
|
||||
}
|
||||
.preview:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
|
||||
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-400);
|
||||
}
|
||||
.fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.fill.placeholder {
|
||||
background-position: 0 0, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#eee 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#eee 75%,
|
||||
#eee 100%
|
||||
),
|
||||
linear-gradient(
|
||||
45deg,
|
||||
#eee 25%,
|
||||
white 25%,
|
||||
white 75%,
|
||||
#eee 75%,
|
||||
#eee 100%
|
||||
);
|
||||
}
|
||||
.size--S {
|
||||
width: 20px;
|
||||
|
|
@ -219,8 +256,7 @@
|
|||
width: 16px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.color:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -236,4 +272,8 @@
|
|||
.category--custom .heading {
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.spectrum-wrapper {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -145,4 +145,7 @@
|
|||
height: 100vh;
|
||||
z-index: 999;
|
||||
}
|
||||
:global(.flatpickr-calendar) {
|
||||
font-family: "Source Sans Pro", sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 48 48" height="48px" viewBox="0 0 48 48" width="48px" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M9,42H3c-0.552,0-1-0.449-1-1v-3.5C2,37.224,2.224,37,2.5,37S3,37.224,3,37.5V41h6 c0.276,0,0.5,0.224,0.5,0.5S9.276,42,9,42z"/>
|
||||
<path d="M45,42h-6c-0.276,0-0.5-0.224-0.5-0.5S38.724,41,39,41h6V13H3v27c0,0.276-0.224,0.5-0.5,0.5S2,40.276,2,40 V12h44v29C46,41.551,45.552,42,45,42z"/>
|
||||
<g>
|
||||
<path d="M45.5,13h-43C2.224,13,2,12.776,2,12.5v-5C2,6.673,2.673,6,3.5,6h41C45.327,6,46,6.673,46,7.5v5 C46,12.776,45.776,13,45.5,13z M3,12h42V7.5C45,7.224,44.775,7,44.5,7h-41C3.225,7,3,7.224,3,7.5V12z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M16.5,11c-0.827,0-1.5-0.673-1.5-1.5S15.673,8,16.5,8S18,8.673,18,9.5S17.327,11,16.5,11z M16.5,9 C16.225,9,16,9.224,16,9.5s0.225,0.5,0.5,0.5S17,9.776,17,9.5S16.775,9,16.5,9z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M11.5,11c-0.827,0-1.5-0.673-1.5-1.5S10.673,8,11.5,8S13,8.673,13,9.5S12.327,11,11.5,11z M11.5,9 C11.225,9,11,9.224,11,9.5s0.225,0.5,0.5,0.5S12,9.776,12,9.5S11.775,9,11.5,9z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M6.5,11C5.673,11,5,10.327,5,9.5S5.673,8,6.5,8S8,8.673,8,9.5S7.327,11,6.5,11z M6.5,9 C6.225,9,6,9.224,6,9.5S6.225,10,6.5,10S7,9.776,7,9.5S6.775,9,6.5,9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M35.696,44H12.304c-0.728,0-1.313-0.284-1.605-0.779c-0.289-0.489-0.259-1.126,0.084-1.749L22.58,19.996 c0.709-1.285,2.132-1.285,2.839,0l11.799,21.477v0c0.343,0.623,0.373,1.26,0.084,1.749C37.01,43.716,36.424,44,35.696,44z M24,20 c-0.176,0-0.379,0.179-0.544,0.478L11.659,41.954c-0.168,0.306-0.205,0.582-0.101,0.758C11.667,42.895,11.938,43,12.304,43 h23.393c0.365,0,0.637-0.105,0.745-0.288c0.104-0.177,0.067-0.453-0.101-0.758v0L24.543,20.478C24.379,20.179,24.176,20,24,20z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M24,36L24,36c-0.225,0-0.421-0.15-0.481-0.366C23.456,35.412,22,30.169,22,28c0-1.103,0.897-2,2-2 s2,0.897,2,2c0,2.232-1.457,7.417-1.519,7.636C24.42,35.851,24.224,36,24,36z M24,27c-0.552,0-1,0.449-1,1 c0,1.266,0.569,3.793,1.002,5.531C24.435,31.806,25,29.301,25,28C25,27.449,24.552,27,24,27z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M24,41c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S25.103,41,24,41z M24,38c-0.552,0-1,0.449-1,1 s0.448,1,1,1s1-0.449,1-1S24.552,38,24,38z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -29,7 +29,7 @@ context("Create Bindings", () => {
|
|||
// The builder preview pages don't have a real URL, so all we can do
|
||||
// is check that we were able to bind to the property, and that the
|
||||
// component exists on the page
|
||||
cy.getComponent(componentId).should("have.text", "Placeholder text")
|
||||
cy.getComponent(componentId).should("have.text", "New Paragraph")
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
selectedComponent,
|
||||
selectedAccessRole,
|
||||
} from "builderStore"
|
||||
// Backendstores
|
||||
import {
|
||||
datasources,
|
||||
integrations,
|
||||
|
|
@ -43,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
|
|||
appId: "",
|
||||
routes: {},
|
||||
clientLibPath: "",
|
||||
theme: "",
|
||||
}
|
||||
|
||||
export const getFrontendStore = () => {
|
||||
|
|
@ -62,6 +62,7 @@ export const getFrontendStore = () => {
|
|||
url: application.url,
|
||||
layouts,
|
||||
screens,
|
||||
theme: application.theme,
|
||||
hasAppPackage: true,
|
||||
appInstance: application.instance,
|
||||
clientLibPath,
|
||||
|
|
@ -79,6 +80,20 @@ export const getFrontendStore = () => {
|
|||
database.set(application.instance)
|
||||
tables.init()
|
||||
},
|
||||
theme: {
|
||||
save: async theme => {
|
||||
const appId = get(store).appId
|
||||
const response = await api.put(`/api/applications/${appId}`, { theme })
|
||||
if (response.status === 200) {
|
||||
store.update(state => {
|
||||
state.theme = theme
|
||||
return state
|
||||
})
|
||||
} else {
|
||||
throw new Error("Error updating theme")
|
||||
}
|
||||
},
|
||||
},
|
||||
routing: {
|
||||
fetch: async () => {
|
||||
const response = await api.get("/api/routing")
|
||||
|
|
@ -196,6 +211,11 @@ export const getFrontendStore = () => {
|
|||
const response = await api.post(`/api/layouts`, layoutToSave)
|
||||
const savedLayout = await response.json()
|
||||
|
||||
// Abort if saving failed
|
||||
if (response.status !== 200) {
|
||||
return
|
||||
}
|
||||
|
||||
store.update(state => {
|
||||
const layoutIdx = state.layouts.findIndex(
|
||||
stateLayout => stateLayout._id === savedLayout._id
|
||||
|
|
@ -313,16 +333,6 @@ export const getFrontendStore = () => {
|
|||
create: async (componentName, presetProps) => {
|
||||
const selected = get(selectedComponent)
|
||||
const asset = get(currentAsset)
|
||||
const state = get(store)
|
||||
|
||||
// Only allow one screen slot, and in the layout
|
||||
if (componentName.endsWith("screenslot")) {
|
||||
const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT
|
||||
const slot = findComponentType(asset.props, componentName)
|
||||
if (!isLayout || slot != null) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Create new component
|
||||
const componentInstance = store.actions.components.createInstance(
|
||||
|
|
|
|||
|
|
@ -38,8 +38,6 @@ const createScreen = table => {
|
|||
.instanceName("Form")
|
||||
.customProps({
|
||||
actionType: "Create",
|
||||
theme: "spectrum--lightest",
|
||||
size: "spectrum--medium",
|
||||
dataSource: {
|
||||
label: table.name,
|
||||
tableId: table._id,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
makeTitleContainer,
|
||||
makeSaveButton,
|
||||
makeMainForm,
|
||||
spectrumColor,
|
||||
makeDatasourceFormComponents,
|
||||
} from "./utils/commonComponents"
|
||||
|
||||
|
|
@ -26,36 +25,13 @@ export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
|
|||
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
|
||||
|
||||
function generateTitleContainer(table, title, formId, repeaterId) {
|
||||
// have to override style for this, its missing margin
|
||||
const saveButton = makeSaveButton(table, formId).normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
})
|
||||
|
||||
const saveButton = makeSaveButton(table, formId)
|
||||
const deleteButton = new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "transparent",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#9e9e9e",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
"margin-right": "8px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "transparent",
|
||||
color: "#4285f4",
|
||||
})
|
||||
.customStyle(spectrumColor(700))
|
||||
.text("Delete")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
type: "secondary",
|
||||
quiet: true,
|
||||
size: "M",
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
|
|
@ -76,7 +52,19 @@ function generateTitleContainer(table, title, formId, repeaterId) {
|
|||
})
|
||||
.instanceName("Delete Button")
|
||||
|
||||
return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton)
|
||||
const buttons = new Component("@budibase/standard-components/container")
|
||||
.instanceName("Button Container")
|
||||
.customProps({
|
||||
direction: "row",
|
||||
hAlign: "right",
|
||||
vAlign: "middle",
|
||||
size: "shrink",
|
||||
gap: "M",
|
||||
})
|
||||
.addChild(deleteButton)
|
||||
.addChild(saveButton)
|
||||
|
||||
return makeTitleContainer(title).addChild(buttons)
|
||||
}
|
||||
|
||||
const createScreen = table => {
|
||||
|
|
|
|||
|
|
@ -19,21 +19,10 @@ export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
|
|||
|
||||
function generateTitleContainer(table) {
|
||||
const newButton = new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "#4285f4",
|
||||
})
|
||||
.text("Create New")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
size: "M",
|
||||
type: "primary",
|
||||
onClick: [
|
||||
{
|
||||
parameters: {
|
||||
|
|
@ -46,12 +35,6 @@ function generateTitleContainer(table) {
|
|||
.instanceName("New Button")
|
||||
|
||||
const heading = new Component("@budibase/standard-components/heading")
|
||||
.normalStyle({
|
||||
margin: "0px",
|
||||
flex: "1 1 auto",
|
||||
"text-transform": "capitalize",
|
||||
})
|
||||
.type("h2")
|
||||
.instanceName("Title")
|
||||
.text(table.name)
|
||||
.customProps({
|
||||
|
|
@ -60,14 +43,12 @@ function generateTitleContainer(table) {
|
|||
})
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.normalStyle({
|
||||
"margin-bottom": "32px",
|
||||
})
|
||||
.customProps({
|
||||
direction: "row",
|
||||
hAlign: "stretch",
|
||||
vAlign: "middle",
|
||||
size: "shrink",
|
||||
gap: "M",
|
||||
})
|
||||
.instanceName("Title Container")
|
||||
.addChild(heading)
|
||||
|
|
@ -91,68 +72,35 @@ const createScreen = table => {
|
|||
const spectrumTable = new Component("@budibase/standard-components/table")
|
||||
.customProps({
|
||||
dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
|
||||
theme: "spectrum--lightest",
|
||||
showAutoColumns: false,
|
||||
quiet: true,
|
||||
size: "spectrum--medium",
|
||||
quiet: false,
|
||||
rowCount: 8,
|
||||
})
|
||||
.instanceName(`${table.name} Table`)
|
||||
|
||||
const safeTableId = makePropSafe(spectrumTable._json._id)
|
||||
const safeRowId = makePropSafe("_id")
|
||||
const viewButton = new Component("@budibase/standard-components/button")
|
||||
const viewLink = new Component("@budibase/standard-components/link")
|
||||
.customProps({
|
||||
text: "View",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Navigate To",
|
||||
parameters: {
|
||||
url: `${rowListUrl(table)}/{{ ${safeTableId}.${safeRowId} }}`,
|
||||
},
|
||||
},
|
||||
],
|
||||
size: "S",
|
||||
color: "var(--spectrum-global-color-gray-600)",
|
||||
align: "left",
|
||||
})
|
||||
.instanceName("View Button")
|
||||
.normalStyle({
|
||||
background: "transparent",
|
||||
"font-weight": "600",
|
||||
color: "#888",
|
||||
"border-width": "0",
|
||||
})
|
||||
.hoverStyle({
|
||||
color: "#4285f4",
|
||||
["margin-left"]: "16px",
|
||||
["margin-right"]: "16px",
|
||||
})
|
||||
.instanceName("View Link")
|
||||
|
||||
spectrumTable.addChild(viewButton)
|
||||
spectrumTable.addChild(viewLink)
|
||||
provider.addChild(spectrumTable)
|
||||
|
||||
const mainContainer = new Component("@budibase/standard-components/container")
|
||||
.normalStyle({
|
||||
background: "white",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
"border-width": "2px",
|
||||
"border-color": "rgba(0, 0, 0, 0.1)",
|
||||
"border-style": "None",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
})
|
||||
.customProps({
|
||||
direction: "column",
|
||||
hAlign: "stretch",
|
||||
vAlign: "top",
|
||||
size: "shrink",
|
||||
})
|
||||
.instanceName("Container")
|
||||
.addChild(generateTitleContainer(table))
|
||||
.addChild(provider)
|
||||
|
||||
return new Screen()
|
||||
.route(rowListUrl(table))
|
||||
.instanceName(`${table.name} - List`)
|
||||
.addChild(mainContainer)
|
||||
.addChild(generateTitleContainer(table))
|
||||
.addChild(provider)
|
||||
.json()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,23 +8,16 @@ export function spectrumColor(number) {
|
|||
// God knows why. It seems to think optional chaining further down the
|
||||
// file is invalid if the word g-l-o-b-a-l is found - hence the reason this
|
||||
// statement is split into parts.
|
||||
return "color: var(--spectrum-glo" + `bal-color-gray-${number});`
|
||||
return "var(--spectrum-glo" + `bal-color-gray-${number})`
|
||||
}
|
||||
|
||||
export function makeLinkComponent(tableName) {
|
||||
return new Component("@budibase/standard-components/link")
|
||||
.normalStyle({
|
||||
color: "#757575",
|
||||
"text-transform": "capitalize",
|
||||
})
|
||||
.hoverStyle({
|
||||
color: "#4285f4",
|
||||
})
|
||||
.customStyle(spectrumColor(700))
|
||||
.text(tableName)
|
||||
.customProps({
|
||||
url: `/${tableName.toLowerCase()}`,
|
||||
openInNewTab: false,
|
||||
color: spectrumColor(700),
|
||||
size: "S",
|
||||
align: "left",
|
||||
})
|
||||
|
|
@ -33,19 +26,12 @@ export function makeLinkComponent(tableName) {
|
|||
export function makeMainForm() {
|
||||
return new Component("@budibase/standard-components/form")
|
||||
.normalStyle({
|
||||
width: "700px",
|
||||
padding: "0px",
|
||||
"border-radius": "0.5rem",
|
||||
"box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
"padding-top": "48px",
|
||||
"padding-bottom": "48px",
|
||||
"padding-right": "48px",
|
||||
"padding-left": "48px",
|
||||
width: "600px",
|
||||
})
|
||||
.instanceName("Form")
|
||||
}
|
||||
|
||||
export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
|
||||
export function makeBreadcrumbContainer(tableName, text) {
|
||||
const link = makeLinkComponent(tableName).instanceName("Back Link")
|
||||
|
||||
const arrowText = new Component("@budibase/standard-components/text")
|
||||
|
|
@ -53,42 +39,27 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
|
|||
.normalStyle({
|
||||
"margin-right": "4px",
|
||||
"margin-left": "4px",
|
||||
"margin-top": "0px",
|
||||
"margin-bottom": "0px",
|
||||
})
|
||||
.customStyle(spectrumColor(700))
|
||||
.text(">")
|
||||
.instanceName("Arrow")
|
||||
.customProps({
|
||||
color: spectrumColor(700),
|
||||
size: "S",
|
||||
align: "left",
|
||||
})
|
||||
|
||||
const textStyling = {
|
||||
color: "#000000",
|
||||
"margin-top": "0px",
|
||||
"margin-bottom": "0px",
|
||||
}
|
||||
if (capitalise) {
|
||||
textStyling["text-transform"] = "capitalize"
|
||||
}
|
||||
const identifierText = new Component("@budibase/standard-components/text")
|
||||
.type("none")
|
||||
.normalStyle(textStyling)
|
||||
.customStyle(spectrumColor(700))
|
||||
.text(text)
|
||||
.instanceName("Identifier")
|
||||
.customProps({
|
||||
color: spectrumColor(700),
|
||||
size: "S",
|
||||
align: "left",
|
||||
})
|
||||
|
||||
return new Component("@budibase/standard-components/container")
|
||||
.normalStyle({
|
||||
"font-size": "14px",
|
||||
color: "#757575",
|
||||
})
|
||||
.customProps({
|
||||
gap: "N",
|
||||
direction: "row",
|
||||
hAlign: "left",
|
||||
vAlign: "middle",
|
||||
|
|
@ -102,22 +73,10 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
|
|||
|
||||
export function makeSaveButton(table, formId) {
|
||||
return new Component("@budibase/standard-components/button")
|
||||
.normalStyle({
|
||||
background: "#000000",
|
||||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
.hoverStyle({
|
||||
background: "#4285f4",
|
||||
})
|
||||
.text("Save")
|
||||
.customProps({
|
||||
className: "",
|
||||
disabled: false,
|
||||
type: "primary",
|
||||
size: "M",
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Validate Form",
|
||||
|
|
@ -145,12 +104,6 @@ export function makeSaveButton(table, formId) {
|
|||
|
||||
export function makeTitleContainer(title) {
|
||||
const heading = new Component("@budibase/standard-components/heading")
|
||||
.normalStyle({
|
||||
margin: "0px",
|
||||
flex: "1 1 auto",
|
||||
})
|
||||
.customStyle(spectrumColor(900))
|
||||
.type("h2")
|
||||
.instanceName("Title")
|
||||
.text(title)
|
||||
.customProps({
|
||||
|
|
@ -168,6 +121,7 @@ export function makeTitleContainer(title) {
|
|||
hAlign: "stretch",
|
||||
vAlign: "middle",
|
||||
size: "shrink",
|
||||
gap: "M",
|
||||
})
|
||||
.instanceName("Title Container")
|
||||
.addChild(heading)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<script>
|
||||
import { Icon, Combobox, Drawer, Button } from "@budibase/bbui"
|
||||
import {
|
||||
readableToRuntimeBinding,
|
||||
runtimeToReadableBinding,
|
||||
} from "builderStore/dataBinding"
|
||||
import BindingPanel from "components/common/bindings/BindingPanel.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let panel = BindingPanel
|
||||
export let value = ""
|
||||
export let bindings = []
|
||||
export let title = "Bindings"
|
||||
export let placeholder
|
||||
export let label
|
||||
export let disabled = false
|
||||
export let options
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let bindingDrawer
|
||||
$: tempValue = Array.isArray(value) ? value : []
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
|
||||
const handleClose = () => {
|
||||
onChange(tempValue)
|
||||
bindingDrawer.hide()
|
||||
}
|
||||
|
||||
const onChange = value => {
|
||||
dispatch("change", readableToRuntimeBinding(bindings, value))
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="control">
|
||||
<Combobox
|
||||
{label}
|
||||
{disabled}
|
||||
value={readableValue}
|
||||
on:change={event => onChange(event.detail)}
|
||||
{placeholder}
|
||||
{options}
|
||||
/>
|
||||
{#if !disabled}
|
||||
<div class="icon" on:click={bindingDrawer.show}>
|
||||
<Icon size="S" name="FlashOn" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Drawer bind:this={bindingDrawer} {title}>
|
||||
<svelte:fragment slot="description">
|
||||
Add the objects on the left to enrich your text.
|
||||
</svelte:fragment>
|
||||
<Button cta slot="buttons" on:click={handleClose}>Save</Button>
|
||||
<svelte:component
|
||||
this={panel}
|
||||
slot="body"
|
||||
value={readableValue}
|
||||
close={handleClose}
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
bindableProperties={bindings}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<style>
|
||||
.control {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
right: 31px;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid var(--spectrum-alias-border-color);
|
||||
border-right: 1px solid var(--spectrum-alias-border-color);
|
||||
width: 31px;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
background-color: var(--spectrum-global-color-gray-75);
|
||||
transition: background-color
|
||||
var(--spectrum-global-animation-duration-100, 130ms),
|
||||
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
|
||||
border-color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
height: calc(var(--spectrum-alias-item-height-m) - 2px);
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
cursor: pointer;
|
||||
color: var(--spectrum-alias-text-color-hover);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-alias-border-color-hover);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
import { Select } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
|
||||
const themeOptions = [
|
||||
{
|
||||
label: "Lightest",
|
||||
value: "spectrum--lightest",
|
||||
},
|
||||
{
|
||||
label: "Light",
|
||||
value: "spectrum--light",
|
||||
},
|
||||
{
|
||||
label: "Dark",
|
||||
value: "spectrum--dark",
|
||||
},
|
||||
{
|
||||
label: "Darkest",
|
||||
value: "spectrum--darkest",
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Select
|
||||
value={$store.theme || "spectrum--light"}
|
||||
options={themeOptions}
|
||||
placeholder={null}
|
||||
on:change={e => store.actions.theme.save(e.detail)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,12 +5,16 @@
|
|||
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
|
||||
import { FrontendTypes } from "constants"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
|
||||
import ErrorSVG from "assets/error.svg?raw"
|
||||
|
||||
let iframe
|
||||
let layout
|
||||
let screen
|
||||
let confirmDeleteDialog
|
||||
let idToDelete
|
||||
let loading = true
|
||||
let error
|
||||
|
||||
// Create screen slot placeholder for use when a page is selected rather
|
||||
// than a screen
|
||||
|
|
@ -44,6 +48,7 @@
|
|||
screen,
|
||||
selectedComponentId,
|
||||
previewType: $store.currentFrontEndType,
|
||||
theme: $store.theme,
|
||||
}
|
||||
|
||||
// Saving pages and screens to the DB causes them to have _revs.
|
||||
|
|
@ -68,11 +73,21 @@
|
|||
onMount(() => {
|
||||
// Initialise the app when mounted
|
||||
iframe.contentWindow.addEventListener(
|
||||
"bb-ready",
|
||||
"ready",
|
||||
() => refreshContent(strippedJson),
|
||||
{ once: true }
|
||||
)
|
||||
|
||||
// Catch any app errors
|
||||
iframe.contentWindow.addEventListener(
|
||||
"error",
|
||||
event => {
|
||||
loading = false
|
||||
error = event.detail || "An unknown error occurred"
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
|
||||
// Add listener for events sent by cliebt library in preview
|
||||
iframe.contentWindow.addEventListener("bb-event", event => {
|
||||
const { type, data } = event.detail
|
||||
|
|
@ -83,8 +98,10 @@
|
|||
} else if (type === "delete-component" && data.id) {
|
||||
idToDelete = data.id
|
||||
confirmDeleteDialog.show()
|
||||
} else if (type === "preview-loaded") {
|
||||
loading = false
|
||||
} else {
|
||||
console.log(data)
|
||||
console.warning(`Client sent unknown event type: ${type}`)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -99,11 +116,25 @@
|
|||
</script>
|
||||
|
||||
<div class="component-container">
|
||||
{#if loading}
|
||||
<div class="center">
|
||||
<ProgressCircle />
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="center error">
|
||||
<Layout justifyItems="center" gap="S">
|
||||
{@html ErrorSVG}
|
||||
<Heading size="L">App preview failed to load</Heading>
|
||||
<Body size="S">{error}</Body>
|
||||
</Layout>
|
||||
</div>
|
||||
{/if}
|
||||
<iframe
|
||||
style="height: 100%; width: 100%"
|
||||
title="componentPreview"
|
||||
bind:this={iframe}
|
||||
srcdoc={template}
|
||||
class:hidden={loading || error}
|
||||
/>
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
|
|
@ -131,4 +162,32 @@
|
|||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
.error :global(svg) {
|
||||
fill: var(--spectrum-global-color-gray-500);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.error :global(h1),
|
||||
.error :global(p) {
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
}
|
||||
.error :global(p) {
|
||||
font-style: italic;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
.error :global(h1) {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,7 @@
|
|||
"name": "Card",
|
||||
"icon": "Card",
|
||||
"children": [
|
||||
"stackedlist",
|
||||
"card",
|
||||
"cardhorizontal",
|
||||
"spectrumcard",
|
||||
"cardstat"
|
||||
]
|
||||
},
|
||||
|
|
@ -57,13 +55,6 @@
|
|||
"icon",
|
||||
"embed"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Other",
|
||||
"icon": "More",
|
||||
"children": [
|
||||
"screenslot"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,10 @@ export default `
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
html.loaded {
|
||||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
}
|
||||
body {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -46,7 +49,14 @@ export default `
|
|||
}
|
||||
|
||||
// Extract data from message
|
||||
const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
|
||||
const {
|
||||
selectedComponentId,
|
||||
layout,
|
||||
screen,
|
||||
previewType,
|
||||
appId,
|
||||
theme
|
||||
} = JSON.parse(event.data)
|
||||
|
||||
// Set some flags so the app knows we're in the builder
|
||||
window["##BUDIBASE_IN_BUILDER##"] = true
|
||||
|
|
@ -56,15 +66,23 @@ export default `
|
|||
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
|
||||
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
|
||||
window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
|
||||
window["##BUDIBASE_PREVIEW_THEME##"] = theme
|
||||
|
||||
// Initialise app
|
||||
try {
|
||||
if (window.loadBudibase) {
|
||||
loadBudibase()
|
||||
window.loadBudibase()
|
||||
document.documentElement.classList.add("loaded")
|
||||
} else {
|
||||
throw "The client library couldn't be loaded"
|
||||
}
|
||||
} catch (error) {
|
||||
window.dispatchEvent(new CustomEvent("error", { detail: error }))
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", receiveMessage)
|
||||
window.dispatchEvent(new Event("bb-ready"))
|
||||
window.dispatchEvent(new Event("ready"))
|
||||
</script>
|
||||
</head>
|
||||
<body/>
|
||||
|
|
|
|||
|
|
@ -65,11 +65,14 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
{#if definition.editable !== false}
|
||||
<ActionMenu>
|
||||
<div slot="control" class="icon">
|
||||
<Icon size="S" hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>
|
||||
Move up
|
||||
</MenuItem>
|
||||
|
|
@ -106,11 +109,12 @@
|
|||
>
|
||||
Paste inside
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
<ConfirmDialog
|
||||
</ActionMenu>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
title="Confirm Deletion"
|
||||
body={`Are you sure you wish to delete this '${definition?.name}' component?`}
|
||||
okText="Delete Component"
|
||||
onOk={deleteComponent}
|
||||
/>
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { DropEffect, DropPosition } from "./dragDropStore"
|
||||
import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
|
||||
import NavItem from "components/common/NavItem.svelte"
|
||||
import { capitalise } from "helpers"
|
||||
|
||||
export let components = []
|
||||
export let currentComponent
|
||||
|
|
@ -10,8 +11,6 @@
|
|||
export let level = 0
|
||||
export let dragDropStore
|
||||
|
||||
const isScreenslot = name => name?.endsWith("screenslot")
|
||||
|
||||
const selectComponent = component => {
|
||||
store.actions.components.select(component)
|
||||
}
|
||||
|
|
@ -42,6 +41,16 @@
|
|||
|
||||
return false
|
||||
}
|
||||
|
||||
const getComponentText = component => {
|
||||
if (component._instanceName) {
|
||||
return component._instanceName
|
||||
}
|
||||
const type =
|
||||
component._component.replace("@budibase/standard-components/", "") ||
|
||||
"component"
|
||||
return capitalise(type)
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
|
|
@ -63,9 +72,7 @@
|
|||
on:dragstart={dragstart(component)}
|
||||
on:dragover={dragover(component, index)}
|
||||
on:drop={dragDropStore.actions.drop}
|
||||
text={isScreenslot(component._component)
|
||||
? "Screenslot"
|
||||
: component._instanceName}
|
||||
text={getComponentText(component)}
|
||||
withArrow
|
||||
indentLevel={level + 1}
|
||||
selected={$store.selectedComponentId === component._id}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
<script>
|
||||
import { isEmpty } from "lodash/fp"
|
||||
import {
|
||||
Checkbox,
|
||||
Input,
|
||||
Select,
|
||||
DetailSummary,
|
||||
ColorPicker,
|
||||
} from "@budibase/bbui"
|
||||
import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
|
||||
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
|
||||
|
|
@ -31,6 +25,8 @@
|
|||
import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
|
||||
import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
|
||||
import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
|
||||
import ColorPicker from "./PropertyControls/ColorPicker.svelte"
|
||||
import URLSelect from "./PropertyControls/URLSelect.svelte"
|
||||
|
||||
export let componentDefinition
|
||||
export let componentInstance
|
||||
|
|
@ -66,6 +62,7 @@
|
|||
section: SectionSelect,
|
||||
navigation: NavigationEditor,
|
||||
filter: FilterEditor,
|
||||
url: URLSelect,
|
||||
"field/string": StringFieldSelect,
|
||||
"field/number": NumberFieldSelect,
|
||||
"field/options": OptionsFieldSelect,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@
|
|||
<ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
|
||||
</div>
|
||||
</DetailSummary>
|
||||
<Drawer bind:this={drawer} title="Custom CSS">
|
||||
{#key componentInstance?._id}
|
||||
<Drawer bind:this={drawer} title="Custom CSS">
|
||||
<Button cta slot="buttons" on:click={save}>Save</Button>
|
||||
<DrawerContent slot="body">
|
||||
<div class="content">
|
||||
|
|
@ -45,7 +46,8 @@
|
|||
</Layout>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</Drawer>
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,8 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import Colorpicker from "@budibase/colorpicker"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
import { ColorPicker } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
|
||||
export let value
|
||||
|
||||
const WAIT = 150
|
||||
|
||||
function throttle(callback, wait, immediate = false) {
|
||||
let timeout = null
|
||||
let initialCall = true
|
||||
|
||||
return function () {
|
||||
const callNow = immediate && initialCall
|
||||
const next = () => {
|
||||
callback.apply(this, arguments)
|
||||
timeout = null
|
||||
}
|
||||
|
||||
if (callNow) {
|
||||
initialCall = false
|
||||
next()
|
||||
}
|
||||
|
||||
if (!timeout) {
|
||||
timeout = setTimeout(next, wait)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onChange = throttle(
|
||||
e => {
|
||||
dispatch("change", e.detail)
|
||||
},
|
||||
WAIT,
|
||||
true
|
||||
)
|
||||
</script>
|
||||
|
||||
<Colorpicker value={value || "#C4C4C4"} on:change={onChange} />
|
||||
<ColorPicker {value} on:change spectrumTheme={$store.theme} />
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ActionButton on:click={drawer.show}>Define Actions</ActionButton>
|
||||
<ActionButton on:click={drawer.show}>Define actions</ActionButton>
|
||||
<Drawer bind:this={drawer} title={"Actions"}>
|
||||
<svelte:fragment slot="description">
|
||||
Define what actions to run.
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ActionButton on:click={drawer.show}>Define Filters</ActionButton>
|
||||
<ActionButton on:click={drawer.show}>Define filters</ActionButton>
|
||||
<Drawer bind:this={drawer} title="Filtering">
|
||||
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
|
||||
<DrawerContent slot="body">
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
loading = false
|
||||
}
|
||||
|
||||
$: displayValue = value ? value.substring(3) : "Pick Icon"
|
||||
$: displayValue = value ? value.substring(3) : "Pick icon"
|
||||
|
||||
$: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
|
||||
$: pageEndIdx = maxIconsPerPage * currentPage
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { store } from "builderStore"
|
||||
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
|
||||
|
||||
export let value
|
||||
|
||||
$: urlOptions = $store.screens
|
||||
.map(screen => screen.routing?.route)
|
||||
.filter(x => x != null)
|
||||
</script>
|
||||
|
||||
<DrawerBindableCombobox {value} on:change options={urlOptions} />
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Input, Select, ColorPicker } from "@budibase/bbui"
|
||||
import { Input, Select } from "@budibase/bbui"
|
||||
import ColorPicker from "./PropertyControls/ColorPicker.svelte"
|
||||
|
||||
export const margin = {
|
||||
label: "Margin",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
import { FrontendTypes } from "constants"
|
||||
import { findComponent, findComponentPath } from "builderStore/storeUtils"
|
||||
import { get } from "svelte/store"
|
||||
import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
|
||||
|
||||
// Cache previous values so we don't update the URL more than necessary
|
||||
let previousType
|
||||
|
|
@ -147,7 +148,10 @@
|
|||
|
||||
<div class="preview-pane">
|
||||
{#if $currentAsset}
|
||||
<div class="preview-header">
|
||||
<ComponentSelectionList />
|
||||
<AppThemeSelect />
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<CurrentItemPreview />
|
||||
</div>
|
||||
|
|
@ -193,6 +197,10 @@
|
|||
gap: var(--spacing-m);
|
||||
padding: var(--spacing-xl) 40px;
|
||||
}
|
||||
.preview-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px;
|
||||
}
|
||||
.preview-content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import API from "./api"
|
|||
/**
|
||||
* Fetches screen definition for an app.
|
||||
*/
|
||||
export const fetchAppDefinition = async appId => {
|
||||
export const fetchAppPackage = async appId => {
|
||||
return await API.get({
|
||||
url: `/api/applications/${appId}/definition`,
|
||||
url: `/api/applications/${appId}/appPackage`,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
authStore,
|
||||
routeStore,
|
||||
builderStore,
|
||||
appStore,
|
||||
} from "../store"
|
||||
import { TableNames, ActionTypes } from "../constants"
|
||||
import SettingsBar from "./preview/SettingsBar.svelte"
|
||||
|
|
@ -31,6 +32,9 @@
|
|||
await initialise()
|
||||
await authStore.actions.fetchUser()
|
||||
dataLoaded = true
|
||||
if ($builderStore.inBuilder) {
|
||||
builderStore.actions.notifyLoaded()
|
||||
}
|
||||
})
|
||||
|
||||
// Register this as a refreshable datasource so that user changes cause
|
||||
|
|
@ -55,6 +59,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: themeClass =
|
||||
$builderStore.theme || $appStore.application?.theme || "spectrum--light"
|
||||
</script>
|
||||
|
||||
{#if dataLoaded && $screenStore.activeLayout}
|
||||
|
|
@ -62,7 +69,7 @@
|
|||
id="spectrum-root"
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class="spectrum spectrum--medium spectrum--light"
|
||||
class="spectrum spectrum--medium {themeClass}"
|
||||
>
|
||||
<Provider key="user" data={$authStore} {actions}>
|
||||
<div id="app-root">
|
||||
|
|
@ -101,5 +108,27 @@
|
|||
}
|
||||
#app-root {
|
||||
position: relative;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
/* Custom scrollbars */
|
||||
:global(::-webkit-scrollbar) {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
:global(::-webkit-scrollbar-track) {
|
||||
background: var(--spectrum-alias-background-color-default);
|
||||
}
|
||||
:global(::-webkit-scrollbar-thumb) {
|
||||
background-color: var(--spectrum-global-color-gray-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
:global(::-webkit-scrollbar-corner) {
|
||||
background: var(--spectrum-alias-background-color-default);
|
||||
}
|
||||
:global(*) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--spectrum-global-color-gray-400)
|
||||
var(--spectrum-alias-background-color-default);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,4 +29,9 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<IndicatorSet {componentId} color="rgb(120, 170, 244)" transition {zIndex} />
|
||||
<IndicatorSet
|
||||
{componentId}
|
||||
color="var(--spectrum-global-color-static-blue-200)"
|
||||
transition
|
||||
{zIndex}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<IndicatorSet
|
||||
componentId={$builderStore.selectedComponentId}
|
||||
color="rgb(66, 133, 244)"
|
||||
color="var(--spectrum-global-color-static-blue-600)"
|
||||
zIndex="910"
|
||||
transition
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -138,11 +138,11 @@
|
|||
padding: 6px 8px;
|
||||
opacity: 0;
|
||||
flex-direction: row;
|
||||
background: var(--background);
|
||||
background: var(--spectrum-alias-background-color-primary);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
gap: 2px;
|
||||
transition: opacity 0.13s ease-in-out;
|
||||
}
|
||||
|
|
@ -155,4 +155,14 @@
|
|||
margin: 0 4px;
|
||||
background-color: var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
|
||||
/* Theme overrides */
|
||||
:global(.spectrum--dark) .bar,
|
||||
:global(.spectrum--darkest) .bar {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
}
|
||||
:global(.spectrum--dark) .divider,
|
||||
:global(.spectrum--darkest) .divider {
|
||||
background: var(--spectrum-global-color-gray-400);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import ClientApp from "./components/ClientApp.svelte"
|
||||
import { builderStore } from "./store"
|
||||
import { builderStore, appStore } from "./store"
|
||||
|
||||
let app
|
||||
|
||||
|
|
@ -7,14 +7,18 @@ const loadBudibase = () => {
|
|||
// Update builder store with any builder flags
|
||||
builderStore.set({
|
||||
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
|
||||
appId: window["##BUDIBASE_APP_ID##"],
|
||||
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
|
||||
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
|
||||
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
|
||||
previewId: window["##BUDIBASE_PREVIEW_ID##"],
|
||||
previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
|
||||
theme: window["##BUDIBASE_PREVIEW_THEME##"],
|
||||
})
|
||||
|
||||
// Set app ID - this window flag is set by both the preview and the real
|
||||
// server rendered app HTML
|
||||
appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
|
||||
|
||||
// Create app if one hasn't been created yet
|
||||
if (!app) {
|
||||
app = new ClientApp({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import * as API from "../api"
|
||||
import { get, writable } from "svelte/store"
|
||||
|
||||
const createAppStore = () => {
|
||||
const store = writable({})
|
||||
|
||||
// Fetches the app definition including screens, layouts and theme
|
||||
const fetchAppDefinition = async () => {
|
||||
const appDefinition = await API.fetchAppPackage(get(store).appId)
|
||||
store.set(appDefinition)
|
||||
}
|
||||
|
||||
// Sets the initial app ID
|
||||
const setAppID = id => {
|
||||
store.update(state => {
|
||||
state.appId = id
|
||||
return state
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
actions: { setAppID, fetchAppDefinition },
|
||||
}
|
||||
}
|
||||
|
||||
export const appStore = createAppStore()
|
||||
|
|
@ -1,27 +1,14 @@
|
|||
import * as API from "../api"
|
||||
import { writable, get } from "svelte/store"
|
||||
import { builderStore } from "./builder"
|
||||
import { TableNames } from "../constants"
|
||||
import { writable } from "svelte/store"
|
||||
|
||||
const createAuthStore = () => {
|
||||
const store = writable(null)
|
||||
|
||||
// Fetches the user object if someone is logged in and has reloaded the page
|
||||
const fetchUser = async () => {
|
||||
// Fetch the first user if inside the builder
|
||||
if (get(builderStore).inBuilder) {
|
||||
const users = await API.fetchTableData(TableNames.USERS)
|
||||
if (!users.error && users[0] != null) {
|
||||
store.set(users[0])
|
||||
}
|
||||
}
|
||||
|
||||
// Or fetch the current user from localstorage in a real app
|
||||
else {
|
||||
const user = await API.fetchSelf()
|
||||
store.set(user)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { writable, derived } from "svelte/store"
|
||||
import Manifest from "@budibase/standard-components/manifest.json"
|
||||
|
||||
const dispatchEvent = (type, data) => {
|
||||
const dispatchEvent = (type, data = {}) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("bb-event", {
|
||||
detail: { type, data },
|
||||
|
|
@ -64,6 +64,9 @@ const createBuilderStore = () => {
|
|||
deleteComponent: id => {
|
||||
dispatchEvent("delete-component", { id })
|
||||
},
|
||||
notifyLoaded: () => {
|
||||
dispatchEvent("preview-loaded")
|
||||
},
|
||||
}
|
||||
return {
|
||||
...writableStore,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export { authStore } from "./auth"
|
||||
export { appStore } from "./app"
|
||||
export { notificationStore } from "./notification"
|
||||
export { routeStore } from "./routes"
|
||||
export { screenStore } from "./screens"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { routeStore } from "./routes"
|
||||
import { screenStore } from "./screens"
|
||||
import { appStore } from "./app"
|
||||
|
||||
export async function initialise() {
|
||||
await routeStore.actions.fetchRoutes()
|
||||
await screenStore.actions.fetchScreens()
|
||||
await appStore.actions.fetchAppDefinition()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import { writable, derived, get } from "svelte/store"
|
||||
import { derived } from "svelte/store"
|
||||
import { routeStore } from "./routes"
|
||||
import { builderStore } from "./builder"
|
||||
import * as API from "../api"
|
||||
import { appStore } from "./app"
|
||||
|
||||
const createScreenStore = () => {
|
||||
const config = writable({
|
||||
screens: [],
|
||||
layouts: [],
|
||||
})
|
||||
const store = derived(
|
||||
[config, routeStore, builderStore],
|
||||
([$config, $routeStore, $builderStore]) => {
|
||||
[appStore, routeStore, builderStore],
|
||||
([$appStore, $routeStore, $builderStore]) => {
|
||||
let activeLayout
|
||||
let activeScreen
|
||||
if ($builderStore.inBuilder) {
|
||||
|
|
@ -21,7 +17,7 @@ const createScreenStore = () => {
|
|||
activeLayout = { props: { _component: "screenslot" } }
|
||||
|
||||
// Find the correct screen by matching the current route
|
||||
const { screens, layouts } = $config
|
||||
const { screens, layouts } = $appStore
|
||||
if ($routeStore.activeRoute) {
|
||||
activeScreen = screens.find(
|
||||
screen => screen._id === $routeStore.activeRoute.screenId
|
||||
|
|
@ -37,17 +33,8 @@ const createScreenStore = () => {
|
|||
}
|
||||
)
|
||||
|
||||
const fetchScreens = async () => {
|
||||
const appDefinition = await API.fetchAppDefinition(get(builderStore).appId)
|
||||
config.set({
|
||||
screens: appDefinition.screens,
|
||||
layouts: appDefinition.layouts,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe: store.subscribe,
|
||||
actions: { fetchScreens },
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const styleable = (node, styles = {}) => {
|
|||
// overridden by any user specified styles
|
||||
let baseStyles = {}
|
||||
if (newStyles.empty) {
|
||||
baseStyles.border = "2px dashed var(--grey-5)"
|
||||
baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
|
||||
baseStyles.padding = "var(--spacing-l)"
|
||||
baseStyles.overflow = "hidden"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"watch": ["src"],
|
||||
"ext": "js,ts,json",
|
||||
"ignore": ["src/**/*.spec.ts", "src/**/*.spec.js"],
|
||||
"exec": "ts-node src/index.ts"
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
"dev:stack:up": "node scripts/dev/manage.js up",
|
||||
"dev:stack:down": "node scripts/dev/manage.js down",
|
||||
"dev:stack:nuke": "node scripts/dev/manage.js nuke",
|
||||
"dev:builder": "yarn run dev:stack:up && ts-node src/index.ts",
|
||||
"dev:builder": "yarn run dev:stack:up && nodemon",
|
||||
"format": "prettier --config ../../.prettierrc.json 'src/**/*.ts' --write",
|
||||
"lint": "eslint --fix src/",
|
||||
"lint:fix": "yarn run format && yarn run lint",
|
||||
|
|
|
|||
|
|
@ -67,15 +67,18 @@ async function getAppUrlIfNotInUse(ctx) {
|
|||
let url
|
||||
if (ctx.request.body.url) {
|
||||
url = encodeURI(ctx.request.body.url)
|
||||
} else {
|
||||
} else if (ctx.request.body.name) {
|
||||
url = encodeURI(`${ctx.request.body.name}`)
|
||||
}
|
||||
if (url) {
|
||||
url = `/${url.replace(URL_REGEX_SLASH, "")}`.toLowerCase()
|
||||
}
|
||||
if (!env.SELF_HOSTED) {
|
||||
return url
|
||||
}
|
||||
const deployedApps = await getDeployedApps(ctx)
|
||||
if (
|
||||
url &&
|
||||
deployedApps[url] != null &&
|
||||
deployedApps[url].appId !== ctx.params.appId
|
||||
) {
|
||||
|
|
@ -161,7 +164,15 @@ exports.fetchAppDefinition = async function (ctx) {
|
|||
exports.fetchAppPackage = async function (ctx) {
|
||||
const db = new CouchDB(ctx.params.appId)
|
||||
const application = await db.get(DocumentTypes.APP_METADATA)
|
||||
const [layouts, screens] = await Promise.all([getLayouts(db), getScreens(db)])
|
||||
const layouts = await getLayouts(db)
|
||||
let screens = await getScreens(db)
|
||||
|
||||
// Only filter screens if the user is not a builder
|
||||
if (!(ctx.user.builder && ctx.user.builder.global)) {
|
||||
const userRoleId = getUserRoleId(ctx)
|
||||
const accessController = new AccessController(ctx.params.appId)
|
||||
screens = await accessController.checkScreensAccess(screens, userRoleId)
|
||||
}
|
||||
|
||||
ctx.body = {
|
||||
application,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const EMPTY_LAYOUT = {
|
|||
{
|
||||
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
|
||||
_component: "@budibase/standard-components/screenslot",
|
||||
_instanceName: "Screen slot",
|
||||
_styles: {
|
||||
normal: {
|
||||
flex: "1 1 auto",
|
||||
|
|
@ -63,6 +64,7 @@ const BASE_LAYOUTS = [
|
|||
{
|
||||
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
|
||||
_component: "@budibase/standard-components/screenslot",
|
||||
_instanceName: "Screen slot",
|
||||
_styles: {
|
||||
normal: {
|
||||
flex: "1 1 auto",
|
||||
|
|
@ -84,6 +86,7 @@ const BASE_LAYOUTS = [
|
|||
normal: {},
|
||||
selected: {},
|
||||
},
|
||||
title: "{{ name }}",
|
||||
navigation: "Top",
|
||||
width: "Large",
|
||||
links: [
|
||||
|
|
@ -109,6 +112,7 @@ const BASE_LAYOUTS = [
|
|||
{
|
||||
_id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
|
||||
_component: "@budibase/standard-components/screenslot",
|
||||
_instanceName: "Screen slot",
|
||||
_styles: {
|
||||
normal: {
|
||||
flex: "1 1 auto",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -230,7 +230,8 @@
|
|||
"screenslot": {
|
||||
"name": "Screenslot",
|
||||
"icon": "WebPage",
|
||||
"description": "Contains your app screens"
|
||||
"description": "Contains your app screens",
|
||||
"editable": false
|
||||
},
|
||||
"button": {
|
||||
"name": "Button",
|
||||
|
|
@ -290,6 +291,11 @@
|
|||
],
|
||||
"defaultValue": "M"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Quiet",
|
||||
"key": "quiet"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Disabled",
|
||||
|
|
@ -448,6 +454,7 @@
|
|||
}
|
||||
},
|
||||
"stackedlist": {
|
||||
"deprecated": true,
|
||||
"name": "Stacked List",
|
||||
"icon": "TaskList",
|
||||
"description": "A basic card component that can contain content and actions.",
|
||||
|
|
@ -811,30 +818,29 @@
|
|||
"type": "select",
|
||||
"label": "Size",
|
||||
"key": "size",
|
||||
"defaultValue": "md",
|
||||
"defaultValue": "ri-1x",
|
||||
"options": [
|
||||
{ "value": "ri-xxs", "label": "xxs" },
|
||||
{ "value": "ri-xs", "label": "xs" },
|
||||
{ "value": "ri-sm", "label": "sm" },
|
||||
{ "value": "ri-1x", "label": "md" },
|
||||
{ "value": "ri-lg", "label": "lg" },
|
||||
{ "value": "ri-xl", "label": "xl" },
|
||||
{ "value": "ri-2x", "label": "2x" },
|
||||
{ "value": "ri-3x", "label": "3x" },
|
||||
{ "value": "ri-4x", "label": "4x" },
|
||||
{ "value": "ri-5x", "label": "5x" },
|
||||
{ "value": "ri-6x", "label": "6x" },
|
||||
{ "value": "ri-7x", "label": "7x" },
|
||||
{ "value": "ri-8x", "label": "8x" },
|
||||
{ "value": "ri-9x", "label": "9x" },
|
||||
{ "value": "ri-10x", "label": "10x" }
|
||||
{ "value": "ri-xxs", "label": "XXS" },
|
||||
{ "value": "ri-xs", "label": "XS" },
|
||||
{ "value": "ri-sm", "label": "Small" },
|
||||
{ "value": "ri-1x", "label": "Medium" },
|
||||
{ "value": "ri-lg", "label": "Large" },
|
||||
{ "value": "ri-xl", "label": "XL" },
|
||||
{ "value": "ri-2x", "label": "2XL" },
|
||||
{ "value": "ri-3x", "label": "3XL" },
|
||||
{ "value": "ri-4x", "label": "4XL" },
|
||||
{ "value": "ri-5x", "label": "5XL" },
|
||||
{ "value": "ri-6x", "label": "6XL" },
|
||||
{ "value": "ri-7x", "label": "7XL" },
|
||||
{ "value": "ri-8x", "label": "8XL" },
|
||||
{ "value": "ri-9x", "label": "9XL" },
|
||||
{ "value": "ri-10x", "label": "10XL" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"label": "Color",
|
||||
"key": "color",
|
||||
"defaultValue": "#000"
|
||||
"key": "color"
|
||||
},
|
||||
{
|
||||
"type": "event",
|
||||
|
|
@ -844,6 +850,7 @@
|
|||
]
|
||||
},
|
||||
"navigation": {
|
||||
"deprecated": true,
|
||||
"name": "Nav Bar",
|
||||
"description": "A component for handling the navigation within your app.",
|
||||
"icon": "BreadcrumbNavigation",
|
||||
|
|
@ -876,7 +883,7 @@
|
|||
"key": "text"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "url",
|
||||
"label": "URL",
|
||||
"key": "url",
|
||||
"placeholder": "/screen"
|
||||
|
|
@ -1638,6 +1645,7 @@
|
|||
"actions": [
|
||||
"ValidateForm"
|
||||
],
|
||||
"styles": ["size"],
|
||||
"settings": [
|
||||
{
|
||||
"type": "select",
|
||||
|
|
@ -1651,46 +1659,6 @@
|
|||
"label": "Schema",
|
||||
"key": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Theme",
|
||||
"key": "theme",
|
||||
"defaultValue": "spectrum--light",
|
||||
"options": [
|
||||
{
|
||||
"label": "Lightest",
|
||||
"value": "spectrum--lightest"
|
||||
},
|
||||
{
|
||||
"label": "Light",
|
||||
"value": "spectrum--light"
|
||||
},
|
||||
{
|
||||
"label": "Dark",
|
||||
"value": "spectrum--dark"
|
||||
},
|
||||
{
|
||||
"label": "Darkest",
|
||||
"value": "spectrum--darkest"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Size",
|
||||
"key": "size",
|
||||
"defaultValue": "spectrum--medium",
|
||||
"options": [
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "spectrum--medium"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "spectrum--large"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Disabled",
|
||||
|
|
@ -2067,46 +2035,6 @@
|
|||
"key": "rowCount",
|
||||
"defaultValue": 8
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Theme",
|
||||
"key": "theme",
|
||||
"defaultValue": "spectrum--light",
|
||||
"options": [
|
||||
{
|
||||
"label": "Lightest",
|
||||
"value": "spectrum--lightest"
|
||||
},
|
||||
{
|
||||
"label": "Light",
|
||||
"value": "spectrum--light"
|
||||
},
|
||||
{
|
||||
"label": "Dark",
|
||||
"value": "spectrum--dark"
|
||||
},
|
||||
{
|
||||
"label": "Darkest",
|
||||
"value": "spectrum--darkest"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Size",
|
||||
"key": "size",
|
||||
"defaultValue": "spectrum--medium",
|
||||
"options": [
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "spectrum--medium"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "spectrum--large"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "multifield",
|
||||
"label": "Columns",
|
||||
|
|
@ -2161,5 +2089,42 @@
|
|||
"defaultValue": "Last 30 days"
|
||||
}
|
||||
]
|
||||
},
|
||||
"spectrumcard": {
|
||||
"name": "Card",
|
||||
"icon": "Card",
|
||||
"styles": ["size"],
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"key": "title",
|
||||
"label": "Title"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "subtitle",
|
||||
"label": "Subtitle"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "description",
|
||||
"label": "Description"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "imageURL",
|
||||
"label": "Image URL"
|
||||
},
|
||||
{
|
||||
"type": "url",
|
||||
"key": "linkURL",
|
||||
"label": "Link URL"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"key": "horizontal",
|
||||
"label": "Horizontal"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,8 +34,10 @@
|
|||
"gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc",
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^0.9.70",
|
||||
"@spectrum-css/card": "^3.0.3",
|
||||
"@spectrum-css/link": "^3.1.3",
|
||||
"@spectrum-css/page": "^3.0.1",
|
||||
"@spectrum-css/typography": "^3.0.2",
|
||||
"@spectrum-css/vars": "^3.0.1",
|
||||
"apexcharts": "^3.22.1",
|
||||
"dayjs": "^1.10.5",
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@
|
|||
export let onClick
|
||||
export let size = "M"
|
||||
export let type = "primary"
|
||||
export let quiet = false
|
||||
</script>
|
||||
|
||||
<button
|
||||
class={`spectrum-Button spectrum-Button--size${size} spectrum-Button--${type}`}
|
||||
class:spectrum-Button--quiet={quiet}
|
||||
disabled={disabled || false}
|
||||
use:styleable={$component.styles}
|
||||
on:click={onClick}
|
||||
|
|
|
|||
|
|
@ -20,14 +20,13 @@
|
|||
.container {
|
||||
min-width: 260px;
|
||||
width: max-content;
|
||||
border: 1px solid var(--grey-3);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-radius: 0.3rem;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.85rem;
|
||||
color: #9e9e9e;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
font-weight: 600;
|
||||
margin: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -37,14 +36,14 @@
|
|||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 0 1.5rem 1.5rem 1.5rem;
|
||||
color: inherit;
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
color: #9e9e9e;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
margin: 1rem 1.5rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import "@spectrum-css/typography/dist/index-vars.css"
|
||||
|
||||
const { styleable, builderStore } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
|
@ -14,8 +15,10 @@
|
|||
|
||||
$: placeholder = $builderStore.inBuilder && !text
|
||||
$: componentText = $builderStore.inBuilder
|
||||
? text || "Placeholder text"
|
||||
? text || $component.name || "Placeholder text"
|
||||
: text || ""
|
||||
$: sizeClass = `spectrum-Heading--size${size || "M"}`
|
||||
$: alignClass = `align--${align || "left"}`
|
||||
|
||||
// Add color styles to main styles object, otherwise the styleable helper
|
||||
// overrides the color when it's passed as inline style.
|
||||
|
|
@ -41,25 +44,19 @@
|
|||
class:bold
|
||||
class:italic
|
||||
class:underline
|
||||
class="align--{align || 'left'} size--{size || 'M'}"
|
||||
class="spectrum-Heading {sizeClass} {alignClass}"
|
||||
>
|
||||
{#if bold}
|
||||
<strong>{componentText}</strong>
|
||||
{:else}
|
||||
{componentText}
|
||||
{/if}
|
||||
</h1>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.placeholder {
|
||||
font-style: italic;
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
|
|
@ -70,15 +67,7 @@
|
|||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.size--S {
|
||||
font-size: 18px;
|
||||
}
|
||||
.size--M {
|
||||
font-size: 22px;
|
||||
}
|
||||
.size--L {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.align--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,34 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import Placeholder from "./Placeholder.svelte"
|
||||
|
||||
const { styleable } = getContext("sdk")
|
||||
const { styleable, builderStore } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let icon = ""
|
||||
export let size = "fa-lg"
|
||||
export let color = "#f00"
|
||||
export let icon
|
||||
export let size
|
||||
export let color
|
||||
export let onClick
|
||||
|
||||
$: styles = {
|
||||
...$component.styles,
|
||||
normal: {
|
||||
...$component.styles.normal,
|
||||
color,
|
||||
color: color || "var(--spectrum-global-color-gray-900)",
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
|
||||
{#if icon}
|
||||
<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
|
||||
{:else if $builderStore.inBuilder}
|
||||
<div use:styleable={styles}>
|
||||
<Placeholder />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -125,6 +125,7 @@
|
|||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
background: var(--spectrum-alias-background-color-secondary);
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
|
|
@ -132,9 +133,10 @@
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
background: white;
|
||||
background: var(--spectrum-alias-background-color-primary);
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
|
||||
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.layout--top .nav-wrapper.sticky {
|
||||
position: sticky;
|
||||
|
|
@ -312,7 +314,7 @@
|
|||
transition: transform 0.26s ease-in-out, opacity 0.26s ease-in-out;
|
||||
height: 100vh;
|
||||
opacity: 0;
|
||||
background: white;
|
||||
background: var(--spectrum-alias-background-color-secondary);
|
||||
z-index: 999;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -326,7 +328,8 @@
|
|||
.links.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(250px);
|
||||
box-shadow: 0 0 40px 20px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 80px 20px rgba(0, 0, 0, 0.2);
|
||||
border-right: 1px solid var(--spectrum-global-color-gray-300);
|
||||
}
|
||||
.mobile-click-handler.visible {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -74,12 +74,15 @@
|
|||
<style>
|
||||
a {
|
||||
color: var(--spectrum-alias-text-color);
|
||||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
white-space: nowrap;
|
||||
transition: color 130ms ease-in-out;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--spectrum-global-color-blue-600) !important;
|
||||
}
|
||||
.placeholder {
|
||||
font-style: italic;
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<style>
|
||||
.noRows {
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-l);
|
||||
display: grid;
|
||||
|
|
@ -42,6 +42,6 @@
|
|||
.noRows i {
|
||||
margin-bottom: var(--spacing-m);
|
||||
font-size: 1.5rem;
|
||||
color: var(--grey-5);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,6 @@
|
|||
}
|
||||
span {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.placeholder {
|
||||
border: 2px dashed var(--grey-5);
|
||||
border: 2px dashed var(--spectrum-global-color-gray-600);
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
<script>
|
||||
import "@spectrum-css/card/dist/index-vars.css"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let title
|
||||
export let subtitle
|
||||
export let description
|
||||
export let imageURL
|
||||
export let linkURL
|
||||
export let horizontal
|
||||
|
||||
const { styleable, linkable } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
$: external = linkURL && !linkURL.startsWith("/")
|
||||
</script>
|
||||
|
||||
<div
|
||||
use:styleable={$component.styles}
|
||||
class="spectrum-Card"
|
||||
tabindex="0"
|
||||
role="figure"
|
||||
class:horizontal
|
||||
>
|
||||
{#if imageURL}
|
||||
<div
|
||||
class="spectrum-Card-coverPhoto"
|
||||
style="background-image: url({imageURL})"
|
||||
/>
|
||||
{/if}
|
||||
<div class="spectrum-Card-container">
|
||||
<div class="spectrum-Card-body">
|
||||
<div class="spectrum-Card-header">
|
||||
<div
|
||||
class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
|
||||
>
|
||||
{#if linkURL}
|
||||
{#if external}
|
||||
<a href={linkURL}>{title || "Card Title"}</a>
|
||||
{:else}
|
||||
<a use:linkable href={linkURL}>{title || "Card Title"}</a>
|
||||
{/if}
|
||||
{:else}
|
||||
{title || "Card Title"}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if subtitle}
|
||||
<div class="spectrum-Card-content">
|
||||
<div
|
||||
class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS"
|
||||
>
|
||||
{subtitle}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if description}
|
||||
<div class="spectrum-Card-footer">
|
||||
{description}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spectrum-Card {
|
||||
width: 240px;
|
||||
border-color: var(--spectrum-global-color-gray-300) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
.spectrum-Card.horizontal {
|
||||
flex-direction: row;
|
||||
width: 420px;
|
||||
}
|
||||
.spectrum-Card-title :global(a) {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.spectrum-Card-subtitle {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.spectrum-Card-footer {
|
||||
word-wrap: anywhere;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
a {
|
||||
transition: color 130ms ease-in-out;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
}
|
||||
|
||||
.horizontal .spectrum-Card-coverPhoto {
|
||||
flex: 0 0 160px;
|
||||
height: auto;
|
||||
border-bottom-left-radius: calc(
|
||||
var(--spectrum-alias-border-radius-regular) - 1px
|
||||
);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.horizontal .spectrum-Card-container {
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.spectrum-Card-footer {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
margin-top: -8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
$: placeholder = $builderStore.inBuilder && !text
|
||||
$: componentText = $builderStore.inBuilder
|
||||
? text || "Placeholder text"
|
||||
? text || $component.name || "Placeholder text"
|
||||
: text || ""
|
||||
|
||||
// Add color styles to main styles object, otherwise the styleable helper
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
.placeholder {
|
||||
font-style: italic;
|
||||
color: var(--grey-6);
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
.bold {
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,16 @@
|
|||
text-transform: capitalize;
|
||||
}
|
||||
div :global(.apexcharts-yaxis-label, .apexcharts-xaxis-label) {
|
||||
fill: #aaa;
|
||||
fill: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
|
||||
div :global(.apexcharts-gridline) {
|
||||
stroke: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
div :global(.apexcharts-legend-text) {
|
||||
color: var(--spectrum-global-color-gray-700) !important;
|
||||
}
|
||||
div :global(.apexcharts-datalabel) {
|
||||
fill: var(--spectrum-global-color-gray-800);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
import { generateID } from "../helpers"
|
||||
|
||||
export let dataSource
|
||||
export let theme
|
||||
export let size
|
||||
export let disabled = false
|
||||
export let initialValues
|
||||
|
||||
|
|
@ -160,24 +158,9 @@
|
|||
{actions}
|
||||
data={{ ...$formState.values, tableId: dataSource?.tableId }}
|
||||
>
|
||||
<div
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
use:styleable={$component.styles}
|
||||
class={`spectrum ${size || "spectrum--medium"} ${
|
||||
theme || "spectrum--light"
|
||||
}`}
|
||||
>
|
||||
<div use:styleable={$component.styles}>
|
||||
{#if loaded}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
</Provider>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,20 +20,23 @@ export { default as dataprovider } from "./DataProvider.svelte"
|
|||
export { default as screenslot } from "./ScreenSlot.svelte"
|
||||
export { default as button } from "./Button.svelte"
|
||||
export { default as repeater } from "./Repeater.svelte"
|
||||
export { default as stackedlist } from "./StackedList.svelte"
|
||||
export { default as card } from "./Card.svelte"
|
||||
export { default as text } from "./Text.svelte"
|
||||
export { default as navigation } from "./Navigation.svelte"
|
||||
export { default as layout } from "./Layout.svelte"
|
||||
export { default as link } from "./Link.svelte"
|
||||
export { default as heading } from "./Heading.svelte"
|
||||
export { default as image } from "./Image.svelte"
|
||||
export { default as embed } from "./Embed.svelte"
|
||||
export { default as cardhorizontal } from "./CardHorizontal.svelte"
|
||||
export { default as cardstat } from "./CardStat.svelte"
|
||||
export { default as icon } from "./Icon.svelte"
|
||||
export { default as backgroundimage } from "./BackgroundImage.svelte"
|
||||
export { default as daterangepicker } from "./DateRangePicker.svelte"
|
||||
export { default as cardstat } from "./CardStat.svelte"
|
||||
export { default as spectrumcard } from "./SpectrumCard.svelte"
|
||||
export * from "./charts"
|
||||
export * from "./forms"
|
||||
export * from "./table"
|
||||
|
||||
// Deprecated component left for compatibility in old apps
|
||||
export { default as navigation } from "./deprecated/Navigation.svelte"
|
||||
export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
|
||||
export { default as stackedlist } from "./deprecated/StackedList.svelte"
|
||||
export { default as card } from "./deprecated/Card.svelte"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
import { Table } from "@budibase/bbui"
|
||||
import SlotRenderer from "./SlotRenderer.svelte"
|
||||
|
||||
export let theme
|
||||
export let size
|
||||
export let dataProvider
|
||||
export let columns
|
||||
export let showAutoColumns
|
||||
|
|
@ -73,12 +71,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
use:styleable={$component.styles}
|
||||
class={`spectrum ${size || "spectrum--medium"} ${theme || "spectrum--light"}`}
|
||||
>
|
||||
<div use:styleable={$component.styles}>
|
||||
<Table
|
||||
{data}
|
||||
{schema}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,59 @@
|
|||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@adobe/spectrum-css-workflow-icons@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
|
||||
integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
|
||||
|
||||
"@budibase/bbui@^0.9.67":
|
||||
version "0.9.67"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.67.tgz#9e242cbf25c04d9843d64cd676f5c293f531f18f"
|
||||
integrity sha512-XwwwPuOG4y/bV9psjOjYBvAqVaVJ56nklKOm2snaSS0P9WlQ17TWVcixQo5Ol9ecvzl9iVD2Wi2rWTX6y6sYaA==
|
||||
dependencies:
|
||||
"@adobe/spectrum-css-workflow-icons" "^1.2.1"
|
||||
"@spectrum-css/actionbutton" "^1.0.1"
|
||||
"@spectrum-css/actiongroup" "^1.0.1"
|
||||
"@spectrum-css/avatar" "^3.0.2"
|
||||
"@spectrum-css/button" "^3.0.1"
|
||||
"@spectrum-css/buttongroup" "^3.0.2"
|
||||
"@spectrum-css/checkbox" "^3.0.2"
|
||||
"@spectrum-css/dialog" "^3.0.1"
|
||||
"@spectrum-css/divider" "^1.0.1"
|
||||
"@spectrum-css/dropzone" "^3.0.2"
|
||||
"@spectrum-css/fieldgroup" "^3.0.2"
|
||||
"@spectrum-css/fieldlabel" "^3.0.1"
|
||||
"@spectrum-css/icon" "^3.0.1"
|
||||
"@spectrum-css/illustratedmessage" "^3.0.2"
|
||||
"@spectrum-css/inputgroup" "^3.0.2"
|
||||
"@spectrum-css/label" "^2.0.10"
|
||||
"@spectrum-css/link" "^3.1.1"
|
||||
"@spectrum-css/menu" "^3.0.1"
|
||||
"@spectrum-css/modal" "^3.0.1"
|
||||
"@spectrum-css/pagination" "^3.0.3"
|
||||
"@spectrum-css/picker" "^1.0.1"
|
||||
"@spectrum-css/popover" "^3.0.1"
|
||||
"@spectrum-css/progressbar" "^1.0.2"
|
||||
"@spectrum-css/progresscircle" "^1.0.2"
|
||||
"@spectrum-css/radio" "^3.0.2"
|
||||
"@spectrum-css/search" "^3.0.2"
|
||||
"@spectrum-css/sidenav" "^3.0.2"
|
||||
"@spectrum-css/statuslight" "^3.0.2"
|
||||
"@spectrum-css/switch" "^1.0.2"
|
||||
"@spectrum-css/table" "^3.0.1"
|
||||
"@spectrum-css/tabs" "^3.0.1"
|
||||
"@spectrum-css/tags" "^3.0.2"
|
||||
"@spectrum-css/textfield" "^3.0.1"
|
||||
"@spectrum-css/toast" "^3.0.1"
|
||||
"@spectrum-css/tooltip" "^3.0.3"
|
||||
"@spectrum-css/treeview" "^3.0.2"
|
||||
"@spectrum-css/typography" "^3.0.1"
|
||||
"@spectrum-css/underlay" "^2.0.9"
|
||||
"@spectrum-css/vars" "^3.0.1"
|
||||
dayjs "^1.10.4"
|
||||
svelte-flatpickr "^3.1.0"
|
||||
svelte-portal "^1.0.0"
|
||||
|
||||
"@rollup/pluginutils@^4.1.0":
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838"
|
||||
|
|
@ -10,11 +63,103 @@
|
|||
estree-walker "^2.0.1"
|
||||
picomatch "^2.2.2"
|
||||
|
||||
"@spectrum-css/link@^3.1.3":
|
||||
"@spectrum-css/actionbutton@^1.0.1":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.3.tgz#8f7342a69b303c5acdcfa0a59f5e9267b9f3cb30"
|
||||
integrity sha512-P9qoCPSiZ1SB6ZYqK5hub0vGty00YYqonQE0KTjtb1i+T1nYR/87vWqVPERx9j63uhgZncjwFYaThTvRqye7eQ==
|
||||
|
||||
"@spectrum-css/actiongroup@^1.0.1":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.3.tgz#4713ce65e6f5c72c404a7b638fbc3b4fd7e3874f"
|
||||
integrity sha512-NlB9Q4ZlWixXxymoPIYG6g2hkwAGKFodHWPFfxHD8ddkjXWRB9G2akUP7cfsJ4DcYn4VisUORCOYQwqDiSmboQ==
|
||||
|
||||
"@spectrum-css/avatar@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-3.0.2.tgz#4f1826223eae330e64b6d3cc899e9bc2e98dac95"
|
||||
integrity sha512-wEczvSqxttTWSiL3cOvXV/RmGRwSkw2w6+slcHhnf0kb7ovymMM+9oz8vvEpEsSeo5u598bc+7ktrKFpAd6soQ==
|
||||
|
||||
"@spectrum-css/button@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.3.tgz#2df1efaab6c7e0b3b06cb4b59e1eae59c7f1fc84"
|
||||
integrity sha512-6CnLPqqtaU/PcSSIGeGRi0iFIIxIUByYLKFO6zn5NEUc12KQ28dJ4PLwB6WBa0L8vRoAGlnWWH2ZZweTijbXgg==
|
||||
|
||||
"@spectrum-css/buttongroup@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.3.tgz#719d868845ac9d2c4f939c1b9f6044507902d5aa"
|
||||
integrity sha512-eXl8U4QWMWXqyTu654FdQdEGnmczgOYlpIFSHyCMVjhtPqZp2xwnLFiGh6LKw+bLio6eeOZ0L+vpk1GcoYqgkw==
|
||||
|
||||
"@spectrum-css/card@^3.0.3":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/card/-/card-3.0.3.tgz#56b2e2da6b80c1583228baa279de7407383bfb6b"
|
||||
integrity sha512-+oKLUI2a0QmQP9EzySeq/G4FpUkkdaDNbuEbqCj2IkPMc/2v/nwzsPhh1fj2UIghGAiiUwXfPpzax1e8fyhQUg==
|
||||
|
||||
"@spectrum-css/checkbox@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.3.tgz#8577067fc8b97e4609f92bd242364937a533a7bb"
|
||||
integrity sha512-QVG9uMHq+lh70Dh6mDNnY+vEvNz2p7VC6xgLfDYfijp2qeiqYPq72fQK6p/SiyqPk96ZACzNRwgeROU6Xf6Wgg==
|
||||
|
||||
"@spectrum-css/dialog@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.3.tgz#7715a4ea435e753afb623d99ca5917ed1bcd6f34"
|
||||
integrity sha512-AhmKgfRIVyTe3ABiJ8lLUQL34VB/H6fN16na2LlbDRJvyRMzkdN1Xf2i6U3f4OMd3qQ8Gm5xat4BvMxIQPBAUQ==
|
||||
|
||||
"@spectrum-css/divider@^1.0.1":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.3.tgz#639e2ebaa0834efa40f42397668bbd5c153ea385"
|
||||
integrity sha512-Zy4Rn40w8UtzMh3wx/U9+CepSCpm1aOCGftHgWDub0XZuVTzh0c1WwyzTuLCx2Hf21z5VRGNiDh8bGEEzSbtNA==
|
||||
dependencies:
|
||||
"@spectrum-css/vars" "^3.0.2"
|
||||
|
||||
"@spectrum-css/dropzone@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.3.tgz#aee71697a2c195947599d7541b858c3c198741dc"
|
||||
integrity sha512-ujrswdtB6bHigklyHsm6zomFd6rUnKJ3xVVRjroVF4+ouK4DxK5tX0iVd0EW6AOfOjx4Cc28uyFot3fpxp+MQw==
|
||||
|
||||
"@spectrum-css/fieldgroup@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.3.tgz#85d85da048d08200f25ceab378026dd2b11e0bb2"
|
||||
integrity sha512-wXUXTXN1CPnR7M4Ltd+3uh7BfcNGUV1+Xe0/h0tCpq/j+S2Sd4xo7/pUMdU19sIDrAAtpEFp1tt+nouHcU5HGQ==
|
||||
|
||||
"@spectrum-css/fieldlabel@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.3.tgz#f73c04d20734d4718ffb620dc46458904685b449"
|
||||
integrity sha512-nEvIkEXCD5n4fW67Unq6Iu7VXoauEd/JGpfTY02VsC5p4FJLnwKfPDbJUuUsqClAxqw7nAsmXVKtn4zQFf5yPQ==
|
||||
|
||||
"@spectrum-css/icon@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.3.tgz#5c612822380927087aebd526855d82ed2c3e2cba"
|
||||
integrity sha512-hyloKOejPCXhP3MBNsm3SjR9j8xT1R1S19p32KW/0Qhj+VMUtfyEPmevyFptpn7wcovQccdl/vZVIVDuML/imw==
|
||||
|
||||
"@spectrum-css/illustratedmessage@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
|
||||
integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
|
||||
|
||||
"@spectrum-css/inputgroup@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.3.tgz#00c9a370ddc2c55cf0f37dd6069faa9501fd7eb5"
|
||||
integrity sha512-FqRJTiLL7jiGfzDVXWUGVLqHryJjCcqQIrqAi+Tq0oenapzsBe2qc/zIrKgh2wtMI+NTIBLXTECvij3L1HlqAg==
|
||||
|
||||
"@spectrum-css/label@^2.0.10":
|
||||
version "2.0.10"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001"
|
||||
integrity sha512-xCbtEiQkZIlLdWFikuw7ifDCC21DOC/KMgVrrVJHXFc4KRQe9LTZSqmGF3tovm+CSq1adE59mYoTbojVQ9YuEQ==
|
||||
|
||||
"@spectrum-css/link@^3.1.1", "@spectrum-css/link@^3.1.3":
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.3.tgz#b0e560a7e0acdb4a2b329b6669696aa3438f5993"
|
||||
integrity sha512-8Pmy5d73MwKcATTPaj+fSrZYnIw7GmfX40AvpC1xx5LauOxsbUb4AVNp1kn2H8rrOBmxF7czyhoBBhEiv66QUg==
|
||||
|
||||
"@spectrum-css/menu@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.3.tgz#46a9b221bb5f470a2f8a934bdfd512d84d2fdc4d"
|
||||
integrity sha512-qKA9J/MrikNKIpCEHsAazG2vY3im5tjGCmo6p9Pdnu8/aQMsiuZDHZayukeCttJUZkrb9guDVL9OIHlK5RZvcQ==
|
||||
|
||||
"@spectrum-css/modal@^3.0.1":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.2.tgz#58b6621cab65f90788d310374f40df1f7090473f"
|
||||
integrity sha512-YnIivJhoaao7Otu+HV7sgebPyFbO6sd/oMvTN/Rb2wwgnaMnIIuIRdGandSrcgotN2uNgs+P0knG6mv/xA1/dg==
|
||||
|
||||
"@spectrum-css/page@^3.0.1":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.2.tgz#8f0c03d25f5565fb13115541a8fcaf0e1d3a8ee0"
|
||||
|
|
@ -22,6 +167,101 @@
|
|||
dependencies:
|
||||
"@spectrum-css/vars" "^3.0.2"
|
||||
|
||||
"@spectrum-css/pagination@^3.0.3":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/pagination/-/pagination-3.0.3.tgz#b204c3ada384c4af751a354bc428346d82eeea65"
|
||||
integrity sha512-OJ/v9GeNXJOZ9Yr9LDBYPrR2NCiLOWP9wANT/a5sqFuugRnQbn/HYMnRp9TBxwpDY6ihaPo0T/wi7kLiAJFdDw==
|
||||
|
||||
"@spectrum-css/picker@^1.0.1":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.3.tgz#21379bcf8ae94277deeb6ad65dcd9e2bbfacb487"
|
||||
integrity sha512-oHLGxBx5BwVCSGo7/T1C9PTHX1+/5AmVjyLiTJ4UoIdSJmOERw9YcRZbcGZgBJNWbxcjr4TyGtwj1EcSjEy97w==
|
||||
|
||||
"@spectrum-css/popover@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.3.tgz#6fb69873474fb968afb738eacb9e121f93e83a09"
|
||||
integrity sha512-KvmXv4TV19FBx39KfmgVlDYtvtBqv/8RRK7RRLDDHGViTxZtShjVsVpwIgfkfgn4iJztCnXpWzFqRXWUu2XCpQ==
|
||||
|
||||
"@spectrum-css/progressbar@^1.0.2":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.3.tgz#f70bcc38a2a21cff2f422ec825724ebbb9455e67"
|
||||
integrity sha512-vJHplefUuy8+NjCw1X7fLbqHVGNVBpvGFXNAeaIj4SFf4ygxiUq/5c9iRhhsCQixEsJlfD/b7BnGXU7BUDkr6Q==
|
||||
|
||||
"@spectrum-css/progresscircle@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/progresscircle/-/progresscircle-1.0.2.tgz#258ea9170fb70f795edda03e38a61d93bef4487c"
|
||||
integrity sha512-JLULpyzjIY95lzlWR1yE1gv4l1K6p+scQ+edmuZZUHBzwM3pUtkvHJmUlA9TYdResUYW6Uka60VRdY6lZ8gnFQ==
|
||||
|
||||
"@spectrum-css/radio@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.3.tgz#25c3bc5e9c30a8a8ae728717b7c7fb736cdae640"
|
||||
integrity sha512-LaLGfz/eGNR2iyqouXYILIA+pKRqF769iPdwM0REm5RpWvMQDD7rPZ/kWlg18owjaFsyllEp25gEjmhRJIIVOw==
|
||||
|
||||
"@spectrum-css/search@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.3.tgz#3415dc106aca0d5dd996e87084a1b47c2b95a882"
|
||||
integrity sha512-kdLpKTt0obljuhS1q1tukujRlvSs8sBwij76D4Qp8KpMzwePfZyvv1kYzuWPNZfTeISxWsmyZ6Wxd1uvzjn+UA==
|
||||
|
||||
"@spectrum-css/sidenav@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.3.tgz#132141fbd2500a927c312fa4e1d712c438b3d597"
|
||||
integrity sha512-cQ+CgwjxGftrcc79i1XnGd66QTl7H7zopSU0UTV4Qq7hvqfrjjWxfZ6b+3tezrrhNlDope1ff9o8sm67PsPXtg==
|
||||
|
||||
"@spectrum-css/statuslight@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"
|
||||
integrity sha512-xodB8g8vGJH20XmUj9ZsPlM1jHrGeRbvmVXkz0q7YvQrYAhim8pP3W+XKKZAletPFAuu8cmUOc6SWn6i4X4z6w==
|
||||
|
||||
"@spectrum-css/switch@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"
|
||||
integrity sha512-zqmHpgWPNg1gEwdUNFYV3CBX5JaeALfIqcJIxE0FLZqr9d1C4+oLE0ItIFzt1bwr4bFAOmkEpvtiY+amluzGxQ==
|
||||
|
||||
"@spectrum-css/table@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.3.tgz#7f7f19905ef3275cbf907ce3a5818e63c30b2caf"
|
||||
integrity sha512-nxwzVjLPsXoY/v4sdxOVYLcC+cEbGgJyLcLclT5LT9MGSbngFeUMJzzVR4EvehzuN4dH7hrATG7Mbuq29Mf0Hg==
|
||||
|
||||
"@spectrum-css/tabs@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.3.tgz#51dd6f168c897b0fdc3a7e9f901df7bd2288b4fc"
|
||||
integrity sha512-iLP1I72bJWz9APdQB1jiw+pOv5a7N+hYOCJvRoc56Us/hJKVzowkyGRe3uH+8v36nCG9bHxiAQNLoU8eXisVrg==
|
||||
|
||||
"@spectrum-css/tags@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/tags/-/tags-3.0.3.tgz#fc76d2735cdc442de91b7eb3bee49a928c0767ac"
|
||||
integrity sha512-SL8vPxVDfWcY5VdIuyl0TImEXcOU1I7yCyXkk7MudMwfnYs81FaIyY32hFV9OHj0Tz/36UzRzc7AVMSuRQ53pw==
|
||||
|
||||
"@spectrum-css/textfield@^3.0.1":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.2.tgz#907f62d2dc82852dd6236a820be99e252b531631"
|
||||
integrity sha512-nkFgAb0cP4jUodkUBErMNfyF78jJLtgL1Mrr9/rvGpGobo10IAbb8zZY4CkZ64o8XmMy/85+wZTKcx+KHatqpg==
|
||||
|
||||
"@spectrum-css/toast@^3.0.1":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.3.tgz#97c1527384707600832ecda35643ed304615250f"
|
||||
integrity sha512-CjLeaMs+cjUXojCCRtbj0YkD2BoZW16kjj2o5omkEpUTjA34IJ8xJ1a+CCtDILWekhXvN0MBN4sbumcnwcnx8w==
|
||||
|
||||
"@spectrum-css/tooltip@^3.0.3":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.3.tgz#26b8ca3b3d30e29630244d85eb4fc11d0c841281"
|
||||
integrity sha512-ztRF7WW1FzyNavXBRc+80z67UoOrY9wl3cMYsVD3MpDnyxdzP8cjza1pCcolKBaFqRTcQKkxKw3GWtGICRKR5A==
|
||||
|
||||
"@spectrum-css/treeview@^3.0.2":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046"
|
||||
integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw==
|
||||
|
||||
"@spectrum-css/typography@^3.0.1", "@spectrum-css/typography@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38"
|
||||
integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA==
|
||||
|
||||
"@spectrum-css/underlay@^2.0.9":
|
||||
version "2.0.10"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.10.tgz#8b75b646605a311850f6620caa18d4996cd64ed7"
|
||||
integrity sha512-PmsmkzeGD/rY4pp3ILXHt9w8BW7uaEqXe08hQRS7rGki7wqCpG4mE0/8N3yEcA3QxWQclmG9gdkg5uz6wMmYzA==
|
||||
|
||||
"@spectrum-css/vars@^3.0.1", "@spectrum-css/vars@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.2.tgz#ea9062c3c98dfc6ba59e5df14a03025ad8969999"
|
||||
|
|
@ -85,7 +325,7 @@ colorette@^1.2.2:
|
|||
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
|
||||
integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
|
||||
|
||||
dayjs@^1.10.5:
|
||||
dayjs@^1.10.4, dayjs@^1.10.5:
|
||||
version "1.10.5"
|
||||
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.5.tgz#5600df4548fc2453b3f163ebb2abbe965ccfb986"
|
||||
integrity sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g==
|
||||
|
|
@ -236,6 +476,11 @@ svelte-hmr@^0.14.2:
|
|||
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.4.tgz#b7ef2bfeef23916e0e912828c50645ca572ac355"
|
||||
integrity sha512-kItFF7vqzStckSigoFmMnxJpTOdB9TWnQAW6Js+yAB4277tLbJIIE5KBlGHNmJNpA7MguqidsPB27Uw5UzQPCA==
|
||||
|
||||
svelte-portal@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
|
||||
integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
|
||||
|
||||
svelte@^3.38.2:
|
||||
version "3.38.2"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.2.tgz#55e5c681f793ae349b5cc2fe58e5782af4275ef5"
|
||||
|
|
|
|||
Loading…
Reference in New Issue