Remove old stuff i aded to selects and picker
This commit is contained in:
Gerard Burns
parent
222bed8a7e
commit
a94953289e
|
|
@ -9,10 +9,6 @@
|
||||||
export let options = []
|
export let options = []
|
||||||
export let getOptionLabel = option => option
|
export let getOptionLabel = option => option
|
||||||
export let getOptionValue = option => option
|
export let getOptionValue = option => option
|
||||||
export let getOptionIcon = () => null
|
|
||||||
export let getOptionIconTooltip = () => null
|
|
||||||
export let getOptionTooltip = () => null
|
|
||||||
export let isOptionEnabled = () => true
|
|
||||||
export let readonly = false
|
export let readonly = false
|
||||||
export let autocomplete = false
|
export let autocomplete = false
|
||||||
export let sort = false
|
export let sort = false
|
||||||
|
|
@ -21,7 +17,6 @@
|
||||||
export let customPopoverHeight
|
export let customPopoverHeight
|
||||||
export let open = false
|
export let open = false
|
||||||
export let loading
|
export let loading
|
||||||
export let align
|
|
||||||
export let onOptionMouseenter = () => {}
|
export let onOptionMouseenter = () => {}
|
||||||
export let onOptionMouseleave = () => {}
|
export let onOptionMouseleave = () => {}
|
||||||
|
|
||||||
|
|
@ -87,10 +82,6 @@
|
||||||
|
|
||||||
<Picker
|
<Picker
|
||||||
on:loadMore
|
on:loadMore
|
||||||
{isOptionEnabled}
|
|
||||||
{getOptionIcon}
|
|
||||||
{getOptionIconTooltip}
|
|
||||||
{getOptionTooltip}
|
|
||||||
{id}
|
{id}
|
||||||
{disabled}
|
{disabled}
|
||||||
{readonly}
|
{readonly}
|
||||||
|
|
@ -108,7 +99,6 @@
|
||||||
{autoWidth}
|
{autoWidth}
|
||||||
{customPopoverHeight}
|
{customPopoverHeight}
|
||||||
{loading}
|
{loading}
|
||||||
{align}
|
|
||||||
{onOptionMouseenter}
|
{onOptionMouseenter}
|
||||||
{onOptionMouseleave}
|
{onOptionMouseleave}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,6 @@
|
||||||
import Tags from "../../Tags/Tags.svelte"
|
import Tags from "../../Tags/Tags.svelte"
|
||||||
import Tag from "../../Tags/Tag.svelte"
|
import Tag from "../../Tags/Tag.svelte"
|
||||||
import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
|
import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
|
||||||
import {
|
|
||||||
default as AbsTooltip,
|
|
||||||
TooltipPosition,
|
|
||||||
TooltipType,
|
|
||||||
} from "../../Tooltip/AbsTooltip.svelte"
|
|
||||||
import ContextTooltip from "../../Tooltip/Context.svelte"
|
|
||||||
import { Heading } from "@budibase/bbui"
|
|
||||||
|
|
||||||
export let id = null
|
export let id = null
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
|
@ -33,8 +26,6 @@
|
||||||
export let getOptionLabel = option => option
|
export let getOptionLabel = option => option
|
||||||
export let getOptionValue = option => option
|
export let getOptionValue = option => option
|
||||||
export let getOptionIcon = () => null
|
export let getOptionIcon = () => null
|
||||||
export let getOptionIconTooltip = () => null
|
|
||||||
export let getOptionTooltip = () => null
|
|
||||||
export let useOptionIconImage = false
|
export let useOptionIconImage = false
|
||||||
export let getOptionColour = () => null
|
export let getOptionColour = () => null
|
||||||
export let getOptionSubtitle = () => null
|
export let getOptionSubtitle = () => null
|
||||||
|
|
@ -56,6 +47,7 @@
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let button
|
let button
|
||||||
|
let popover
|
||||||
let component
|
let component
|
||||||
|
|
||||||
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
|
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
|
||||||
|
|
@ -161,6 +153,7 @@
|
||||||
<Popover
|
<Popover
|
||||||
anchor={customAnchor ? customAnchor : button}
|
anchor={customAnchor ? customAnchor : button}
|
||||||
align={align || "left"}
|
align={align || "left"}
|
||||||
|
bind:this={popover}
|
||||||
{open}
|
{open}
|
||||||
on:close={() => (open = false)}
|
on:close={() => (open = false)}
|
||||||
useAnchorWidth={!autoWidth}
|
useAnchorWidth={!autoWidth}
|
||||||
|
|
@ -168,29 +161,85 @@
|
||||||
customHeight={customPopoverHeight}
|
customHeight={customPopoverHeight}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="popover-content"
|
class="popover-content"
|
||||||
class:auto-width={autoWidth}
|
class:auto-width={autoWidth}
|
||||||
use:clickOutside={() => (open = false)}
|
use:clickOutside={() => (open = false)}
|
||||||
>
|
>
|
||||||
{#if autocomplete}
|
{#if autocomplete}
|
||||||
<Search
|
<Search
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
on:change={event => (searchTerm = event.detail)}
|
on:change={event => (searchTerm = event.detail)}
|
||||||
{disabled}
|
{disabled}
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
/>
|
/>
|
||||||
|
{/if}
|
||||||
|
<ul class="spectrum-Menu" role="listbox" bind:this={component}>
|
||||||
|
{#if placeholderOption}
|
||||||
|
<li
|
||||||
|
class="spectrum-Menu-item placeholder"
|
||||||
|
class:is-selected={isPlaceholder}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
|
on:click={() => onSelectOption(null)}
|
||||||
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">{placeholderOption}</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>
|
||||||
{/if}
|
{/if}
|
||||||
<ul class="spectrum-Menu" role="listbox" bind:this={component}>
|
{#if filteredOptions.length}
|
||||||
{#if placeholderOption}
|
{#each filteredOptions as option, idx}
|
||||||
<li
|
<li
|
||||||
class="spectrum-Menu-item placeholder"
|
class="spectrum-Menu-item"
|
||||||
class:is-selected={isPlaceholder}
|
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
|
||||||
role="option"
|
role="option"
|
||||||
aria-selected="true"
|
aria-selected="true"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
on:click={() => onSelectOption(null)}
|
on:click={() => onSelectOption(getOptionValue(option, idx))}
|
||||||
|
on:mouseenter={(e) => onOptionMouseenter(e, option)}
|
||||||
|
on:mouseleave={(e) => onOptionMouseleave(e, option)}
|
||||||
|
class:is-disabled={!isOptionEnabled(option)}
|
||||||
>
|
>
|
||||||
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
{#if getOptionIcon(option, idx)}
|
||||||
|
<span class="option-extra icon">
|
||||||
|
{#if useOptionIconImage}
|
||||||
|
<img
|
||||||
|
src={getOptionIcon(option, idx)}
|
||||||
|
alt="icon"
|
||||||
|
width="15"
|
||||||
|
height="15"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<Icon size="S" name={getOptionIcon(option, idx)} />
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
{#if getOptionColour(option, idx)}
|
||||||
|
<span class="option-extra">
|
||||||
|
<StatusLight square color={getOptionColour(option, idx)} />
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
|
{getOptionLabel(option, idx)}
|
||||||
|
{#if getOptionSubtitle(option, idx)}
|
||||||
|
<span class="subtitle-text">
|
||||||
|
{getOptionSubtitle(option, idx)}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
{#if option.tag}
|
||||||
|
<span class="option-tag">
|
||||||
|
<Tags>
|
||||||
|
<Tag icon="LockClosed">{option.tag}</Tag>
|
||||||
|
</Tags>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
<svg
|
<svg
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
|
|
@ -199,88 +248,25 @@
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
</svg>
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/each}
|
||||||
{#if filteredOptions.length}
|
|
||||||
{#each filteredOptions as option, idx}
|
|
||||||
<li
|
|
||||||
on:mouseenter={(e) => onOptionMouseenter(e, option)}
|
|
||||||
on:mouseleave={(e) => onOptionMouseleave(e, option)}
|
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => onSelectOption(getOptionValue(option, idx))}
|
|
||||||
class:is-disabled={!isOptionEnabled(option)}
|
|
||||||
>
|
|
||||||
{#if getOptionIcon(option, idx)}
|
|
||||||
<span class="option-extra icon">
|
|
||||||
{#if useOptionIconImage}
|
|
||||||
<img
|
|
||||||
src={getOptionIcon(option, idx)}
|
|
||||||
alt="icon"
|
|
||||||
width="15"
|
|
||||||
height="15"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<Icon tooltip={getOptionIconTooltip(option)} size="S" name={getOptionIcon(option, idx)} />
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
{#if getOptionColour(option, idx)}
|
|
||||||
<span class="option-extra">
|
|
||||||
<StatusLight square color={getOptionColour(option, idx)} />
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{getOptionLabel(option, idx)}
|
|
||||||
{#if getOptionSubtitle(option, idx)}
|
|
||||||
<span class="subtitle-text">
|
|
||||||
{getOptionSubtitle(option, idx)}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
{#if option.tag}
|
|
||||||
<span class="option-tag">
|
|
||||||
<Tags>
|
|
||||||
<Tag icon="LockClosed">{option.tag}</Tag>
|
|
||||||
</Tags>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
<svg
|
|
||||||
class="selectedIcon 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>
|
|
||||||
|
|
||||||
{#if loading}
|
|
||||||
<div class="loading" class:loading--withAutocomplete={autocomplete}>
|
|
||||||
<ProgressCircle size="S" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{#if loading}
|
||||||
|
<div class="loading" class:loading--withAutocomplete={autocomplete}>
|
||||||
|
<ProgressCircle size="S" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if footer}
|
||||||
|
<div class="footer">
|
||||||
|
{footer}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
{#if footer}
|
|
||||||
<div class="footer">
|
|
||||||
{footer}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
<style>
|
<style>
|
||||||
.spectrum-Menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spectrum-Menu:hover .context {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spectrum-Picker {
|
.spectrum-Picker {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
@ -351,7 +337,7 @@
|
||||||
right: 2px;
|
right: 2px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
.popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
|
.popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
|
||||||
top: 9px;
|
top: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,17 +13,12 @@
|
||||||
export let options = []
|
export let options = []
|
||||||
export let getOptionLabel = option => option
|
export let getOptionLabel = option => option
|
||||||
export let getOptionValue = option => option
|
export let getOptionValue = option => option
|
||||||
export let getOptionIcon = () => null
|
|
||||||
export let getOptionIconTooltip = () => null
|
|
||||||
export let getOptionTooltip = () => null
|
|
||||||
export let isOptionEnabled = () => true
|
|
||||||
export let sort = false
|
export let sort = false
|
||||||
export let autoWidth = false
|
export let autoWidth = false
|
||||||
export let autocomplete = false
|
export let autocomplete = false
|
||||||
export let searchTerm = null
|
export let searchTerm = null
|
||||||
export let customPopoverHeight
|
export let customPopoverHeight
|
||||||
export let helpText = null
|
export let helpText = null
|
||||||
export let align
|
|
||||||
export let onOptionMouseenter = () => {}
|
export let onOptionMouseenter = () => {}
|
||||||
export let onOptionMouseleave = () => {}
|
export let onOptionMouseleave = () => {}
|
||||||
|
|
||||||
|
|
@ -36,10 +31,6 @@
|
||||||
|
|
||||||
<Field {helpText} {label} {labelPosition} {error}>
|
<Field {helpText} {label} {labelPosition} {error}>
|
||||||
<Multiselect
|
<Multiselect
|
||||||
{isOptionEnabled}
|
|
||||||
{getOptionIcon}
|
|
||||||
{getOptionIconTooltip}
|
|
||||||
{getOptionTooltip}
|
|
||||||
{error}
|
{error}
|
||||||
{disabled}
|
{disabled}
|
||||||
{readonly}
|
{readonly}
|
||||||
|
|
@ -52,7 +43,6 @@
|
||||||
{autoWidth}
|
{autoWidth}
|
||||||
{autocomplete}
|
{autocomplete}
|
||||||
{customPopoverHeight}
|
{customPopoverHeight}
|
||||||
{align}
|
|
||||||
{onOptionMouseenter}
|
{onOptionMouseenter}
|
||||||
{onOptionMouseleave}
|
{onOptionMouseleave}
|
||||||
bind:searchTerm
|
bind:searchTerm
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue