Skip to content

Commit 3c72530

Browse files
hawkeye64hawkeye64
committed
feat(ui): fixes, perf, build system
1 parent 01ca4ff commit 3c72530

File tree

14 files changed

+77
-52
lines changed

14 files changed

+77
-52
lines changed

‎ui/README.md‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -92,19 +92,25 @@ If you need the RTL variant of the CSS, then go for the following (instead of th
9292
<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
9393
```
9494

95-
For UMD variants, there is also a couple of caveats:
96-
1. You must load the Quasar icon set you would like to use:
95+
For **UMD** variants only, there is also a caveat:
9796

98-
```html
99-
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/icon-set/material-icons.umd.min.js"></script>
100-
```
101-
102-
2. You must also load, in conjunction, the QIconPicker icon set that matches the Quasar icon set:
97+
You must **also** load the QIconPicker icon set for the icon font(s) that you have loaded:
10398

10499
```html
105100
<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>
106101
```
107102

103+
Choices are:
104+
1. eva-icons.umd.js
105+
2. fontawesome-v5.umd.js
106+
3. ionicons-v4.umd.js
107+
4. material-icons-outlined.umd.js
108+
5. material-icons-round.umd.js
109+
6. material-icons-sharp.umd.js
110+
7. material-icons.umd.js
111+
8. mdi-v4-outlined.umd.js
112+
9. themify.umd.js
113+
108114
### UMD Example
109115
```html
110116
<!DOCTYPE html>
@@ -192,7 +198,7 @@ For UMD variants, there is also a couple of caveats:
192198
</html>
193199
```
194200

195-
TBD: [UMD example on Codepen](https://codepen.io/Hawkeye64/pen/RwwwKQL)
201+
[UMD Example on Codepen](https://codepen.io/Hawkeye64/pen/vYYYewG)
196202

197203
# Building the Projects
198204

‎ui/build/icons/build.eva.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
const fs = require('fs')
21
const path = require('path')
2+
const { green, blue } = require('chalk')
3+
const { readFile, writeFile } = require('../utils')
34

45
const name = 'eva-icons'
56
const outputLocation = `../../src/component/icon-set/${name}.js`
@@ -8,7 +9,7 @@ let blacklisted = [
89
]
910

1011
const location = require.resolve('@quasar/extras/eva-icons/eva-icons.css')
11-
const fileContents = fs.readFileSync(location, 'utf8')
12+
const fileContents = readFile(location)
1213

1314
fileContents
1415
.split('\n')
@@ -25,7 +26,7 @@ fileContents
2526
})
2627

2728
let output = 'export default {\n'
28-
output += ` name: ${name},\n`
29+
output += ` name: '${name}',\n`
2930
output += ' icons: [\n'
3031

3132
icons.forEach((icon, index) => {
@@ -35,5 +36,5 @@ icons.forEach((icon, index) => {
3536
output += ' ]\n'
3637
output += '}\n'
3738

38-
fs.writeFileSync(path.resolve(__dirname, outputLocation), output, 'utf8')
39-
console.log(`Ion Icons generation: Done - count: ${icons.length}`)
39+
writeFile(path.resolve(__dirname, outputLocation), output)
40+
console.log(`${blue('[icon]')} ${green(name + ':')} ${icons.length} generated`)

‎ui/build/icons/build.fontawesome.js‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
be parsing. So, we open the old fontawesome-v5.js file (which was
66
made for web, not node), read it in, make adjustments, and eval it
77
(yeah I know, eval bad). Then we make a map of fonts and the
8-
prefixes to we can add the prefix back. If it's a new font, we make
8+
prefixes so we can add the prefix back. If it's a new font, we make
99
the prefix '---' so we can search the file for it and hand-curate
10-
the prefix manually. Then, we have a fiished file.
10+
the prefix manually. Then, we have a finished file.
1111
*/
12-
const fs = require('fs')
1312
const path = require('path')
13+
const { green, blue } = require('chalk')
14+
const { readFile, writeFile } = require('../utils')
1415

1516
const name = 'fontawesome-v5'
1617
const inputLocation = `../../src/component/icon-set/${name}.js`
@@ -21,7 +22,7 @@ let blacklisted = [
2122
'fa-font-awesome-logo-full'
2223
]
2324

24-
let fa = fs.readFileSync(path.resolve(__dirname, inputLocation), 'utf8')
25+
let fa = readFile(path.resolve(__dirname, inputLocation))
2526
fa = fa.split('\n')
2627
fa.shift()
2728
fa.shift()
@@ -38,7 +39,7 @@ fa.forEach(f => {
3839
})
3940

4041
const location = require.resolve('@quasar/extras/fontawesome-v5/fontawesome-v5.css')
41-
const fileContents = fs.readFileSync(location, 'utf8')
42+
const fileContents = readFile(location)
4243

4344
fileContents
4445
.split('\n')
@@ -58,16 +59,16 @@ fileContents
5859
}
5960
})
6061

61-
let output = 'export default {\n'
62-
output += ` name: ${name},\n`
63-
output += ' icons: [\n'
62+
let output = 'export default {\n'
63+
output += ` name: '${name}',\n`
64+
output += ' icons: [\n'
6465

65-
icons.forEach((icon, index) => {
66-
output += ` { name: '${icon}' },\n`
67-
})
66+
icons.forEach((icon, index) => {
67+
output += ` { name: '${icon}' },\n`
68+
})
6869

69-
output += ' ]\n'
70-
output += '}\n'
70+
output += ' ]\n'
71+
output += '}\n'
7172

72-
fs.writeFileSync(path.resolve(__dirname, outputLocation), output, 'utf8')
73-
console.log(`Fontawesome v5 Icons generation: Done - count: ${icons.length}`)
73+
writeFile(path.resolve(__dirname, outputLocation), output)
74+
console.log(`${blue('[icon]')} ${green(name + ':')} ${icons.length} generated`)

‎ui/build/icons/build.ion.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
const fs = require('fs')
21
const path = require('path')
2+
const { green, blue } = require('chalk')
3+
const { readFile, writeFile } = require('../utils')
34

45
const name = 'ionicons-v4'
56
const outputLocation = `../../src/component/icon-set/${name}.js`
@@ -9,7 +10,7 @@ let blacklisted = [
910
]
1011

1112
const location = require.resolve('@quasar/extras/ionicons-v4/ionicons-v4.css')
12-
const fileContents = fs.readFileSync(location, 'utf8')
13+
const fileContents = readFile(location)
1314

1415
fileContents
1516
.split('\n')
@@ -26,7 +27,7 @@ fileContents
2627
})
2728

2829
let output = 'export default {\n'
29-
output += ` name: ${name},\n`
30+
output += ` name: '${name}',\n`
3031
output += ' icons: [\n'
3132

3233
icons.forEach((icon, index) => {
@@ -36,5 +37,5 @@ icons.forEach((icon, index) => {
3637
output += ' ]\n'
3738
output += '}\n'
3839

39-
fs.writeFileSync(path.resolve(__dirname, outputLocation), output, 'utf8')
40-
console.log(`Ion Icons generation: Done - count: ${icons.length}`)
40+
writeFile(path.resolve(__dirname, outputLocation), output)
41+
console.log(`${blue('[icon]')} ${green(name + ':')} ${icons.length} generated`)

‎ui/build/icons/build.mdi.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
const fs = require('fs')
21
const path = require('path')
2+
const { green, blue } = require('chalk')
3+
const { readFile, writeFile } = require('../utils')
34

45
const name = 'mdi-v4'
56
const outputLocation = `../../src/component/icon-set/${name}.js`
@@ -27,7 +28,7 @@ let blacklisted = [
2728
]
2829

2930
const location = require.resolve('@quasar/extras/mdi-v4/mdi-v4.css')
30-
const fileContents = fs.readFileSync(location, 'utf8')
31+
const fileContents = readFile(location)
3132

3233
fileContents
3334
.split('\n')
@@ -45,7 +46,7 @@ fileContents
4546
})
4647

4748
let output = 'export default {\n'
48-
output += ` name: ${name},\n`
49+
output += ` name: '${name}',\n`
4950
output += ' icons: [\n'
5051

5152
icons.forEach((icon, index) => {
@@ -55,5 +56,5 @@ fileContents
5556
output += ' ]\n'
5657
output += '}\n'
5758

58-
fs.writeFileSync(path.resolve(__dirname, outputLocation), output, 'utf8')
59-
console.log(`MDI Icons generation: Done - count: ${icons.length}`)
59+
writeFile(path.resolve(__dirname, outputLocation), output)
60+
console.log(`${blue('[icon]')} ${green(name + ':')} ${icons.length} generated`)

‎ui/build/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ require('./script.clean.js')
1313
console.log(` 📦 Building ${green('v' + require('../package.json').version)}...${parallel ? blue(' [multi-threaded]') : ''}\n`)
1414

1515
createFolder('dist')
16+
createFolder('dist/icon-set')
1617

18+
runJob(join(__dirname, './icons/build.all.js'))
1719
runJob(join(__dirname, './script.javascript'))
1820
runJob(join(__dirname, './script.css'))

‎ui/dev/src/pages/Color.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ export default {
2525
page: 0
2626
}
2727
}
28-
},
29-
mounted () {
30-
console.log(window)
3128
}
3229
}
3330
</script>

‎ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@quasar/quasar-ui-qiconpicker",
3-
"version": "1.0.0",
3+
"version": "1.0.3",
44
"author": "Jeff Galbraith <[email protected]>",
55
"description": "QIconPicker - Quasar component",
66
"license": "MIT",

‎ui/src/component/Component.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -155,8 +155,8 @@ export default {
155155
this.iconsList = []
156156
if (set) {
157157
// detect if UMD version is installed
158-
const name = set.replace(/-([a-z])/g, g => g[1].toUpperCase())
159158
if (window.QIconPicker) {
159+
const name = set.replace(/-([a-z])/g, g => g[1].toUpperCase())
160160
if (window.QIconPicker.iconSet && window.QIconPicker.iconSet[name]) {
161161
const iconsSet = window.QIconPicker.iconSet[name]
162162
this.iconsList = iconsSet.icons
@@ -168,10 +168,26 @@ export default {
168168
}
169169
else {
170170
try {
171-
const iconsSet = require(`./icon-set/${set}.js`).default
171+
const iconsSet = require(`@quasar/quasar-ui-qiconpicker/src/component/icon-set/${set}.js`).default
172172
this.iconsList = iconsSet.icons
173-
} catch (e) {
174-
console.error(`QIconPicker: no icon set found called '${set}'`)
173+
}
174+
catch (e) {
175+
// console.error(`Not found: @quasar/quasar-ui-qiconpicker/src/component/icon-set/${set}.js`)
176+
try {
177+
const iconsSet = require(`../src/component/icon-set/${set}.js`).default
178+
this.iconsList = iconsSet.icons
179+
}
180+
catch (e) {
181+
// console.error(`Not found: ../src/component/icon-set/${set}.js`)
182+
try {
183+
const iconsSet = require(`./icon-set/${set}.js`).default
184+
this.iconsList = iconsSet.icons
185+
}
186+
catch (e) {
187+
// console.error(`Not found: ./icon-set/${set}.js`)
188+
console.error(`QIconPicker: no icon set found called '${set}'`)
189+
}
190+
}
175191
}
176192
}
177193
}
@@ -187,7 +203,7 @@ export default {
187203
return p
188204
},
189205

190-
// returns true of the pagination is the same,
206+
// returns true if the pagination is the same,
191207
// otherwise returns false if it has changed
192208
samePagination (oldPag, newPag) {
193209
// eslint-disable-next-line no-unused-vars

‎ui/src/component/QIconPicker.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"value": {
55
"type": "String",
66
"desc": "`v-model`; The selected icon",
7-
"default": "",
7+
"default": "''",
88
"examples": [
99
"v-model=\"calendar-today\"",
1010
"v-model=\"bolt\""

0 commit comments

Comments
 (0)