Skip to content

Commit 0595b17

Browse files
nklaymanrstoenescu
nklayman
authored and
rstoenescu
committed
feat: add quasar v1 support (#14)
* feat: add support for quasar v1, closes #12 * fix: remove ide file
1 parent d87b085 commit 0595b17

File tree

12 files changed

+438
-94
lines changed

12 files changed

+438
-94
lines changed

‎generator/index.js‎

Lines changed: 116 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
const
2-
fs = require('fs'),
1+
const fs = require('fs'),
32
extendPluginOptions = require('../lib/extendPluginOptions'),
43
extendBabel = require('../lib/extendBabel')
54

@@ -18,39 +17,58 @@ Enjoy! - Quasar Team
1817
`
1918

2019
module.exports = (api, opts, rootOpts) => {
21-
const
22-
components = [
23-
'QBtn',
24-
'QLayout',
25-
'QLayoutHeader',
26-
'QLayoutDrawer',
27-
'QPage',
28-
'QPageContainer',
29-
'QToolbar',
30-
'QToolbarTitle',
31-
'QList',
32-
'QListHeader',
33-
'QItemSeparator',
34-
'QItem',
35-
'QItemSide',
36-
'QItemMain',
37-
],
20+
const components = opts.quasar.v1
21+
? [
22+
'QLayout',
23+
'QHeader',
24+
'QDrawer',
25+
'QPageContainer',
26+
'QPage',
27+
'QToolbar',
28+
'QToolbarTitle',
29+
'QBtn',
30+
'QIcon',
31+
'QList',
32+
'QItem',
33+
'QItemSection',
34+
'QItemLabel'
35+
]
36+
: [
37+
'QBtn',
38+
'QLayout',
39+
'QLayoutHeader',
40+
'QLayoutDrawer',
41+
'QPage',
42+
'QPageContainer',
43+
'QToolbar',
44+
'QToolbarTitle',
45+
'QList',
46+
'QListHeader',
47+
'QItemSeparator',
48+
'QItem',
49+
'QItemSide',
50+
'QItemMain'
51+
],
3852
directives = [],
3953
plugins = []
4054

41-
const
42-
tsPath = api.resolve('./src/main.ts'),
55+
const tsPath = api.resolve('./src/main.ts'),
4356
jsPath = api.resolve('./src/main.js'),
4457
hasTS = fs.existsSync(tsPath)
45-
58+
const dependencies = opts.quasar.v1
59+
? {
60+
quasar: '^1.0.0-beta.1',
61+
'@quasar/extras': '^1.0.0'
62+
}
63+
: {
64+
'quasar-framework': '^0.17.0',
65+
'quasar-extras': '^2.0.4'
66+
}
4667
const deps = {
47-
dependencies: {
48-
'quasar-framework': '^0.17.0',
49-
'quasar-extras': '^2.0.4'
50-
},
68+
dependencies,
5169
devDependencies: {
5270
'babel-plugin-transform-imports': '1.5.0',
53-
'stylus': '^0.54.5',
71+
stylus: '^0.54.5',
5472
'stylus-loader': '^3.0.2'
5573
}
5674
}
@@ -72,8 +90,13 @@ module.exports = (api, opts, rootOpts) => {
7290
if (opts.quasar.all) {
7391
pluginOptions.quasar.importAll = true
7492
}
75-
76-
transpileDependencies.push(/[\\/]node_modules[\\/]quasar-framework[\\/]/)
93+
if (opts.quasar.v1) {
94+
pluginOptions.quasar.v1 = true
95+
}
96+
const transpileRegex = opts.quasar.v1
97+
? /[\\/]node_modules[\\/]quasar[\\/]/
98+
: /[\\/]node_modules[\\/]quasar-framework[\\/]/
99+
transpileDependencies.push(transpileRegex)
77100

78101
return { pluginOptions, transpileDependencies }
79102
})
@@ -83,26 +106,30 @@ module.exports = (api, opts, rootOpts) => {
83106
api.render('./templates/rtl')
84107
}
85108
if (opts.quasar.replaceComponents) {
86-
const
87-
extension = hasTS ? 'ts' : 'js',
109+
const extension = hasTS ? 'ts' : 'js',
88110
routerFile = api.resolve(`src/router.${extension}`),
89111
hasRouter = fs.existsSync(routerFile)
90112

91-
api.render(`./templates/with${hasRouter ? '' : 'out'}-router`, opts)
113+
api.render(`./templates/with${hasRouter ? '' : 'out'}-router-base`, opts)
114+
api.render(
115+
`./templates/with${hasRouter ? '' : 'out'}-router-${
116+
opts.quasar.v1 ? 'v1' : 'legacy'
117+
}`,
118+
opts
119+
)
92120
if (hasRouter) {
93121
api.render(`./templates/with-router-${extension}`)
94122
}
95123
}
96124

97125
api.onCreateComplete(() => {
98126
if (!opts.quasar.all) {
99-
extendBabel(api, opts.quasar.theme)
127+
extendBabel(api, opts.quasar)
100128
}
101129

102130
let lines = '\n'
103131

104-
const
105-
hasLang = opts.quasar.i18n !== 'en-us',
132+
const hasLang = opts.quasar.i18n !== 'en-us',
106133
hasIconSet = opts.quasar.iconSet !== 'material-icons'
107134

108135
if (!opts.quasar.features.includes(opts.quasar.iconSet)) {
@@ -112,29 +139,63 @@ module.exports = (api, opts, rootOpts) => {
112139
lines += `\nimport './styles/quasar.styl'`
113140

114141
if (opts.quasar.features.includes('ie')) {
115-
lines += `\nimport 'quasar-framework/dist/quasar.ie.polyfills'`
142+
lines += `\nimport 'quasar${
143+
opts.quasar.v1 ? '' : '-framework'
144+
}/dist/quasar.ie.polyfills'`
116145
}
146+
const v1IconsMap = {
147+
'material-icons': 'material-icons',
148+
ionicons: 'ionicons-v4',
149+
fontawesome: 'fontawesome-v5',
150+
mdi: 'mdi-v3'
151+
}
152+
// Return either legacy or v1 name
153+
const getIconSetName = name => (opts.quasar.v1 ? v1IconsMap[name] : name)
117154
if (hasIconSet) {
118-
lines += `\nimport iconSet from 'quasar-framework/icons/${opts.quasar.iconSet}'`
155+
lines += `\nimport iconSet from 'quasar${
156+
opts.quasar.v1 ? '' : '-framework'
157+
}/${opts.quasar.v1 ? 'icon-set' : 'icons'}/${getIconSetName(
158+
opts.quasar.iconSet
159+
)}'`
119160
}
120161
if (hasLang) {
121-
lines += `\nimport lang from 'quasar-framework/i18n/${opts.quasar.i18n}'`
162+
lines += `\nimport lang from 'quasar${
163+
opts.quasar.v1 ? '' : '-framework'
164+
}/i18n/${opts.quasar.i18n}'`
122165
}
166+
const iconSets = [
167+
'material-icons',
168+
'fontawesome-v5',
169+
'mdi-v3',
170+
'ionicons-v4',
171+
'fontawesome',
172+
'mdi',
173+
'ionicons'
174+
]
123175
opts.quasar.features
124176
.filter(feat => feat !== 'ie')
125177
.forEach(feat => {
126-
lines += `\nimport 'quasar-extras/${feat}'`
178+
if (iconSets.includes(feat)) feat = getIconSetName(feat)
179+
lines += `\nimport '${
180+
opts.quasar.v1 ? '@quasar/extras' : 'quasar-extras'
181+
}/${feat}${
182+
// Path must be iconpack/iconpack.css with @quasar/extras
183+
iconSets.includes(feat) && opts.quasar.v1 ? `/${feat}.css` : ''
184+
}'`
127185
})
128186

129187
// build import
130188
lines += `\nimport `
131189
if (opts.quasar.all) {
132190
lines += `Quasar`
133-
}
134-
else {
191+
} else {
135192
lines += `{\n Quasar, `
136-
components.concat(directives).concat(plugins)
137-
.forEach(part => { lines += `\n ${part},` })
193+
components
194+
.concat(directives)
195+
.concat(plugins)
196+
.forEach(part => {
197+
lines += `\n ${part},`
198+
})
138199
lines += `\n}`
139200
}
140201
lines += ` from 'quasar'`
@@ -145,19 +206,22 @@ module.exports = (api, opts, rootOpts) => {
145206

146207
// if not 'all' we want to include specific defaults
147208
if (!opts.quasar.all) {
148-
lines+= ',\n components: {'
149-
components
150-
.forEach(part => { lines += `\n ${part},` })
209+
lines += ',\n components: {'
210+
components.forEach(part => {
211+
lines += `\n ${part},`
212+
})
151213
lines += `\n }`
152214

153-
lines+= ',\n directives: {'
154-
directives
155-
.forEach(part => { lines += `\n ${part},` })
215+
lines += ',\n directives: {'
216+
directives.forEach(part => {
217+
lines += `\n ${part},`
218+
})
156219
lines += `\n }`
157220

158-
lines+= ',\n plugins: {'
159-
plugins
160-
.forEach(part => { lines += `\n ${part},` })
221+
lines += ',\n plugins: {'
222+
plugins.forEach(part => {
223+
lines += `\n ${part},`
224+
})
161225
lines += `\n }`
162226
}
163227

‎generator/templates/with-router/src/App.vue‎ renamed to ‎generator/templates/with-router-base/src/App.vue‎

File renamed without changes.

‎generator/templates/with-router/src/views/About.vue‎ renamed to ‎generator/templates/with-router-base/src/views/About.vue‎

File renamed without changes.

‎generator/templates/with-router/src/views/Home.vue‎ renamed to ‎generator/templates/with-router-base/src/views/Home.vue‎

File renamed without changes.

‎generator/templates/with-router/src/layouts/Default.vue‎ renamed to ‎generator/templates/with-router-legacy/src/layouts/Default.vue‎

File renamed without changes.

‎generator/templates/with-router-v1/src/layouts/Default.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<q-layout view="lHh Lpr lFf">
3+
<q-header elevated class="glossy">
4+
<q-toolbar>
5+
<q-btn
6+
flat
7+
dense
8+
round
9+
@click="leftDrawerOpen = !leftDrawerOpen"
10+
aria-label="Menu"
11+
>
12+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>menu<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-bars<% } else if (quasar.iconSet === "ionicons") { %>ion-android-menu<% } else if (quasar.iconSet === "mdi") { %>mdi-menu<% } %>" />
13+
</q-btn>
14+
15+
<q-toolbar-title>
16+
Quasar App
17+
</q-toolbar-title>
18+
19+
<div>Quasar v{{ $q.version }}</div>
20+
</q-toolbar>
21+
</q-header>
22+
23+
<q-drawer
24+
v-model="leftDrawerOpen"
25+
bordered
26+
content-class="bg-grey-2"
27+
>
28+
<q-list
29+
no-border
30+
link
31+
inset-delimiter
32+
>
33+
<q-list no-border link inset-delimiter>
34+
<q-item-label header>Navigation</q-item-label>
35+
<q-item to="/" exact>
36+
<q-item-section avatar>
37+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>home<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-home<% } else if (quasar.iconSet === "ionicons") { %>ion-home<% } else if (quasar.iconSet === "mdi") { %>mdi-home<% } %>" />
38+
</q-item-section>
39+
<q-item-section>
40+
<q-item-label>Home</q-item-label>
41+
</q-item-section>
42+
</q-item>
43+
<q-item to="/about" exact>
44+
<q-item-section avatar>
45+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>info<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-info<% } else if (quasar.iconSet === "ionicons") { %>ion-information-circle-outline<% } else if (quasar.iconSet === "mdi") { %>mdi-information-outline<% } %>" />
46+
</q-item-section>
47+
<q-item-section>
48+
<q-item-label>About</q-item-label>
49+
</q-item-section>
50+
</q-item>
51+
52+
<q-item-label header>Essential Links</q-item-label>
53+
<q-item clickable tag="a" target="_blank" href="http://v1.quasar-framework.org">
54+
<q-item-section avatar>
55+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>school<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-graduation-cap<% } else if (quasar.iconSet === "ionicons") { %>ion-school<% } else if (quasar.iconSet === "mdi") { %>mdi-school<% } %>" />
56+
</q-item-section>
57+
<q-item-section>
58+
<q-item-label>Docs</q-item-label>
59+
<q-item-label caption>v1.quasar-framework.org</q-item-label>
60+
</q-item-section>
61+
</q-item>
62+
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
63+
<q-item-section avatar>
64+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>code<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-code<% } else if (quasar.iconSet === "ionicons") { %>ion-code<% } else if (quasar.iconSet === "mdi") { %>mdi-code-tags<% } %>" />
65+
</q-item-section>
66+
<q-item-section>
67+
<q-item-label>Github</q-item-label>
68+
<q-item-label caption>github.com/quasarframework</q-item-label>
69+
</q-item-section>
70+
</q-item>
71+
<q-item clickable tag="a" target="_blank" href="http://chat.quasar-framework.org">
72+
<q-item-section avatar>
73+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>chat<% } else if (quasar.iconSet === "fontawesome") { %>fas fa-comments<% } else if (quasar.iconSet === "ionicons") { %>ion-chatbubbles<% } else if (quasar.iconSet === "mdi") { %>mdi-message-text<% } %>" />
74+
</q-item-section>
75+
<q-item-section>
76+
<q-item-label>Discord Chat Channel</q-item-label>
77+
<q-item-label caption>chat.quasar-framework.org</q-item-label>
78+
</q-item-section>
79+
</q-item>
80+
<q-item clickable tag="a" target="_blank" href="https://forum.quasar-framework.org">
81+
<q-item-section avatar>
82+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>forum<% } else if (quasar.iconSet === "fontawesome") { %>far fa-clipboard<% } else if (quasar.iconSet === "ionicons") { %>ion-chatboxes<% } else if (quasar.iconSet === "mdi") { %>mdi-forum<% } %>" />
83+
</q-item-section>
84+
<q-item-section>
85+
<q-item-label>Forum</q-item-label>
86+
<q-item-label caption>forum.quasar-framework.org</q-item-label>
87+
</q-item-section>
88+
</q-item>
89+
<q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
90+
<q-item-section avatar>
91+
<q-icon name="<% if (quasar.iconSet === "material-icons") { %>rss_feed<% } else if (quasar.iconSet === "fontawesome") { %>fab fa-twitter<% } else if (quasar.iconSet === "ionicons") { %>ion-logo-twitter<% } else if (quasar.iconSet === "mdi") { %>mdi-twitter<% } %>" />
92+
</q-item-section>
93+
<q-item-section>
94+
<q-item-label>Twitter</q-item-label>
95+
<q-item-label caption>@quasarframework</q-item-label>
96+
</q-item-section>
97+
</q-item>
98+
</q-list>
99+
</q-list>
100+
</q-drawer>
101+
102+
<q-page-container>
103+
<router-view />
104+
</q-page-container>
105+
</q-layout>
106+
</template>
107+
108+
<script>
109+
import { openURL } from 'quasar'
110+
111+
export default {
112+
name: 'LayoutDefault',
113+
data () {
114+
return {
115+
leftDrawerOpen: this.$q.platform.is.desktop
116+
}
117+
},
118+
methods: {
119+
openURL
120+
}
121+
}
122+
</script>
123+
124+
<style>
125+
</style>

‎generator/templates/without-router/src/components/HelloWorld.vue‎ renamed to ‎generator/templates/without-router-base/src/components/HelloWorld.vue‎

File renamed without changes.

‎generator/templates/without-router/src/App.vue‎ renamed to ‎generator/templates/without-router-legacy/src/App.vue‎

File renamed without changes.

0 commit comments

Comments
 (0)