@quasar/quasar-ui-qiconpicker 3.0.0-rc.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -3
- package/dist/api/QIconPicker.json +102 -60
- package/dist/index.css +1 -1
- package/dist/index.esm.js +155 -6
- package/dist/index.esm.min.js +2 -2
- package/dist/index.min.css +1 -1
- package/dist/index.rtl.css +1 -1
- package/dist/index.rtl.min.css +1 -1
- package/dist/index.umd.js +155 -6
- package/dist/index.umd.min.js +2 -2
- package/dist/types/index.d.ts +170 -104
- package/package.json +12 -15
- package/src/components/QIconPicker.ts +205 -13
- package/src/version.ts +1 -1
- package/src/components/QIconPicker.json +0 -177
package/README.md
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
# QIconPicker
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
4
|
+
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
5
|
+
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
6
|
+
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
4
7
|
|
|
5
|
-
|
|
6
|
-
|
|
8
|
+
<span class="badge-github-sponsors"><a href="https://github.com/sponsors/hawkeye64" title="Sponsor this project on GitHub"><img src="https://img.shields.io/badge/github-sponsors-ea4aaa.svg?logo=githubsponsors&logoColor=white" alt="GitHub Sponsors button" /></a></span>
|
|
9
|
+
<span class="badge-paypal"><a href="https://paypal.me/hawkeye64" title="Donate to this project using Paypal"><img src="https://img.shields.io/badge/paypal-donate-yellow.svg" alt="PayPal donate button" /></a></span>
|
|
7
10
|
|
|
8
11
|
[](https://chat.quasar.dev)
|
|
9
12
|
[](https://twitter.com/jgalbraith64)
|
|
10
13
|
|
|
14
|
+
QIconPicker is a Quasar component that provides an icon picker for Vue and Quasar applications.
|
|
15
|
+
|
|
11
16
|
## Usage
|
|
12
17
|
|
|
13
18
|
### Quasar CLI Project
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
|
+
"generated_at": "2026-07-06T17:48:13.499Z",
|
|
2
3
|
"type": "component",
|
|
3
4
|
"meta": {
|
|
4
|
-
"docsUrl": "
|
|
5
|
+
"docsUrl": "/developing/using-qiconpicker"
|
|
5
6
|
},
|
|
6
7
|
"props": {
|
|
7
8
|
"model-value": {
|
|
9
|
+
"desc": "`v-model`; the selected icon.",
|
|
8
10
|
"type": "String",
|
|
9
|
-
"desc": "`v-model`; The selected icon",
|
|
10
|
-
"default": "''",
|
|
11
11
|
"category": "model",
|
|
12
12
|
"examples": [
|
|
13
13
|
"v-model=\"calendar_today\"",
|
|
@@ -15,9 +15,8 @@
|
|
|
15
15
|
]
|
|
16
16
|
},
|
|
17
17
|
"icon-set": {
|
|
18
|
-
"type": "String",
|
|
19
18
|
"desc": "The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets). Built-in sets are lazy loaded from `@quasar/extras`.",
|
|
20
|
-
"
|
|
19
|
+
"type": "String",
|
|
21
20
|
"values": [
|
|
22
21
|
"material-icons",
|
|
23
22
|
"material-icons-outlined",
|
|
@@ -34,46 +33,59 @@
|
|
|
34
33
|
"themify",
|
|
35
34
|
"bootstrap-icons"
|
|
36
35
|
],
|
|
36
|
+
"default": "",
|
|
37
|
+
"category": "source",
|
|
37
38
|
"examples": [
|
|
38
39
|
"icon-set=\"material-icons\"",
|
|
39
40
|
"icon-set=\"fontawesome-v7\""
|
|
40
41
|
]
|
|
41
42
|
},
|
|
42
43
|
"icons": {
|
|
44
|
+
"desc": "An array of objects containing icon information. The object must contain the key `name` with the value being the selected icon name. Use the optional `icon` key for SVG path data used for display, for example `{ name: 'bolt', icon: matBolt }`.",
|
|
43
45
|
"type": "Array",
|
|
44
46
|
"tsType": "IconNameArray",
|
|
45
|
-
"
|
|
46
|
-
"category": "model",
|
|
47
|
+
"category": "source",
|
|
47
48
|
"examples": [
|
|
48
49
|
":icons=\"[{ name: 'calendar-today' }, { name: 'bolt' }]\""
|
|
49
50
|
]
|
|
50
51
|
},
|
|
51
52
|
"filter": {
|
|
53
|
+
"desc": "Icons will be filtered by the passed string.",
|
|
52
54
|
"type": "String",
|
|
53
|
-
"
|
|
54
|
-
"category": "behavior",
|
|
55
|
+
"category": "source",
|
|
55
56
|
"examples": [
|
|
56
57
|
":filter=\"myFilter\""
|
|
57
58
|
]
|
|
58
59
|
},
|
|
59
60
|
"dense": {
|
|
61
|
+
"desc": "Use less of a footprint for the component.",
|
|
60
62
|
"type": "Boolean",
|
|
61
|
-
"desc": "Use less of a foot print for the component",
|
|
62
63
|
"category": "style"
|
|
63
64
|
},
|
|
64
65
|
"tooltips": {
|
|
66
|
+
"desc": "Turns tooltips on for each displayed icon, showing the icon name.",
|
|
65
67
|
"type": "Boolean",
|
|
66
|
-
"desc": "Turns tooltips on for each displayed icon (shows the icon name)",
|
|
67
68
|
"category": "behavior"
|
|
68
69
|
},
|
|
69
70
|
"no-footer": {
|
|
71
|
+
"desc": "Hides the footer area when pagination is enabled.",
|
|
70
72
|
"type": "Boolean",
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
+
"category": "pagination"
|
|
74
|
+
},
|
|
75
|
+
"size": {
|
|
76
|
+
"desc": "Size in CSS units, including unit name or standard size name (xs, sm, md, lg, xl).",
|
|
77
|
+
"type": "String",
|
|
78
|
+
"default": "inherit",
|
|
79
|
+
"category": "style",
|
|
80
|
+
"examples": [
|
|
81
|
+
"size=\"3rem\"",
|
|
82
|
+
"size=\"24px\"",
|
|
83
|
+
"size=\"lg\""
|
|
84
|
+
]
|
|
73
85
|
},
|
|
74
86
|
"color": {
|
|
87
|
+
"desc": "Any color from the [Quasar Color Palette](https://quasar.dev/style/color-palette).",
|
|
75
88
|
"type": "String",
|
|
76
|
-
"desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
|
|
77
89
|
"category": "style",
|
|
78
90
|
"examples": [
|
|
79
91
|
"color=\"orange-8\"",
|
|
@@ -81,8 +93,8 @@
|
|
|
81
93
|
]
|
|
82
94
|
},
|
|
83
95
|
"text-color": {
|
|
96
|
+
"desc": "Any text color from the [Quasar Color Palette](https://quasar.dev/style/color-palette).",
|
|
84
97
|
"type": "String",
|
|
85
|
-
"desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
|
|
86
98
|
"category": "style",
|
|
87
99
|
"examples": [
|
|
88
100
|
"text-color=\"orange-8\"",
|
|
@@ -90,8 +102,8 @@
|
|
|
90
102
|
]
|
|
91
103
|
},
|
|
92
104
|
"selected-color": {
|
|
105
|
+
"desc": "Color used for the selected icon.",
|
|
93
106
|
"type": "String",
|
|
94
|
-
"desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
|
|
95
107
|
"default": "primary",
|
|
96
108
|
"category": "style",
|
|
97
109
|
"examples": [
|
|
@@ -100,8 +112,8 @@
|
|
|
100
112
|
]
|
|
101
113
|
},
|
|
102
114
|
"selected-text-color": {
|
|
115
|
+
"desc": "Text color used for the selected icon.",
|
|
103
116
|
"type": "String",
|
|
104
|
-
"desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
|
|
105
117
|
"default": "grey-1",
|
|
106
118
|
"category": "style",
|
|
107
119
|
"examples": [
|
|
@@ -109,53 +121,44 @@
|
|
|
109
121
|
"selected-text-color=\"#c8c8c8\""
|
|
110
122
|
]
|
|
111
123
|
},
|
|
112
|
-
"
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
124
|
+
"pagination-props": {
|
|
125
|
+
"desc": "The properties to pass to the QPagination component.",
|
|
126
|
+
"type": "Object",
|
|
127
|
+
"default": "() => ({\n maxPages: 5,\n input: true,\n })",
|
|
128
|
+
"__exemption": [
|
|
129
|
+
"examples"
|
|
130
|
+
],
|
|
131
|
+
"tsType": "PaginationProps",
|
|
132
|
+
"category": "pagination"
|
|
121
133
|
},
|
|
122
134
|
"model-pagination": {
|
|
135
|
+
"desc": "For pagination purposes uses Quasar's pagination component. Use `v-model:model-pagination` to synchronize the data. You can use `page` and `itemsPerPage` to control the pagination. QIconPicker will set `totalPages` depending on `icon-set` or `icons` properties. If using a `filter` the page will automatically be reset to 1.",
|
|
123
136
|
"type": "Object",
|
|
124
137
|
"tsType": "Pagination",
|
|
125
|
-
"
|
|
126
|
-
"category": "model",
|
|
138
|
+
"category": "pagination",
|
|
127
139
|
"examples": [
|
|
128
140
|
"v-model:model-pagination=\"myPagination\""
|
|
129
141
|
]
|
|
130
142
|
},
|
|
131
|
-
"pagination-props": {
|
|
132
|
-
"type": "Object",
|
|
133
|
-
"tsType": "PaginationProps",
|
|
134
|
-
"desc": "The properties to pass to the QPagination component",
|
|
135
|
-
"category": "behavior",
|
|
136
|
-
"__exemption": [
|
|
137
|
-
"examples"
|
|
138
|
-
]
|
|
139
|
-
},
|
|
140
143
|
"animated": {
|
|
144
|
+
"desc": "Turns on animation.",
|
|
141
145
|
"type": "Boolean",
|
|
142
|
-
"category": "behavior"
|
|
143
|
-
"desc": "Turns on animation"
|
|
146
|
+
"category": "behavior"
|
|
144
147
|
},
|
|
145
148
|
"transition-prev": {
|
|
149
|
+
"desc": "When animated property is true, transition to use for previous paginated view.",
|
|
146
150
|
"type": "String",
|
|
147
|
-
"category": "behavior",
|
|
148
|
-
"desc": "When animated property is true, transition to use for previous paginated view",
|
|
149
151
|
"default": "slide-right",
|
|
152
|
+
"category": "behavior",
|
|
150
153
|
"examples": [
|
|
151
154
|
"transition-prev=\"flip-right\""
|
|
152
155
|
]
|
|
153
156
|
},
|
|
154
157
|
"transition-next": {
|
|
158
|
+
"desc": "When animated property is true, transition to use for next paginated view.",
|
|
155
159
|
"type": "String",
|
|
156
|
-
"category": "behavior",
|
|
157
|
-
"desc": "When animated property is true, transition to use for next paginated view",
|
|
158
160
|
"default": "slide-left",
|
|
161
|
+
"category": "behavior",
|
|
159
162
|
"examples": [
|
|
160
163
|
"transition-next=\"flip-left\""
|
|
161
164
|
]
|
|
@@ -163,17 +166,56 @@
|
|
|
163
166
|
},
|
|
164
167
|
"events": {
|
|
165
168
|
"update:model-value": {
|
|
166
|
-
"
|
|
167
|
-
"
|
|
169
|
+
"desc": "`v-model`; selected icon name, including the icon prefix when required.",
|
|
170
|
+
"params": {
|
|
171
|
+
"value": {
|
|
172
|
+
"desc": "Selected icon name.",
|
|
173
|
+
"required": true,
|
|
174
|
+
"tsType": "string",
|
|
175
|
+
"type": "String"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
"update:model-pagination": {
|
|
180
|
+
"desc": "Emitted when the pagination state changes.",
|
|
181
|
+
"params": {
|
|
182
|
+
"pagination": {
|
|
183
|
+
"desc": "New pagination state.",
|
|
184
|
+
"required": true,
|
|
185
|
+
"tsType": "Pagination",
|
|
186
|
+
"type": "Object"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
168
189
|
}
|
|
169
190
|
},
|
|
170
191
|
"slots": {
|
|
192
|
+
"pagination": {
|
|
193
|
+
"desc": "Use if you want to provide your own pagination UI. You can control this with the data from the property `model-pagination`.",
|
|
194
|
+
"scope": {
|
|
195
|
+
"pagination": {
|
|
196
|
+
"desc": "",
|
|
197
|
+
"tsType": "Record<string, any>",
|
|
198
|
+
"type": "Record<string, any>"
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
"footer": {
|
|
203
|
+
"desc": "Anything can go into this slot.",
|
|
204
|
+
"scope": {
|
|
205
|
+
"pagination": {
|
|
206
|
+
"desc": "",
|
|
207
|
+
"tsType": "Record<string, any>",
|
|
208
|
+
"type": "Record<string, any>"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
},
|
|
171
212
|
"icon": {
|
|
172
213
|
"desc": "Slot for changing the display of the icon.",
|
|
173
214
|
"scope": {
|
|
174
215
|
"name": {
|
|
216
|
+
"desc": "The selected icon name.",
|
|
217
|
+
"tsType": "string",
|
|
175
218
|
"type": "String",
|
|
176
|
-
"desc": "The selected icon name",
|
|
177
219
|
"examples": [
|
|
178
220
|
"bolt",
|
|
179
221
|
"calendar",
|
|
@@ -181,32 +223,32 @@
|
|
|
181
223
|
]
|
|
182
224
|
}
|
|
183
225
|
}
|
|
184
|
-
},
|
|
185
|
-
"footer": {
|
|
186
|
-
"desc": "Anything can go into this slot"
|
|
187
|
-
},
|
|
188
|
-
"pagination": {
|
|
189
|
-
"desc": "Use if you want to provide your own pagination UI. You can control this with the data from the property `model-pagination`"
|
|
190
226
|
}
|
|
191
227
|
},
|
|
192
228
|
"methods": {
|
|
193
229
|
"prevPage": {
|
|
194
|
-
"desc": "If paginated, will go to previous page if not on 1st page"
|
|
230
|
+
"desc": "If paginated, will go to previous page if not on 1st page.",
|
|
231
|
+
"type": "Function"
|
|
195
232
|
},
|
|
196
233
|
"nextPage": {
|
|
197
|
-
"desc": "If paginated, will go to next page, if not on last page"
|
|
234
|
+
"desc": "If paginated, will go to next page, if not on last page.",
|
|
235
|
+
"type": "Function"
|
|
198
236
|
},
|
|
199
237
|
"lastPage": {
|
|
200
|
-
"desc": "If paginated, will go to the last page"
|
|
201
|
-
|
|
202
|
-
"isLastPage": {
|
|
203
|
-
"desc": "True if on last page otherwise false"
|
|
238
|
+
"desc": "If paginated, will go to the last page.",
|
|
239
|
+
"type": "Function"
|
|
204
240
|
},
|
|
205
241
|
"firstPage": {
|
|
206
|
-
"desc": "If paginated, will go to the first page"
|
|
242
|
+
"desc": "If paginated, will go to the first page.",
|
|
243
|
+
"type": "Function"
|
|
244
|
+
},
|
|
245
|
+
"isLastPage": {
|
|
246
|
+
"desc": "True if on last page otherwise false.",
|
|
247
|
+
"type": "Function"
|
|
207
248
|
},
|
|
208
249
|
"isFirstPage": {
|
|
209
|
-
"desc": "True if on first page otherwise false"
|
|
250
|
+
"desc": "True if on first page otherwise false.",
|
|
251
|
+
"type": "Function"
|
|
210
252
|
}
|
|
211
253
|
}
|
|
212
254
|
}
|
package/dist/index.css
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -132,31 +132,117 @@ function loadIconSet(name) {
|
|
|
132
132
|
* QIconPicker Properties
|
|
133
133
|
*/
|
|
134
134
|
const useIconPickerProps = {
|
|
135
|
+
/**
|
|
136
|
+
* `v-model`; the selected icon.
|
|
137
|
+
*
|
|
138
|
+
* @category model
|
|
139
|
+
* @example v-model="calendar_today"
|
|
140
|
+
* @example v-model="bolt"
|
|
141
|
+
*/
|
|
135
142
|
modelValue: String,
|
|
143
|
+
/**
|
|
144
|
+
* The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets). Built-in sets are lazy loaded from `@quasar/extras`.
|
|
145
|
+
*
|
|
146
|
+
* @category source
|
|
147
|
+
* @values material-icons | material-icons-outlined | material-icons-round | material-icons-sharp | material-symbols-outlined | material-symbols-rounded | material-symbols-sharp | ionicons-v8 | mdi-v7 | fontawesome-v7 | line-awesome | eva-icons | themify | bootstrap-icons
|
|
148
|
+
* @example icon-set="material-icons"
|
|
149
|
+
* @example icon-set="fontawesome-v7"
|
|
150
|
+
*/
|
|
136
151
|
iconSet: {
|
|
137
152
|
type: String,
|
|
138
153
|
validator: (v) => [...iconSetNames, ""].includes(v),
|
|
139
154
|
default: ""
|
|
140
155
|
},
|
|
156
|
+
/**
|
|
157
|
+
* An array of objects containing icon information. The object must contain the key `name` with the value being the selected icon name. Use the optional `icon` key for SVG path data used for display, for example `{ name: 'bolt', icon: matBolt }`.
|
|
158
|
+
*
|
|
159
|
+
* @category source
|
|
160
|
+
* @tsType IconNameArray
|
|
161
|
+
* @example :icons="[{ name: 'calendar-today' }, { name: 'bolt' }]"
|
|
162
|
+
*/
|
|
141
163
|
icons: Array,
|
|
164
|
+
/**
|
|
165
|
+
* Icons will be filtered by the passed string.
|
|
166
|
+
*
|
|
167
|
+
* @category source
|
|
168
|
+
* @example :filter="myFilter"
|
|
169
|
+
*/
|
|
142
170
|
filter: String,
|
|
171
|
+
/**
|
|
172
|
+
* Use less of a footprint for the component.
|
|
173
|
+
*
|
|
174
|
+
* @category style
|
|
175
|
+
*/
|
|
143
176
|
dense: Boolean,
|
|
177
|
+
/**
|
|
178
|
+
* Turns tooltips on for each displayed icon, showing the icon name.
|
|
179
|
+
*
|
|
180
|
+
* @category behavior
|
|
181
|
+
*/
|
|
144
182
|
tooltips: Boolean,
|
|
183
|
+
/**
|
|
184
|
+
* Hides the footer area when pagination is enabled.
|
|
185
|
+
*
|
|
186
|
+
* @category pagination
|
|
187
|
+
*/
|
|
145
188
|
noFooter: Boolean,
|
|
189
|
+
/**
|
|
190
|
+
* Size in CSS units, including unit name or standard size name (xs, sm, md, lg, xl).
|
|
191
|
+
*
|
|
192
|
+
* @category style
|
|
193
|
+
* @example size="3rem"
|
|
194
|
+
* @example size="24px"
|
|
195
|
+
* @example size="lg"
|
|
196
|
+
*/
|
|
146
197
|
size: {
|
|
147
198
|
type: String,
|
|
148
199
|
default: "inherit"
|
|
149
200
|
},
|
|
201
|
+
/**
|
|
202
|
+
* Any color from the [Quasar Color Palette](https://quasar.dev/style/color-palette).
|
|
203
|
+
*
|
|
204
|
+
* @category style
|
|
205
|
+
* @example color="orange-8"
|
|
206
|
+
* @example color="yellow-6"
|
|
207
|
+
*/
|
|
150
208
|
color: String,
|
|
209
|
+
/**
|
|
210
|
+
* Any text color from the [Quasar Color Palette](https://quasar.dev/style/color-palette).
|
|
211
|
+
*
|
|
212
|
+
* @category style
|
|
213
|
+
* @example text-color="orange-8"
|
|
214
|
+
* @example text-color="red-6"
|
|
215
|
+
*/
|
|
151
216
|
textColor: String,
|
|
217
|
+
/**
|
|
218
|
+
* Color used for the selected icon.
|
|
219
|
+
*
|
|
220
|
+
* @category style
|
|
221
|
+
* @example selected-color="orange-8"
|
|
222
|
+
* @example selected-color="#c8c8c8"
|
|
223
|
+
*/
|
|
152
224
|
selectedColor: {
|
|
153
225
|
type: String,
|
|
154
226
|
default: "primary"
|
|
155
227
|
},
|
|
228
|
+
/**
|
|
229
|
+
* Text color used for the selected icon.
|
|
230
|
+
*
|
|
231
|
+
* @category style
|
|
232
|
+
* @example selected-text-color="orange-8"
|
|
233
|
+
* @example selected-text-color="#c8c8c8"
|
|
234
|
+
*/
|
|
156
235
|
selectedTextColor: {
|
|
157
236
|
type: String,
|
|
158
237
|
default: "grey-1"
|
|
159
238
|
},
|
|
239
|
+
/**
|
|
240
|
+
* The properties to pass to the QPagination component.
|
|
241
|
+
*
|
|
242
|
+
* @category pagination
|
|
243
|
+
* @tsType PaginationProps
|
|
244
|
+
* @api-exemption examples
|
|
245
|
+
*/
|
|
160
246
|
paginationProps: {
|
|
161
247
|
type: Object,
|
|
162
248
|
default: () => ({
|
|
@@ -164,12 +250,36 @@ const useIconPickerProps = {
|
|
|
164
250
|
input: true
|
|
165
251
|
})
|
|
166
252
|
},
|
|
253
|
+
/**
|
|
254
|
+
* For pagination purposes uses Quasar's pagination component. Use `v-model:model-pagination` to synchronize the data. You can use `page` and `itemsPerPage` to control the pagination. QIconPicker will set `totalPages` depending on `icon-set` or `icons` properties. If using a `filter` the page will automatically be reset to 1.
|
|
255
|
+
*
|
|
256
|
+
* @category pagination
|
|
257
|
+
* @tsType Pagination
|
|
258
|
+
* @example v-model:model-pagination="myPagination"
|
|
259
|
+
*/
|
|
167
260
|
modelPagination: Object,
|
|
261
|
+
/**
|
|
262
|
+
* Turns on animation.
|
|
263
|
+
*
|
|
264
|
+
* @category behavior
|
|
265
|
+
*/
|
|
168
266
|
animated: Boolean,
|
|
267
|
+
/**
|
|
268
|
+
* When animated property is true, transition to use for previous paginated view.
|
|
269
|
+
*
|
|
270
|
+
* @category behavior
|
|
271
|
+
* @example transition-prev="flip-right"
|
|
272
|
+
*/
|
|
169
273
|
transitionPrev: {
|
|
170
274
|
type: String,
|
|
171
275
|
default: "slide-right"
|
|
172
276
|
},
|
|
277
|
+
/**
|
|
278
|
+
* When animated property is true, transition to use for next paginated view.
|
|
279
|
+
*
|
|
280
|
+
* @category behavior
|
|
281
|
+
* @example transition-next="flip-left"
|
|
282
|
+
*/
|
|
173
283
|
transitionNext: {
|
|
174
284
|
type: String,
|
|
175
285
|
default: "slide-left"
|
|
@@ -276,7 +386,10 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
|
|
|
276
386
|
/**
|
|
277
387
|
* Exposes api functions
|
|
278
388
|
*/
|
|
279
|
-
function exposeIconPickerApi(data,
|
|
389
|
+
function exposeIconPickerApi(data, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber) {
|
|
390
|
+
/**
|
|
391
|
+
* If paginated, will go to previous page if not on 1st page.
|
|
392
|
+
*/
|
|
280
393
|
const prevPage = () => {
|
|
281
394
|
const { page } = computedPagination.value;
|
|
282
395
|
if (page > 1) {
|
|
@@ -284,6 +397,9 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
|
|
|
284
397
|
data.direction = direction.PREV;
|
|
285
398
|
}
|
|
286
399
|
};
|
|
400
|
+
/**
|
|
401
|
+
* If paginated, will go to next page, if not on last page.
|
|
402
|
+
*/
|
|
287
403
|
const nextPage = () => {
|
|
288
404
|
const { page, itemsPerPage } = computedPagination.value;
|
|
289
405
|
if (computedLastItemIndex.value > 0 && page * itemsPerPage < computedFilteredIcons.value.length) {
|
|
@@ -291,13 +407,19 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
|
|
|
291
407
|
data.direction = direction.NEXT;
|
|
292
408
|
}
|
|
293
409
|
};
|
|
410
|
+
/**
|
|
411
|
+
* If paginated, will go to the last page.
|
|
412
|
+
*/
|
|
294
413
|
const lastPage = () => {
|
|
295
414
|
setPagination({ page: computedPagesNumber.value });
|
|
296
415
|
};
|
|
416
|
+
/**
|
|
417
|
+
* If paginated, will go to the first page.
|
|
418
|
+
*/
|
|
297
419
|
const firstPage = () => {
|
|
298
420
|
setPagination({ page: 0 });
|
|
299
421
|
};
|
|
300
|
-
|
|
422
|
+
return {
|
|
301
423
|
prevPage,
|
|
302
424
|
nextPage,
|
|
303
425
|
lastPage,
|
|
@@ -308,10 +430,11 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
|
|
|
308
430
|
isFirstPage: computed(() => {
|
|
309
431
|
return computedPagination.value.page === 1;
|
|
310
432
|
})
|
|
311
|
-
}
|
|
433
|
+
};
|
|
312
434
|
}
|
|
313
435
|
var QIconPicker_default = defineComponent({
|
|
314
436
|
name: "QIconPicker",
|
|
437
|
+
slots: Object,
|
|
315
438
|
props: { ...useIconPickerProps },
|
|
316
439
|
emits: ["update:model-value", "update:model-pagination"],
|
|
317
440
|
setup(props, { slots, emit, expose }) {
|
|
@@ -337,7 +460,33 @@ var QIconPicker_default = defineComponent({
|
|
|
337
460
|
});
|
|
338
461
|
const { loadIconSet, computedDisplayedIcons, computedFilteredIcons } = useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex);
|
|
339
462
|
const { samePagination, computedPagination, setPagination, updatePagination, computedPagesNumber } = useIconPickerPagination(data, props, emit, computedFilteredIcons);
|
|
340
|
-
exposeIconPickerApi(data,
|
|
463
|
+
const iconPickerApi = exposeIconPickerApi(data, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber);
|
|
464
|
+
expose({
|
|
465
|
+
/**
|
|
466
|
+
* If paginated, will go to previous page if not on 1st page.
|
|
467
|
+
*/
|
|
468
|
+
prevPage: iconPickerApi.prevPage,
|
|
469
|
+
/**
|
|
470
|
+
* If paginated, will go to next page, if not on last page.
|
|
471
|
+
*/
|
|
472
|
+
nextPage: iconPickerApi.nextPage,
|
|
473
|
+
/**
|
|
474
|
+
* If paginated, will go to the last page.
|
|
475
|
+
*/
|
|
476
|
+
lastPage: iconPickerApi.lastPage,
|
|
477
|
+
/**
|
|
478
|
+
* If paginated, will go to the first page.
|
|
479
|
+
*/
|
|
480
|
+
firstPage: iconPickerApi.firstPage,
|
|
481
|
+
/**
|
|
482
|
+
* True if on last page otherwise false.
|
|
483
|
+
*/
|
|
484
|
+
isLastPage: iconPickerApi.isLastPage,
|
|
485
|
+
/**
|
|
486
|
+
* True if on first page otherwise false.
|
|
487
|
+
*/
|
|
488
|
+
isFirstPage: iconPickerApi.isFirstPage
|
|
489
|
+
});
|
|
341
490
|
onMounted(async () => {
|
|
342
491
|
if (props.iconSet) await loadIconSet(props.iconSet);
|
|
343
492
|
else if (props.icons !== void 0 && props.icons.length > 0) data.iconsList = props.icons;
|
|
@@ -462,7 +611,7 @@ var QIconPicker_default = defineComponent({
|
|
|
462
611
|
});
|
|
463
612
|
//#endregion
|
|
464
613
|
//#region src/version.ts
|
|
465
|
-
const version = "3.0.0
|
|
614
|
+
const version = "3.0.0";
|
|
466
615
|
//#endregion
|
|
467
616
|
//#region src/vue-plugin.ts
|
|
468
617
|
var vue_plugin_exports = /* @__PURE__ */ __exportAll({
|
package/dist/index.esm.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
import{Transition,computed,defineComponent,h,nextTick,onMounted,reactive,ref,watch}from"vue";import{QBtn,QPagination,QResizeObserver,QScrollArea,QTooltip}from"quasar";var __defProp=Object.defineProperty,__exportAll=(e,t)=>{let o={};for(var a in e)__defProp(o,a,{get:e[a],enumerable:!0});return t||__defProp(o,Symbol.toStringTag,{value:"Module"}),o};const iconSetNames=["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","material-symbols-outlined","material-symbols-rounded","material-symbols-sharp","ionicons-v8","mdi-v7","fontawesome-v7","eva-icons","themify","line-awesome","bootstrap-icons"];function pascalToKebab(e){return e.replace(/([A-Z]+)([A-Z][a-z])/g,"$1-$2").replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function pascalToSnake(e){return pascalToKebab(e).replace(/-/g,"_")}function removePrefix(e,t){if(!1===e.startsWith(t))throw new Error(`Icon export ${e} does not start with expected prefix `+t);return e.slice(t.length)}function createSvgEntry(o,a=""){return(e,t)=>({name:""+a+pascalToKebab(removePrefix(e,o)),icon:t})}function createMaterialSvgEntry(o,a=""){return(e,t)=>({name:""+a+pascalToSnake(removePrefix(e,o)),icon:t})}function getIconNames(e){return Array.isArray(e)?e:e.default}function getIconExports(e){return Object.fromEntries(Object.entries(e).filter(e=>"string"===typeof e[1]))}function createIconSet(o,e,t){const a=getIconNames(e),n=new Set(a),i=getIconExports(t),r=iconSetConfigs[o];return{name:o,icons:a.map(e=>{const t=i[e];if("string"!==typeof t)throw new Error(`QIconPicker: ${o} is missing @quasar/extras export `+e);return r.createEntry(e,t,n)})}}const iconSetConfigs={"material-icons":{createEntry:createMaterialSvgEntry("mat")},"material-icons-outlined":{createEntry:createMaterialSvgEntry("outlined","o_")},"material-icons-round":{createEntry:createMaterialSvgEntry("round","r_")},"material-icons-sharp":{createEntry:createMaterialSvgEntry("sharp","s_")},"material-symbols-outlined":{createEntry:createMaterialSvgEntry("symOutlined","sym_o_")},"material-symbols-rounded":{createEntry:createMaterialSvgEntry("symRounded","sym_r_")},"material-symbols-sharp":{createEntry:createMaterialSvgEntry("symSharp","sym_s_")},"mdi-v7":{createEntry:createSvgEntry("mdi","mdi-")},"ionicons-v8":{createEntry:(e,t)=>({name:e,icon:t})},"fontawesome-v7":{createEntry:(e,t)=>({name:"fa-"+pascalToKebab(e.slice(3)),icon:t,prefix:e.slice(0,3)})},"line-awesome":{createEntry:(e,t,o)=>{const a=removePrefix(e,"la"),n=a.endsWith("Solid");return{name:"la-"+pascalToKebab(n?a.slice(0,-5):a),icon:t,prefix:n?"las":o.has(e+"Solid")?"lar":"lab"}}},"eva-icons":{createEntry:createSvgEntry("eva","eva-")},themify:{createEntry:createSvgEntry("ti","ti-")},"bootstrap-icons":{createEntry:createSvgEntry("bi","bi-")}},iconSetLoaders={"material-icons":()=>Promise.all([import("@quasar/extras/material-icons/icons.json"),import("@quasar/extras/material-icons")]).then(([e,t])=>createIconSet("material-icons",e,t)),"material-icons-outlined":()=>Promise.all([import("@quasar/extras/material-icons-outlined/icons.json"),import("@quasar/extras/material-icons-outlined")]).then(([e,t])=>createIconSet("material-icons-outlined",e,t)),"material-icons-round":()=>Promise.all([import("@quasar/extras/material-icons-round/icons.json"),import("@quasar/extras/material-icons-round")]).then(([e,t])=>createIconSet("material-icons-round",e,t)),"material-icons-sharp":()=>Promise.all([import("@quasar/extras/material-icons-sharp/icons.json"),import("@quasar/extras/material-icons-sharp")]).then(([e,t])=>createIconSet("material-icons-sharp",e,t)),"material-symbols-outlined":()=>Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"),import("@quasar/extras/material-symbols-outlined")]).then(([e,t])=>createIconSet("material-symbols-outlined",e,t)),"material-symbols-rounded":()=>Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"),import("@quasar/extras/material-symbols-rounded")]).then(([e,t])=>createIconSet("material-symbols-rounded",e,t)),"material-symbols-sharp":()=>Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"),import("@quasar/extras/material-symbols-sharp")]).then(([e,t])=>createIconSet("material-symbols-sharp",e,t)),"ionicons-v8":()=>Promise.all([import("@quasar/extras/ionicons-v8/icons.json"),import("@quasar/extras/ionicons-v8")]).then(([e,t])=>createIconSet("ionicons-v8",e,t)),"mdi-v7":()=>Promise.all([import("@quasar/extras/mdi-v7/icons.json"),import("@quasar/extras/mdi-v7")]).then(([e,t])=>createIconSet("mdi-v7",e,t)),"fontawesome-v7":()=>Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"),import("@quasar/extras/fontawesome-v7")]).then(([e,t])=>createIconSet("fontawesome-v7",e,t)),"line-awesome":()=>Promise.all([import("@quasar/extras/line-awesome/icons.json"),import("@quasar/extras/line-awesome")]).then(([e,t])=>createIconSet("line-awesome",e,t)),"eva-icons":()=>Promise.all([import("@quasar/extras/eva-icons/icons.json"),import("@quasar/extras/eva-icons")]).then(([e,t])=>createIconSet("eva-icons",e,t)),themify:()=>Promise.all([import("@quasar/extras/themify/icons.json"),import("@quasar/extras/themify")]).then(([e,t])=>createIconSet("themify",e,t)),"bootstrap-icons":()=>Promise.all([import("@quasar/extras/bootstrap-icons/icons.json"),import("@quasar/extras/bootstrap-icons")]).then(([e,t])=>createIconSet("bootstrap-icons",e,t))};function loadIconSet(e){return iconSetLoaders[e]()}const useIconPickerProps={modelValue:String,iconSet:{type:String,validator:e=>[...iconSetNames,""].includes(e),default:""},icons:Array,filter:String,dense:Boolean,tooltips:Boolean,noFooter:Boolean,size:{type:String,default:"inherit"},color:String,textColor:String,selectedColor:{type:String,default:"primary"},selectedTextColor:{type:String,default:"grey-1"},paginationProps:{type:Object,default:()=>({maxPages:5,input:!0})},modelPagination:Object,animated:Boolean,transitionPrev:{type:String,default:"slide-right"},transitionNext:{type:String,default:"slide-left"}},direction={NEXT:"next",PREV:"prev"};function useIconPickerPagination(o,a,n,e){function i(e){return e.page<1&&(e.page=1),(void 0===e.itemsPerPage||e.itemsPerPage<1)&&(e.itemsPerPage=0),e}function r(e,t){for(var o in t)if(t[o]!==e[o])return!1;return!0}const s=computed(()=>{return i({...o.innerPagination,...a.modelPagination})}),t=computed(()=>{return 0===s.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/s.value.itemsPerPage))});function c(e){const t=i({...s.value,...e});r(o.innerPagination,t)||(a.modelPagination&&n("update:model-pagination",t),o.innerPagination=t)}function l(){void 0!==a.modelPagination&&c({total:e.value.length,totalPages:t.value})}return{samePagination:r,computedPagination:s,setPagination:c,updatePagination:l,computedPagesNumber:t}}function useIconPickerIcons(n,o,t,a){let i=0;async function e(t){const e=++i;if(n.iconsList=[],t)if("undefined"!==typeof window&&window.QIconPicker){const o=t.replace(/-([a-z])/g,e=>e[1].toUpperCase());window.QIconPicker.iconSet&&window.QIconPicker.iconSet[o]?n.iconsList=window.QIconPicker.iconSet[o].icons:(console.error("QIconPicker: no icon set loaded called "+t),console.error("Built-in icon sets require ESM bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead."))}else if(iconSetNames.includes(t))try{const a=await loadIconSet(t);e===i&&(n.iconsList=a.icons)}catch(e){console.error("QIconPicker: failed to load icon set called "+t),console.error(e)}else console.error("QIconPicker: cannot find icon set called "+t)}const r=computed(()=>{let e=[];return n.iconsList&&(e=s.value,o.modelPagination)&&0!==o.modelPagination.itemsPerPage&&(e=e.slice(t.value,a.value)),e}),s=computed(()=>{let e=n.iconsList;if(e&&void 0!==o.filter&&""!==o.filter&&null!==o.filter){const t=o.filter.toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t))}return e});return{loadIconSet:e,computedDisplayedIcons:r,computedFilteredIcons:s}}function exposeIconPickerApi(o,e,a,n,t,i,r,s){const c=()=>{const e=a.value.page;e>1&&(n({page:e-1}),o.direction=direction.PREV)},l=()=>{const{page:e,itemsPerPage:t}=a.value;i.value>0&&e*t<r.value.length&&(n({page:e+1}),o.direction=direction.NEXT)},m=()=>{n({page:s.value})},u=()=>{n({page:0})};e({prevPage:c,nextPage:l,lastPage:m,firstPage:u,isLastPage:computed(()=>{return 0===i.value||a.value.page>=s.value}),isFirstPage:computed(()=>{return 1===a.value.page})})}var QIconPicker_default=defineComponent({name:"QIconPicker",props:{...useIconPickerProps},emits:["update:model-value","update:model-pagination"],setup(l,{slots:m,emit:u,expose:e}){const d=ref(null),p=reactive({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},width:"100",height:"100",direction:""}),t=computed(()=>{const{page:e,itemsPerPage:t}=P.value;return(e-1)*t}),o=computed(()=>{const{page:e,itemsPerPage:t}=P.value;return e*t}),{loadIconSet:a,computedDisplayedIcons:g,computedFilteredIcons:n}=useIconPickerIcons(p,l,t,o),{samePagination:i,computedPagination:P,setPagination:v,updatePagination:r,computedPagesNumber:s}=useIconPickerPagination(p,l,u,n);return exposeIconPickerApi(p,e,P,v,t,o,n,s),onMounted(async()=>{l.iconSet?await a(l.iconSet):void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r()}),watch(()=>l.iconSet,async e=>{e&&(await a(e),r(),nextTick(()=>{v({page:1})}).catch(e=>console.error(e)),d.value)&&d.value.setScrollPosition("vertical",0)}),watch(()=>l.icons,()=>{void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r(),nextTick(()=>{v({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),watch(()=>l.filter,()=>{v({page:1,totalPages:s.value}),r()}),l.modelPagination&&watch(()=>l.modelPagination,(e,t)=>{i(t,e)||r()}),l.modelPagination&&(watch(()=>l.modelPagination.itemsPerPage,()=>{r()}),watch(()=>l.modelPagination.page,()=>{r()})),()=>{function e(){if(l.modelPagination&&0===l.modelPagination.itemsPerPage)return"";const{page:t,totalPages:e}=P.value;return m.pagination?m.pagination(P.value):h(QPagination,{class:"q-icon-picker__pagination",...l.paginationProps,modelValue:t,max:e,"onUpdate:modelValue":e=>{l.animated&&(e>t?p.direction=direction.NEXT:p.direction=direction.PREV),v({page:e})}})}function t(){if(!0!==l.noFooter&&void 0!==l.modelPagination)return h("div",{class:"q-icon-picker__footer flex flex-center"},[m.footer?m.footer(P.value):e()])}function s(e){if(!0===l.tooltips)return()=>h(QTooltip,{},()=>e)}function o(e){const t=void 0!==e.prefix?e.prefix+" "+e.name:e.name,o=void 0!==e.icon?e.icon:t;if(m.icon)return m.icon(t);const a=t===l.modelValue,n=a?l.selectedTextColor:void 0,i=a?l.selectedColor:void 0,r=l.size||void 0;return h(QBtn,{id:e.name,unelevated:!0,dense:l.dense,noWrap:!0,size:r,textColor:n,color:i,icon:o,onClick:()=>u("update:model-value",t)},s(t))}function a(){return g.value.map(e=>o(e))}function n(){const e=()=>h("div",{key:P.value.page,class:"q-icon-picker__container col"},[...a()]);if(!0!==l.animated)return e;{const t="q-transition--"+("prev"===p.direction?l.transitionPrev:l.transitionNext);return()=>h(Transition,{name:t,appear:!0},e)}}function i(){return h(QScrollArea,{ref:d,style:{width:p.width+"px",height:p.height+"px"}},n())}function r(){return h("div",{class:"q-icon-picker__body col column"},[i(),h(QResizeObserver,{onResize:e=>{p.width=e.width,p.height=e.height}})])}const c=["q-icon-picker","column"];return l.color&&c.push("bg-"+l.color),l.textColor&&c.push("text-"+l.textColor),h("div",{class:c.join(" ")},[r(),t()])}}});const version="3.0.0-rc.0";var vue_plugin_exports=__exportAll({QIconPicker:()=>QIconPicker_default,install:()=>install,version:()=>version});function install(e){e.component(String(QIconPicker_default.name),QIconPicker_default)}var index_esm_default=vue_plugin_exports;export{QIconPicker_default as QIconPicker,index_esm_default as default,install,version};
|
|
6
|
+
import{Transition,computed,defineComponent,h,nextTick,onMounted,reactive,ref,watch}from"vue";import{QBtn,QPagination,QResizeObserver,QScrollArea,QTooltip}from"quasar";var __defProp=Object.defineProperty,__exportAll=(e,t)=>{let o={};for(var a in e)__defProp(o,a,{get:e[a],enumerable:!0});return t||__defProp(o,Symbol.toStringTag,{value:"Module"}),o};const iconSetNames=["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","material-symbols-outlined","material-symbols-rounded","material-symbols-sharp","ionicons-v8","mdi-v7","fontawesome-v7","eva-icons","themify","line-awesome","bootstrap-icons"];function pascalToKebab(e){return e.replace(/([A-Z]+)([A-Z][a-z])/g,"$1-$2").replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function pascalToSnake(e){return pascalToKebab(e).replace(/-/g,"_")}function removePrefix(e,t){if(!1===e.startsWith(t))throw new Error(`Icon export ${e} does not start with expected prefix `+t);return e.slice(t.length)}function createSvgEntry(o,a=""){return(e,t)=>({name:""+a+pascalToKebab(removePrefix(e,o)),icon:t})}function createMaterialSvgEntry(o,a=""){return(e,t)=>({name:""+a+pascalToSnake(removePrefix(e,o)),icon:t})}function getIconNames(e){return Array.isArray(e)?e:e.default}function getIconExports(e){return Object.fromEntries(Object.entries(e).filter(e=>"string"===typeof e[1]))}function createIconSet(o,e,t){const a=getIconNames(e),n=new Set(a),i=getIconExports(t),r=iconSetConfigs[o];return{name:o,icons:a.map(e=>{const t=i[e];if("string"!==typeof t)throw new Error(`QIconPicker: ${o} is missing @quasar/extras export `+e);return r.createEntry(e,t,n)})}}const iconSetConfigs={"material-icons":{createEntry:createMaterialSvgEntry("mat")},"material-icons-outlined":{createEntry:createMaterialSvgEntry("outlined","o_")},"material-icons-round":{createEntry:createMaterialSvgEntry("round","r_")},"material-icons-sharp":{createEntry:createMaterialSvgEntry("sharp","s_")},"material-symbols-outlined":{createEntry:createMaterialSvgEntry("symOutlined","sym_o_")},"material-symbols-rounded":{createEntry:createMaterialSvgEntry("symRounded","sym_r_")},"material-symbols-sharp":{createEntry:createMaterialSvgEntry("symSharp","sym_s_")},"mdi-v7":{createEntry:createSvgEntry("mdi","mdi-")},"ionicons-v8":{createEntry:(e,t)=>({name:e,icon:t})},"fontawesome-v7":{createEntry:(e,t)=>({name:"fa-"+pascalToKebab(e.slice(3)),icon:t,prefix:e.slice(0,3)})},"line-awesome":{createEntry:(e,t,o)=>{const a=removePrefix(e,"la"),n=a.endsWith("Solid");return{name:"la-"+pascalToKebab(n?a.slice(0,-5):a),icon:t,prefix:n?"las":o.has(e+"Solid")?"lar":"lab"}}},"eva-icons":{createEntry:createSvgEntry("eva","eva-")},themify:{createEntry:createSvgEntry("ti","ti-")},"bootstrap-icons":{createEntry:createSvgEntry("bi","bi-")}},iconSetLoaders={"material-icons":()=>Promise.all([import("@quasar/extras/material-icons/icons.json"),import("@quasar/extras/material-icons")]).then(([e,t])=>createIconSet("material-icons",e,t)),"material-icons-outlined":()=>Promise.all([import("@quasar/extras/material-icons-outlined/icons.json"),import("@quasar/extras/material-icons-outlined")]).then(([e,t])=>createIconSet("material-icons-outlined",e,t)),"material-icons-round":()=>Promise.all([import("@quasar/extras/material-icons-round/icons.json"),import("@quasar/extras/material-icons-round")]).then(([e,t])=>createIconSet("material-icons-round",e,t)),"material-icons-sharp":()=>Promise.all([import("@quasar/extras/material-icons-sharp/icons.json"),import("@quasar/extras/material-icons-sharp")]).then(([e,t])=>createIconSet("material-icons-sharp",e,t)),"material-symbols-outlined":()=>Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"),import("@quasar/extras/material-symbols-outlined")]).then(([e,t])=>createIconSet("material-symbols-outlined",e,t)),"material-symbols-rounded":()=>Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"),import("@quasar/extras/material-symbols-rounded")]).then(([e,t])=>createIconSet("material-symbols-rounded",e,t)),"material-symbols-sharp":()=>Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"),import("@quasar/extras/material-symbols-sharp")]).then(([e,t])=>createIconSet("material-symbols-sharp",e,t)),"ionicons-v8":()=>Promise.all([import("@quasar/extras/ionicons-v8/icons.json"),import("@quasar/extras/ionicons-v8")]).then(([e,t])=>createIconSet("ionicons-v8",e,t)),"mdi-v7":()=>Promise.all([import("@quasar/extras/mdi-v7/icons.json"),import("@quasar/extras/mdi-v7")]).then(([e,t])=>createIconSet("mdi-v7",e,t)),"fontawesome-v7":()=>Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"),import("@quasar/extras/fontawesome-v7")]).then(([e,t])=>createIconSet("fontawesome-v7",e,t)),"line-awesome":()=>Promise.all([import("@quasar/extras/line-awesome/icons.json"),import("@quasar/extras/line-awesome")]).then(([e,t])=>createIconSet("line-awesome",e,t)),"eva-icons":()=>Promise.all([import("@quasar/extras/eva-icons/icons.json"),import("@quasar/extras/eva-icons")]).then(([e,t])=>createIconSet("eva-icons",e,t)),themify:()=>Promise.all([import("@quasar/extras/themify/icons.json"),import("@quasar/extras/themify")]).then(([e,t])=>createIconSet("themify",e,t)),"bootstrap-icons":()=>Promise.all([import("@quasar/extras/bootstrap-icons/icons.json"),import("@quasar/extras/bootstrap-icons")]).then(([e,t])=>createIconSet("bootstrap-icons",e,t))};function loadIconSet(e){return iconSetLoaders[e]()}const useIconPickerProps={modelValue:String,iconSet:{type:String,validator:e=>[...iconSetNames,""].includes(e),default:""},icons:Array,filter:String,dense:Boolean,tooltips:Boolean,noFooter:Boolean,size:{type:String,default:"inherit"},color:String,textColor:String,selectedColor:{type:String,default:"primary"},selectedTextColor:{type:String,default:"grey-1"},paginationProps:{type:Object,default:()=>({maxPages:5,input:!0})},modelPagination:Object,animated:Boolean,transitionPrev:{type:String,default:"slide-right"},transitionNext:{type:String,default:"slide-left"}},direction={NEXT:"next",PREV:"prev"};function useIconPickerPagination(o,a,n,e){function i(e){return e.page<1&&(e.page=1),(void 0===e.itemsPerPage||e.itemsPerPage<1)&&(e.itemsPerPage=0),e}function r(e,t){for(var o in t)if(t[o]!==e[o])return!1;return!0}const s=computed(()=>{return i({...o.innerPagination,...a.modelPagination})}),t=computed(()=>{return 0===s.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/s.value.itemsPerPage))});function c(e){const t=i({...s.value,...e});r(o.innerPagination,t)||(a.modelPagination&&n("update:model-pagination",t),o.innerPagination=t)}function l(){void 0!==a.modelPagination&&c({total:e.value.length,totalPages:t.value})}return{samePagination:r,computedPagination:s,setPagination:c,updatePagination:l,computedPagesNumber:t}}function useIconPickerIcons(n,o,t,a){let i=0;async function e(t){const e=++i;if(n.iconsList=[],t)if("undefined"!==typeof window&&window.QIconPicker){const o=t.replace(/-([a-z])/g,e=>e[1].toUpperCase());window.QIconPicker.iconSet&&window.QIconPicker.iconSet[o]?n.iconsList=window.QIconPicker.iconSet[o].icons:(console.error("QIconPicker: no icon set loaded called "+t),console.error("Built-in icon sets require ESM bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead."))}else if(iconSetNames.includes(t))try{const a=await loadIconSet(t);e===i&&(n.iconsList=a.icons)}catch(e){console.error("QIconPicker: failed to load icon set called "+t),console.error(e)}else console.error("QIconPicker: cannot find icon set called "+t)}const r=computed(()=>{let e=[];return n.iconsList&&(e=s.value,o.modelPagination)&&0!==o.modelPagination.itemsPerPage&&(e=e.slice(t.value,a.value)),e}),s=computed(()=>{let e=n.iconsList;if(e&&void 0!==o.filter&&""!==o.filter&&null!==o.filter){const t=o.filter.toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t))}return e});return{loadIconSet:e,computedDisplayedIcons:r,computedFilteredIcons:s}}function exposeIconPickerApi(o,a,n,e,i,r,t){const s=()=>{const e=a.value.page;e>1&&(n({page:e-1}),o.direction=direction.PREV)},c=()=>{const{page:e,itemsPerPage:t}=a.value;i.value>0&&e*t<r.value.length&&(n({page:e+1}),o.direction=direction.NEXT)},l=()=>{n({page:t.value})},m=()=>{n({page:0})};return{prevPage:s,nextPage:c,lastPage:l,firstPage:m,isLastPage:computed(()=>{return 0===i.value||a.value.page>=t.value}),isFirstPage:computed(()=>{return 1===a.value.page})}}var QIconPicker_default=defineComponent({name:"QIconPicker",slots:Object,props:{...useIconPickerProps},emits:["update:model-value","update:model-pagination"],setup(l,{slots:m,emit:u,expose:e}){const d=ref(null),p=reactive({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},width:"100",height:"100",direction:""}),t=computed(()=>{const{page:e,itemsPerPage:t}=P.value;return(e-1)*t}),o=computed(()=>{const{page:e,itemsPerPage:t}=P.value;return e*t}),{loadIconSet:a,computedDisplayedIcons:g,computedFilteredIcons:n}=useIconPickerIcons(p,l,t,o),{samePagination:i,computedPagination:P,setPagination:v,updatePagination:r,computedPagesNumber:s}=useIconPickerPagination(p,l,u,n),c=exposeIconPickerApi(p,P,v,t,o,n,s);return e({prevPage:c.prevPage,nextPage:c.nextPage,lastPage:c.lastPage,firstPage:c.firstPage,isLastPage:c.isLastPage,isFirstPage:c.isFirstPage}),onMounted(async()=>{l.iconSet?await a(l.iconSet):void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r()}),watch(()=>l.iconSet,async e=>{e&&(await a(e),r(),nextTick(()=>{v({page:1})}).catch(e=>console.error(e)),d.value)&&d.value.setScrollPosition("vertical",0)}),watch(()=>l.icons,()=>{void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r(),nextTick(()=>{v({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),watch(()=>l.filter,()=>{v({page:1,totalPages:s.value}),r()}),l.modelPagination&&watch(()=>l.modelPagination,(e,t)=>{i(t,e)||r()}),l.modelPagination&&(watch(()=>l.modelPagination.itemsPerPage,()=>{r()}),watch(()=>l.modelPagination.page,()=>{r()})),()=>{function e(){if(l.modelPagination&&0===l.modelPagination.itemsPerPage)return"";const{page:t,totalPages:e}=P.value;return m.pagination?m.pagination(P.value):h(QPagination,{class:"q-icon-picker__pagination",...l.paginationProps,modelValue:t,max:e,"onUpdate:modelValue":e=>{l.animated&&(e>t?p.direction=direction.NEXT:p.direction=direction.PREV),v({page:e})}})}function t(){if(!0!==l.noFooter&&void 0!==l.modelPagination)return h("div",{class:"q-icon-picker__footer flex flex-center"},[m.footer?m.footer(P.value):e()])}function s(e){if(!0===l.tooltips)return()=>h(QTooltip,{},()=>e)}function o(e){const t=void 0!==e.prefix?e.prefix+" "+e.name:e.name,o=void 0!==e.icon?e.icon:t;if(m.icon)return m.icon(t);const a=t===l.modelValue,n=a?l.selectedTextColor:void 0,i=a?l.selectedColor:void 0,r=l.size||void 0;return h(QBtn,{id:e.name,unelevated:!0,dense:l.dense,noWrap:!0,size:r,textColor:n,color:i,icon:o,onClick:()=>u("update:model-value",t)},s(t))}function a(){return g.value.map(e=>o(e))}function n(){const e=()=>h("div",{key:P.value.page,class:"q-icon-picker__container col"},[...a()]);if(!0!==l.animated)return e;{const t="q-transition--"+("prev"===p.direction?l.transitionPrev:l.transitionNext);return()=>h(Transition,{name:t,appear:!0},e)}}function i(){return h(QScrollArea,{ref:d,style:{width:p.width+"px",height:p.height+"px"}},n())}function r(){return h("div",{class:"q-icon-picker__body col column"},[i(),h(QResizeObserver,{onResize:e=>{p.width=e.width,p.height=e.height}})])}const c=["q-icon-picker","column"];return l.color&&c.push("bg-"+l.color),l.textColor&&c.push("text-"+l.textColor),h("div",{class:c.join(" ")},[r(),t()])}}});const version="3.0.0";var vue_plugin_exports=__exportAll({QIconPicker:()=>QIconPicker_default,install:()=>install,version:()=>version});function install(e){e.component(String(QIconPicker_default.name),QIconPicker_default)}var index_esm_default=vue_plugin_exports;export{QIconPicker_default as QIconPicker,index_esm_default as default,install,version};
|