mirror of https://github.com/Budibase/budibase.git
5 changed files with 126 additions and 106 deletions
@ -1,67 +1,74 @@ |
|||
<script> |
|||
import "@spectrum-css/actionbutton/dist/index-vars.css" |
|||
import { createEventDispatcher } from "svelte" |
|||
const dispatch = createEventDispatcher() |
|||
import "@spectrum-css/actionbutton/dist/index-vars.css" |
|||
import { createEventDispatcher } from "svelte" |
|||
const dispatch = createEventDispatcher() |
|||
|
|||
|
|||
/** @type {('S', 'M', 'L', 'XL')} Size of button */ |
|||
export let size = "M"; |
|||
export let quiet = false; |
|||
export let emphasized = false; |
|||
export let selected = false |
|||
export let longPressable = false; |
|||
export let disabled = false |
|||
export let icon = ''; |
|||
/** @type {('S', 'M', 'L', 'XL')} Size of button */ |
|||
export let size = "M" |
|||
export let quiet = false |
|||
export let emphasized = false |
|||
export let selected = false |
|||
export let longPressable = false |
|||
export let disabled = false |
|||
export let icon = "" |
|||
|
|||
function longPress(element) { |
|||
if (!longPressable) return |
|||
let timer |
|||
function longPress(element) { |
|||
if (!longPressable) return |
|||
let timer |
|||
|
|||
const listener = () => { |
|||
timer = setTimeout(() => { |
|||
dispatch('longpress') |
|||
}, 700) |
|||
} |
|||
const listener = () => { |
|||
timer = setTimeout(() => { |
|||
dispatch("longpress") |
|||
}, 700) |
|||
} |
|||
|
|||
element.addEventListener('pointerdown', listener) |
|||
element.addEventListener("pointerdown", listener) |
|||
|
|||
return { |
|||
destroy() { |
|||
clearTimeout(timer) |
|||
element.removeEventListener('pointerdown', longPress) |
|||
} |
|||
} |
|||
return { |
|||
destroy() { |
|||
clearTimeout(timer) |
|||
element.removeEventListener("pointerdown", longPress) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<button |
|||
use:longPress |
|||
class:spectrum-ActionButton--quiet={quiet} |
|||
class:spectrum-ActionButton--emphasized={emphasized} |
|||
class:is-selected={selected} |
|||
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}" |
|||
{disabled} |
|||
on:longPress |
|||
on:click|preventDefault> |
|||
{#if longPressable} |
|||
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-CornerTriangle100" /> |
|||
</svg> |
|||
{/if} |
|||
{#if icon} |
|||
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}"> |
|||
<use xlink:href="#spectrum-icon-18-{icon}" /> |
|||
</svg> |
|||
{/if} |
|||
{#if $$slots} |
|||
<span class="spectrum-ActionButton-label"><slot /></span> |
|||
{/if} |
|||
<button |
|||
use:longPress |
|||
class:spectrum-ActionButton--quiet={quiet} |
|||
class:spectrum-ActionButton--emphasized={emphasized} |
|||
class:is-selected={selected} |
|||
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}" |
|||
{disabled} |
|||
on:longPress |
|||
on:click|preventDefault |
|||
> |
|||
{#if longPressable} |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
> |
|||
<use xlink:href="#spectrum-css-icon-CornerTriangle100" /> |
|||
</svg> |
|||
{/if} |
|||
{#if icon} |
|||
<svg |
|||
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" |
|||
focusable="false" |
|||
aria-hidden="true" |
|||
aria-label={icon} |
|||
> |
|||
<use xlink:href="#spectrum-icon-18-{icon}" /> |
|||
</svg> |
|||
{/if} |
|||
{#if $$slots} |
|||
<span class="spectrum-ActionButton-label"><slot /></span> |
|||
{/if} |
|||
</button> |
|||
|
|||
|
|||
<style> |
|||
span { |
|||
text-transform: capitalize; |
|||
} |
|||
span { |
|||
text-transform: capitalize; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,24 +1,26 @@ |
|||
<script> |
|||
import "@spectrum-css/actiongroup/dist/index-vars.css" |
|||
export let vertical = false; |
|||
export let justified = false; |
|||
export let quiet = false; |
|||
export let compact = false; |
|||
import "@spectrum-css/actiongroup/dist/index-vars.css" |
|||
export let vertical = false |
|||
export let justified = false |
|||
export let quiet = false |
|||
export let compact = false |
|||
|
|||
// Attaches a spectrum-ActionGroup-item class to buttons inside the div |
|||
function group(element) { |
|||
const buttons = Array.from(element.getElementsByTagName('button')) |
|||
buttons.forEach(button => { |
|||
button.classList.add('spectrum-ActionGroup-item') |
|||
}) |
|||
} |
|||
// Attaches a spectrum-ActionGroup-item class to buttons inside the div |
|||
function group(element) { |
|||
const buttons = Array.from(element.getElementsByTagName("button")) |
|||
buttons.forEach((button) => { |
|||
button.classList.add("spectrum-ActionGroup-item") |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<div use:group |
|||
class:spectrum-ActionGroup--vertical={vertical} |
|||
class:spectrum-ActionGroup--justified={justified} |
|||
class:spectrum-ActionGroup--quiet={quiet} |
|||
class:spectrum-ActionGroup--compact={compact} |
|||
class="spectrum-ActionGroup"> |
|||
<slot /> |
|||
</div> |
|||
<div |
|||
use:group |
|||
class:spectrum-ActionGroup--vertical={vertical} |
|||
class:spectrum-ActionGroup--justified={justified} |
|||
class:spectrum-ActionGroup--quiet={quiet} |
|||
class:spectrum-ActionGroup--compact={compact} |
|||
class="spectrum-ActionGroup" |
|||
> |
|||
<slot /> |
|||
</div> |
|||
|
|||
@ -1,30 +1,34 @@ |
|||
<script> |
|||
import Popover from '../Popover/Popover.svelte' |
|||
import Menu from '../Menu/Menu.svelte' |
|||
let anchor; |
|||
let dropdown; |
|||
import Popover from "../Popover/Popover.svelte" |
|||
import Menu from "../Menu/Menu.svelte" |
|||
let anchor |
|||
let dropdown |
|||
|
|||
// This is needed because display: contents is considered "invisible". |
|||
// It should only ever be an action button, so should be fine. |
|||
function getAnchor(node) { |
|||
anchor = node.firstChild |
|||
} |
|||
|
|||
export const hide = () => { dropdown.hide() } |
|||
export const show = () => { dropdown.show() } |
|||
// This is needed because display: contents is considered "invisible". |
|||
// It should only ever be an action button, so should be fine. |
|||
function getAnchor(node) { |
|||
anchor = node.firstChild |
|||
} |
|||
|
|||
export const hide = () => { |
|||
dropdown.hide() |
|||
} |
|||
export const show = () => { |
|||
dropdown.show() |
|||
} |
|||
</script> |
|||
|
|||
<div class="contents" use:getAnchor on:click={dropdown.show}> |
|||
<slot name="button" /> |
|||
<div class="contents" use:getAnchor on:click={dropdown.show}> |
|||
<slot name="button" /> |
|||
</div> |
|||
<Popover bind:this={dropdown} {anchor} align="left"> |
|||
<Menu> |
|||
<slot /> |
|||
</Menu> |
|||
<Menu> |
|||
<slot /> |
|||
</Menu> |
|||
</Popover> |
|||
|
|||
<style> |
|||
div { |
|||
display: contents; |
|||
} |
|||
</style> |
|||
div { |
|||
display: contents; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,7 +1,12 @@ |
|||
<script> |
|||
import "@spectrum-css/avatar/dist/index-vars.css" |
|||
export let url = ""; |
|||
export let disabled = false; |
|||
import "@spectrum-css/avatar/dist/index-vars.css" |
|||
export let url = "" |
|||
export let disabled = false |
|||
</script> |
|||
|
|||
<img class:is-disabled={disabled} class="spectrum-Avatar" src={url} alt="Avatar"> |
|||
<img |
|||
class:is-disabled={disabled} |
|||
class="spectrum-Avatar" |
|||
src={url} |
|||
alt="Avatar" |
|||
/> |
|||
|
|||
Loading…
Reference in new issue