CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-01 18:20:18 +12:00
Code Issues Projects Releases Wiki Activity

Add search component and update screen list panel

Browse source
This commit is contained in:
Andrew Kingston 2021-04-20 14:24:14 +01:00
parent 6ac5a999cb
commit 5b7f58d7b4
6 changed files with 121 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/bbui/package.json
View file

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

82
packages/bbui/src/Form/Core/Search.svelte Normal file
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>

1
packages/bbui/src/Form/Core/index.js
View file

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

52
packages/bbui/src/Form/Search.svelte
View file

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

5
packages/bbui/yarn.lock
View file

@ -166,6 +166,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/radio/-/radio-3.0.2.tgz#9c1386894920bbed604e4e174fbbd45d9d762152"
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":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"

15
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View file

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