CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-26 10:00:41 +12:00
Code Issues Projects Releases Wiki Activity

fix formatting in some files

Browse source
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

121
packages/bbui/src/ActionButton/ActionButton.svelte
View file

@ -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)
}
element.addEventListener('pointerdown', listener)
return {
destroy() {
clearTimeout(timer)
element.removeEventListener('pointerdown', longPress)
}
}
const listener = () => {
timer = setTimeout(() => {
dispatch("longpress")
}, 700)
}
element.addEventListener("pointerdown", listener)
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>

42
packages/bbui/src/ActionGroup/ActionGroup.svelte
View file

@ -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>

46
packages/bbui/src/ActionMenu/ActionMenu.svelte
View file

@ -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>

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

@ -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"
/>

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

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