Skip to content

Commit 59c5955

Browse files
mohdashraf010897bietkulSavvyShah
authored
feat(vue): add TreeList component (#2174)
* chore(vue): replaced with * chore(vue): add jsx support for vue 3 * jsx support and fix vue-emotion issue * update searchbox example * fix(vue): pagination styles * feat: add support for vue3 maps * fix(vue): warnings and lint issues * v1.34.0-alpha.2 * fix(vue): remove FE query generation * feat: add support for vue3 * chore: upgrade vue playground * build(vue): v3.0.0-alpha.0 * chore(vue): upgrade playground * feat(vue): setup file and export for TreeList component * chore(vue): upgrade examples & demos * feat: update vue packages * chore: remove datasearch example * feat: upgrade analytics example * feat: searchbox with custom suggestions * chore: remove line break * feat: update main.js for files * feat: migrate the examples to use vue 3 * feat: import all the components * fix: resultlist component not showing up * fix: resultlist components * feat: nuxtjs example * feat: update demos * feat: fix issue with google maps * fix: nuxtjs build * feat: setup ssr * feat: ssr example with error * fix(vue): slot issues with impression tracker * fix(vue): misc changes * feat(vue): add util method to sanitize object * feat(vue): add styles to support TreeList component * feat(vue): add supporting components for TreeList * refactor(vue): remove dummy text * sync submodule * feat(vue): add tree-list example under examples/ * fix(vue): reactivecore version * fix(vue): checkbox UI * fix(vue): add default values to props * fix(vue): switcher icon issue * fix(vue): UI issue with list item layout * fix(vue): issues with dfault props * fix(vue): issues with dfault props * fix(vue): treelist example to include all fields in response * fix(vue): default props and custom icons * fix(vue): renderItem slots * sync submodule * feat: add render slot exmaple * feat: add path separator in render props * resolve conflicts * preserve yarn.lock * fix(vue): add loader, error, and no results slots * fix(web): remove unused var * fix(vue): renderError slot * remove unneccessary files * add missing files and revert package.json * sync submodule * fix(vue): issues with reactivity of props * fix(vue): search functionality for TreeList * fix: tree list example --------- Co-authored-by: bietkul <[email protected]> Co-authored-by: Shubham Shah <[email protected]>
1 parent d960ec5 commit 59c5955

File tree

19 files changed

+1400
-69
lines changed

19 files changed

+1400
-69
lines changed

‎packages/vue/examples/tree-list/.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
../../../reactivecore
2+
../../dist

‎packages/vue/examples/tree-list/.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw*

‎packages/vue/examples/tree-list/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# reactive-list
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Run your tests
19+
```
20+
yarn run test
21+
```
22+
23+
### Lints and fixes files
24+
```
25+
yarn run lint
26+
```

‎packages/vue/examples/tree-list/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "tree-list",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"vue": "^3.2.5",
12+
"@appbaseio/reactivesearch-vue": "3.0.0-alpha.7"
13+
},
14+
"devDependencies": {
15+
"@vue/cli-plugin-babel": "~4.5.0",
16+
"@vue/cli-plugin-eslint": "~4.5.0",
17+
"@vue/cli-service": "~4.5.0",
18+
"@vue/compiler-sfc": "^3.1.0"
19+
},
20+
"eslintConfig": {
21+
"root": true,
22+
"env": {
23+
"node": true
24+
},
25+
"extends": [
26+
"plugin:vue/essential",
27+
"eslint:recommended"
28+
],
29+
"rules": {},
30+
"parserOptions": {
31+
"parser": "babel-eslint"
32+
}
33+
},
34+
"browserslist": [
35+
"> 1%",
36+
"last 2 versions",
37+
"not ie <= 8"
38+
]
39+
}

