Skip to content

Commit 2580a90

Browse files
krasalerkrasaler
committed
feat: add tailwind
1 parent 6ba1bb0 commit 2580a90

9 files changed

+3623
-1861
lines changed

‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ indent_size = 2
77
end_of_line = lf
88
charset = utf-8
99
trim_trailing_whitespace = true
10-
insert_final_newline = true
10+
# insert_final_newline = true
1111

1212
[*.md]
1313
trim_trailing_whitespace = false

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ yarn-error.log
77

88
# Nuxt build
99
.nuxt
10+
.yalc
1011

1112
# Nuxt generate
1213
dist
@@ -20,3 +21,5 @@ graphql.*.json
2021
*.cache
2122
*.env
2223

24+
yalc.lock
25+
sw.js

‎nuxt.config.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ require('dotenv').config()
22
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
33

44
export default {
5-
mode: 'universal',
65
env: {
76
FEATURED_PRODUCT: process.env.FEATURED_PRODUCT
87
},
@@ -35,15 +34,24 @@ export default {
3534
],
3635
build: {
3736
babel: {
38-
plugins: ['lodash']
37+
plugins: ['lodash', 'preval']
3938
},
4039
splitChunks: {
4140
layouts: true,
4241
pages: true,
4342
commons: true
4443
},
45-
transpile: [/vuefront/],
46-
extractCSS: true,
44+
postcss: {
45+
preset: {
46+
features: {
47+
// Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
48+
"focus-within-pseudo-class": false
49+
}
50+
},
51+
plugins: {
52+
'tailwindcss': {}
53+
}
54+
},
4755
plugins: [
4856
new LodashModuleReplacementPlugin({
4957
shorthands: true

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
},
1313
"dependencies": {
1414
"@nuxtjs/dotenv": "^1.4.1",
15-
"@nuxtjs/pwa": "^3.0.0-beta.20",
15+
"@nuxtjs/pwa": "^3.2.2",
1616
"@vuefront/checkout-app": "^0.1.3",
17-
"cookie-universal-nuxt": "^2.1.2",
18-
"nuxt": "2.11.0",
19-
"vuefront": "vuefront/vuefront",
20-
"vuefront-nuxt": "vuefront/vuefront-nuxt"
17+
"cookie-universal-nuxt": "^2.1.4",
18+
"nuxt": "2.14.7",
19+
"vuefront-nuxt": "vuefront/vuefront-nuxt#tailwind"
2120
},
2221
"devDependencies": {
2322
"@babel/runtime-corejs2": "^7.8.4",
2423
"babel-plugin-lodash": "^3.3.4",
24+
"babel-plugin-preval": "^5.0.0",
2525
"core-js": "2",
2626
"lodash-webpack-plugin": "^0.11.5",
2727
"node-sass": "^4.13.1",

‎pages/component.vue

+280
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
<template>
2+
<vf-m-container class="mx-auto mb-8">
3+
<vf-a-heading class="text-center mt-4">EDIT STATE</vf-a-heading>
4+
<div class="text-center my-8">
5+
<vf-a-button color="danger" @click="state = !state">Change</vf-a-button>
6+
</div>
7+
<vf-a-heading class="text-center mt-4">BUTTON</vf-a-heading>
8+
<div class="text-center my-8">
9+
<vf-a-button v-for="(value, index) in colors" :key="index" :color="value">{{value}}</vf-a-button>
10+
</div>
11+
<div class="text-center my-8">
12+
<vf-a-button size="sm">Small Button</vf-a-button>
13+
<vf-a-button>Default Button</vf-a-button>
14+
<vf-a-button size="lg">Large Button</vf-a-button>
15+
</div>
16+
<div class="text-center my-8">
17+
<vf-a-button v-for="(value, index) in colors" :key="index" :color="value" rounded>{{value}}</vf-a-button>
18+
</div>
19+
<div class="text-center my-8">
20+
<vf-a-button disabled size="lg" color="primary">Disabled</vf-a-button>
21+
<vf-a-button disabled size="lg">Also Disabled</vf-a-button>
22+
</div>
23+
<div class="text-center my-8">
24+
<vf-a-button v-for="(value, index) in colors" :key="index" :color="value" rounded outline>{{value}}</vf-a-button>
25+
</div>
26+
<div class="text-center my-8">
27+
<vf-a-button animated-y>
28+
<template #hidden>
29+
Hidden
30+
</template>
31+
<template #visible>
32+
visible
33+
</template>
34+
</vf-a-button>
35+
</div>
36+
<div class="text-center my-8">
37+
<vf-a-button animated-x>
38+
<template #hidden>
39+
Hidden
40+
</template>
41+
<template #visible>
42+
visible
43+
</template>
44+
</vf-a-button>
45+
</div>
46+
<vf-a-heading class="text-center mt-4">ALERT</vf-a-heading>
47+
<div class="text-center my-8">
48+
<vf-a-alert v-for="(value, index) in colors" :key="index" :color="value" :show="true" dismissible>{{value}}</vf-a-alert>
49+
</div>
50+
<vf-a-heading class="text-center mt-4">BADGE</vf-a-heading>
51+
<div class="text-center my-8">
52+
<vf-a-badge v-for="(value, index) in colors" :key="index" :color="value">{{value}}</vf-a-badge>
53+
</div>
54+
<div class="text-center my-8">
55+
<vf-a-badge v-for="(value, index) in colors" :key="index" :color="value" rounded>{{value}}</vf-a-badge>
56+
</div>
57+
<vf-a-heading class="text-center mt-4">CHECKBOX</vf-a-heading>
58+
<div>
59+
<vf-a-checkbox
60+
id="checkbox-1"
61+
v-model="checkbox1"
62+
:state="state"
63+
name="checkbox-1"
64+
value="accepted"
65+
unchecked-value="not_accepted"
66+
>
67+
I accept the terms and use
68+
</vf-a-checkbox>
69+
70+
<div>State: <strong>{{ checkbox1 }}</strong></div>
71+
</div>
72+
<vf-a-heading class="text-center mt-4">CHECKBOX GROUP</vf-a-heading>
73+
<div>
74+
<vf-a-checkbox-group
75+
v-model="checkboxGroup1"
76+
:options="options"
77+
class="mb-3"
78+
:state="state"
79+
value-field="item"
80+
text-field="name"
81+
></vf-a-checkbox-group>
82+
<vf-a-checkbox-group
83+
v-model="checkboxGroup1"
84+
:options="options"
85+
class="mb-3"
86+
:state="state"
87+
value-field="item"
88+
text-field="name"
89+
stacked
90+
></vf-a-checkbox-group>
91+
<div class="mt-3">Selected: <strong>{{ checkboxGroup1 }}</strong></div>
92+
</div>
93+
<vf-a-heading class="text-center mt-4">DATEPICKER</vf-a-heading>
94+
<div class="text-center">
95+
<vf-a-datepicker :state="state"/>
96+
</div>
97+
<vf-a-heading class="text-center mt-4">INPUT</vf-a-heading>
98+
<vf-m-row class="my-1">
99+
<vf-m-col sm="2">
100+
<label for="input-small">Small:</label>
101+
</vf-m-col>
102+
<vf-m-col sm="10">
103+
<vf-a-input id="input-small" :state="state" size="sm" placeholder="Enter your name"></vf-a-input>
104+
</vf-m-col>
105+
</vf-m-row>
106+
107+
<vf-m-row class="my-1">
108+
<vf-m-col sm="2">
109+
<label for="input-default">Default:</label>
110+
</vf-m-col>
111+
<vf-m-col sm="10">
112+
<vf-a-input id="input-default" :state="state" placeholder="Enter your name"></vf-a-input>
113+
</vf-m-col>
114+
</vf-m-row>
115+
116+
<vf-m-row class="my-1">
117+
<vf-m-col sm="2">
118+
<label for="input-large">Large:</label>
119+
</vf-m-col>
120+
<vf-m-col sm="10">
121+
<vf-a-input id="input-large" :state="state" size="lg" placeholder="Enter your name"></vf-a-input>
122+
</vf-m-col>
123+
</vf-m-row>
124+
<vf-a-heading class="text-center mt-4">HEADING</vf-a-heading>
125+
<vf-a-heading level="1">h1. Bootstrap heading</vf-a-heading>
126+
<vf-a-heading level="2">h2. Bootstrap heading</vf-a-heading>
127+
<vf-a-heading level="3">h3. Bootstrap heading</vf-a-heading>
128+
<vf-a-heading level="4">h4. Bootstrap heading</vf-a-heading>
129+
<vf-a-heading level="5">h5. Bootstrap heading</vf-a-heading>
130+
<vf-a-heading level="6">h6. Bootstrap heading</vf-a-heading>
131+
<vf-a-heading class="text-center mt-4">PAGINATION</vf-a-heading>
132+
<div class="text-center mb-5">
133+
<vf-a-pagination v-model="page" :total-pages="50" :per-page="10"></vf-a-pagination>
134+
</div>
135+
<div class="mt-3 text-center">Page: <strong>{{ page }}</strong></div>
136+
<vf-a-heading class="text-center mt-4">RADIO</vf-a-heading>
137+
<div>
138+
<vf-a-radio
139+
id="radio-1"
140+
v-model="radio1"
141+
:state="state"
142+
name="radio-1"
143+
value="accepted"
144+
unchecked-value="not_accepted"
145+
>
146+
I accept the terms and use
147+
</vf-a-radio>
148+
149+
<div>State: <strong>{{ radio1 }}</strong></div>
150+
</div>
151+
<vf-a-heading class="text-center mt-4">RADIO GROUP</vf-a-heading>
152+
<div>
153+
<vf-a-radio-group
154+
v-model="radioGroup1"
155+
:options="options"
156+
class="mb-3"
157+
value-field="item"
158+
:state="state"
159+
text-field="name"
160+
></vf-a-radio-group>
161+
<vf-a-radio-group
162+
v-model="radioGroup1"
163+
:options="options"
164+
class="mb-3"
165+
:state="state"
166+
value-field="item"
167+
text-field="name"
168+
stacked
169+
></vf-a-radio-group>
170+
<div class="mt-3">Selected: <strong>{{ radioGroup1 }}</strong></div>
171+
</div>
172+
<vf-a-heading class="text-center mt-4">SELECT</vf-a-heading>
173+
<div>
174+
<vf-a-select v-model="select" :state="state" :options="options2"></vf-a-select>
175+
<vf-a-select v-model="select" :state="state" :options="options2" size="sm" class="mt-3"></vf-a-select>
176+
<div class="mt-3">Selected: <strong>{{ select }}</strong></div>
177+
</div>
178+
<vf-m-row class="my-1">
179+
<vf-m-col sm="2">
180+
<label for="input-small">Small:</label>
181+
</vf-m-col>
182+
<vf-m-col sm="10">
183+
<vf-a-select id="input-small" :state="state" size="sm" v-model="select" :options="options2"></vf-a-select>
184+
</vf-m-col>
185+
</vf-m-row>
186+
187+
<vf-m-row class="my-1">
188+
<vf-m-col sm="2">
189+
<label for="input-default">Default:</label>
190+
</vf-m-col>
191+
<vf-m-col sm="10">
192+
<vf-a-select id="input-default" :state="state" v-model="select" :options="options2"></vf-a-select>
193+
</vf-m-col>
194+
</vf-m-row>
195+
196+
<vf-m-row class="my-1">
197+
<vf-m-col sm="2">
198+
<label for="input-large">Large:</label>
199+
</vf-m-col>
200+
<vf-m-col sm="10">
201+
<vf-a-select id="input-large" :state="state" size="lg" v-model="select" :options="options2"></vf-a-select>
202+
</vf-m-col>
203+
</vf-m-row>
204+
<vf-a-heading class="text-center mt-4">TEXTAREA</vf-a-heading>
205+
<vf-a-textarea
206+
id="textarea-state"
207+
placeholder="Enter at least 10 characters"
208+
rows="3"
209+
></vf-a-textarea>
210+
<vf-m-row class="my-1">
211+
<vf-m-col sm="2">
212+
<label for="input-small">Small:</label>
213+
</vf-m-col>
214+
<vf-m-col sm="10">
215+
<vf-a-textarea id="input-small" :state="state" size="sm" placeholder="Enter your name"></vf-a-textarea>
216+
</vf-m-col>
217+
</vf-m-row>
218+
219+
<vf-m-row class="my-1">
220+
<vf-m-col sm="2">
221+
<label for="input-default">Default:</label>
222+
</vf-m-col>
223+
<vf-m-col sm="10">
224+
<vf-a-textarea id="input-default" :state="state" placeholder="Enter your name"></vf-a-textarea>
225+
</vf-m-col>
226+
</vf-m-row>
227+
228+
<vf-m-row class="my-1">
229+
<vf-m-col sm="2">
230+
<label for="input-large">Large:</label>
231+
</vf-m-col>
232+
<vf-m-col sm="10">
233+
<vf-a-textarea id="input-large" :state="state" size="lg" placeholder="Enter your name"></vf-a-textarea>
234+
</vf-m-col>
235+
</vf-m-row>
236+
<vf-a-heading class="text-center mt-4">TIMEPICKER</vf-a-heading>
237+
<div class="text-center">
238+
<vf-a-timepicker/>
239+
</div>
240+
</vf-m-container>
241+
</template>
242+
<script>
243+
export default {
244+
data() {
245+
return {
246+
checkbox1: false,
247+
radio1: false,
248+
radioGroup1: 'A',
249+
checkboxGroup1: [],
250+
select: null,
251+
page: 2,
252+
state: true,
253+
options2: [
254+
{ value: null, text: 'Please select an option' },
255+
{ value: 'a', text: 'This is First option' },
256+
{ value: 'b', text: 'Selected Option' },
257+
{ value: { C: '3PO' }, text: 'This is an option with object value' },
258+
{ value: 'd', text: 'This one is disabled', disabled: true }
259+
],
260+
options: [
261+
{ item: 'A', name: 'Option A' },
262+
{ item: 'B', name: 'Option B' },
263+
{ item: 'D', name: 'Option C', notEnabled: true },
264+
{ item: { d: 1 }, name: 'Option D' }
265+
],
266+
colors: [
267+
'primary',
268+
'secondary',
269+
'success',
270+
'info',
271+
'warning',
272+
'danger',
273+
'white',
274+
'light',
275+
'dark'
276+
]
277+
}
278+
}
279+
}
280+
</script>

0 commit comments

Comments
 (0)