Skip to content
This repository was archived by the owner on May 8, 2025. It is now read-only.

Commit 4960ef4

Browse files
jacekkarczmarczykjacekkarczmarczyk
authored
feat: icon/language choice, customProperties, update vuetify to 1.2 (#28)
* feat: icon choice * bump vuetify to 1.2.0, customProperties * sets proper iconfont in vuetify options * added font awesome 4 * fixes * spaces * fixed icons * fixed icons * update vuetify.ts * fixed indentation * removed getMain, extracted fonts to a separate file, added roboto as a dep * passing opts to template * fix: index of last <link> * added language choice, simplified templates * updated prompt text * tweaks * refactor * added dutch locale * removed doubled package name * fix: locale location (js/ts) * ingore line in babel config * fix: lint errors * feat: set lang in <html> * feat: added farsi language * feat: added catalan language * fixed file mode * removed trailing comma * added vue.config.js * vuetify 1.2.0
1 parent 54df305 commit 4960ef4

File tree

12 files changed

+490
-293
lines changed

12 files changed

+490
-293
lines changed

‎generator/helpers.js‎

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

‎generator/index.js‎

Lines changed: 17 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,23 @@
11
module.exports = (api, opts, rootOpts) => {
2-
const helpers = require('./helpers')(api)
3-
4-
api.extendPackage({
5-
dependencies: {
6-
vuetify: "^1.1.11"
7-
}
8-
})
9-
10-
if (opts.useAlaCarte) {
11-
api.extendPackage({
12-
devDependencies: {
13-
"babel-plugin-transform-imports": "^1.4.1",
14-
"stylus": "^0.54.5",
15-
"stylus-loader": "^3.0.1",
16-
}
17-
})
18-
}
19-
20-
if (opts.usePolyfill) {
21-
api.extendPackage({
22-
devDependencies: {
23-
"@babel/polyfill": "^7.0.0-beta.49",
24-
}
25-
})
26-
}
27-
28-
if (api.hasPlugin('electron-builder') === true) {
29-
// material icons pkg for electron
30-
api.extendPackage({
31-
devDependencies: {
32-
"material-design-icons-iconfont": "^3.0.3",
33-
}
34-
})
35-
36-
try {
37-
api.injectImports(helpers.getMain(),
38-
`import 'material-design-icons-iconfont/dist/material-design-icons.css'`
39-
)
40-
} catch(e) {
41-
console.error(e)
42-
}
43-
}
44-
45-
46-
// Render vuetify plugin file
47-
api.render(api.hasPlugin('typescript') ? {
48-
'./src/plugins/vuetify.ts': './templates/default/src/plugins/vuetify.ts'
49-
} : {
50-
'./src/plugins/vuetify.js': './templates/default/src/plugins/vuetify.js'
51-
}, opts)
52-
53-
// Render files if we're replacing
54-
const fs = require('fs')
55-
const routerPath = api.resolve('./src/router.js')
56-
opts.router = fs.existsSync(routerPath)
57-
58-
if (opts.replaceComponents) {
59-
const files = {
60-
'./src/App.vue': './templates/default/src/App.vue',
61-
'./src/assets/logo.png': './templates/default/src/assets/logo.png'
62-
}
63-
64-
if (opts.router) {
65-
files['./src/views/Home.vue'] = './templates/default/src/views/Home.vue'
66-
} else {
67-
api.render('./templates/hw')
68-
}
69-
70-
api.render(files, opts)
71-
}
2+
const alaCarte = require('./tools/alaCarte')
3+
const fonts = require('./tools/fonts')
4+
const polyfill = require('./tools/polyfill')
5+
const vuetify = require('./tools/vuetify')
6+
7+
vuetify.addDependencies(api)
8+
opts.useAlaCarte && alaCarte.addDependencies(api)
9+
opts.usePolyfill && polyfill.addDependencies(api)
10+
opts.installFonts && fonts.addDependencies(api, opts.iconFont)
11+
opts.installFonts && fonts.addImports(api, opts.iconFont)
12+
vuetify.renderFiles(api, opts)
7213

7314
// adapted from https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/index.js#L68-L91
7415
api.onCreateComplete(() => {
75-
// Modify main.js
76-
helpers.updateFile(helpers.getMain(), lines => {
77-
const vueImportIndex = lines.findIndex(line => line.match(/^import Vue/))
78-
79-
lines.splice(vueImportIndex + 1, 0, 'import \'./plugins/vuetify\'')
80-
81-
return lines
82-
})
83-
84-
// Add polyfill
85-
if (opts.usePolyfill) {
86-
helpers.updateBabelConfig(cfg => {
87-
if (!cfg.presets) return cfg
88-
89-
const vuePresetIndex = cfg.presets.findIndex(p => Array.isArray(p) ? p[0] === '@vue/app' : p === '@vue/app')
90-
const isArray = Array.isArray(cfg.presets[vuePresetIndex])
91-
92-
if (vuePresetIndex < 0) return cfg
93-
94-
if (isArray) {
95-
cfg.presets[vuePresetIndex][1]['useBuiltIns'] = 'entry'
96-
} else {
97-
cfg.presets[vuePresetIndex] = [
98-
'@vue/app',
99-
{
100-
useBuiltIns: 'entry'
101-
}
102-
]
103-
}
104-
105-
return cfg
106-
})
107-
108-
helpers.updateFile(helpers.getMain(), lines => {
109-
if (!lines.find(l => l.match(/^(import|require).*@babel\/polyfill.*$/))) {
110-
lines.unshift('import \'@babel/polyfill\'')
111-
}
112-
113-
return lines
114-
})
115-
}
116-
117-
// If a-la-carte, update babel
118-
if (opts.useAlaCarte) {
119-
helpers.updateBabelConfig(cfg => {
120-
if (cfg.plugins === undefined) {
121-
cfg.plugins = []
122-
}
123-
124-
cfg.plugins.push([
125-
'transform-imports',
126-
{
127-
vuetify: {
128-
transform: 'vuetify/es5/components/${member}',
129-
preventFullImport: true
130-
}
131-
}
132-
])
133-
134-
return cfg
135-
})
136-
}
137-
138-
// Add Material Icons (unless electron)
139-
if(api.hasPlugin('electron-builder') === false) {
140-
const indexPath = api.resolve('./public/index.html')
141-
142-
let content = fs.readFileSync(indexPath, { encoding: 'utf8' })
143-
144-
const lines = content.split(/\r?\n/g).reverse()
145-
146-
const lastLink = lines.findIndex(line => line.match(/^\s*<link/))
147-
lines[lastLink] += '\n <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">'
148-
149-
content = lines.reverse().join('\n')
150-
fs.writeFileSync(indexPath, content, { encoding: 'utf8' })
151-
}
16+
vuetify.addImports(api)
17+
opts.usePolyfill && polyfill.updateBabelConfig(api)
18+
opts.usePolyfill && polyfill.addImports(api)
19+
opts.useAlaCarte && alaCarte.updateBabelConfig(api)
20+
!opts.installFonts && fonts.addLinks(api, opts.iconFont)
21+
vuetify.setHtmlLang(api, opts.locale)
15222
})
15323
}

‎generator/templates/default/src/App.vue‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,50 @@
3030
>
3131
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
3232
<v-btn icon @click.stop="miniVariant = !miniVariant">
33+
<%_ if (options.iconFont === 'md') { _%>
3334
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
35+
<%_ } else if (options.iconFont === 'mdi') { _%>
36+
<v-icon v-html="miniVariant ? 'mdi-chevron-right' : 'mdi-chevron-left'"></v-icon>
37+
<%_ } else if (options.iconFont === 'fa') { _%>
38+
<v-icon v-html="miniVariant ? 'fas fa-chevron-right' : 'fas fa-chevron-left'"></v-icon>
39+
<%_ } else if (options.iconFont === 'fa4') { _%>
40+
<v-icon v-html="miniVariant ? 'fa-chevron-right' : 'fa-chevron-left'"></v-icon>
41+
<%_ } _%>
3442
</v-btn>
3543
<v-btn icon @click.stop="clipped = !clipped">
44+
<%_ if (options.iconFont === 'md') { _%>
3645
<v-icon>web</v-icon>
46+
<%_ } else if (options.iconFont === 'mdi') { _%>
47+
<v-icon>mdi-web</v-icon>
48+
<%_ } else if (options.iconFont === 'fa') { _%>
49+
<v-icon>fas fa-globe</v-icon>
50+
<%_ } else if (options.iconFont === 'fa4') { _%>
51+
<v-icon>fa-globe</v-icon>
52+
<%_ } _%>
3753
</v-btn>
3854
<v-btn icon @click.stop="fixed = !fixed">
39-
<v-icon>remove</v-icon>
55+
<%_ if (options.iconFont === 'md') { _%>
56+
<v-icon>web</v-icon>
57+
<%_ } else if (options.iconFont === 'mdi') { _%>
58+
<v-icon>mdi-minus</v-icon>
59+
<%_ } else if (options.iconFont === 'fa') { _%>
60+
<v-icon>fas fa-minus</v-icon>
61+
<%_ } else if (options.iconFont === 'fa4') { _%>
62+
<v-icon>fa-minus</v-icon>
63+
<%_ } _%>
4064
</v-btn>
4165
<v-toolbar-title v-text="title"></v-toolbar-title>
4266
<v-spacer></v-spacer>
4367
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
68+
<%_ if (options.iconFont === 'md') { _%>
4469
<v-icon>menu</v-icon>
70+
<%_ } else if (options.iconFont === 'mdi') { _%>
71+
<v-icon>mdi-menu</v-icon>
72+
<%_ } else if (options.iconFont === 'fa') { _%>
73+
<v-icon>fas fa-bars</v-icon>
74+
<%_ } else if (options.iconFont === 'fa4') { _%>
75+
<v-icon>fa-bars</v-icon>
76+
<%_ } _%>
4577
</v-btn>
4678
</v-toolbar>
4779
<v-content>
@@ -61,7 +93,15 @@
6193
<v-list>
6294
<v-list-tile @click="right = !right">
6395
<v-list-tile-action>
96+
<%_ if (options.iconFont === 'md') { _%>
6497
<v-icon>compare_arrows</v-icon>
98+
<%_ } else if (options.iconFont === 'mdi') { _%>
99+
<v-icon>mdi-arrows-left-right-bold-outline</v-icon>
100+
<%_ } else if (options.iconFont === 'fa') { _%>
101+
<v-icon>fas fa-exchange-alt</v-icon>
102+
<%_ } else if (options.iconFont === 'fa4') { _%>
103+
<v-icon>fa-exchange</v-icon>
104+
<%_ } _%>
65105
</v-list-tile-action>
66106
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
67107
</v-list-tile>
@@ -91,7 +131,15 @@ export default {
91131
drawer: true,
92132
fixed: false,
93133
items: [{
134+
<%_ if (options.iconFont === 'md') { _%>
94135
icon: 'bubble_chart',
136+
<%_ } else if (options.iconFont === 'mdi') { _%>
137+
icon: 'mdi-chart-bubble',
138+
<%_ } else if (options.iconFont === 'fa') { _%>
139+
icon: 'fas fa-shapes',
140+
<%_ } else if (options.iconFont === 'fa4') { _%>
141+
icon: 'fa-bullseye',
142+
<%_ } _%>
95143
title: 'Inspire'
96144
}],
97145
miniVariant: false,

0 commit comments

Comments
 (0)