‎packages/vue/examples/tree-list/src/App.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div id="app">
3+
<ReactiveBase
4+
app="best-buy-dataset"
5+
url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
6+
:enable-appbase="true"
7+
>
8+
<div class="row">
9+
<div class="col">
10+
<TreeList
11+
componentId="TreeListComponent"
12+
mode="multiple"
13+
:URLParams="true"
14+
:dataField="['class.keyword', 'subclass.keyword']"
15+
:showSearch="true"
16+
/>
17+
</div>
18+
<div class="col">
19+
<SelectedFilters />
20+
<ReactiveList
21+
componentId="SearchResult"
22+
dataField="original_title"
23+
className="result-list-container"
24+
:pagination="true"
25+
:from="0"
26+
:size="5"
27+
:react="{ and: ['TreeListComponent'] }"
28+
:includeFields="['*']"
29+
>
30+
<template #renderItem="{ item: data }">
31+
<div className="flex book-content" :key="data._id">
32+
<img :src="data.image" alt="Book Cover" className="book-image" />
33+
<div
34+
className="flex column justify-center"
35+
:style="{ marginLeft: 20 }"
36+
>
37+
<div className="book-header">{{ data.name }}</div>
38+
<div className="flex column justify-space-between">
39+
<div>
40+
<div>
41+
<span className="authors-list">
42+
{{ data.class }} > {{ data.subclass }}
43+
</span>
44+
</div>
45+
<div className="ratings-list flex align-center">
46+
Sale Price 💰 <b>{{ data.salePrice }}</b>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</template>
53+
</ReactiveList>
54+
</div>
55+
</div>
56+
</ReactiveBase>
57+
</div>
58+
</template>
59+
60+
<script>
61+
import './styles.css';
62+
import {
63+
ReactiveBase,
64+
ReactiveList,
65+
TreeList,
66+
SelectedFilters,
67+
} from '@appbaseio/reactivesearch-vue';
68+
69+
export default {
70+
name: 'app',
71+
components: { ReactiveBase, ReactiveList, TreeList, SelectedFilters },
72+
};
73+
</script>
74+
75+
<style>
76+
#app {
77+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
78+
-webkit-font-smoothing: antialiased;
79+
-moz-osx-font-smoothing: grayscale;
80+
color: #2c3e50;
81+
}
82+
</style>

‎packages/vue/examples/tree-list/src/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue';
2+
import App from './App.vue';
3+
4+
const app = createApp(App);
5+
app.config.warnHandler = () => {};
6+
app.mount('#app'); // Vue Instance - Root component

