Skip to content

Commit 8e33062

Browse files
committed
Merge branch 'dev'
2 parents 694a031 + fc0816e commit 8e33062

File tree

113 files changed

+4086
-1221
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+4086
-1221
lines changed

demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"@quasar/extras": "^1.2.0",
1717
"@quasar/quasar-app-extension-qiconpicker": "link:../.",
18-
"quasar": "^1.0.4"
18+
"quasar": "^1.0.5"
1919
},
2020
"devDependencies": {
2121
"@quasar/app": "^1.0.4",

demo/quasar.conf.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ module.exports = function (ctx) {
1414
extras: [
1515
'roboto-font',
1616
'material-icons', // optional, you are not bound to it
17+
'material-icons-outlined',
18+
'material-icons-round',
19+
'material-icons-sharp',
1720
'ionicons-v4',
1821
'mdi-v3',
1922
'fontawesome-v5',

demo/src/components/EssentialLinks.vue

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
<q-item-label caption>Documentation</q-item-label>
1010
</q-item-section>
1111
</q-item>
12-
<q-item clickable to="/demo">
12+
<q-item clickable to="/icons">
1313
<q-item-section avatar>
1414
<q-icon name="bolt" />
1515
</q-item-section>
1616
<q-item-section>
17-
<q-item-label>QIconPicker demo</q-item-label>
18-
<q-item-label caption>Interactively play with properties</q-item-label>
17+
<q-item-label>Icons</q-item-label>
18+
<q-item-label caption>Quasar Icon Sets</q-item-label>
1919
</q-item-section>
2020
</q-item>
2121
<q-item clickable to="/examples">
@@ -27,6 +27,15 @@
2727
<q-item-label caption>Examples of how to do it</q-item-label>
2828
</q-item-section>
2929
</q-item>
30+
<q-item clickable to="/demo">
31+
<q-item-section avatar>
32+
<q-icon name="bolt" />
33+
</q-item-section>
34+
<q-item-section>
35+
<q-item-label>QIconPicker demo</q-item-label>
36+
<q-item-label caption>Interactively play with properties</q-item-label>
37+
</q-item-section>
38+
</q-item>
3039
<q-separator />
3140
<q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/app-extension-qiconpicker">
3241
<q-item-section avatar>
Lines changed: 81 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<section :id="slugifiedTitle" class="q-pa-md">
2+
<section :id="slugifiedTitle" class="q-pa-md overflow-auto">
33
<q-card flat bordered class="no-shadow">
44
<q-toolbar>
55
<q-ribbon
@@ -9,16 +9,56 @@
99
leaf-color="#a0a0a0"
1010
leaf-position="bottom"
1111
decoration="rounded-out"
12-
class="fit"
1312
>
1413
<q-toolbar-title
15-
class="example-title"
16-
style="padding: 5px 20px;"
17-
@click="copyHeading(slugifiedTitle)">{{ title }}</q-toolbar-title>
14+
class="example-title"
15+
style="padding: 5px 20px;"
16+
@click="copyHeading(slugifiedTitle)"><span class="ellipsis">{{ title }}</span>
17+
</q-toolbar-title>
1818
</q-ribbon>
1919
</q-toolbar>
2020
<q-separator />
21-
<component v-bind:is="name" />
21+
<q-expansion-item
22+
group="someGroup"
23+
caption="Code"
24+
>
25+
<q-card>
26+
<q-tabs
27+
v-model="tab"
28+
dense
29+
class="text-grey"
30+
active-color="primary"
31+
indicator-color="primary"
32+
align="left"
33+
narrow-indicator
34+
>
35+
<q-tab name="template" v-if="parts.template" label="Template" />
36+
<q-tab name="script" v-if="parts.script" label="Script" />
37+
<q-tab name="style" v-if="parts.style" label="Style" />
38+
</q-tabs>
39+
40+
<q-separator />
41+
42+
<q-tab-panels v-model="tab" animated>
43+
<q-tab-panel v-if="parts.template" name="template">
44+
<q-markdown :src="parts.template" />
45+
</q-tab-panel>
46+
47+
<q-tab-panel v-if="parts.script" name="script">
48+
<q-markdown :src="parts.script" />
49+
</q-tab-panel>
50+
51+
<q-tab-panel v-if="parts.style" name="style">
52+
<q-markdown :src="parts.style" />
53+
</q-tab-panel>
54+
55+
</q-tab-panels>
56+
</q-card>
57+
</q-expansion-item>
58+
<q-separator />
59+
60+
<component v-bind:is="name" style="overflow: hidden;" />
61+
2262
</q-card>
2363
</section>
2464
</template>
@@ -30,17 +70,17 @@ export default {
3070
name: 'ExampleCard',
3171
3272
components: {
33-
Default: () => import('./examples/Default'),
34-
Size: () => import('./examples/Size'),
35-
Tooltips: () => import('./examples/Tooltips'),
36-
Color: () => import('./examples/Color'),
37-
SelectedColor: () => import('./examples/SelectedColor'),
38-
Filter2: () => import('./examples/Filter'),
39-
CustomIconSet: () => import('./examples/CustomIconSet'),
40-
UsingQInput: () => import('./examples/UsingQInput'),
41-
UsingIconSlot: () => import('./examples/UsingIconSlot'),
42-
Pagination: () => import('./examples/Pagination'),
43-
PaginationColor: () => import('./examples/PaginationColor')
73+
Default: () => import('../examples/Default'),
74+
Size: () => import('../examples/Size'),
75+
Tooltips: () => import('../examples/Tooltips'),
76+
Color: () => import('../examples/Color'),
77+
SelectedColor: () => import('../examples/SelectedColor'),
78+
Filter2: () => import('../examples/Filter2'),
79+
CustomIconSet: () => import('../examples/CustomIconSet'),
80+
UsingQInput: () => import('../examples/UsingQInput'),
81+
UsingIconSlot: () => import('../examples/UsingIconSlot'),
82+
Pagination: () => import('../examples/Pagination'),
83+
PaginationColor: () => import('../examples/PaginationColor')
4484
},
4585
4686
props: {
@@ -51,17 +91,40 @@ export default {
5191
name: {
5292
type: String,
5393
required: true
94+
},
95+
tagParts: {
96+
type: Object,
97+
default: () => {}
98+
}
99+
},
100+
101+
data () {
102+
return {
103+
tab: 'template',
104+
parts: {}
54105
}
55106
},
56107
108+
mounted () {
109+
this.updateParts()
110+
},
111+
57112
computed: {
58113
slugifiedTitle () {
59114
return slugify(this.title)
60115
}
61116
},
62117
63118
methods: {
64-
copyHeading
119+
copyHeading,
120+
updateParts () {
121+
this.parts = {}
122+
for (let property in this.tagParts) {
123+
if (this.tagParts[property] !== '') {
124+
this.parts[property] = '```\n' + this.tagParts[property] + '\n```'
125+
}
126+
}
127+
}
65128
}
66129
}
67130
</script>

demo/src/components/Hero.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
<h1 class="project-name">QIconPicker</h1>
55
<h2 class="project-tagline"></h2>
66
<q-btn type="a" href="https://github.com/quasarframework/app-extension-qiconpicker" target="_blank" class="btn" label="View on GitHub" no-caps flat/>
7+
<q-btn to="/icons" class="btn" label="Icons" no-caps flat/>
78
<q-btn to="/docs" class="btn" label="Docs" no-caps flat/>
89
<q-btn to="/examples" class="btn" label="Examples" no-caps flat/>
910
<q-btn to="/demo" class="btn" label="Interactive Demo" no-caps flat/>
11+
<q-btn type="a" href="https://donate.quasar.dev" target="_blank" class="btn" label="Donate" no-caps flat/>
1012
</section>
1113
<main class="flex flex-start justify-center inset-shadow">
1214
<div class="q-pa-md col-12-sm col-8-md col-6-lg inset-shadow" style="width: 100%; height: 3px;" />
13-
<div class="q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1" style="max-width: 800px; width: 100%;">
15+
<div v-if="hideSection !== true" class="q-pa-md col-12-sm col-8-md col-6-lg bg-white shadow-1" style="max-width: 800px; width: 100%;">
1416
<slot></slot>
1517
</div>
1618
</main>
@@ -19,6 +21,10 @@
1921

2022
<script>
2123
export default {
22-
name: 'Hero'
24+
name: 'Hero',
25+
26+
props: {
27+
hideSection: Boolean
28+
}
2329
}
2430
</script>

demo/src/components/IconCard.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ export default {
4242
{ label: 'Fontawesome Icons', value: 'fontawesome-v5' },
4343
{ label: 'Ion Icons', value: 'ionicons-v4' },
4444
{ label: 'Material Icons', value: 'material-icons' },
45+
{ label: 'Material Icons Outlined', value: 'material-icons-outlined' },
46+
{ label: 'Material Icons Round', value: 'material-icons-round' },
47+
{ label: 'Material Icons Sharp', value: 'material-icons-sharp' },
4548
{ label: 'MDI Icons', value: 'mdi-v3' },
4649
{ label: 'Themify Icons', value: 'themify' }
4750
],

demo/src/components/examples/Color.vue

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

demo/src/components/examples/CustomIconSet.vue

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

0 commit comments

Comments
 (0)