MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix formatting in some files

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-23 09:41:49 +02:00
parent 3e7719bdd3
commit 66c5a134e5
5 changed files with 128 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
packages/bbui/src/ActionButton/ActionButton.svelte
View File

@ -1,67 +1,74 @@
<script> <script>
import "@spectrum-css/actionbutton/dist/index-vars.css" import "@spectrum-css/actionbutton/dist/index-vars.css"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher() 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 */ function longPress(element) {
export let size = "M"; if (!longPressable) return
export let quiet = false; let timer
export let emphasized = false;
export let selected = false
export let longPressable = false;
export let disabled = false
export let icon = '';
function longPress(element) { const listener = () => {
if (!longPressable) return timer = setTimeout(() => {
let timer dispatch("longpress")
}, 700)
const listener = () => {
timer = setTimeout(() => {
dispatch('longpress')
}, 700)
}
element.addEventListener('pointerdown', listener)
return {
destroy() {
clearTimeout(timer)
element.removeEventListener('pointerdown', longPress)
}
}
} }
element.addEventListener("pointerdown", listener)
return {
destroy() {
clearTimeout(timer)
element.removeEventListener("pointerdown", longPress)
},
}
}
</script> </script>
<button <button
use:longPress use:longPress
class:spectrum-ActionButton--quiet={quiet} class:spectrum-ActionButton--quiet={quiet}
class:spectrum-ActionButton--emphasized={emphasized} class:spectrum-ActionButton--emphasized={emphasized}
class:is-selected={selected} class:is-selected={selected}
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}" class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
{disabled} {disabled}
on:longPress on:longPress
on:click|preventDefault> on:click|preventDefault
{#if longPressable} >
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true"> {#if longPressable}
<use xlink:href="#spectrum-css-icon-CornerTriangle100" /> <svg
</svg> class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
{/if} focusable="false"
{#if icon} aria-hidden="true"
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}"> >
<use xlink:href="#spectrum-icon-18-{icon}" /> <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg> </svg>
{/if} {/if}
{#if $$slots} {#if icon}
<span class="spectrum-ActionButton-label"><slot /></span> <svg
{/if} 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> </button>
<style> <style>
span { span {
text-transform: capitalize; text-transform: capitalize;
} }
</style> </style>

40
packages/bbui/src/ActionGroup/ActionGroup.svelte
View File

@ -1,24 +1,26 @@
<script> <script>
import "@spectrum-css/actiongroup/dist/index-vars.css" import "@spectrum-css/actiongroup/dist/index-vars.css"
export let vertical = false; export let vertical = false
export let justified = false; export let justified = false
export let quiet = false; export let quiet = false
export let compact = false; export let compact = false
// Attaches a spectrum-ActionGroup-item class to buttons inside the div // Attaches a spectrum-ActionGroup-item class to buttons inside the div
function group(element) { function group(element) {
const buttons = Array.from(element.getElementsByTagName('button')) const buttons = Array.from(element.getElementsByTagName("button"))
buttons.forEach(button => { buttons.forEach((button) => {
button.classList.add('spectrum-ActionGroup-item') button.classList.add("spectrum-ActionGroup-item")
}) })
} }
</script> </script>
<div use:group <div
class:spectrum-ActionGroup--vertical={vertical} use:group
class:spectrum-ActionGroup--justified={justified} class:spectrum-ActionGroup--vertical={vertical}
class:spectrum-ActionGroup--quiet={quiet} class:spectrum-ActionGroup--justified={justified}
class:spectrum-ActionGroup--compact={compact} class:spectrum-ActionGroup--quiet={quiet}
class="spectrum-ActionGroup"> class:spectrum-ActionGroup--compact={compact}
<slot /> class="spectrum-ActionGroup"
>
<slot />
</div> </div>

42
packages/bbui/src/ActionMenu/ActionMenu.svelte
View File

@ -1,30 +1,34 @@
<script> <script>
import Popover from '../Popover/Popover.svelte' import Popover from "../Popover/Popover.svelte"
import Menu from '../Menu/Menu.svelte' import Menu from "../Menu/Menu.svelte"
let anchor; let anchor
let dropdown; let dropdown
// This is needed because display: contents is considered "invisible". // This is needed because display: contents is considered "invisible".
// It should only ever be an action button, so should be fine. // It should only ever be an action button, so should be fine.
function getAnchor(node) { function getAnchor(node) {
anchor = node.firstChild anchor = node.firstChild
} }
export const hide = () => { dropdown.hide() } export const hide = () => {
export const show = () => { dropdown.show() } dropdown.hide()
}
export const show = () => {
dropdown.show()
}
</script> </script>
<div class="contents" use:getAnchor on:click={dropdown.show}> <div class="contents" use:getAnchor on:click={dropdown.show}>
<slot name="button" /> <slot name="button" />
</div> </div>
<Popover bind:this={dropdown} {anchor} align="left"> <Popover bind:this={dropdown} {anchor} align="left">
<Menu> <Menu>
<slot /> <slot />
</Menu> </Menu>
</Popover> </Popover>
<style> <style>
div { div {
display: contents; display: contents;
} }
</style> </style>

13
packages/bbui/src/Avatar/Avatar.svelte
View File

@ -1,7 +1,12 @@
<script> <script>
import "@spectrum-css/avatar/dist/index-vars.css" import "@spectrum-css/avatar/dist/index-vars.css"
export let url = ""; export let url = ""
export let disabled = false; export let disabled = false
</script> </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"
/>

14
packages/bbui/src/Button/Button.svelte
View File

@ -3,11 +3,11 @@
export let disabled = false export let disabled = false
export let size = "M" export let size = "M"
export let cta = false; export let cta = false
export let primary = false; export let primary = false
export let secondary = false; export let secondary = false
export let warning = false export let warning = false
export let overBackground = false; export let overBackground = false
export let quiet = false export let quiet = false
export let icon = undefined export let icon = undefined
export let active = false export let active = false
@ -23,13 +23,15 @@
class:active class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled} {disabled}
on:click|preventDefault> on:click|preventDefault
>
{#if icon} {#if icon}
<svg <svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
aria-label={icon}> aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" /> <use xlink:href="#spectrum-icon-18-{icon}" />
</svg> </svg>
{/if} {/if}