mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
21 changed files with 193 additions and 253 deletions
@ -0,0 +1,39 @@ |
|||
<script> |
|||
import Field from "./Field.svelte" |
|||
import Combobox from "./Core/Combobox.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = null |
|||
export let label = undefined |
|||
export let disabled = false |
|||
export let labelPosition = "above" |
|||
export let error = null |
|||
export let placeholder = "Choose an option" |
|||
export let options = [] |
|||
export let getOptionLabel = option => extractProperty(option, "label") |
|||
export let getOptionValue = option => extractProperty(option, "value") |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
const onChange = e => { |
|||
dispatch("change", e.detail) |
|||
value = e.detail |
|||
} |
|||
const extractProperty = (value, property) => { |
|||
if (value && typeof value === "object") { |
|||
return value[property] |
|||
} |
|||
return value |
|||
} |
|||
</script> |
|||
|
|||
<Field {label} {labelPosition} {disabled} {error}> |
|||
<Combobox |
|||
{error} |
|||
{disabled} |
|||
{value} |
|||
{options} |
|||
{placeholder} |
|||
{getOptionLabel} |
|||
{getOptionValue} |
|||
on:change={onChange} /> |
|||
</Field> |
|||
@ -0,0 +1,128 @@ |
|||
<script> |
|||
import "@spectrum-css/inputgroup/dist/index-vars.css" |
|||
import "@spectrum-css/popover/dist/index-vars.css" |
|||
import "@spectrum-css/menu/dist/index-vars.css" |
|||
import { fly } from "svelte/transition" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let value = null |
|||
export let id = null |
|||
export let placeholder = "Choose an option" |
|||
export let disabled = false |
|||
export let error = null |
|||
export let options = [] |
|||
export let getOptionLabel = option => option |
|||
export let getOptionValue = option => option |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
let open = false |
|||
let focus = false |
|||
$: fieldText = getFieldText(value, options, placeholder) |
|||
|
|||
const getFieldText = (value, options, placeholder) => { |
|||
// Always use placeholder if no value |
|||
if (value == null || value === "") { |
|||
return placeholder || "Choose an option" |
|||
} |
|||
|
|||
// Wait for options to load if there is a value but no options |
|||
if (!options?.length) { |
|||
return "" |
|||
} |
|||
|
|||
// Render the label if the selected option is found, otherwise raw value |
|||
const selected = options.find(option => getOptionValue(option) === value) |
|||
return selected ? getOptionLabel(selected) : value |
|||
} |
|||
|
|||
const selectOption = value => { |
|||
dispatch("change", value) |
|||
open = false |
|||
} |
|||
|
|||
const onChange = e => { |
|||
selectOption(e.target.value) |
|||
} |
|||
</script> |
|||
|
|||
<div class="spectrum-InputGroup" class:is-focused={open || focus}> |
|||
<div |
|||
class="spectrum-Textfield spectrum-InputGroup-textfield" |
|||
class:is-disabled={!!error} |
|||
class:is-focused={open || focus}> |
|||
<input |
|||
type="text" |
|||
on:focus={() => (focus = true)} |
|||
on:blur={() => (focus = false)} |
|||
on:change={onChange} |
|||
{value} |
|||
{placeholder} |
|||
class="spectrum-Textfield-input spectrum-InputGroup-input" /> |
|||
</div> |
|||
<button |
|||
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" |
|||
tabindex="-1" |
|||
aria-haspopup="true" |
|||
disabled={!!error} |
|||
on:click={() => (open = true)}> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" |
|||
focusable="false" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Chevron100" /> |
|||
</svg> |
|||
</button> |
|||
{#if open} |
|||
<div class="overlay" on:mousedown|self={() => (open = false)} /> |
|||
<div |
|||
transition:fly={{ y: -20, duration: 200 }} |
|||
class="spectrum-Popover spectrum-Popover--bottom is-open"> |
|||
<ul class="spectrum-Menu" role="listbox"> |
|||
{#if options && Array.isArray(options)} |
|||
{#each options as option} |
|||
<li |
|||
class="spectrum-Menu-item" |
|||
class:is-selected={getOptionValue(option) === value} |
|||
role="option" |
|||
aria-selected="true" |
|||
tabindex="0" |
|||
on:click={() => selectOption(getOptionValue(option))}> |
|||
<span |
|||
class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span> |
|||
<svg |
|||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" |
|||
focusable="false" |
|||
aria-hidden="true"> |
|||
<use xlink:href="#spectrum-css-icon-Checkmark100" /> |
|||
</svg> |
|||
</li> |
|||
{/each} |
|||
{/if} |
|||
</ul> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.spectrum-InputGroup { |
|||
min-width: 0; |
|||
width: 100%; |
|||
} |
|||
.spectrum-Textfield-input { |
|||
width: 0; |
|||
} |
|||
.overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
z-index: 999; |
|||
} |
|||
.spectrum-Popover { |
|||
max-height: 240px; |
|||
width: 100%; |
|||
z-index: 999; |
|||
top: 100%; |
|||
} |
|||
</style> |
|||
@ -1,158 +0,0 @@ |
|||
<script> |
|||
import Icon from "../Icons/Icon.svelte" |
|||
import Label from "../Styleguide/Label.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
|
|||
export let label = undefined |
|||
export let value = "" |
|||
export let name = undefined |
|||
export let thin = false |
|||
export let extraThin = false |
|||
export let secondary = false |
|||
export let outline = false |
|||
export let disabled = false |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
let focus = false |
|||
|
|||
const updateValue = e => { |
|||
value = e.target.value |
|||
} |
|||
|
|||
function handleFocus(e) { |
|||
focus = true |
|||
dispatch("focus", e) |
|||
} |
|||
|
|||
function handleBlur(e) { |
|||
focus = false |
|||
dispatch("blur", e) |
|||
} |
|||
</script> |
|||
|
|||
{#if label} |
|||
<Label extraSmall grey forAttr={name}>{label}</Label> |
|||
{/if} |
|||
<div class="container" class:disabled class:secondary class:outline class:focus> |
|||
<select |
|||
{name} |
|||
class:thin |
|||
class:extraThin |
|||
class:secondary |
|||
{disabled} |
|||
on:change |
|||
on:focus={handleFocus} |
|||
on:blur={handleBlur} |
|||
bind:value> |
|||
<slot /> |
|||
</select> |
|||
<slot name="custom-input" /> |
|||
<input |
|||
class:thin |
|||
class:extraThin |
|||
class:secondary |
|||
class:disabled |
|||
{disabled} |
|||
on:change={updateValue} |
|||
on:input={updateValue} |
|||
on:focus={handleFocus} |
|||
on:blur={e => { |
|||
updateValue(e) |
|||
handleBlur(e) |
|||
}} |
|||
value={value || ''} |
|||
type="text" /> |
|||
<div class="pointer editable-pointer"> |
|||
<Icon name="arrowdown" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
position: relative !important; |
|||
display: block; |
|||
border-radius: var(--border-radius-s); |
|||
border: var(--border-transparent); |
|||
background-color: var(--background); |
|||
} |
|||
.container.outline { |
|||
border: var(--border-dark); |
|||
} |
|||
.container.focus { |
|||
border: var(--border-blue); |
|||
} |
|||
|
|||
input, |
|||
select { |
|||
border-radius: var(--border-radius-s); |
|||
font-size: var(--font-size-m); |
|||
outline: none; |
|||
border: none; |
|||
color: var(--ink); |
|||
text-align: left; |
|||
background-color: transparent; |
|||
} |
|||
select { |
|||
display: block !important; |
|||
width: 100% !important; |
|||
padding: var(--spacing-m) 2rem var(--spacing-m) var(--spacing-m); |
|||
appearance: none !important; |
|||
-webkit-appearance: none !important; |
|||
-moz-appearance: none !important; |
|||
align-items: center; |
|||
white-space: pre; |
|||
opacity: 0; |
|||
} |
|||
input { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: calc(100% - 30px); |
|||
height: 100%; |
|||
border: none; |
|||
box-sizing: border-box; |
|||
padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m); |
|||
} |
|||
|
|||
select.thin, |
|||
input.thin { |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
select.extraThin, |
|||
input.extraThin { |
|||
font-size: var(--font-size-xs); |
|||
padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing-m); |
|||
} |
|||
.secondary { |
|||
background: var(--grey-2); |
|||
} |
|||
|
|||
select:disabled, |
|||
input:disabled, |
|||
.disabled { |
|||
background: var(--grey-4); |
|||
color: var(--grey-6); |
|||
} |
|||
|
|||
.pointer { |
|||
right: 0 !important; |
|||
top: 0 !important; |
|||
bottom: 0 !important; |
|||
position: absolute !important; |
|||
pointer-events: none !important; |
|||
align-items: center !important; |
|||
display: flex !important; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.editable-pointer { |
|||
border-style: solid; |
|||
border-width: 0 0 0 1px; |
|||
border-color: var(--grey-4); |
|||
padding-left: var(--spacing-xs); |
|||
} |
|||
.editable-pointer :global(svg) { |
|||
margin-right: var(--spacing-xs); |
|||
fill: var(--ink); |
|||
} |
|||
</style> |
|||
@ -1,55 +0,0 @@ |
|||
<script> |
|||
import { DataList } from "@budibase/bbui" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { allScreens } from "builderStore" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
export let value = "" |
|||
|
|||
$: urls = getUrls() |
|||
|
|||
const handleBlur = () => dispatch("change", value) |
|||
|
|||
const getUrls = () => { |
|||
return [ |
|||
...$allScreens |
|||
.filter( |
|||
screen => |
|||
screen.props._component.endsWith("/rowdetail") || |
|||
screen.routing.route.endsWith(":id") |
|||
) |
|||
.map(screen => ({ |
|||
name: screen.props._instanceName, |
|||
url: screen.routing.route, |
|||
sort: screen.props._component, |
|||
})), |
|||
] |
|||
} |
|||
</script> |
|||
|
|||
<div> |
|||
<DataList |
|||
editable |
|||
secondary |
|||
extraThin |
|||
on:blur={handleBlur} |
|||
on:change |
|||
bind:value> |
|||
<option value="" /> |
|||
{#each urls as url} |
|||
<option value={url.url}>{url.name}</option> |
|||
{/each} |
|||
</DataList> |
|||
</div> |
|||
|
|||
<style> |
|||
div { |
|||
flex: 1 1 auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
div :global(> div) { |
|||
flex: 1 1 auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue