mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
committed by
GitHub
GitHub
26 changed files with 8776 additions and 328 deletions
File diff suppressed because it is too large
@ -0,0 +1,66 @@ |
|||
<script> |
|||
export let item |
|||
</script> |
|||
|
|||
<div class="item-item" on:click> |
|||
<div class="item-icon"> |
|||
<i class={item.icon} /> |
|||
</div> |
|||
<div class="item-text"> |
|||
<div class="item-name">{item.name}</div> |
|||
<div class="item-description"> |
|||
<p>{item.description}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.item-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 10px 0px 8px 10px; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.item-item:hover { |
|||
background: #fbfbfb; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.item-icon { |
|||
flex: 0 0 40px; |
|||
background: #f1f4fc; |
|||
height: 40px; |
|||
border-radius: 5px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.item-text { |
|||
display: flex; |
|||
padding-left: 16px; |
|||
padding-top: 8px; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.item-description { |
|||
font-size: 12px; |
|||
color: #808192; |
|||
} |
|||
|
|||
p { |
|||
line-height: 15px; |
|||
} |
|||
|
|||
i { |
|||
font-size: 24px; |
|||
color: #808192; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<script> |
|||
import { createEventDispatcher } from "svelte" |
|||
const dispatch = createEventDispatcher() |
|||
|
|||
import Item from "./Item.svelte" |
|||
import { store } from "builderStore" |
|||
export let list |
|||
|
|||
let category = list |
|||
|
|||
const handleClick = item => { |
|||
if (item.children && item.children.length > 0) { |
|||
list = item |
|||
} else { |
|||
dispatch("selectItem", item) |
|||
} |
|||
} |
|||
|
|||
const goBack = () => { |
|||
list = category |
|||
} |
|||
</script> |
|||
|
|||
{#if !list.isCategory} |
|||
<button class="back-button" on:click={() => (list = category)}>Back</button> |
|||
{/if} |
|||
|
|||
{#each list.children as item} |
|||
<Item {item} on:click={() => handleClick(item)} /> |
|||
{/each} |
|||
|
|||
<style> |
|||
.back-button { |
|||
font-size: 16px; |
|||
width: 100%; |
|||
text-align: center; |
|||
height: 40px; |
|||
border-radius: 3px; |
|||
border: solid 1px #e8e8ef; |
|||
background: white; |
|||
margin-bottom: 20px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,335 @@ |
|||
<script> |
|||
import { splitName } from "./pagesParsing/splitRootComponentName.js" |
|||
import { store } from "builderStore" |
|||
import { |
|||
find, |
|||
sortBy, |
|||
groupBy, |
|||
values, |
|||
filter, |
|||
map, |
|||
uniqBy, |
|||
flatten, |
|||
} from "lodash/fp" |
|||
import { ImageIcon, InputIcon, LayoutIcon } from "components/common/Icons/" |
|||
import Select from "components/common/Select.svelte" |
|||
import Button from "components/common/PlusButton.svelte" |
|||
import ConfirmDialog from "components/common/ConfirmDialog.svelte" |
|||
import { |
|||
getRecordNodes, |
|||
getIndexNodes, |
|||
getIndexSchema, |
|||
pipe, |
|||
} from "components/common/core" |
|||
|
|||
export let toggleTab |
|||
|
|||
let componentLibraries = [] |
|||
let current_view = "text" |
|||
let selectedComponent = null |
|||
let selectedLib |
|||
let selectTemplateDialog |
|||
let templateInstances = [] |
|||
let selectedTemplateInstance |
|||
|
|||
//Info: Components seem to be generated from individual templates. Will this be the same going forward |
|||
$: templatesByComponent = groupBy(t => t.component)($store.templates) |
|||
$: hierarchy = $store.hierarchy |
|||
$: libraryModules = $store.libraries |
|||
$: standaloneTemplates = pipe( |
|||
templatesByComponent, |
|||
[ |
|||
values, |
|||
flatten, |
|||
filter(t => !$store.components.some(c => c.name === t.component)), |
|||
map(t => ({ name: splitName(t.component).componentName, template: t })), |
|||
uniqBy(t => t.name), |
|||
] |
|||
) |
|||
|
|||
const addRootComponent = (component, allComponents) => { |
|||
const { libName } = splitName(component.name) |
|||
let group = find(r => r.libName === libName)(allComponents) |
|||
|
|||
if (!group) { |
|||
group = { |
|||
libName, |
|||
components: [], |
|||
} |
|||
|
|||
allComponents.push(group) |
|||
} |
|||
|
|||
group.components.push(component) |
|||
} |
|||
|
|||
const onComponentChosen = component => { |
|||
if (component.template) { |
|||
onTemplateChosen(component.template) |
|||
} else { |
|||
store.addChildComponent(component.name) |
|||
toggleTab() |
|||
} |
|||
} |
|||
|
|||
//Info: Called from menu beside components with presets and templates |
|||
const onTemplateChosen = template => { |
|||
selectedComponent = null |
|||
const { componentName, libName } = splitName(template.name) |
|||
//Info: how will DB changes effect this? |
|||
const templateOptions = { |
|||
records: getRecordNodes(hierarchy), |
|||
indexes: getIndexNodes(hierarchy), |
|||
helpers: { |
|||
indexSchema: getIndexSchema(hierarchy), |
|||
}, |
|||
} |
|||
//Info: go off and get template instances by library and component name |
|||
//libraryModules and hierarchies (used above) come from builderStore |
|||
templateInstances = libraryModules[libName][componentName](templateOptions) |
|||
if (!templateInstances || templateInstances.length === 0) return |
|||
selectedTemplateInstance = templateInstances[0].name |
|||
selectTemplateDialog.show() |
|||
} |
|||
|
|||
const onTemplateInstanceChosen = () => { |
|||
selectedComponent = null |
|||
const instance = templateInstances.find( |
|||
i => i.name === selectedTemplateInstance |
|||
) |
|||
debugger |
|||
store.addTemplatedComponent(instance.props) |
|||
toggleTab() |
|||
} |
|||
|
|||
function generate_components_list(components) { |
|||
debugger |
|||
return ($store.currentFrontEndType === "page" |
|||
? $store.builtins.concat(components) |
|||
: components |
|||
).concat(standaloneTemplates) |
|||
} |
|||
|
|||
$: { |
|||
const newComponentLibraries = [] |
|||
|
|||
for (let comp of sortBy(["name"])($store.components)) { |
|||
addRootComponent(comp, newComponentLibraries) |
|||
} |
|||
|
|||
componentLibraries = newComponentLibraries |
|||
if (!selectedLib) selectedLib = newComponentLibraries[0].libName |
|||
} |
|||
|
|||
$: componentLibrary = componentLibraries.find(l => l.libName === selectedLib) |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<Select on:change={e => (selectedLib = e.target.value)}> |
|||
{#each componentLibraries as lib} |
|||
<option value={lib.libName}>{lib.libName}</option> |
|||
{/each} |
|||
</Select> |
|||
|
|||
<div class="library-container"> |
|||
<!-- <ul> |
|||
<li> |
|||
<button |
|||
class:selected={current_view === 'text'} |
|||
on:click={() => (current_view = 'text')}> |
|||
<InputIcon /> |
|||
</button> |
|||
</li> |
|||
<li> |
|||
<button |
|||
class:selected={current_view === 'layout'} |
|||
on:click={() => (current_view = 'layout')}> |
|||
<LayoutIcon /> |
|||
</button> |
|||
</li> |
|||
<li> |
|||
<button |
|||
class:selected={current_view === 'media'} |
|||
on:click={() => (current_view = 'media')}> |
|||
<ImageIcon /> |
|||
</button> |
|||
</li> |
|||
</ul> --> |
|||
|
|||
{#if componentLibrary} |
|||
{#each generate_components_list(componentLibrary.components) as component} |
|||
<div class="component-container"> |
|||
<div class="component" on:click={() => onComponentChosen(component)}> |
|||
<div class="name">{splitName(component.name).componentName}</div> |
|||
{#if (component.presets || templatesByComponent[component.name]) && component.name === selectedComponent} |
|||
<ul class="preset-menu"> |
|||
{#if component.presets} |
|||
<span>{splitName(component.name).componentName} Presets</span> |
|||
{#each Object.keys(component.presets) as preset} |
|||
<li |
|||
on:click|stopPropagation={() => onComponentChosen(component, preset)}> |
|||
{preset} |
|||
</li> |
|||
{/each} |
|||
{/if} |
|||
{#if templatesByComponent[component.name]} |
|||
<span> |
|||
{splitName(component.name).componentName} Templates |
|||
</span> |
|||
{#each templatesByComponent[component.name] as template} |
|||
<li |
|||
on:click|stopPropagation={() => onTemplateChosen(template)}> |
|||
{template.description} |
|||
</li> |
|||
{/each} |
|||
{/if} |
|||
</ul> |
|||
{/if} |
|||
</div> |
|||
{#if component.presets || templatesByComponent[component.name]} |
|||
<Button |
|||
on:click={() => { |
|||
selectedComponent = selectedComponent ? null : component.name |
|||
}}> |
|||
<span |
|||
class="open-presets" |
|||
class:open={selectedComponent === component.name}> |
|||
... |
|||
</span> |
|||
</Button> |
|||
{/if} |
|||
</div> |
|||
{/each} |
|||
{/if} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<ConfirmDialog |
|||
bind:this={selectTemplateDialog} |
|||
title="Choose Template" |
|||
onCancel={() => (selectedComponent = null)} |
|||
onOk={onTemplateInstanceChosen}> |
|||
{#each templateInstances.map(i => i.name) as instance} |
|||
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid"> |
|||
<label> |
|||
<input |
|||
class="uk-radio" |
|||
type="radio" |
|||
bind:group={selectedTemplateInstance} |
|||
value={instance} /> |
|||
<span class="template-instance-label">{instance}</span> |
|||
</label> |
|||
</div> |
|||
{/each} |
|||
</ConfirmDialog> |
|||
|
|||
<style> |
|||
.root { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.library-container { |
|||
padding: 0 0 10px 0; |
|||
flex: 1 1 auto; |
|||
min-height: 0px; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.component-container { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.component { |
|||
position: relative; |
|||
padding: 0 15px; |
|||
cursor: pointer; |
|||
border: 1px solid #d8d8d8; |
|||
border-radius: 2px; |
|||
margin: 5px 0; |
|||
height: 40px; |
|||
box-sizing: border-box; |
|||
color: #000333; |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.component:hover { |
|||
background-color: var(--lightslate); |
|||
} |
|||
|
|||
.component > .name { |
|||
color: #000333; |
|||
display: inline-block; |
|||
font-size: 13px; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
display: flex; |
|||
padding: 0; |
|||
} |
|||
|
|||
.preset-menu { |
|||
flex-direction: column; |
|||
position: absolute; |
|||
top: 25px; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1; |
|||
background: #fafafa; |
|||
padding: 10px; |
|||
border-radius: 2px; |
|||
color: var(--secondary80); |
|||
} |
|||
|
|||
.preset-menu > span { |
|||
font-size: 13px; |
|||
text-transform: uppercase; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.preset-menu li { |
|||
font-size: 14px; |
|||
margin-top: 13px; |
|||
} |
|||
|
|||
.preset-menu li:hover { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
li { |
|||
margin-right: 20px; |
|||
background: none; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/* li button { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: none; |
|||
border: none; |
|||
border-radius: 5px; |
|||
padding: 13px; |
|||
outline: none; |
|||
cursor: pointer; |
|||
} */ |
|||
|
|||
/* .selected { |
|||
color: var(--button-text); |
|||
background: var(--background-button) !important; |
|||
} */ |
|||
|
|||
.open { |
|||
color: rgba(0, 85, 255, 1); |
|||
} |
|||
|
|||
.template-instance-label { |
|||
margin-left: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,162 @@ |
|||
export default { |
|||
categories: [ |
|||
{ |
|||
name: 'Basic', |
|||
isCategory: true, |
|||
children: [ |
|||
{ |
|||
_component: "@budibase/standard-components/container", |
|||
name: 'Container', |
|||
description: 'This component contains things within itself', |
|||
icon: 'ri-layout-row-fill', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
name: 'Text', |
|||
description: 'This is a simple text component', |
|||
icon: 'ri-t-box-fill', |
|||
commonProps: {}, |
|||
children: [ |
|||
{ |
|||
_component: '@budibase/standard-components/heading', |
|||
name: 'Headline', |
|||
description: "A component for displaying heading text", |
|||
icon: "ri-heading", |
|||
props: { |
|||
type: { |
|||
type: "options", |
|||
options: ["h1", "h2", "h3", "h4", "h5", "h6"], |
|||
default: "h1", |
|||
}, |
|||
text: "string", |
|||
}, |
|||
}, |
|||
{ |
|||
_component: '@budibase/standard-components/text', |
|||
name: 'Paragraph', |
|||
description: "A component for displaying paragraph text.", |
|||
icon: 'ri-paragraph', |
|||
props: {} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: 'Input', |
|||
description: "These components handle user input.", |
|||
icon: 'ri-edit-box-line', |
|||
commonProps: {}, |
|||
children: [ |
|||
{ |
|||
_component: "@budibase/standard-components/textfield", |
|||
name: "Textfield", |
|||
description: "A textfield component that allows the user to input text.", |
|||
icon: 'ri-edit-box-line', |
|||
props: {} |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/checkbox", |
|||
name: "Checkbox", |
|||
description: "A selectable checkbox component", |
|||
icon: 'ri-checkbox-line', |
|||
props: {} |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/radiobutton", |
|||
name: "Radiobutton", |
|||
description: "A selectable radiobutton component", |
|||
icon: 'ri-radio-button-line', |
|||
props: {} |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/select", |
|||
name: "Select", |
|||
description: "A select component for choosing from different options", |
|||
icon: 'ri-file-list-line', |
|||
props: {} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/button", |
|||
name: 'Button', |
|||
description: 'A basic html button that is ready for styling', |
|||
icon: 'ri-radio-button-fill', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/icon", |
|||
name: 'Icon', |
|||
description: 'A basic component for displaying icons', |
|||
icon: 'ri-sun-fill', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
_component: "@budibase/standard-components/link", |
|||
name: 'Link', |
|||
description: 'A basic link component for internal and external links', |
|||
icon: 'ri-link', |
|||
commonProps: {}, |
|||
children: [] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: 'Blocks', |
|||
isCategory: true, |
|||
children: [ |
|||
{ |
|||
_component: "@budibase/materialdesign-components/BasicCard", |
|||
name: 'Card', |
|||
description: 'A basic card component that can contain content and actions.', |
|||
icon: 'ri-layout-bottom-line', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
name: 'Login', |
|||
description: 'A component that automatically generates a login screen for your app.', |
|||
icon: 'ri-login-box-fill', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
name: "Navigation Bar", |
|||
_component: "@budibase/standard-components/Navigation", |
|||
description: "A component for handling the navigation within your app.", |
|||
icon: "ri-navigation-fill", |
|||
commonProps: {}, |
|||
children: [] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: 'Data', |
|||
isCategory: true, |
|||
children: [ |
|||
{ |
|||
name: 'Table', |
|||
description: 'A component that generates a table from your data.', |
|||
icon: 'ri-archive-drawer-fill', |
|||
commonProps: {}, |
|||
children: [] |
|||
}, |
|||
{ |
|||
name: 'Form', |
|||
description: 'A component that generates a form from your data.', |
|||
icon: 'ri-file-edit-fill', |
|||
commonProps: {}, |
|||
component: "@budibase/materialdesign-components/Form", |
|||
template: { |
|||
component: "@budibase/materialdesign-components/Form", |
|||
description: "Form for saving a record", |
|||
name: "@budibase/materialdesign-components/recordForm", |
|||
}, |
|||
children: [] |
|||
} |
|||
] |
|||
}, |
|||
] |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
{ |
|||
"categories": [ |
|||
{ |
|||
"name": "Basic", |
|||
"components": [ |
|||
{ |
|||
"component": "Container", |
|||
"description": "This component contains things within itself", |
|||
"icon": "ri-layout-row-fill", |
|||
"commonProps": {}, |
|||
"type": [] |
|||
}, |
|||
{ |
|||
"component": "Text", |
|||
"description": "This is a simple text component", |
|||
"icon": "ri-t-box-fill", |
|||
"commonProps": { |
|||
}, |
|||
"type": [ |
|||
{ |
|||
"_component": "@budibase/standard-components/header", |
|||
"name": "Headline", |
|||
"icon": "headline", |
|||
"props": { |
|||
"type": { |
|||
"type": "options", |
|||
"options": [ |
|||
"h1", |
|||
"h2" |
|||
], |
|||
"default": "h1" |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"_component": "@budibase/standard-components/text", |
|||
"name": "Paragraph", |
|||
"icon": "paragraph", |
|||
"props": { |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"component": "Button", |
|||
"description": "A basic html button that is ready for styling", |
|||
"icon": "ri-radio-button-fill", |
|||
"commonProps": {}, |
|||
"type": [] |
|||
}, |
|||
{ |
|||
"component": "Icon", |
|||
"description": "A basic component for displaying icons", |
|||
"icon": "ri-sun-fill", |
|||
"commonProps": {}, |
|||
"type": [] |
|||
}, |
|||
{ |
|||
"component": "Avatar", |
|||
"description": "A basic component for rendering an avatar", |
|||
"icon": "ri-user-smile-fill", |
|||
"commonProps": {}, |
|||
"type": [] |
|||
}, |
|||
{ |
|||
"component": "Link", |
|||
"description": "A basic link component for internal and external links", |
|||
"icon": "ri-link", |
|||
"commonProps": {}, |
|||
"type": [] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
<script> |
|||
export let heading = "" |
|||
export let subheading = "" |
|||
export let content = "" |
|||
export let imageUrl = "" |
|||
export let button1Text = "" |
|||
export let button2Text = "" |
|||
export let cardClick = () => {} |
|||
export let button1Click = () => {} |
|||
export let button2Click = () => {} |
|||
|
|||
$: showImage = !!imageUrl |
|||
$: showButton1 = !!button1Text |
|||
$: showButton2 = !!button2Text |
|||
$: showButtons = !!showButton1 && !!showButton2 |
|||
</script> |
|||
|
|||
<div class="mdc-card" on:click={cardClick}> |
|||
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0"> |
|||
{#if showImage} |
|||
<div |
|||
class="mdc-card__media mdc-card__media--16-9 demo-card__media" |
|||
style="background-image: url("{imageUrl}");" /> |
|||
{/if} |
|||
<div class="pad"> |
|||
<div class="demo-card__primary"> |
|||
<h2 class="demo-card__title mdc-typography mdc-typography--headline6"> |
|||
{heading} |
|||
</h2> |
|||
<h3 |
|||
class="demo-card__subtitle mdc-typography mdc-typography--subtitle2"> |
|||
{subheading} |
|||
</h3> |
|||
</div> |
|||
<div class="demo-card__secondary mdc-typography mdc-typography--body2"> |
|||
{content} |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
{#if showButtons} |
|||
<div class="mdc-card__actions"> |
|||
<div class="mdc-card__action-buttons"> |
|||
{#if showButton1} |
|||
<button class="mdc-button mdc-card__action mdc-card__action--button"> |
|||
<span class="mdc-button__ripple" on:click={button1Click} /> |
|||
{button1Text} |
|||
</button> |
|||
{/if} |
|||
{#if showButton2} |
|||
<button |
|||
class="mdc-button mdc-card__action mdc-card__action--button" |
|||
on:click={button2Click}> |
|||
<span class="mdc-button__ripple" /> |
|||
{button2Text} |
|||
</button> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.pad { |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<script> |
|||
import Input from "./Input.svelte" |
|||
export let _bb |
|||
|
|||
export let label = "" |
|||
export let checked = false |
|||
export let value = "" |
|||
export let onchange = () => {} |
|||
</script> |
|||
|
|||
<Input type="checkbox" {_bb} {checked} {label} {value} {onchange} /> |
|||
@ -0,0 +1,9 @@ |
|||
<script> |
|||
export let icon = "" |
|||
export let fontSize = "1em" |
|||
export let _bb |
|||
|
|||
$: style = { fontSize } |
|||
</script> |
|||
|
|||
<i class={icon} {style} /> |
|||
@ -0,0 +1,75 @@ |
|||
<script> |
|||
import { cssVars, createClasses } from "./cssVars" |
|||
|
|||
export let className = "" |
|||
export let onLoad |
|||
export let backgroundColor |
|||
export let color |
|||
export let borderWidth |
|||
export let borderColor |
|||
export let borderStyle |
|||
export let logoUrl |
|||
export let title |
|||
export let _bb |
|||
|
|||
let itemContainer |
|||
let hasLoaded |
|||
let currentChildren |
|||
|
|||
$: cssVariables = { |
|||
backgroundColor, |
|||
color, |
|||
borderWidth, |
|||
borderColor, |
|||
borderStyle, |
|||
} |
|||
|
|||
$: { |
|||
if (itemContainer) { |
|||
_bb.attachChildren(itemContainer) |
|||
if (!hasLoaded) { |
|||
_bb.call(onLoad) |
|||
hasLoaded = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<nav use:cssVars={cssVariables}> |
|||
<a href="/"> |
|||
<img class="logo" alt="logo" src={logoUrl} height="30" /> |
|||
<span>{title}</span> |
|||
</a> |
|||
<div class="menu-items" bind:this={itemContainer} /> |
|||
</nav> |
|||
|
|||
<style> |
|||
nav { |
|||
color: var(--color); |
|||
background-color: var(--backgroundColor); |
|||
align-items: center; |
|||
display: flex; |
|||
font-weight: bold; |
|||
justify-content: space-between; |
|||
padding: 20px 0 20px 40px; |
|||
} |
|||
|
|||
nav > a { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 1.5em; |
|||
color: var(--color); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
nav a img { |
|||
border-radius: 15px; |
|||
margin-right: 15px; |
|||
} |
|||
.menu-items { |
|||
display: flex; |
|||
} |
|||
.menu-items > :global(*) { |
|||
margin: 0 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<script> |
|||
import Input from "./Input.svelte" |
|||
export let _bb |
|||
|
|||
export let label = "" |
|||
export let checked = false |
|||
export let value = "" |
|||
export let onchange = () => {} |
|||
</script> |
|||
|
|||
<Input type="radio" {_bb} {checked} {label} {value} {onchange} /> |
|||
@ -0,0 +1,10 @@ |
|||
<script> |
|||
import Input from "./Input.svelte" |
|||
export let _bb |
|||
|
|||
export let label = "" |
|||
export let value = "" |
|||
export let onchange = () => {} |
|||
</script> |
|||
|
|||
<Input type="text" {_bb} {label} {value} {onchange} /> |
|||
Loading…
Reference in new issue