Update filter popover
This commit is contained in:
parent
d268064164
commit
beb296fd0d
2 changed files with 26 additions and 34 deletions
|
@ -2,16 +2,11 @@
|
||||||
import "@spectrum-css/button/dist/index-vars.css"
|
import "@spectrum-css/button/dist/index-vars.css"
|
||||||
|
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
|
||||||
/** @type {('S', 'M', 'L', 'XL')} Size of button */
|
|
||||||
export let size = "M"
|
export let size = "M"
|
||||||
|
|
||||||
// Types
|
|
||||||
export let cta, primary, secondary, warning, overBackground
|
export let cta, primary, secondary, warning, overBackground
|
||||||
|
|
||||||
export let quiet = false
|
export let quiet = false
|
||||||
|
|
||||||
export let icon = undefined
|
export let icon = undefined
|
||||||
|
export let active = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
@ -21,6 +16,7 @@
|
||||||
class:spectrum-Button--warning={warning}
|
class:spectrum-Button--warning={warning}
|
||||||
class:spectrum-Button--overBackground={overBackground}
|
class:spectrum-Button--overBackground={overBackground}
|
||||||
class:spectrum-Button--quiet={quiet}
|
class:spectrum-Button--quiet={quiet}
|
||||||
|
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>
|
||||||
|
@ -44,4 +40,8 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
color: var(--spectrum-semantic-cta-color-background-default);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -105,6 +105,9 @@
|
||||||
filter.value = ""
|
filter.value = ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getOptionLabel = x => x.name
|
||||||
|
const getOptionValue = x => x.key
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
|
@ -115,49 +118,37 @@
|
||||||
{#if idx === 0}
|
{#if idx === 0}
|
||||||
<p>Where</p>
|
<p>Where</p>
|
||||||
{:else}
|
{:else}
|
||||||
<Select secondary thin bind:value={filter.conjunction}>
|
<Select
|
||||||
<option value="">Choose an option</option>
|
bind:value={filter.conjunction}
|
||||||
{#each CONJUNCTIONS as conjunction}
|
options={CONJUNCTIONS}
|
||||||
<option value={conjunction.key}>{conjunction.name}</option>
|
{getOptionLabel}
|
||||||
{/each}
|
{getOptionValue} />
|
||||||
</Select>
|
|
||||||
{/if}
|
{/if}
|
||||||
<Select
|
<Select
|
||||||
secondary
|
|
||||||
thin
|
|
||||||
bind:value={filter.key}
|
bind:value={filter.key}
|
||||||
on:change={fieldChanged(filter)}>
|
on:change={fieldChanged(filter)}
|
||||||
<option value="">Choose an option</option>
|
options={fields} />
|
||||||
{#each fields as field}
|
<Select
|
||||||
<option value={field}>{field}</option>
|
bind:value={filter.condition}
|
||||||
{/each}
|
options={CONDITIONS}
|
||||||
</Select>
|
{getOptionLabel}
|
||||||
<Select secondary thin bind:value={filter.condition}>
|
{getOptionValue} />
|
||||||
<option value="">Choose an option</option>
|
|
||||||
{#each CONDITIONS as condition}
|
|
||||||
<option value={condition.key}>{condition.name}</option>
|
|
||||||
{/each}
|
|
||||||
</Select>
|
|
||||||
{#if filter.key && isMultipleChoice(filter.key)}
|
{#if filter.key && isMultipleChoice(filter.key)}
|
||||||
<Select secondary thin bind:value={filter.value}>
|
<Select
|
||||||
<option value="">Choose an option</option>
|
bind:value={filter.value}
|
||||||
{#each fieldOptions(filter.key) as option}
|
options={fieldOptions(filter.key)}
|
||||||
<option value={option}>{option.toString()}</option>
|
getOptionLabel={x => x.toString()} />
|
||||||
{/each}
|
|
||||||
</Select>
|
|
||||||
{:else if filter.key && isDate(filter.key)}
|
{:else if filter.key && isDate(filter.key)}
|
||||||
<DatePicker
|
<DatePicker
|
||||||
bind:value={filter.value}
|
bind:value={filter.value}
|
||||||
placeholder={filter.key || fields[0]} />
|
placeholder={filter.key || fields[0]} />
|
||||||
{:else if filter.key && isNumber(filter.key)}
|
{:else if filter.key && isNumber(filter.key)}
|
||||||
<Input
|
<Input
|
||||||
thin
|
|
||||||
bind:value={filter.value}
|
bind:value={filter.value}
|
||||||
placeholder={filter.key || fields[0]}
|
placeholder={filter.key || fields[0]}
|
||||||
type="number" />
|
type="number" />
|
||||||
{:else}
|
{:else}
|
||||||
<Input
|
<Input
|
||||||
thin
|
|
||||||
placeholder={filter.key || fields[0]}
|
placeholder={filter.key || fields[0]}
|
||||||
bind:value={filter.value} />
|
bind:value={filter.value} />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -180,6 +171,7 @@
|
||||||
.actions {
|
.actions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--spacing-xl);
|
grid-gap: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
|
|
Loading…
Reference in a new issue