Add search component and update screen list panel

This commit is contained in:
Andrew Kingston 2021-04-20 14:24:14 +01:00
parent fde47ad61c
commit 14cf5c0669
6 changed files with 121 additions and 35 deletions

View File

@ -55,6 +55,7 @@
"@spectrum-css/progressbar": "^1.0.2", "@spectrum-css/progressbar": "^1.0.2",
"@spectrum-css/progresscircle": "^1.0.2", "@spectrum-css/progresscircle": "^1.0.2",
"@spectrum-css/radio": "^3.0.2", "@spectrum-css/radio": "^3.0.2",
"@spectrum-css/search": "^3.0.2",
"@spectrum-css/switch": "^1.0.2", "@spectrum-css/switch": "^1.0.2",
"@spectrum-css/table": "^3.0.1", "@spectrum-css/table": "^3.0.1",
"@spectrum-css/tabs": "^3.0.1", "@spectrum-css/tabs": "^3.0.1",

View File

@ -0,0 +1,82 @@
<script>
import "@spectrum-css/search/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let value = ""
export let placeholder = null
export let disabled = false
export let id = null
const dispatch = createEventDispatcher()
let focus = false
const updateValue = value => {
dispatch("change", value)
}
const onFocus = () => {
focus = true
}
const onBlur = event => {
focus = false
updateValue(event.target.value)
}
const updateValueOnEnter = event => {
if (event.key === "Enter") {
updateValue(event.target.value)
}
}
</script>
<div class="spectrum-Search" class:is-disabled={disabled}>
<div
class="spectrum-Textfield"
class:is-focused={focus}
class:is-disabled={disabled}>
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Magnify" />
</svg>
<input
on:click
on:keyup={updateValueOnEnter}
{disabled}
{id}
value={value || ''}
placeholder={placeholder || ''}
on:blur={onBlur}
on:focus={onFocus}
on:input
type="search"
class="spectrum-Textfield-input spectrum-Search-input"
autocomplete="off" />
</div>
<button
on:click={() => updateValue('')}
type="reset"
class="spectrum-ClearButton spectrum-Search-clearButton">
<svg
class="spectrum-Icon spectrum-UIIcon-Cross75"
focusable="false"
aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</button>
</div>
<style>
.spectrum-Search,
.spectrum-Textfield {
width: 100%;
}
.spectrum-Search-input {
padding-right: 24px;
}
.is-disabled {
pointer-events: none;
}
</style>

View File

@ -6,3 +6,4 @@ export { default as CoreRadioGroup } from "./RadioGroup.svelte"
export { default as CoreTextArea } from "./TextArea.svelte" export { default as CoreTextArea } from "./TextArea.svelte"
export { default as CoreCombobox } from "./Combobox.svelte" export { default as CoreCombobox } from "./Combobox.svelte"
export { default as CoreSwitch } from "./Switch.svelte" export { default as CoreSwitch } from "./Switch.svelte"
export { default as CoreSearch } from "./Search.svelte"

View File

@ -1,25 +1,27 @@
<form class="spectrum-Search"> <script>
<div class="spectrum-Textfield"> import Field from "./Field.svelte"
<svg import Search from "./Core/Search.svelte"
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon" import { createEventDispatcher } from "svelte"
focusable="false"
aria-hidden="true"> export let value = null
<use xlink:href="#spectrum-icon-18-Magnify" /> export let label = null
</svg> export let labelPosition = "above"
<input export let placeholder = null
type="search" export let disabled = false
placeholder="Search"
name="search" const dispatch = createEventDispatcher()
value="" const onChange = e => {
class="spectrum-Textfield-input spectrum-Search-input" value = e.detail
autocomplete="off" /> dispatch("change", e.detail)
</div> }
<button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton"> </script>
<svg
class="spectrum-Icon spectrum-UIIcon-Cross75" <Field {label} {labelPosition} {disabled}>
focusable="false" <Search
aria-hidden="true"> {disabled}
<use xlink:href="#spectrum-css-icon-Cross75" /> {value}
</svg> {placeholder}
</button> on:change={onChange}
</form> on:click
on:input />
</Field>

View File

@ -166,6 +166,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152" resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152"
integrity sha512-0TDdzC9omNXnpKHEXNuuGeXdNh4x8jvTKVUqMRLb7vY4hY94hAdt6X01NBqka+jzK35HxGzpDdPADAz62yZLPQ== integrity sha512-0TDdzC9omNXnpKHEXNuuGeXdNh4x8jvTKVUqMRLb7vY4hY94hAdt6X01NBqka+jzK35HxGzpDdPADAz62yZLPQ==
"@spectrum-css/search@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.2.tgz#70e93e321032d40b399498b2324e3b70e050551e"
integrity sha512-3UbT8yZmNOwrZxq+CUmumE+26ZySZ8OoKNM6U20SLMPLgdx6MrRugVE88r3Bl0sJ0RZX/5bU8nausdiHeX+Jlw==
"@spectrum-css/switch@^1.0.2": "@spectrum-css/switch@^1.0.2":
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44" resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"

View File

@ -12,7 +12,7 @@
import Layout from "components/design/NavigationPanel/Layout.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte"
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
import { Modal, Select, Input, Tabs, Tab } from "@budibase/bbui" import { Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
const tabs = [ const tabs = [
{ {
@ -75,15 +75,10 @@
getOptionLabel={role => role.name} getOptionLabel={role => role.name}
getOptionValue={role => role._id} getOptionValue={role => role._id}
options={$roles} /> options={$roles} />
<div class="search-screens"> <Search
<Input placeholder="Enter a route to search"
placeholder="Enter a route to search" label="Search Screens"
label="Search Screens" bind:value={$screenSearchString} />
bind:value={$screenSearchString} />
<i
class="ri-close-line"
on:click={() => ($screenSearchString = null)} />
</div>
</div> </div>
<div class="nav-items-container"> <div class="nav-items-container">
<ComponentNavigationTree /> <ComponentNavigationTree />