‎packages/vue/examples/tree-list/src/styles.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
.row {
2+
display: flex;
3+
flex-direction: row;
4+
width: 100%;
5+
}
6+
7+
.row.dark {
8+
background: #303030;
9+
}
10+
11+
.col {
12+
width: calc(100% - 400px);
13+
padding: 15px;
14+
}
15+
16+
.row > .col:first-child {
17+
border-right: 1px solid #ccc;
18+
max-width: 400px;
19+
}
20+
21+
.result-list-container {
22+
width: 75%;
23+
padding: 0 40px;
24+
display: inline-flex;
25+
flex-direction: column;
26+
}
27+
28+
.single-list-container {
29+
width: 25%;
30+
display: inline-flex;
31+
flex-direction: column;
32+
justify-content: space-around;
33+
}
34+
35+
.row > .col:last-child {
36+
background: #fafafa;
37+
}
38+
39+
.row.dark > .col:last-child {
40+
background: #303030;
41+
}
42+
43+
.flex {
44+
display: flex;
45+
}
46+
47+
.wrap {
48+
flex-wrap: wrap;
49+
}
50+
51+
.column {
52+
flex-direction: column;
53+
}
54+
55+
.authors-list {
56+
color: #9d9d9d;
57+
font-weight: bold;
58+
}
59+
60+
.dark .authors-list {
61+
color: #fafafa;
62+
}
63+
64+
.ratings-list {
65+
padding: 10px 0;
66+
}
67+
68+
.avg-rating {
69+
color: #6b6b6b;
70+
}
71+
72+
.dark .avg-rating {
73+
color: #fafafa;
74+
}
75+
76+
.align-center {
77+
align-items: center;
78+
}
79+
80+
.justify-center {
81+
justify-content: center;
82+
}
83+
84+
.justify-space-between {
85+
justify-content: space-between;
86+
}
87+
88+
.stars {
89+
color: gold;
90+
}
91+
92+
.location {
93+
color: salmon;
94+
margin-right: 5px;
95+
}
96+
97+
.meetup-location {
98+
margin: 4px 0;
99+
}
100+
101+
.book-title {
102+
white-space: normal;
103+
margin-top: 4px;
104+
}
105+
106+
.book-title-card {
107+
white-space: normal;
108+
margin-top: 4px;
109+
max-height: 45px;
110+
}
111+
112+
.book-image {
113+
height: 150px;
114+
width: 110px;
115+
background-size: cover;
116+
}
117+
118+
.book-header {
119+
font-weight: bold;
120+
margin-bottom: 5px;
121+
}
122+
123+
.book-content {
124+
background: white;
125+
margin: 10px 0;
126+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
127+
}
128+
129+
.meetup-title {
130+
white-space: normal;
131+
}
132+
133+
.meetup-topics {
134+
height: 35px;
135+
overflow: hidden;
136+
}
137+
138+
.text-center {
139+
text-align: center;
140+
}
141+
142+
.meetup-topic {
143+
background-color: #dedede;
144+
color: #555;
145+
padding: 5px 10px;
146+
margin: 5px;
147+
border-radius: 4px;
148+
}
149+
150+
.meetup-topic:first-child {
151+
margin-left: 0;
152+
}
153+
154+
.col .meetup-list-image {
155+
background-size: cover;
156+
}
157+
.ml20 {
158+
margin-left: 20px;
159+
}

‎packages/vue/examples/with-tailwind-css/src/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createApp } from 'vue';
22
import App from './App.vue';
3-
import "@/assets/css/custom.css";
4-
import "@/assets/css/tailwind.css";
3+
import '@/assets/css/custom.css';
4+
import '@/assets/css/tailwind.css';
55

66
const app = createApp(App);
77
app.mount('#app'); // Vue Instance - Root component

‎packages/vue/src/components/list/TreeList/HierarchicalMenuComponent.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import types from '@appbaseio/reactivecore/lib/utils/types';
2+
import VueTypes from 'vue-types';
3+
import { HierarchicalMenuList } from '../../../styles/TreeList';
4+
// eslint-disable-next-line import/no-cycle
5+
import HierarchicalMenuListItemComponent from './HierarchicalMenuListItemComponent.jsx';
6+
7+
const HierarchicalMenuComponent = {
8+
name: 'HierarchicalMenuComponent',
9+
props: {
10+
listArray: VueTypes.arrayOf(VueTypes.object), // array of objects
11+
parentPath: VueTypes.string.def(''),
12+
isExpanded: VueTypes.bool.def(false),
13+
listItemProps: types.rawData,
14+
},
15+
render() {
16+
const { listArray, isExpanded, parentPath, listItemProps } = this.$props;
17+
18+
if (!Array.isArray(listArray) || listArray.length === 0) {
19+
return null;
20+
}
21+
22+
return (
23+
<HierarchicalMenuList class={`${isExpanded ? '--open' : ''}`} isSelected={isExpanded}>
24+
{listArray.map((listItem) => (
25+
<HierarchicalMenuListItemComponent
26+
key={`${parentPath}__${JSON.stringify(listItem)}`}
27+
parentPath={parentPath}
28+
listItem={listItem}
29+
{...listItemProps}
30+
/>
31+
))}
32+
</HierarchicalMenuList>
33+
);
34+
},
35+
};
36+
37+
export default HierarchicalMenuComponent;

0 commit comments

Comments
 (0)