Drafted a Search component
This commit is contained in:
palewire
parent
b18ccb6d00
commit
f6a61856cd
6 changed files with 160 additions and 68 deletions
11
src/components/Table/MagnifyingGlass.svelte
Normal file
11
src/components/Table/MagnifyingGlass.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.41069 12.0711C2.83695 11.5053 2.38137 10.8311 2.07042 10.0878C1.75947 9.3444 1.59934 8.54666 1.59934 7.74088C1.59934 6.9351 1.75947 6.13735 2.07042 5.39399C2.38137 4.65063 2.83695 3.97647 3.41069 3.41069C3.97647 2.83695 4.65063 2.38137 5.39399 2.07042C6.13735 1.75947 6.9351 1.59934 7.74088 1.59934C8.54666 1.59934 9.3444 1.75947 10.0878 2.07042C10.8311 2.38137 11.5053 2.83695 12.0711 3.41069C12.6448 3.97647 13.1004 4.65063 13.4113 5.39399C13.7223 6.13735 13.8824 6.9351 13.8824 7.74088C13.8824 8.54666 13.7223 9.3444 13.4113 10.0878C13.1004 10.8311 12.6448 11.5053 12.0711 12.0711C11.5053 12.6448 10.8311 13.1004 10.0878 13.4113C9.3444 13.7223 8.54666 13.8824 7.74088 13.8824C6.9351 13.8824 6.13735 13.7223 5.39399 13.4113C4.65063 13.1004 3.97647 12.6448 3.41069 12.0711ZM17.8254 16.6899L13.7454 12.6099C14.9941 11.0703 15.6041 9.11021 15.4497 7.13395C15.2953 5.1577 14.3882 3.3161 12.9156 1.98914C11.4429 0.662179 9.51715 -0.0489011 7.53554 0.00261584C5.55393 0.0541328 3.66769 0.864316 2.266 2.266C0.864316 3.66769 0.0541328 5.55393 0.00261584 7.53554C-0.0489011 9.51715 0.662179 11.4429 1.98914 12.9156C3.3161 14.3882 5.1577 15.2953 7.13395 15.4497C9.11021 15.6041 11.0703 14.9941 12.6099 13.7454L16.6899 17.8254C16.8453 17.9485 17.0405 18.0101 17.2384 17.9986C17.4363 17.9872 17.6231 17.9034 17.7633 17.7633C17.9034 17.6231 17.9872 17.4363 17.9986 17.2384C18.0101 17.0405 17.9485 16.8453 17.8254 16.6899Z"
|
||||
fill="#D0D0D0"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
85
src/components/Table/Search.svelte
Normal file
85
src/components/Table/Search.svelte
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import MagnifyingGlass from './MagnifyingGlass.svelte';
|
||||
import X from './X.svelte';
|
||||
|
||||
/**
|
||||
* The placeholder text that appears in the search box.
|
||||
* @type {string}
|
||||
*/
|
||||
export let searchPlaceholder: string = 'Search in table';
|
||||
|
||||
let value = '';
|
||||
$: active = value !== '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function input(event) {
|
||||
value = event.target.value;
|
||||
dispatch('search', { value });
|
||||
}
|
||||
|
||||
function clear() {
|
||||
value = '';
|
||||
dispatch('search', { value: '' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="search" class:active>
|
||||
<div class="search--icon">
|
||||
<MagnifyingGlass />
|
||||
</div>
|
||||
<input
|
||||
id="search--input"
|
||||
class="search--input"
|
||||
type="text"
|
||||
placeholder="{searchPlaceholder}"
|
||||
on:input="{input}"
|
||||
bind:value
|
||||
/>
|
||||
<div class="search--x" class:invisible="{!active}" on:click="{clear}">
|
||||
<X />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/colours/thematic/tr';
|
||||
@import '../../scss/fonts/variables';
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 256px;
|
||||
padding: 0 0 0 0.1rem;
|
||||
.search--icon {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0.15rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: $tr-muted-grey;
|
||||
}
|
||||
.search--input {
|
||||
font-family: $font-family-display;
|
||||
padding: 0 0 0 2rem;
|
||||
font-size: 0.8rem;
|
||||
height: 33px;
|
||||
border: 1px solid $tr-muted-grey;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
.search--x {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.15rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: $tr-dark-grey;
|
||||
cursor: pointer;
|
||||
&.invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -99,8 +99,8 @@
|
|||
{...withStoryDocs(searchDocs)}
|
||||
args="{{
|
||||
data: pressFreedom,
|
||||
paginated: true,
|
||||
searchable: true,
|
||||
paginated: true,
|
||||
title: 'Press Freedom Index',
|
||||
source:
|
||||
"Source: <a href='https://en.wikipedia.org/wiki/Press_Freedom_Index'>Reporters Without Borders</a>",
|
||||
|
|
|
|||
|
|
@ -71,17 +71,11 @@
|
|||
*/
|
||||
export let searchable: boolean = false;
|
||||
|
||||
/**
|
||||
* The label to place above the search box.
|
||||
* @type {string}
|
||||
*/
|
||||
export let searchLabel: string;
|
||||
|
||||
/**
|
||||
* The placeholder text that appears in the search box.
|
||||
* @type {string}
|
||||
*/
|
||||
export let searchPlaceholder: string;
|
||||
export let searchPlaceholder: string = 'Search in table';
|
||||
|
||||
/**
|
||||
* A field to offer uses as an interactive filter.
|
||||
|
|
@ -133,6 +127,7 @@
|
|||
/** Import local helpers */
|
||||
import Block from '../Block/Block.svelte';
|
||||
import Pagination from './Pagination.svelte';
|
||||
import Search from './Search.svelte';
|
||||
import SortArrow from './SortArrow.svelte';
|
||||
import {
|
||||
filterArray,
|
||||
|
|
@ -174,7 +169,7 @@
|
|||
}
|
||||
|
||||
function handleSearchInput(event) {
|
||||
searchText = event.target.value;
|
||||
searchText = event.detail.value;
|
||||
pageNumber = 1;
|
||||
}
|
||||
|
||||
|
|
@ -227,45 +222,6 @@
|
|||
|
||||
<Block width="{width}" id="{id}" cls="{cls}">
|
||||
<section class="table-wrapper">
|
||||
{#if searchable || filterList}
|
||||
<section class="input">
|
||||
{#if searchable}
|
||||
<div class="search">
|
||||
<label for="filter--select"
|
||||
>{#if searchLabel}{searchLabel}{:else}Search{/if}</label
|
||||
>
|
||||
<input
|
||||
id="search--input"
|
||||
class="search--input"
|
||||
type="text"
|
||||
placeholder="{searchPlaceholder}"
|
||||
on:input="{handleSearchInput}"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if filterList}
|
||||
{#if searchable}<div
|
||||
style="clear: both; display: block; padding-top: 1rem;"
|
||||
></div>{/if}
|
||||
<div class="filter">
|
||||
<label for="filter--select"
|
||||
>{#if filterLabel}{filterLabel}{:else}Filter by {filterField}{/if}</label
|
||||
>
|
||||
<select
|
||||
class="filter--select"
|
||||
name="filter--select"
|
||||
id="filter--select"
|
||||
on:input="{handleFilterInput}"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
{#each filterList as object}
|
||||
<option value="{object}">{object}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
<section class="table">
|
||||
<table
|
||||
class:paginated
|
||||
|
|
@ -273,7 +229,7 @@
|
|||
!showAll &&
|
||||
data.length > truncateLength}"
|
||||
>
|
||||
{#if title || dek}
|
||||
{#if title || dek || searchable}
|
||||
<caption class="table--caption">
|
||||
{#if title}
|
||||
<div class="table--caption--title">{@html title}</div>
|
||||
|
|
@ -281,6 +237,37 @@
|
|||
{#if dek}
|
||||
<div class="table--caption--dek">{@html dek}</div>
|
||||
{/if}
|
||||
{#if searchable || filterList}
|
||||
<section class="input">
|
||||
{#if searchable}
|
||||
<Search
|
||||
bind:searchPlaceholder
|
||||
on:search="{handleSearchInput}"
|
||||
/>
|
||||
{/if}
|
||||
{#if filterList}
|
||||
{#if searchable}<div
|
||||
style="clear: both; display: block; padding-top: 1rem;"
|
||||
></div>{/if}
|
||||
<div class="filter">
|
||||
<label for="filter--select"
|
||||
>{#if filterLabel}{filterLabel}{:else}Filter by {filterField}{/if}</label
|
||||
>
|
||||
<select
|
||||
class="filter--select"
|
||||
name="filter--select"
|
||||
id="filter--select"
|
||||
on:input="{handleFilterInput}"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
{#each filterList as object}
|
||||
<option value="{object}">{object}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
</caption>
|
||||
{/if}
|
||||
<thead class="table--thead">
|
||||
|
|
@ -456,12 +443,10 @@
|
|||
}
|
||||
|
||||
section.input {
|
||||
margin: 16px 0;
|
||||
background-color: $tr-ultra-light-grey;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0 0 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
border: 1px solid $tr-light-muted-grey;
|
||||
label {
|
||||
line-height: 1.333;
|
||||
display: block;
|
||||
|
|
@ -469,16 +454,6 @@
|
|||
font-family: $font-family-display;
|
||||
font-weight: 500;
|
||||
}
|
||||
.search {
|
||||
.search--input {
|
||||
padding: 0.33rem;
|
||||
font-size: 1.1rem;
|
||||
height: 2.3rem;
|
||||
border: 1px solid $tr-muted-grey;
|
||||
border-radius: 5px;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
.filter--select {
|
||||
padding: 0.33rem;
|
||||
|
|
|
|||
20
src/components/Table/X.svelte
Normal file
20
src/components/Table/X.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_25_237)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0.300421 0.292131C0.392053 0.199685 0.50109 0.126304 0.621235 0.0762269C0.741381 0.0261493 0.870256 0.000366211 1.00042 0.000366211C1.13059 0.000366211 1.25946 0.0261493 1.37961 0.0762269C1.49975 0.126304 1.60879 0.199685 1.70042 0.292131L7.00082 5.45346L12.3012 0.292131C12.3929 0.199685 12.5019 0.126304 12.622 0.0762269C12.7422 0.0261493 12.8711 0.000366211 13.0012 0.000366211C13.1314 0.000366211 13.2603 0.0261493 13.3804 0.0762269C13.5006 0.126304 13.6096 0.199685 13.7012 0.292131C13.7954 0.378994 13.8706 0.48445 13.922 0.601837C13.9734 0.719225 13.9999 0.845993 13.9998 0.974136C13.9997 1.10228 13.973 1.22901 13.9215 1.34633C13.8699 1.46364 13.7946 1.569 13.7003 1.65573L8.21229 6.99906L13.7003 12.3443C14.0708 12.7064 14.0979 13.2365 13.7796 13.622L13.6994 13.7079C13.6077 13.8003 13.4987 13.8737 13.3785 13.9238C13.2584 13.9738 13.1295 13.9996 12.9994 13.9996C12.8692 13.9996 12.7403 13.9738 12.6202 13.9238C12.5 13.8737 12.391 13.8003 12.2994 13.7079L6.99895 8.54653L1.69855 13.7079C1.60692 13.8003 1.49789 13.8737 1.37774 13.9238C1.25759 13.9738 1.12872 13.9996 0.998554 13.9996C0.86839 13.9996 0.739515 13.9738 0.619369 13.9238C0.499223 13.8737 0.390186 13.8003 0.298554 13.7079C0.204346 13.621 0.129174 13.5155 0.0777863 13.3982C0.0263988 13.2808 -8.74916e-05 13.154 2.17122e-07 13.0259C8.79258e-05 12.8977 0.0267478 12.771 0.0782959 12.6537C0.129844 12.5364 0.20516 12.431 0.299488 12.3443L5.78655 7L0.300421 1.65573C-0.0710458 1.2936 -0.0981124 0.763464 0.220154 0.377998L0.300421 0.292131Z"
|
||||
fill="#404040"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_25_237">
|
||||
<rect width="14" height="14" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,10 +1,11 @@
|
|||
Allow users to search the table by setting the optional `searchable` variable to `true`.
|
||||
Allow users to search the table by setting the optional `searchable` variable. Modify the default text that appears in the box by supplying the `searchPlaceholder` option.
|
||||
|
||||
```svelte
|
||||
<Table
|
||||
data={yourData},
|
||||
searchable=true,
|
||||
title='Press Freedom Index',
|
||||
notes='Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>',
|
||||
data="{yourData},"
|
||||
searchable="{true},"
|
||||
paginated="{true},"
|
||||
title="{'Press Freedom Index'},"
|
||||
notes="{'Source: <a href="https://en.wikipedia.org/wiki/Press_Freedom_Index">Reporters Without Borders</a>'},"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in a new issue