CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 07:46:10 +12:00
Code Issues Projects Releases Wiki Activity

Implements Menu component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-12 16:26:26 +02:00
parent 958c302ca7
commit 0b18b55433
7 changed files with 38 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/bbui/src/Menu/Item.svelte
View file

@ -1,3 +1,15 @@
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel"><slot /></span>
<script>
export let icon = undefined;
export let disabled = undefined;
</script>
<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
<use xlink:href="#spectrum-icon-18-{icon}"></use>
</svg>
{/if}
<span class="spectrum-Menu-itemLabel"><slot /></span>
</span>
</li>

33
packages/bbui/src/Menu/Menu.svelte
View file

@ -3,36 +3,5 @@
</script>
<ul class="spectrum-Menu" role="menu">
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">Section Heading</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 1</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 2</span>
</li>
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">Action 3</span>
</li>
</ul>
</li>
<li class="spectrum-Menu-divider" role="separator"></li>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2" aria-hidden="true">Section Heading</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
<use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Save</span>
</li>
<li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
<use xlink:href="#spectrum-icon-18-DataDownload"></use>
</svg>
<span class="spectrum-Menu-itemLabel">Download</span>
</li>
</ul>
</li>
<slot />
</ul>

19
packages/bbui/src/Menu/Menu.svench Normal file
View file

@ -0,0 +1,19 @@
<script>
import Menu from './Menu.svelte'
import Separator from './Separator.svelte'
import Section from './Section.svelte'
import Item from './Item.svelte'
</script>
<Menu>
<Section heading="Section heading">
<Item>Some Item 1</Item>
<Item>Some Item 2</Item>
<Item>Some Item 3</Item>
</Section>
<Separator />
<Section heading="Section heading">
<Item icon="SaveFloppy">Save</Item>
<Item disabled icon="DataDownload">Download</Item>
</Section>
</Menu>

4
packages/bbui/src/Menu/Section.svelte
View file

@ -2,8 +2,8 @@
export let heading
</script>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1" aria-hidden="true">{heading}</span>
<ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
<span class="spectrum-Menu-sectionHeading">{heading}</span>
<ul class="spectrum-Menu" role="group">
<slot />
</ul>
</li>

1
packages/bbui/src/Menu/Separator.svelte Normal file
View file

@ -0,0 +1 @@
<li class="spectrum-Menu-divider" role="separator"></li>

1
packages/bbui/src/index.js
View file

@ -28,6 +28,7 @@ export { default as Link } from "./Link/Link.svelte"
export { default as Close } from "./Button/Close.svelte"
export { default as Menu } from "./Menu/Menu.svelte"
export { default as MenuSection } from "./Menu/Section.svelte"
export { default as MenuSeparator } from "./Menu/Separator.svelte"
export { default as MenuItem } from "./Menu/Item.svelte"
export { default as Modal } from "./Modal/Modal.svelte"
export { default as ModalContent } from "./Modal/ModalContent.svelte"

4
packages/builder/src/pages/builder/index.svelte
View file

@ -75,10 +75,6 @@
<!-- <TemplateList onSelect={selectTemplate} /> -->
<AppList />
<div class="just-a-menu-test">
<Menu />
</div>
</div>
<Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>