This repository has been archived by the owner on Aug 2, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Fixes Search Input and Combobox + makes them better
- Loading branch information
1 parent
30781be
commit 48fa2f4
Showing
41 changed files
with
1,625 additions
and
1,196 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -98,3 +98,4 @@ node_modules | |
/ui/.vscode | ||
/server/.vscode | ||
/docs/.vscode | ||
/ui/coverage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<title>Popover without Content</title> | ||
<tip>Sometimes it is useful to have a Popover that renders a trigger but no body.</tip> | ||
|
||
<template> | ||
<div> | ||
<FdPopover title="Show (is not showing anything)" /> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,19 @@ | ||
<title>Search Input</title> | ||
|
||
<docs>`FdSearchInput` supports `v-model`: The *model value* is simply the currently entered predicate/query/value.</docs> | ||
<tip> | ||
Currently `FdSearchInput` always renderes an empty state even when no auto compleiton is used. This issue will be addressed in the near future. | ||
</tip> | ||
<template> | ||
<div> | ||
<p>Search Query: '{{ query }}'</p> | ||
<FdSearchInput | ||
v-model="query" | ||
placeholder="Enter Search Query" | ||
@search="onSearch" | ||
/> | ||
<p> | ||
Predicate: <code>{{ predicate }}</code> | ||
</p> | ||
<FdSearchInput v-model="predicate" placeholder="Search" /> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
methods: { | ||
onSearch(txt) { | ||
this.query = txt; | ||
} | ||
}, | ||
data: () => ({ query: "Apples and Oranges" }) | ||
data: () => ({ predicate: "Apples and Oranges" }) | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,44 +1,21 @@ | ||
<title>Search Input with Auto Complete</title> | ||
<docs>Use the `completions`-prop in order to pass an array of strings to `FdSearchInput`. `FdSearchInput` will then render a completion list that is automatically filtered.</docs> | ||
|
||
<template> | ||
<div> | ||
<p>Search Query: '{{ query }}'</p> | ||
<p> | ||
Predicate: <code>{{ predicate }}</code> | ||
</p> | ||
<FdSearchInput | ||
v-model="query" | ||
placeholder="Enter Search Query" | ||
@search="search" | ||
@autoComplete="autoComplete" | ||
:enableSuggest="true" | ||
> | ||
<FdMenuItem | ||
v-for="item in data" | ||
:key="item.key" | ||
@click="searchvalue = item.text" | ||
>{{ item.text }}</FdMenuItem | ||
> | ||
</FdSearchInput> | ||
v-model="predicate" | ||
placeholder="Search" | ||
:completions="['Apple', 'Peach', 'Banana']" | ||
/> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
methods: { | ||
search(query) { | ||
this.query = query; | ||
}, | ||
autoComplete(event) {} | ||
}, | ||
data() { | ||
return { | ||
query: "", | ||
data: [ | ||
{ key: 1, text: "apple" }, | ||
{ key: 2, text: "mango" }, | ||
{ key: 3, text: "grapes" }, | ||
{ key: 4, text: "banana" }, | ||
{ key: 5, text: "orange" } | ||
] | ||
}; | ||
} | ||
data: () => ({ predicate: "" }) | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.