formatting and lint update
This commit is contained in:
parent
a552772ccc
commit
9068bbc89c
|
@ -19,9 +19,10 @@
|
||||||
onChange(_value)
|
onChange(_value)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: displayValues = value && suffix
|
$: displayValues =
|
||||||
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
|
value && suffix
|
||||||
: value || []
|
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
|
||||||
|
: value || []
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
return componentName || "element"
|
return componentName || "element"
|
||||||
}
|
}
|
||||||
|
|
||||||
const screenPlaceholder = {
|
const screenPlaceholder = {
|
||||||
name: "Screen Placeholder",
|
name: "Screen Placeholder",
|
||||||
route: "*",
|
route: "*",
|
||||||
props: {
|
props: {
|
||||||
|
@ -60,7 +60,6 @@
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
$: hasComponent = !!$store.currentPreviewItem
|
$: hasComponent = !!$store.currentPreviewItem
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
@ -88,9 +87,9 @@
|
||||||
libraries: $store.libraries,
|
libraries: $store.libraries,
|
||||||
page: $store.pages[$store.currentPageName],
|
page: $store.pages[$store.currentPageName],
|
||||||
screens: [
|
screens: [
|
||||||
$store.currentFrontEndType === "page"
|
$store.currentFrontEndType === "page"
|
||||||
? screenPlaceholder
|
? screenPlaceholder
|
||||||
: $store.currentPreviewItem,
|
: $store.currentPreviewItem,
|
||||||
],
|
],
|
||||||
appRootPath: "",
|
appRootPath: "",
|
||||||
}
|
}
|
||||||
|
@ -102,20 +101,25 @@
|
||||||
: ""
|
: ""
|
||||||
|
|
||||||
const refreshContent = () => {
|
const refreshContent = () => {
|
||||||
iframe.contentWindow.postMessage(JSON.stringify({
|
iframe.contentWindow.postMessage(
|
||||||
styles,
|
JSON.stringify({
|
||||||
stylesheetLinks,
|
styles,
|
||||||
selectedComponentType,
|
stylesheetLinks,
|
||||||
selectedComponentId,
|
selectedComponentType,
|
||||||
frontendDefinition,
|
selectedComponentId,
|
||||||
}))
|
frontendDefinition,
|
||||||
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
|
$: if (iframe)
|
||||||
|
iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
|
||||||
|
once: true,
|
||||||
|
})
|
||||||
|
|
||||||
$: if(iframe && frontendDefinition) {
|
$: if (iframe && frontendDefinition) {
|
||||||
refreshContent()
|
refreshContent()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="component-container">
|
<div class="component-container">
|
||||||
|
|
|
@ -41,23 +41,28 @@
|
||||||
let panelDefinition = {}
|
let panelDefinition = {}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if(componentPropDefinition.properties) {
|
if (componentPropDefinition.properties) {
|
||||||
if(selectedCategory.value === "design") {
|
if (selectedCategory.value === "design") {
|
||||||
panelDefinition = componentPropDefinition.properties["design"]
|
panelDefinition = componentPropDefinition.properties["design"]
|
||||||
}else{
|
} else {
|
||||||
let panelDef = componentPropDefinition.properties["settings"]
|
let panelDef = componentPropDefinition.properties["settings"]
|
||||||
if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
|
if (
|
||||||
panelDefinition = [...page,...panelDef]
|
$store.currentFrontEndType === "page" &&
|
||||||
}else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
|
$store.currentView !== "component"
|
||||||
|
) {
|
||||||
|
panelDefinition = [...page, ...panelDef]
|
||||||
|
} else if (
|
||||||
|
$store.currentFrontEndType === "screen" &&
|
||||||
|
$store.currentView !== "component"
|
||||||
|
) {
|
||||||
panelDefinition = [...screen, ...panelDef]
|
panelDefinition = [...screen, ...panelDef]
|
||||||
}else {
|
} else {
|
||||||
panelDefinition = panelDef
|
panelDefinition = panelDef
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const onStyleChanged = store.setComponentStyle
|
const onStyleChanged = store.setComponentStyle
|
||||||
const onPropChanged = store.setComponentProp
|
const onPropChanged = store.setComponentProp
|
||||||
|
|
||||||
|
|
|
@ -403,10 +403,26 @@ export const effects = [
|
||||||
options: [
|
options: [
|
||||||
{ label: "None", value: "none" },
|
{ label: "None", value: "none" },
|
||||||
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
|
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
|
||||||
{ label: "Small", value: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" },
|
{
|
||||||
{ label: "Medium", value: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
|
label: "Small",
|
||||||
{ label: "Large", value: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
|
value:
|
||||||
{ label: "Extra large", value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
|
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Medium",
|
||||||
|
value:
|
||||||
|
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Large",
|
||||||
|
value:
|
||||||
|
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Extra large",
|
||||||
|
value:
|
||||||
|
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue