ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix formatting in some files

gh-pages
Keviin Åberg Kultalahti 6 years ago
parent
3e7719bdd3
commit
66c5a134e5
5 changed files with 126 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 117
      packages/bbui/src/ActionButton/ActionButton.svelte
  2. 42
      packages/bbui/src/ActionGroup/ActionGroup.svelte
  3. 46
      packages/bbui/src/ActionMenu/ActionMenu.svelte
  4. 13
      packages/bbui/src/Avatar/Avatar.svelte
  5. 14
      packages/bbui/src/Button/Button.svelte

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 */
/** @type {('S', 'M', 'L', 'XL')} Size of button */ export let size = "M"
export let size = "M"; export let quiet = false
export let quiet = false; export let emphasized = false
export let emphasized = false; export let selected = false
export let selected = false export let longPressable = false
export let longPressable = false; export let disabled = false
export let disabled = false export let icon = ""
export let icon = '';
function longPress(element) { function longPress(element) {
if (!longPressable) return if (!longPressable) return
let timer let timer
const listener = () => { const listener = () => {
timer = setTimeout(() => { timer = setTimeout(() => {
dispatch('longpress') dispatch("longpress")
}, 700) }, 700)
} }
element.addEventListener('pointerdown', listener) element.addEventListener("pointerdown", listener)
return { return {
destroy() { destroy() {
clearTimeout(timer) clearTimeout(timer)
element.removeEventListener('pointerdown', longPress) 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>

42
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"
</div> >
<slot />
</div>

46
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}

Write Preview
Loading…
Cancel
Save