Skip to content

Commit 6397e93

Browse files
mohdashraf010897mohdashraf010897
committed
fix(vue): tailwind-css example
1 parent 8ae3c19 commit 6397e93

File tree

11 files changed

+336
-1053
lines changed

11 files changed

+336
-1053
lines changed

‎packages/vue/examples/with-tailwind-css/babel.config.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/vue/examples/with-tailwind-css/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>With tailwind css</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎packages/vue/examples/with-tailwind-css/package.json‎

Lines changed: 21 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
11
{
2-
"name": "with-tailwind-css",
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-
"@appbaseio/reactivesearch-vue": "3.3.3",
12-
"vue": "^2.6.11"
13-
},
14-
"devDependencies": {
15-
"@vue/cli-plugin-babel": "^5.0.8",
16-
"@vue/cli-service": "^5.0.8",
17-
"tailwindcss": "^1.4.5",
18-
"vue-template-compiler": "^2.6.11"
19-
},
20-
"eslintConfig": {
21-
"root": true,
22-
"env": {
23-
"node": true
24-
},
25-
"extends": [
26-
"plugin:vue/essential",
27-
"eslint:recommended"
28-
],
29-
"parserOptions": {
30-
"parser": "babel-eslint"
31-
},
32-
"rules": {}
33-
},
34-
"browserslist": [
35-
"> 1%",
36-
"last 2 versions",
37-
"not dead"
38-
]
2+
"name": "with-tailwindcss",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@appbaseio/reactivesearch-vue": "^3.3.3",
13+
"vue": "^3.3.11"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.5.2",
17+
"@vitejs/plugin-vue-jsx": "^3.1.0",
18+
"autoprefixer": "^10.4.16",
19+
"postcss": "^8.4.32",
20+
"tailwindcss": "^3.3.6",
21+
"vite": "^5.0.8"
22+
}
3923
}

‎packages/vue/examples/with-tailwind-css/postcss.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
module.exports = {
2-
plugins: [
3-
require("tailwindcss")("tailwind.config.js"),
4-
require("autoprefixer")(),
5-
],
6-
};
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎packages/vue/examples/with-tailwind-css/src/App.vue‎

Lines changed: 71 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,81 @@
11
<template>
2-
<div className="p-3" id="app">
3-
<reactive-base
4-
app="good-books-ds"
5-
url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
6-
>
7-
<search-box
8-
className="result-list-container"
9-
componentId="BookSensor"
10-
:dataField="['original_title', 'original_title.search']"
11-
:URLParams="true"
12-
:size="3"
13-
:enablePopularSuggestions="true"
14-
:enableRecentSearches="true"
15-
:innerClass="{
16-
input: 'bg-gray-300 border-2 border-blue-500',
17-
}"
18-
/>
19-
<reactive-list
20-
componentId="SearchResult"
21-
dataField="original_title.keyword"
22-
className="result-list-container"
23-
:pagination="true"
24-
:size="5"
25-
:react="{ and: ['BookSensor'] }"
26-
>
27-
<template #renderItem="{ item }">
28-
<div :id="item._id" class="flex book-content" :key="item._id">
29-
<img :src="item.image" alt="Book Cover" class="book-image" />
30-
<div class="flex column justify-center ml20">
31-
<div class="book-header">{{ item.original_title }}</div>
32-
<div class="flex column justify-space-between">
33-
<div>
34-
<div>
35-
by <span class="authors-list">{{ item.authors }}</span>
36-
</div>
37-
<div class="ratings-list flex align-center">
38-
<span class="stars">
39-
<i
40-
v-for="(item, index) in Array(
41-
item.average_rating_rounded,
42-
).fill('x')"
43-
class="fas fa-star"
44-
:key="index"
45-
/>
46-
</span>
47-
<span class="avg-rating"
48-
>({{ item.average_rating }} avg)</span
49-
>
50-
</div>
51-
</div>
52-
<span class="pub-year"
53-
>Pub {{ item.original_publication_year }}</span
54-
>
55-
</div>
56-
</div>
57-
</div>
58-
</template>
59-
</reactive-list>
60-
</reactive-base>
61-
</div>
2+
<div
3+
id="app"
4+
class="p-3 bg-gradient-to-r from-green-400 to-blue-500">
5+
<reactive-base
6+
app="good-books-ds"
7+
url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
8+
>
9+
<search-box
10+
:data-field="['original_title', 'original_title.search']"
11+
:urlparams="true"
12+
:size="3"
13+
:enable-popular-suggestions="true"
14+
:enable-recent-searches="true"
15+
:inner-class="{
16+
input: 'bg-gray-300 border-2 border-blue-500',
17+
}"
18+
class-name="result-list-container mt-4"
19+
component-id="BookSensor"
20+
/>
21+
<reactive-list
22+
:pagination="true"
23+
:size="5"
24+
:react="{ and: ['BookSensor'] }"
25+
component-id="SearchResult"
26+
data-field="original_title.keyword"
27+
class-name="result-list-container"
28+
>
29+
<template #renderItem="{ item }">
30+
<div
31+
:id="item._id"
32+
:key="item._id"
33+
class="flex book-content">
34+
<img
35+
:src="item.image"
36+
alt="Book Cover"
37+
class="book-image" >
38+
<div class="flex column justify-center ml20">
39+
<div class="book-header">{{ item.original_title }}</div>
40+
<div class="flex column justify-space-between">
41+
<div>
42+
<div>
43+
by <span class="authors-list">{{ item.authors }}</span>
44+
</div>
45+
<div class="ratings-list flex align-center">
46+
<span class="stars">
47+
<i
48+
v-for="(item, index) in Array(
49+
item.average_rating_rounded,
50+
).fill('x')"
51+
:key="index"
52+
class="fas fa-star"
53+
/>
54+
</span>
55+
<span
56+
class="avg-rating"
57+
>({{ item.average_rating }} avg)</span
58+
>
59+
</div>
60+
</div>
61+
<span
62+
class="pub-year"
63+
>Pub {{ item.original_publication_year }}</span
64+
>
65+
</div>
66+
</div>
67+
</div>
68+
</template>
69+
</reactive-list>
70+
</reactive-base>
71+
</div>
6272
</template>
6373

6474
<script>
65-
import './styles.css';
6675
import { ReactiveBase, ReactiveList, SearchBox } from '@appbaseio/reactivesearch-vue'
6776
6877
export default {
69-
name: 'app',
78+
name: 'App',
7079
components: {
7180
ReactiveBase,
7281
ReactiveList,

‎packages/vue/examples/with-tailwind-css/src/components/HelloWorld.vue‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

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

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

6-
const app = createApp(App);
7-
app.mount('#app'); // Vue Instance - Root component
5+
createApp(App).mount('#app')

0 commit comments

Comments
 (0)