CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 04:21:06 +12:00
Code Issues Projects Releases Wiki Activity

Delete DropdownMenu component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-21 16:03:32 +02:00
parent 09551f971b
commit 77b48874e8
2 changed files with 0 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
packages/bbui/src/DropdownMenu/DropdownMenu.svelte
View file

@ -1,44 +0,0 @@
<script>
import "@spectrum-css/popover/dist/index-vars.css"
import Portal from "svelte-portal"
import { createEventDispatcher } from "svelte"
import positionDropdown from "../Actions/position_dropdown"
import clickOutside from "../Actions/click_outside"
const dispatch = createEventDispatcher()
export let anchor
export let align = "right"
export const show = () => {
dispatch("open")
open = true
}
export const hide = () => {
dispatch("close")
open = false
}
let open = null
function handleEscape(e) {
if (open && e.key === "Escape") {
hide()
}
}
</script>
{#if open}
<Portal>
<div
tabindex="0"
use:positionDropdown={{ anchor, align }}
use:clickOutside={hide}
on:keydown={handleEscape}
class="spectrum-Popover is-open"
role="presentation">
<slot />
</div>
</Portal>
{/if}

161
packages/bbui/src/DropdownMenu/DropdownMenu.svench
View file

@ -1,161 +0,0 @@
<script>
import { View } from "svench";
import DropdownMenu from "./DropdownMenu.svelte";
import Button from "../Button/Button.svelte";
import Icon from "../Icons/Icon.svelte";
let anchorRight;
let anchorLeft;
let dropdownRight;
let dropdownLeft;
</script>
<style>
ul {
list-style: none;
padding-left: 0;
margin: 0;
padding: var(--spacing-s) 0;
}
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
</style>
<View name="Right Align (default)">
<div bind:this={anchorRight}>
<Button primary on:click={dropdownRight.show}>Right Align</Button>
</div>
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</DropdownMenu>
</View>
<View name="Left Align">
<div bind:this={anchorLeft}>
<Button primary on:click={dropdownLeft.show}>Left Align</Button>
</div>
<DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</DropdownMenu>
</View>
<View name="Left Align, TextButton, Small, Icons">
<div bind:this={anchorLeft}>
<Button text on:click={dropdownLeft.show}>
Field Name
<Icon name="arrowdown" />
</Button>
</div>
<DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
<ul>
<li>
<Icon name="edit" />
Edit
</li>
<li>
<Icon name="delete" />
Delete
</li>
<li>
<Icon name="sortascending" />
Sort A - Z
</li>
<li>
<Icon name="sortdescending" />
Sort Z - A
</li>
</ul>
</DropdownMenu>
</View>
<View name="Dropdown menu with slim menu and border color">
<div bind:this={anchorLeft}>
<Button primary on:click={dropdownLeft.show}>
Field Name
<Icon name="arrowdown" />
</Button>
</div>
<DropdownMenu
bind:this={dropdownLeft}
width="175px"
borderColor="#d1d1d1ff"
anchor={anchorLeft}
align="left">
<ul>
<li>
<Icon name="edit" />
Edit
</li>
<li>
<Icon name="delete" />
Delete
</li>
<li>
<Icon name="sortascending" />
Sort A - Z
</li>
<li>
<Icon name="sortdescending" />
Sort Z - A
</li>
</ul>
</DropdownMenu>
</View>
<View name="Dropdown on close event example">
<div bind:this={anchorLeft}>
<Button primary on:click={dropdownLeft.show}>
Field Name
<Icon name="arrowdown" />
</Button>
</div>
<DropdownMenu
on:close={() => alert('Closed!')}
bind:this={dropdownLeft}
width="175px"
borderColor="#d1d1d1ff"
anchor={anchorLeft}
align="left">
<ul>
<li>
<Icon name="edit" />
Edit
</li>
<li>
<Icon name="delete" />
Delete
</li>
<li>
<Icon name="sortascending" />
Sort A - Z
</li>
<li>
<Icon name="sortdescending" />
Sort Z - A
</li>
</ul>
</DropdownMenu>
</View>