@quasar/quasar-ui-qiconpicker 3.0.0-beta.0 → 3.0.0-beta.1
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 +32 -7
- package/dist/api/QIconPicker.json +1 -4
- package/dist/index.css +1 -1
- package/dist/index.esm.js +3 -19
- 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 +3 -19
- package/dist/index.umd.min.js +2 -2
- package/dist/types/index.d.ts +1 -1
- package/package.json +12 -11
- package/src/components/QIconPicker.json +1 -4
- package/src/components/QIconPicker.ts +1 -1
- package/src/components/icon-set-loader.ts +0 -30
- package/src/version.ts +1 -1
- package/dist/index.cjs.js +0 -479
- package/dist/index.cjs.min.js +0 -6
- package/src/index.cjs.ts +0 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
QIconPicker is a Quasar component that provides an icon picker for Vue and Quasar applications.
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
6
6
|
[](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
|
|
7
7
|
|
|
8
8
|
[](https://chat.quasar.dev)
|
|
@@ -17,10 +17,15 @@ Install the [App Extension](../app-extension).
|
|
|
17
17
|
Or install the UI package directly:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
pnpm add @quasar/quasar-ui-qiconpicker
|
|
21
|
-
#
|
|
22
|
-
|
|
23
|
-
#
|
|
20
|
+
pnpm add @quasar/quasar-ui-qiconpicker@beta
|
|
21
|
+
# or
|
|
22
|
+
bun add @quasar/quasar-ui-qiconpicker@beta
|
|
23
|
+
# or
|
|
24
|
+
yarn add @quasar/quasar-ui-qiconpicker@beta
|
|
25
|
+
# or
|
|
26
|
+
npm install @quasar/quasar-ui-qiconpicker@beta
|
|
27
|
+
# or, in a Quasar CLI app
|
|
28
|
+
quasar ext add @quasar/qiconpicker@beta
|
|
24
29
|
```
|
|
25
30
|
|
|
26
31
|
Then create and register a boot file:
|
|
@@ -74,6 +79,23 @@ The UMD bundle exports `window.QIconPicker`.
|
|
|
74
79
|
|
|
75
80
|
Built-in `icon-set` values lazy load from `@quasar/extras` and are intended for ESM/CJS bundler usage. For UMD, pass an `icons` array directly.
|
|
76
81
|
|
|
82
|
+
Supported built-in `icon-set` values are:
|
|
83
|
+
|
|
84
|
+
- `material-icons`
|
|
85
|
+
- `material-icons-outlined`
|
|
86
|
+
- `material-icons-round`
|
|
87
|
+
- `material-icons-sharp`
|
|
88
|
+
- `material-symbols-outlined`
|
|
89
|
+
- `material-symbols-rounded`
|
|
90
|
+
- `material-symbols-sharp`
|
|
91
|
+
- `ionicons-v8`
|
|
92
|
+
- `mdi-v7`
|
|
93
|
+
- `fontawesome-v7`
|
|
94
|
+
- `eva-icons`
|
|
95
|
+
- `themify`
|
|
96
|
+
- `line-awesome`
|
|
97
|
+
- `bootstrap-icons`
|
|
98
|
+
|
|
77
99
|
## Setup
|
|
78
100
|
|
|
79
101
|
This project is a pnpm workspace mono-repo.
|
|
@@ -84,9 +106,12 @@ pnpm build:ui
|
|
|
84
106
|
pnpm build:docs
|
|
85
107
|
```
|
|
86
108
|
|
|
87
|
-
##
|
|
109
|
+
## Support
|
|
110
|
+
|
|
111
|
+
If QIconPicker is useful in your workflow and you want to support ongoing maintenance:
|
|
88
112
|
|
|
89
|
-
|
|
113
|
+
GitHub Sponsors: https://github.com/sponsors/hawkeye64
|
|
114
|
+
PayPal: https://paypal.me/hawkeye64
|
|
90
115
|
|
|
91
116
|
## License
|
|
92
117
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "component",
|
|
3
3
|
"meta": {
|
|
4
|
-
"docsUrl": "https://
|
|
4
|
+
"docsUrl": "https://qiconpicker.netlify.app/developing/using-qiconpicker"
|
|
5
5
|
},
|
|
6
6
|
"props": {
|
|
7
7
|
"model-value": {
|
|
@@ -26,11 +26,8 @@
|
|
|
26
26
|
"material-symbols-outlined",
|
|
27
27
|
"material-symbols-rounded",
|
|
28
28
|
"material-symbols-sharp",
|
|
29
|
-
"ionicons-v7",
|
|
30
29
|
"ionicons-v8",
|
|
31
|
-
"mdi-v6",
|
|
32
30
|
"mdi-v7",
|
|
33
|
-
"fontawesome-v6",
|
|
34
31
|
"fontawesome-v7",
|
|
35
32
|
"line-awesome",
|
|
36
33
|
"eva-icons",
|
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-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -26,11 +26,8 @@ const iconSetNames = [
|
|
|
26
26
|
"material-symbols-outlined",
|
|
27
27
|
"material-symbols-rounded",
|
|
28
28
|
"material-symbols-sharp",
|
|
29
|
-
"ionicons-v7",
|
|
30
29
|
"ionicons-v8",
|
|
31
|
-
"mdi-v6",
|
|
32
30
|
"mdi-v7",
|
|
33
|
-
"fontawesome-v6",
|
|
34
31
|
"fontawesome-v7",
|
|
35
32
|
"eva-icons",
|
|
36
33
|
"themify",
|
|
@@ -87,21 +84,11 @@ const iconSetConfigs = {
|
|
|
87
84
|
"material-symbols-outlined": { createEntry: createMaterialSvgEntry("symOutlined", "sym_o_") },
|
|
88
85
|
"material-symbols-rounded": { createEntry: createMaterialSvgEntry("symRounded", "sym_r_") },
|
|
89
86
|
"material-symbols-sharp": { createEntry: createMaterialSvgEntry("symSharp", "sym_s_") },
|
|
90
|
-
"mdi-v6": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
91
87
|
"mdi-v7": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
92
|
-
"ionicons-v7": { createEntry: (iconName, icon) => ({
|
|
93
|
-
name: iconName,
|
|
94
|
-
icon
|
|
95
|
-
}) },
|
|
96
88
|
"ionicons-v8": { createEntry: (iconName, icon) => ({
|
|
97
89
|
name: iconName,
|
|
98
90
|
icon
|
|
99
91
|
}) },
|
|
100
|
-
"fontawesome-v6": { createEntry: (iconName, icon) => ({
|
|
101
|
-
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
102
|
-
icon,
|
|
103
|
-
prefix: iconName.slice(0, 3)
|
|
104
|
-
}) },
|
|
105
92
|
"fontawesome-v7": { createEntry: (iconName, icon) => ({
|
|
106
93
|
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
107
94
|
icon,
|
|
@@ -128,11 +115,8 @@ const iconSetLoaders = {
|
|
|
128
115
|
"material-symbols-outlined": () => Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"), import("@quasar/extras/material-symbols-outlined")]).then(([icons, extras]) => createIconSet("material-symbols-outlined", icons, extras)),
|
|
129
116
|
"material-symbols-rounded": () => Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"), import("@quasar/extras/material-symbols-rounded")]).then(([icons, extras]) => createIconSet("material-symbols-rounded", icons, extras)),
|
|
130
117
|
"material-symbols-sharp": () => Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"), import("@quasar/extras/material-symbols-sharp")]).then(([icons, extras]) => createIconSet("material-symbols-sharp", icons, extras)),
|
|
131
|
-
"ionicons-v7": () => Promise.all([import("@quasar/extras/ionicons-v7/icons.json"), import("@quasar/extras/ionicons-v7")]).then(([icons, extras]) => createIconSet("ionicons-v7", icons, extras)),
|
|
132
118
|
"ionicons-v8": () => Promise.all([import("@quasar/extras/ionicons-v8/icons.json"), import("@quasar/extras/ionicons-v8")]).then(([icons, extras]) => createIconSet("ionicons-v8", icons, extras)),
|
|
133
|
-
"mdi-v6": () => Promise.all([import("@quasar/extras/mdi-v6/icons.json"), import("@quasar/extras/mdi-v6")]).then(([icons, extras]) => createIconSet("mdi-v6", icons, extras)),
|
|
134
119
|
"mdi-v7": () => Promise.all([import("@quasar/extras/mdi-v7/icons.json"), import("@quasar/extras/mdi-v7")]).then(([icons, extras]) => createIconSet("mdi-v7", icons, extras)),
|
|
135
|
-
"fontawesome-v6": () => Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"), import("@quasar/extras/fontawesome-v6")]).then(([icons, extras]) => createIconSet("fontawesome-v6", icons, extras)),
|
|
136
120
|
"fontawesome-v7": () => Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"), import("@quasar/extras/fontawesome-v7")]).then(([icons, extras]) => createIconSet("fontawesome-v7", icons, extras)),
|
|
137
121
|
"line-awesome": () => Promise.all([import("@quasar/extras/line-awesome/icons.json"), import("@quasar/extras/line-awesome")]).then(([icons, extras]) => createIconSet("line-awesome", icons, extras)),
|
|
138
122
|
"eva-icons": () => Promise.all([import("@quasar/extras/eva-icons/icons.json"), import("@quasar/extras/eva-icons")]).then(([icons, extras]) => createIconSet("eva-icons", icons, extras)),
|
|
@@ -254,7 +238,7 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
|
|
|
254
238
|
if (window.QIconPicker.iconSet && window.QIconPicker.iconSet[name]) data.iconsList = window.QIconPicker.iconSet[name].icons;
|
|
255
239
|
else {
|
|
256
240
|
console.error(`QIconPicker: no icon set loaded called ${iconSet}`);
|
|
257
|
-
console.error("Built-in icon sets require ESM
|
|
241
|
+
console.error("Built-in icon sets require ESM bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead.");
|
|
258
242
|
}
|
|
259
243
|
} else if (iconSetNames.includes(iconSet)) try {
|
|
260
244
|
const loadedIconSet = await loadIconSet(iconSet);
|
|
@@ -478,7 +462,7 @@ var QIconPicker_default = defineComponent({
|
|
|
478
462
|
});
|
|
479
463
|
//#endregion
|
|
480
464
|
//#region src/version.ts
|
|
481
|
-
const version = "3.0.0-beta.
|
|
465
|
+
const version = "3.0.0-beta.1";
|
|
482
466
|
//#endregion
|
|
483
467
|
//#region src/vue-plugin.ts
|
|
484
468
|
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-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
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-v7","ionicons-v8","mdi-v6","mdi-v7","fontawesome-v6","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-v6":{createEntry:createSvgEntry("mdi","mdi-")},"mdi-v7":{createEntry:createSvgEntry("mdi","mdi-")},"ionicons-v7":{createEntry:(e,t)=>({name:e,icon:t})},"ionicons-v8":{createEntry:(e,t)=>({name:e,icon:t})},"fontawesome-v6":{createEntry:(e,t)=>({name:"fa-"+pascalToKebab(e.slice(3)),icon:t,prefix:e.slice(0,3)})},"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-v7":()=>Promise.all([import("@quasar/extras/ionicons-v7/icons.json"),import("@quasar/extras/ionicons-v7")]).then(([e,t])=>createIconSet("ionicons-v7",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-v6":()=>Promise.all([import("@quasar/extras/mdi-v6/icons.json"),import("@quasar/extras/mdi-v6")]).then(([e,t])=>createIconSet("mdi-v6",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-v6":()=>Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"),import("@quasar/extras/fontawesome-v6")]).then(([e,t])=>createIconSet("fontawesome-v6",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/CJS 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}=v.value;return(e-1)*t}),o=computed(()=>{const{page:e,itemsPerPage:t}=v.value;return e*t}),{loadIconSet:a,computedDisplayedIcons:g,computedFilteredIcons:n}=useIconPickerIcons(p,l,t,o),{samePagination:i,computedPagination:v,setPagination:P,updatePagination:r,computedPagesNumber:s}=useIconPickerPagination(p,l,u,n);return exposeIconPickerApi(p,e,v,P,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(()=>{P({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(()=>{P({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),watch(()=>l.filter,()=>{P({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}=v.value;return m.pagination?m.pagination(v.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),P({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(v.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:v.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-beta.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,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-beta.1";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};
|
package/dist/index.min.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/.q-icon-picker{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;height:100%}.q-icon-picker__body{position:relative}.q-icon-picker__body,.q-icon-picker__scroll-area{overflow:hidden;flex:1 1 auto;width:100%}.q-icon-picker__container{display:flex;flex:1 1 auto;flex-wrap:wrap;flex-direction:row;justify-content:center;width:100%}.q-icon-picker__footer,.q-icon-picker__header{width:100%}
|
package/dist/index.rtl.css
CHANGED
package/dist/index.rtl.min.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/.q-icon-picker{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;height:100%}.q-icon-picker__body{position:relative}.q-icon-picker__body,.q-icon-picker__scroll-area{overflow:hidden;flex:1 1 auto;width:100%}.q-icon-picker__container{display:flex;flex:1 1 auto;flex-wrap:wrap;flex-direction:row;justify-content:center;width:100%}.q-icon-picker__footer,.q-icon-picker__header{width:100%}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -20,11 +20,8 @@
|
|
|
20
20
|
"material-symbols-outlined",
|
|
21
21
|
"material-symbols-rounded",
|
|
22
22
|
"material-symbols-sharp",
|
|
23
|
-
"ionicons-v7",
|
|
24
23
|
"ionicons-v8",
|
|
25
|
-
"mdi-v6",
|
|
26
24
|
"mdi-v7",
|
|
27
|
-
"fontawesome-v6",
|
|
28
25
|
"fontawesome-v7",
|
|
29
26
|
"eva-icons",
|
|
30
27
|
"themify",
|
|
@@ -81,21 +78,11 @@
|
|
|
81
78
|
"material-symbols-outlined": { createEntry: createMaterialSvgEntry("symOutlined", "sym_o_") },
|
|
82
79
|
"material-symbols-rounded": { createEntry: createMaterialSvgEntry("symRounded", "sym_r_") },
|
|
83
80
|
"material-symbols-sharp": { createEntry: createMaterialSvgEntry("symSharp", "sym_s_") },
|
|
84
|
-
"mdi-v6": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
85
81
|
"mdi-v7": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
86
|
-
"ionicons-v7": { createEntry: (iconName, icon) => ({
|
|
87
|
-
name: iconName,
|
|
88
|
-
icon
|
|
89
|
-
}) },
|
|
90
82
|
"ionicons-v8": { createEntry: (iconName, icon) => ({
|
|
91
83
|
name: iconName,
|
|
92
84
|
icon
|
|
93
85
|
}) },
|
|
94
|
-
"fontawesome-v6": { createEntry: (iconName, icon) => ({
|
|
95
|
-
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
96
|
-
icon,
|
|
97
|
-
prefix: iconName.slice(0, 3)
|
|
98
|
-
}) },
|
|
99
86
|
"fontawesome-v7": { createEntry: (iconName, icon) => ({
|
|
100
87
|
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
101
88
|
icon,
|
|
@@ -122,11 +109,8 @@
|
|
|
122
109
|
"material-symbols-outlined": () => Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"), import("@quasar/extras/material-symbols-outlined")]).then(([icons, extras]) => createIconSet("material-symbols-outlined", icons, extras)),
|
|
123
110
|
"material-symbols-rounded": () => Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"), import("@quasar/extras/material-symbols-rounded")]).then(([icons, extras]) => createIconSet("material-symbols-rounded", icons, extras)),
|
|
124
111
|
"material-symbols-sharp": () => Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"), import("@quasar/extras/material-symbols-sharp")]).then(([icons, extras]) => createIconSet("material-symbols-sharp", icons, extras)),
|
|
125
|
-
"ionicons-v7": () => Promise.all([import("@quasar/extras/ionicons-v7/icons.json"), import("@quasar/extras/ionicons-v7")]).then(([icons, extras]) => createIconSet("ionicons-v7", icons, extras)),
|
|
126
112
|
"ionicons-v8": () => Promise.all([import("@quasar/extras/ionicons-v8/icons.json"), import("@quasar/extras/ionicons-v8")]).then(([icons, extras]) => createIconSet("ionicons-v8", icons, extras)),
|
|
127
|
-
"mdi-v6": () => Promise.all([import("@quasar/extras/mdi-v6/icons.json"), import("@quasar/extras/mdi-v6")]).then(([icons, extras]) => createIconSet("mdi-v6", icons, extras)),
|
|
128
113
|
"mdi-v7": () => Promise.all([import("@quasar/extras/mdi-v7/icons.json"), import("@quasar/extras/mdi-v7")]).then(([icons, extras]) => createIconSet("mdi-v7", icons, extras)),
|
|
129
|
-
"fontawesome-v6": () => Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"), import("@quasar/extras/fontawesome-v6")]).then(([icons, extras]) => createIconSet("fontawesome-v6", icons, extras)),
|
|
130
114
|
"fontawesome-v7": () => Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"), import("@quasar/extras/fontawesome-v7")]).then(([icons, extras]) => createIconSet("fontawesome-v7", icons, extras)),
|
|
131
115
|
"line-awesome": () => Promise.all([import("@quasar/extras/line-awesome/icons.json"), import("@quasar/extras/line-awesome")]).then(([icons, extras]) => createIconSet("line-awesome", icons, extras)),
|
|
132
116
|
"eva-icons": () => Promise.all([import("@quasar/extras/eva-icons/icons.json"), import("@quasar/extras/eva-icons")]).then(([icons, extras]) => createIconSet("eva-icons", icons, extras)),
|
|
@@ -248,7 +232,7 @@
|
|
|
248
232
|
if (window.QIconPicker.iconSet && window.QIconPicker.iconSet[name]) data.iconsList = window.QIconPicker.iconSet[name].icons;
|
|
249
233
|
else {
|
|
250
234
|
console.error(`QIconPicker: no icon set loaded called ${iconSet}`);
|
|
251
|
-
console.error("Built-in icon sets require ESM
|
|
235
|
+
console.error("Built-in icon sets require ESM bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead.");
|
|
252
236
|
}
|
|
253
237
|
} else if (iconSetNames.includes(iconSet)) try {
|
|
254
238
|
const loadedIconSet = await loadIconSet(iconSet);
|
|
@@ -472,7 +456,7 @@
|
|
|
472
456
|
});
|
|
473
457
|
//#endregion
|
|
474
458
|
//#region src/version.ts
|
|
475
|
-
const version = "3.0.0-beta.
|
|
459
|
+
const version = "3.0.0-beta.1";
|
|
476
460
|
//#endregion
|
|
477
461
|
//#region src/vue-plugin.ts
|
|
478
462
|
function install(app) {
|
package/dist/index.umd.min.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.
|
|
2
|
+
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.1
|
|
3
3
|
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
|
-
(function(e,o){"object"===typeof exports&&"undefined"!==typeof module?o(exports,require("vue"),require("quasar")):"function"===typeof define&&define.amd?define(["exports","vue","quasar"],o):(e="undefined"!==typeof globalThis?globalThis:e||self,o(e.QIconPicker={},e.Vue,e.Quasar))})(this,function(e,P,h){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});const c=["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","material-symbols-outlined","material-symbols-rounded","material-symbols-sharp","ionicons-v7","ionicons-v8","mdi-v6","mdi-v7","fontawesome-v6","fontawesome-v7","eva-icons","themify","line-awesome","bootstrap-icons"];function a(e){return e.replace(/([A-Z]+)([A-Z][a-z])/g,"$1-$2").replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function n(e){return a(e).replace(/-/g,"_")}function r(e,o){if(!1===e.startsWith(o))throw new Error(`Icon export ${e} does not start with expected prefix `+o);return e.slice(o.length)}function o(t,i=""){return(e,o)=>({name:""+i+a(r(e,t)),icon:o})}function t(t,i=""){return(e,o)=>({name:""+i+n(r(e,t)),icon:o})}function s(e){return Array.isArray(e)?e:e.default}function l(e){return Object.fromEntries(Object.entries(e).filter(e=>"string"===typeof e[1]))}function i(t,e,o){const i=s(e),n=new Set(i),a=l(o),r=m[t];return{name:t,icons:i.map(e=>{const o=a[e];if("string"!==typeof o)throw new Error(`QIconPicker: ${t} is missing @quasar/extras export `+e);return r.createEntry(e,o,n)})}}const m={"material-icons":{createEntry:t("mat")},"material-icons-outlined":{createEntry:t("outlined","o_")},"material-icons-round":{createEntry:t("round","r_")},"material-icons-sharp":{createEntry:t("sharp","s_")},"material-symbols-outlined":{createEntry:t("symOutlined","sym_o_")},"material-symbols-rounded":{createEntry:t("symRounded","sym_r_")},"material-symbols-sharp":{createEntry:t("symSharp","sym_s_")},"mdi-v6":{createEntry:o("mdi","mdi-")},"mdi-v7":{createEntry:o("mdi","mdi-")},"ionicons-v7":{createEntry:(e,o)=>({name:e,icon:o})},"ionicons-v8":{createEntry:(e,o)=>({name:e,icon:o})},"fontawesome-v6":{createEntry:(e,o)=>({name:"fa-"+a(e.slice(3)),icon:o,prefix:e.slice(0,3)})},"fontawesome-v7":{createEntry:(e,o)=>({name:"fa-"+a(e.slice(3)),icon:o,prefix:e.slice(0,3)})},"line-awesome":{createEntry:(e,o,t)=>{const i=r(e,"la"),n=i.endsWith("Solid");return{name:"la-"+a(n?i.slice(0,-5):i),icon:o,prefix:n?"las":t.has(e+"Solid")?"lar":"lab"}}},"eva-icons":{createEntry:o("eva","eva-")},themify:{createEntry:o("ti","ti-")},"bootstrap-icons":{createEntry:o("bi","bi-")}},u={"material-icons":()=>Promise.all([import("@quasar/extras/material-icons/icons.json"),import("@quasar/extras/material-icons")]).then(([e,o])=>i("material-icons",e,o)),"material-icons-outlined":()=>Promise.all([import("@quasar/extras/material-icons-outlined/icons.json"),import("@quasar/extras/material-icons-outlined")]).then(([e,o])=>i("material-icons-outlined",e,o)),"material-icons-round":()=>Promise.all([import("@quasar/extras/material-icons-round/icons.json"),import("@quasar/extras/material-icons-round")]).then(([e,o])=>i("material-icons-round",e,o)),"material-icons-sharp":()=>Promise.all([import("@quasar/extras/material-icons-sharp/icons.json"),import("@quasar/extras/material-icons-sharp")]).then(([e,o])=>i("material-icons-sharp",e,o)),"material-symbols-outlined":()=>Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"),import("@quasar/extras/material-symbols-outlined")]).then(([e,o])=>i("material-symbols-outlined",e,o)),"material-symbols-rounded":()=>Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"),import("@quasar/extras/material-symbols-rounded")]).then(([e,o])=>i("material-symbols-rounded",e,o)),"material-symbols-sharp":()=>Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"),import("@quasar/extras/material-symbols-sharp")]).then(([e,o])=>i("material-symbols-sharp",e,o)),"ionicons-v7":()=>Promise.all([import("@quasar/extras/ionicons-v7/icons.json"),import("@quasar/extras/ionicons-v7")]).then(([e,o])=>i("ionicons-v7",e,o)),"ionicons-v8":()=>Promise.all([import("@quasar/extras/ionicons-v8/icons.json"),import("@quasar/extras/ionicons-v8")]).then(([e,o])=>i("ionicons-v8",e,o)),"mdi-v6":()=>Promise.all([import("@quasar/extras/mdi-v6/icons.json"),import("@quasar/extras/mdi-v6")]).then(([e,o])=>i("mdi-v6",e,o)),"mdi-v7":()=>Promise.all([import("@quasar/extras/mdi-v7/icons.json"),import("@quasar/extras/mdi-v7")]).then(([e,o])=>i("mdi-v7",e,o)),"fontawesome-v6":()=>Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"),import("@quasar/extras/fontawesome-v6")]).then(([e,o])=>i("fontawesome-v6",e,o)),"fontawesome-v7":()=>Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"),import("@quasar/extras/fontawesome-v7")]).then(([e,o])=>i("fontawesome-v7",e,o)),"line-awesome":()=>Promise.all([import("@quasar/extras/line-awesome/icons.json"),import("@quasar/extras/line-awesome")]).then(([e,o])=>i("line-awesome",e,o)),"eva-icons":()=>Promise.all([import("@quasar/extras/eva-icons/icons.json"),import("@quasar/extras/eva-icons")]).then(([e,o])=>i("eva-icons",e,o)),themify:()=>Promise.all([import("@quasar/extras/themify/icons.json"),import("@quasar/extras/themify")]).then(([e,o])=>i("themify",e,o)),"bootstrap-icons":()=>Promise.all([import("@quasar/extras/bootstrap-icons/icons.json"),import("@quasar/extras/bootstrap-icons")]).then(([e,o])=>i("bootstrap-icons",e,o))};function d(e){return u[e]()}const p={modelValue:String,iconSet:{type:String,validator:e=>[...c,""].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"}},y={NEXT:"next",PREV:"prev"};function x(t,i,n,e){function a(e){return e.page<1&&(e.page=1),(void 0===e.itemsPerPage||e.itemsPerPage<1)&&(e.itemsPerPage=0),e}function r(e,o){for(var t in o)if(o[t]!==e[t])return!1;return!0}const s=(0,P.computed)(()=>{return a({...t.innerPagination,...i.modelPagination})}),o=(0,P.computed)(()=>{return 0===s.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/s.value.itemsPerPage))});function c(e){const o=a({...s.value,...e});r(t.innerPagination,o)||(i.modelPagination&&n("update:model-pagination",o),t.innerPagination=o)}function l(){void 0!==i.modelPagination&&c({total:e.value.length,totalPages:o.value})}return{samePagination:r,computedPagination:s,setPagination:c,updatePagination:l,computedPagesNumber:o}}function w(n,t,o,i){let a=0;async function e(o){const e=++a;if(n.iconsList=[],o)if("undefined"!==typeof window&&window.QIconPicker){const t=o.replace(/-([a-z])/g,e=>e[1].toUpperCase());window.QIconPicker.iconSet&&window.QIconPicker.iconSet[t]?n.iconsList=window.QIconPicker.iconSet[t].icons:(console.error("QIconPicker: no icon set loaded called "+o),console.error("Built-in icon sets require ESM/CJS bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead."))}else if(c.includes(o))try{const i=await d(o);e===a&&(n.iconsList=i.icons)}catch(e){console.error("QIconPicker: failed to load icon set called "+o),console.error(e)}else console.error("QIconPicker: cannot find icon set called "+o)}const r=(0,P.computed)(()=>{let e=[];return n.iconsList&&(e=s.value,t.modelPagination)&&0!==t.modelPagination.itemsPerPage&&(e=e.slice(o.value,i.value)),e}),s=(0,P.computed)(()=>{let e=n.iconsList;if(e&&void 0!==t.filter&&""!==t.filter&&null!==t.filter){const o=t.filter.toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(o))}return e});return{loadIconSet:e,computedDisplayedIcons:r,computedFilteredIcons:s}}function q(t,e,i,n,o,a,r,s){const c=()=>{const e=i.value.page;e>1&&(n({page:e-1}),t.direction=y.PREV)},l=()=>{const{page:e,itemsPerPage:o}=i.value;a.value>0&&e*o<r.value.length&&(n({page:e+1}),t.direction=y.NEXT)},m=()=>{n({page:s.value})},u=()=>{n({page:0})};e({prevPage:c,nextPage:l,lastPage:m,firstPage:u,isLastPage:(0,P.computed)(()=>{return 0===a.value||i.value.page>=s.value}),isFirstPage:(0,P.computed)(()=>{return 1===i.value.page})})}var g=(0,P.defineComponent)({name:"QIconPicker",props:{...p},emits:["update:model-value","update:model-pagination"],setup(l,{slots:m,emit:u,expose:e}){const d=(0,P.ref)(null),p=(0,P.reactive)({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},width:"100",height:"100",direction:""}),o=(0,P.computed)(()=>{const{page:e,itemsPerPage:o}=f.value;return(e-1)*o}),t=(0,P.computed)(()=>{const{page:e,itemsPerPage:o}=f.value;return e*o}),{loadIconSet:i,computedDisplayedIcons:g,computedFilteredIcons:n}=w(p,l,o,t),{samePagination:a,computedPagination:f,setPagination:v,updatePagination:r,computedPagesNumber:s}=x(p,l,u,n);return q(p,e,f,v,o,t,n,s),(0,P.onMounted)(async()=>{l.iconSet?await i(l.iconSet):void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r()}),(0,P.watch)(()=>l.iconSet,async e=>{e&&(await i(e),r(),(0,P.nextTick)(()=>{v({page:1})}).catch(e=>console.error(e)),d.value)&&d.value.setScrollPosition("vertical",0)}),(0,P.watch)(()=>l.icons,()=>{void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r(),(0,P.nextTick)(()=>{v({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),(0,P.watch)(()=>l.filter,()=>{v({page:1,totalPages:s.value}),r()}),l.modelPagination&&(0,P.watch)(()=>l.modelPagination,(e,o)=>{a(o,e)||r()}),l.modelPagination&&((0,P.watch)(()=>l.modelPagination.itemsPerPage,()=>{r()}),(0,P.watch)(()=>l.modelPagination.page,()=>{r()})),()=>{function e(){if(l.modelPagination&&0===l.modelPagination.itemsPerPage)return"";const{page:o,totalPages:e}=f.value;return m.pagination?m.pagination(f.value):(0,P.h)(h.QPagination,{class:"q-icon-picker__pagination",...l.paginationProps,modelValue:o,max:e,"onUpdate:modelValue":e=>{l.animated&&(e>o?p.direction=y.NEXT:p.direction=y.PREV),v({page:e})}})}function o(){if(!0!==l.noFooter&&void 0!==l.modelPagination)return(0,P.h)("div",{class:"q-icon-picker__footer flex flex-center"},[m.footer?m.footer(f.value):e()])}function s(e){if(!0===l.tooltips)return()=>(0,P.h)(h.QTooltip,{},()=>e)}function t(e){const o=void 0!==e.prefix?e.prefix+" "+e.name:e.name,t=void 0!==e.icon?e.icon:o;if(m.icon)return m.icon(o);const i=o===l.modelValue,n=i?l.selectedTextColor:void 0,a=i?l.selectedColor:void 0,r=l.size||void 0;return(0,P.h)(h.QBtn,{id:e.name,unelevated:!0,dense:l.dense,noWrap:!0,size:r,textColor:n,color:a,icon:t,onClick:()=>u("update:model-value",o)},s(o))}function i(){return g.value.map(e=>t(e))}function n(){const e=()=>(0,P.h)("div",{key:f.value.page,class:"q-icon-picker__container col"},[...i()]);if(!0!==l.animated)return e;{const o="q-transition--"+("prev"===p.direction?l.transitionPrev:l.transitionNext);return()=>(0,P.h)(P.Transition,{name:o,appear:!0},e)}}function a(){return(0,P.h)(h.QScrollArea,{ref:d,style:{width:p.width+"px",height:p.height+"px"}},n())}function r(){return(0,P.h)("div",{class:"q-icon-picker__body col column"},[a(),(0,P.h)(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),(0,P.h)("div",{class:c.join(" ")},[r(),o()])}}});const f="3.0.0-beta.0";function v(e){e.component(String(g.name),g)}e.QIconPicker=g,e.install=v,e.version=f});
|
|
6
|
+
(function(e,t){"object"===typeof exports&&"undefined"!==typeof module?t(exports,require("vue"),require("quasar")):"function"===typeof define&&define.amd?define(["exports","vue","quasar"],t):(e="undefined"!==typeof globalThis?globalThis:e||self,t(e.QIconPicker={},e.Vue,e.Quasar))})(this,function(e,h,v){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"});const l=["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 a(e){return e.replace(/([A-Z]+)([A-Z][a-z])/g,"$1-$2").replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function n(e){return a(e).replace(/-/g,"_")}function r(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 t(o,i=""){return(e,t)=>({name:""+i+a(r(e,o)),icon:t})}function o(o,i=""){return(e,t)=>({name:""+i+n(r(e,o)),icon:t})}function s(e){return Array.isArray(e)?e:e.default}function c(e){return Object.fromEntries(Object.entries(e).filter(e=>"string"===typeof e[1]))}function i(o,e,t){const i=s(e),n=new Set(i),a=c(t),r=u[o];return{name:o,icons:i.map(e=>{const t=a[e];if("string"!==typeof t)throw new Error(`QIconPicker: ${o} is missing @quasar/extras export `+e);return r.createEntry(e,t,n)})}}const u={"material-icons":{createEntry:o("mat")},"material-icons-outlined":{createEntry:o("outlined","o_")},"material-icons-round":{createEntry:o("round","r_")},"material-icons-sharp":{createEntry:o("sharp","s_")},"material-symbols-outlined":{createEntry:o("symOutlined","sym_o_")},"material-symbols-rounded":{createEntry:o("symRounded","sym_r_")},"material-symbols-sharp":{createEntry:o("symSharp","sym_s_")},"mdi-v7":{createEntry:t("mdi","mdi-")},"ionicons-v8":{createEntry:(e,t)=>({name:e,icon:t})},"fontawesome-v7":{createEntry:(e,t)=>({name:"fa-"+a(e.slice(3)),icon:t,prefix:e.slice(0,3)})},"line-awesome":{createEntry:(e,t,o)=>{const i=r(e,"la"),n=i.endsWith("Solid");return{name:"la-"+a(n?i.slice(0,-5):i),icon:t,prefix:n?"las":o.has(e+"Solid")?"lar":"lab"}}},"eva-icons":{createEntry:t("eva","eva-")},themify:{createEntry:t("ti","ti-")},"bootstrap-icons":{createEntry:t("bi","bi-")}},m={"material-icons":()=>Promise.all([import("@quasar/extras/material-icons/icons.json"),import("@quasar/extras/material-icons")]).then(([e,t])=>i("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])=>i("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])=>i("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])=>i("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])=>i("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])=>i("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])=>i("material-symbols-sharp",e,t)),"ionicons-v8":()=>Promise.all([import("@quasar/extras/ionicons-v8/icons.json"),import("@quasar/extras/ionicons-v8")]).then(([e,t])=>i("ionicons-v8",e,t)),"mdi-v7":()=>Promise.all([import("@quasar/extras/mdi-v7/icons.json"),import("@quasar/extras/mdi-v7")]).then(([e,t])=>i("mdi-v7",e,t)),"fontawesome-v7":()=>Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"),import("@quasar/extras/fontawesome-v7")]).then(([e,t])=>i("fontawesome-v7",e,t)),"line-awesome":()=>Promise.all([import("@quasar/extras/line-awesome/icons.json"),import("@quasar/extras/line-awesome")]).then(([e,t])=>i("line-awesome",e,t)),"eva-icons":()=>Promise.all([import("@quasar/extras/eva-icons/icons.json"),import("@quasar/extras/eva-icons")]).then(([e,t])=>i("eva-icons",e,t)),themify:()=>Promise.all([import("@quasar/extras/themify/icons.json"),import("@quasar/extras/themify")]).then(([e,t])=>i("themify",e,t)),"bootstrap-icons":()=>Promise.all([import("@quasar/extras/bootstrap-icons/icons.json"),import("@quasar/extras/bootstrap-icons")]).then(([e,t])=>i("bootstrap-icons",e,t))};function d(e){return m[e]()}const p={modelValue:String,iconSet:{type:String,validator:e=>[...l,""].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"}},y={NEXT:"next",PREV:"prev"};function x(o,i,n,e){function a(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=(0,h.computed)(()=>{return a({...o.innerPagination,...i.modelPagination})}),t=(0,h.computed)(()=>{return 0===s.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/s.value.itemsPerPage))});function l(e){const t=a({...s.value,...e});r(o.innerPagination,t)||(i.modelPagination&&n("update:model-pagination",t),o.innerPagination=t)}function c(){void 0!==i.modelPagination&&l({total:e.value.length,totalPages:t.value})}return{samePagination:r,computedPagination:s,setPagination:l,updatePagination:c,computedPagesNumber:t}}function w(n,o,t,i){let a=0;async function e(t){const e=++a;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(l.includes(t))try{const i=await d(t);e===a&&(n.iconsList=i.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=(0,h.computed)(()=>{let e=[];return n.iconsList&&(e=s.value,o.modelPagination)&&0!==o.modelPagination.itemsPerPage&&(e=e.slice(t.value,i.value)),e}),s=(0,h.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 b(o,e,i,n,t,a,r,s){const l=()=>{const e=i.value.page;e>1&&(n({page:e-1}),o.direction=y.PREV)},c=()=>{const{page:e,itemsPerPage:t}=i.value;a.value>0&&e*t<r.value.length&&(n({page:e+1}),o.direction=y.NEXT)},u=()=>{n({page:s.value})},m=()=>{n({page:0})};e({prevPage:l,nextPage:c,lastPage:u,firstPage:m,isLastPage:(0,h.computed)(()=>{return 0===a.value||i.value.page>=s.value}),isFirstPage:(0,h.computed)(()=>{return 1===i.value.page})})}var g=(0,h.defineComponent)({name:"QIconPicker",props:{...p},emits:["update:model-value","update:model-pagination"],setup(c,{slots:u,emit:m,expose:e}){const d=(0,h.ref)(null),p=(0,h.reactive)({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},width:"100",height:"100",direction:""}),t=(0,h.computed)(()=>{const{page:e,itemsPerPage:t}=f.value;return(e-1)*t}),o=(0,h.computed)(()=>{const{page:e,itemsPerPage:t}=f.value;return e*t}),{loadIconSet:i,computedDisplayedIcons:g,computedFilteredIcons:n}=w(p,c,t,o),{samePagination:a,computedPagination:f,setPagination:P,updatePagination:r,computedPagesNumber:s}=x(p,c,m,n);return b(p,e,f,P,t,o,n,s),(0,h.onMounted)(async()=>{c.iconSet?await i(c.iconSet):void 0!==c.icons&&c.icons.length>0&&(p.iconsList=c.icons),r()}),(0,h.watch)(()=>c.iconSet,async e=>{e&&(await i(e),r(),(0,h.nextTick)(()=>{P({page:1})}).catch(e=>console.error(e)),d.value)&&d.value.setScrollPosition("vertical",0)}),(0,h.watch)(()=>c.icons,()=>{void 0!==c.icons&&c.icons.length>0&&(p.iconsList=c.icons),r(),(0,h.nextTick)(()=>{P({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),(0,h.watch)(()=>c.filter,()=>{P({page:1,totalPages:s.value}),r()}),c.modelPagination&&(0,h.watch)(()=>c.modelPagination,(e,t)=>{a(t,e)||r()}),c.modelPagination&&((0,h.watch)(()=>c.modelPagination.itemsPerPage,()=>{r()}),(0,h.watch)(()=>c.modelPagination.page,()=>{r()})),()=>{function e(){if(c.modelPagination&&0===c.modelPagination.itemsPerPage)return"";const{page:t,totalPages:e}=f.value;return u.pagination?u.pagination(f.value):(0,h.h)(v.QPagination,{class:"q-icon-picker__pagination",...c.paginationProps,modelValue:t,max:e,"onUpdate:modelValue":e=>{c.animated&&(e>t?p.direction=y.NEXT:p.direction=y.PREV),P({page:e})}})}function t(){if(!0!==c.noFooter&&void 0!==c.modelPagination)return(0,h.h)("div",{class:"q-icon-picker__footer flex flex-center"},[u.footer?u.footer(f.value):e()])}function s(e){if(!0===c.tooltips)return()=>(0,h.h)(v.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(u.icon)return u.icon(t);const i=t===c.modelValue,n=i?c.selectedTextColor:void 0,a=i?c.selectedColor:void 0,r=c.size||void 0;return(0,h.h)(v.QBtn,{id:e.name,unelevated:!0,dense:c.dense,noWrap:!0,size:r,textColor:n,color:a,icon:o,onClick:()=>m("update:model-value",t)},s(t))}function i(){return g.value.map(e=>o(e))}function n(){const e=()=>(0,h.h)("div",{key:f.value.page,class:"q-icon-picker__container col"},[...i()]);if(!0!==c.animated)return e;{const t="q-transition--"+("prev"===p.direction?c.transitionPrev:c.transitionNext);return()=>(0,h.h)(h.Transition,{name:t,appear:!0},e)}}function a(){return(0,h.h)(v.QScrollArea,{ref:d,style:{width:p.width+"px",height:p.height+"px"}},n())}function r(){return(0,h.h)("div",{class:"q-icon-picker__body col column"},[a(),(0,h.h)(v.QResizeObserver,{onResize:e=>{p.width=e.width,p.height=e.height}})])}const l=["q-icon-picker","column"];return c.color&&l.push("bg-"+c.color),c.textColor&&l.push("text-"+c.textColor),(0,h.h)("div",{class:l.join(" ")},[r(),t()])}}});const f="3.0.0-beta.1";function P(e){e.component(String(g.name),g)}e.QIconPicker=g,e.install=P,e.version=f});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export interface QIconPicker extends ComponentPublicInstance {
|
|
|
8
8
|
/**
|
|
9
9
|
* The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets). Built-in sets are lazy loaded from `@quasar/extras`.
|
|
10
10
|
*/
|
|
11
|
-
iconSet? : "material-icons" | "material-icons-outlined" | "material-icons-round" | "material-icons-sharp" | "material-symbols-outlined" | "material-symbols-rounded" | "material-symbols-sharp" | "ionicons-
|
|
11
|
+
iconSet? : "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"
|
|
12
12
|
/**
|
|
13
13
|
* 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 }`.
|
|
14
14
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quasar/quasar-ui-qiconpicker",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
4
4
|
"description": "QIconPicker - Quasar component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"icon",
|
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
"dist",
|
|
33
33
|
"src"
|
|
34
34
|
],
|
|
35
|
-
"
|
|
35
|
+
"type": "module",
|
|
36
|
+
"main": "dist/index.esm.js",
|
|
36
37
|
"module": "dist/index.esm.js",
|
|
37
38
|
"types": "dist/types/index.d.ts",
|
|
38
39
|
"typings": "dist/types/index.d.ts",
|
|
@@ -42,7 +43,7 @@
|
|
|
42
43
|
".": {
|
|
43
44
|
"types": "./dist/types/index.d.ts",
|
|
44
45
|
"import": "./dist/index.esm.js",
|
|
45
|
-
"
|
|
46
|
+
"default": "./dist/index.esm.js"
|
|
46
47
|
},
|
|
47
48
|
"./index.min.css": {
|
|
48
49
|
"default": "./dist/index.min.css"
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
"access": "public"
|
|
66
67
|
},
|
|
67
68
|
"devDependencies": {
|
|
68
|
-
"@quasar/extras": "
|
|
69
|
+
"@quasar/extras": "2.0.0",
|
|
69
70
|
"@types/node": "^25.9.1",
|
|
70
71
|
"@types/rtlcss": "^3.5.4",
|
|
71
72
|
"@types/uglify-js": "^3.17.5",
|
|
@@ -78,17 +79,17 @@
|
|
|
78
79
|
"postcss": "^8.5.15",
|
|
79
80
|
"quasar": "^2.19.3",
|
|
80
81
|
"rimraf": "^6.1.3",
|
|
81
|
-
"rolldown": "^1.0.
|
|
82
|
+
"rolldown": "^1.0.3",
|
|
82
83
|
"rtlcss": "^4.3.0",
|
|
83
|
-
"sass-embedded": "^1.
|
|
84
|
+
"sass-embedded": "^1.100.0",
|
|
84
85
|
"table": "^6.9.0",
|
|
85
86
|
"tsx": "^4.22.3",
|
|
86
|
-
"typescript": "~
|
|
87
|
+
"typescript": "~6.0.3",
|
|
87
88
|
"uglify-js": "^3.19.3",
|
|
88
|
-
"vue": "^3.5.
|
|
89
|
+
"vue": "^3.5.35"
|
|
89
90
|
},
|
|
90
91
|
"peerDependencies": {
|
|
91
|
-
"@quasar/extras": ">=
|
|
92
|
+
"@quasar/extras": ">=2.0.0"
|
|
92
93
|
},
|
|
93
94
|
"browserslist": [
|
|
94
95
|
"last 4 Chrome versions",
|
|
@@ -102,7 +103,7 @@
|
|
|
102
103
|
],
|
|
103
104
|
"engines": {
|
|
104
105
|
"node": ">=22.13",
|
|
105
|
-
"pnpm": ">=11.
|
|
106
|
+
"pnpm": ">=11.4.0"
|
|
106
107
|
},
|
|
107
108
|
"vetur": {
|
|
108
109
|
"tags": "dist/vetur/tags.json",
|
|
@@ -116,7 +117,7 @@
|
|
|
116
117
|
"build:css": "tsx build/script.css.ts",
|
|
117
118
|
"build:api": "tsx build/build.api.ts",
|
|
118
119
|
"build:app-ext": "tsx build/script.app-ext.ts",
|
|
119
|
-
"typecheck": "pnpm build:api && tsc -p test-d/tsconfig.json --noEmit --pretty false",
|
|
120
|
+
"typecheck": "pnpm build:api && tsc -p tsconfig.json --noEmit --pretty false && tsc -p test-d/tsconfig.json --noEmit --pretty false",
|
|
120
121
|
"test:types": "pnpm build && pnpm typecheck",
|
|
121
122
|
"release": "pnpm publish --tag beta"
|
|
122
123
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
|
-
"docsUrl": "https://
|
|
3
|
+
"docsUrl": "https://qiconpicker.netlify.app/developing/using-qiconpicker"
|
|
4
4
|
},
|
|
5
5
|
"props": {
|
|
6
6
|
"model-value": {
|
|
@@ -22,11 +22,8 @@
|
|
|
22
22
|
"material-symbols-outlined",
|
|
23
23
|
"material-symbols-rounded",
|
|
24
24
|
"material-symbols-sharp",
|
|
25
|
-
"ionicons-v7",
|
|
26
25
|
"ionicons-v8",
|
|
27
|
-
"mdi-v6",
|
|
28
26
|
"mdi-v7",
|
|
29
|
-
"fontawesome-v6",
|
|
30
27
|
"fontawesome-v7",
|
|
31
28
|
"line-awesome",
|
|
32
29
|
"eva-icons",
|
|
@@ -160,7 +160,7 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
|
|
|
160
160
|
} else {
|
|
161
161
|
console.error(`QIconPicker: no icon set loaded called ${iconSet}`)
|
|
162
162
|
console.error(
|
|
163
|
-
'Built-in icon sets require ESM
|
|
163
|
+
'Built-in icon sets require ESM bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead.',
|
|
164
164
|
)
|
|
165
165
|
}
|
|
166
166
|
} else {
|
|
@@ -23,11 +23,8 @@ export const iconSetNames = [
|
|
|
23
23
|
'material-symbols-outlined',
|
|
24
24
|
'material-symbols-rounded',
|
|
25
25
|
'material-symbols-sharp',
|
|
26
|
-
'ionicons-v7',
|
|
27
26
|
'ionicons-v8',
|
|
28
|
-
'mdi-v6',
|
|
29
27
|
'mdi-v7',
|
|
30
|
-
'fontawesome-v6',
|
|
31
28
|
'fontawesome-v7',
|
|
32
29
|
'eva-icons',
|
|
33
30
|
'themify',
|
|
@@ -128,25 +125,12 @@ const iconSetConfigs: Record<IconSetName, IconSetConfig> = {
|
|
|
128
125
|
'material-symbols-sharp': {
|
|
129
126
|
createEntry: createMaterialSvgEntry('symSharp', 'sym_s_'),
|
|
130
127
|
},
|
|
131
|
-
'mdi-v6': {
|
|
132
|
-
createEntry: createSvgEntry('mdi', 'mdi-'),
|
|
133
|
-
},
|
|
134
128
|
'mdi-v7': {
|
|
135
129
|
createEntry: createSvgEntry('mdi', 'mdi-'),
|
|
136
130
|
},
|
|
137
|
-
'ionicons-v7': {
|
|
138
|
-
createEntry: (iconName, icon) => ({ name: iconName, icon }),
|
|
139
|
-
},
|
|
140
131
|
'ionicons-v8': {
|
|
141
132
|
createEntry: (iconName, icon) => ({ name: iconName, icon }),
|
|
142
133
|
},
|
|
143
|
-
'fontawesome-v6': {
|
|
144
|
-
createEntry: (iconName, icon) => ({
|
|
145
|
-
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
146
|
-
icon,
|
|
147
|
-
prefix: iconName.slice(0, 3),
|
|
148
|
-
}),
|
|
149
|
-
},
|
|
150
134
|
'fontawesome-v7': {
|
|
151
135
|
createEntry: (iconName, icon) => ({
|
|
152
136
|
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
@@ -214,29 +198,15 @@ const iconSetLoaders: Record<IconSetName, () => Promise<IconSet>> = {
|
|
|
214
198
|
import('@quasar/extras/material-symbols-sharp/icons.json'),
|
|
215
199
|
import('@quasar/extras/material-symbols-sharp'),
|
|
216
200
|
]).then(([icons, extras]) => createIconSet('material-symbols-sharp', icons, extras)),
|
|
217
|
-
'ionicons-v7': () =>
|
|
218
|
-
Promise.all([
|
|
219
|
-
import('@quasar/extras/ionicons-v7/icons.json'),
|
|
220
|
-
import('@quasar/extras/ionicons-v7'),
|
|
221
|
-
]).then(([icons, extras]) => createIconSet('ionicons-v7', icons, extras)),
|
|
222
201
|
'ionicons-v8': () =>
|
|
223
202
|
Promise.all([
|
|
224
203
|
import('@quasar/extras/ionicons-v8/icons.json'),
|
|
225
204
|
import('@quasar/extras/ionicons-v8'),
|
|
226
205
|
]).then(([icons, extras]) => createIconSet('ionicons-v8', icons, extras)),
|
|
227
|
-
'mdi-v6': () =>
|
|
228
|
-
Promise.all([import('@quasar/extras/mdi-v6/icons.json'), import('@quasar/extras/mdi-v6')]).then(
|
|
229
|
-
([icons, extras]) => createIconSet('mdi-v6', icons, extras),
|
|
230
|
-
),
|
|
231
206
|
'mdi-v7': () =>
|
|
232
207
|
Promise.all([import('@quasar/extras/mdi-v7/icons.json'), import('@quasar/extras/mdi-v7')]).then(
|
|
233
208
|
([icons, extras]) => createIconSet('mdi-v7', icons, extras),
|
|
234
209
|
),
|
|
235
|
-
'fontawesome-v6': () =>
|
|
236
|
-
Promise.all([
|
|
237
|
-
import('@quasar/extras/fontawesome-v6/icons.json'),
|
|
238
|
-
import('@quasar/extras/fontawesome-v6'),
|
|
239
|
-
]).then(([icons, extras]) => createIconSet('fontawesome-v6', icons, extras)),
|
|
240
210
|
'fontawesome-v7': () =>
|
|
241
211
|
Promise.all([
|
|
242
212
|
import('@quasar/extras/fontawesome-v7/icons.json'),
|
package/src/version.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '3.0.0-beta.
|
|
1
|
+
export const version = '3.0.0-beta.1'
|
package/dist/index.cjs.js
DELETED
|
@@ -1,479 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.0
|
|
3
|
-
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
|
-
* Released under the MIT License.
|
|
5
|
-
*/
|
|
6
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
7
|
-
let vue = require("vue");
|
|
8
|
-
let quasar = require("quasar");
|
|
9
|
-
//#region src/components/icon-set-loader.ts
|
|
10
|
-
const iconSetNames = [
|
|
11
|
-
"material-icons",
|
|
12
|
-
"material-icons-outlined",
|
|
13
|
-
"material-icons-round",
|
|
14
|
-
"material-icons-sharp",
|
|
15
|
-
"material-symbols-outlined",
|
|
16
|
-
"material-symbols-rounded",
|
|
17
|
-
"material-symbols-sharp",
|
|
18
|
-
"ionicons-v7",
|
|
19
|
-
"ionicons-v8",
|
|
20
|
-
"mdi-v6",
|
|
21
|
-
"mdi-v7",
|
|
22
|
-
"fontawesome-v6",
|
|
23
|
-
"fontawesome-v7",
|
|
24
|
-
"eva-icons",
|
|
25
|
-
"themify",
|
|
26
|
-
"line-awesome",
|
|
27
|
-
"bootstrap-icons"
|
|
28
|
-
];
|
|
29
|
-
function pascalToKebab(value) {
|
|
30
|
-
return value.replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
31
|
-
}
|
|
32
|
-
function pascalToSnake(value) {
|
|
33
|
-
return pascalToKebab(value).replace(/-/g, "_");
|
|
34
|
-
}
|
|
35
|
-
function removePrefix(value, prefix) {
|
|
36
|
-
if (value.startsWith(prefix) === false) throw new Error(`Icon export ${value} does not start with expected prefix ${prefix}`);
|
|
37
|
-
return value.slice(prefix.length);
|
|
38
|
-
}
|
|
39
|
-
function createSvgEntry(prefix, namePrefix = "") {
|
|
40
|
-
return (iconName, icon) => ({
|
|
41
|
-
name: `${namePrefix}${pascalToKebab(removePrefix(iconName, prefix))}`,
|
|
42
|
-
icon
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
function createMaterialSvgEntry(prefix, namePrefix = "") {
|
|
46
|
-
return (iconName, icon) => ({
|
|
47
|
-
name: `${namePrefix}${pascalToSnake(removePrefix(iconName, prefix))}`,
|
|
48
|
-
icon
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
function getIconNames(module) {
|
|
52
|
-
return Array.isArray(module) ? module : module.default;
|
|
53
|
-
}
|
|
54
|
-
function getIconExports(module) {
|
|
55
|
-
return Object.fromEntries(Object.entries(module).filter((entry) => typeof entry[1] === "string"));
|
|
56
|
-
}
|
|
57
|
-
function createIconSet(name, iconNamesModule, extrasModule) {
|
|
58
|
-
const iconNames = getIconNames(iconNamesModule);
|
|
59
|
-
const iconNamesSet = new Set(iconNames);
|
|
60
|
-
const extras = getIconExports(extrasModule);
|
|
61
|
-
const config = iconSetConfigs[name];
|
|
62
|
-
return {
|
|
63
|
-
name,
|
|
64
|
-
icons: iconNames.map((iconName) => {
|
|
65
|
-
const icon = extras[iconName];
|
|
66
|
-
if (typeof icon !== "string") throw new Error(`QIconPicker: ${name} is missing @quasar/extras export ${iconName}`);
|
|
67
|
-
return config.createEntry(iconName, icon, iconNamesSet);
|
|
68
|
-
})
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
const iconSetConfigs = {
|
|
72
|
-
"material-icons": { createEntry: createMaterialSvgEntry("mat") },
|
|
73
|
-
"material-icons-outlined": { createEntry: createMaterialSvgEntry("outlined", "o_") },
|
|
74
|
-
"material-icons-round": { createEntry: createMaterialSvgEntry("round", "r_") },
|
|
75
|
-
"material-icons-sharp": { createEntry: createMaterialSvgEntry("sharp", "s_") },
|
|
76
|
-
"material-symbols-outlined": { createEntry: createMaterialSvgEntry("symOutlined", "sym_o_") },
|
|
77
|
-
"material-symbols-rounded": { createEntry: createMaterialSvgEntry("symRounded", "sym_r_") },
|
|
78
|
-
"material-symbols-sharp": { createEntry: createMaterialSvgEntry("symSharp", "sym_s_") },
|
|
79
|
-
"mdi-v6": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
80
|
-
"mdi-v7": { createEntry: createSvgEntry("mdi", "mdi-") },
|
|
81
|
-
"ionicons-v7": { createEntry: (iconName, icon) => ({
|
|
82
|
-
name: iconName,
|
|
83
|
-
icon
|
|
84
|
-
}) },
|
|
85
|
-
"ionicons-v8": { createEntry: (iconName, icon) => ({
|
|
86
|
-
name: iconName,
|
|
87
|
-
icon
|
|
88
|
-
}) },
|
|
89
|
-
"fontawesome-v6": { createEntry: (iconName, icon) => ({
|
|
90
|
-
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
91
|
-
icon,
|
|
92
|
-
prefix: iconName.slice(0, 3)
|
|
93
|
-
}) },
|
|
94
|
-
"fontawesome-v7": { createEntry: (iconName, icon) => ({
|
|
95
|
-
name: `fa-${pascalToKebab(iconName.slice(3))}`,
|
|
96
|
-
icon,
|
|
97
|
-
prefix: iconName.slice(0, 3)
|
|
98
|
-
}) },
|
|
99
|
-
"line-awesome": { createEntry: (iconName, icon, iconNames) => {
|
|
100
|
-
const rawName = removePrefix(iconName, "la");
|
|
101
|
-
const isSolid = rawName.endsWith("Solid");
|
|
102
|
-
return {
|
|
103
|
-
name: `la-${pascalToKebab(isSolid ? rawName.slice(0, -5) : rawName)}`,
|
|
104
|
-
icon,
|
|
105
|
-
prefix: isSolid ? "las" : iconNames.has(`${iconName}Solid`) ? "lar" : "lab"
|
|
106
|
-
};
|
|
107
|
-
} },
|
|
108
|
-
"eva-icons": { createEntry: createSvgEntry("eva", "eva-") },
|
|
109
|
-
themify: { createEntry: createSvgEntry("ti", "ti-") },
|
|
110
|
-
"bootstrap-icons": { createEntry: createSvgEntry("bi", "bi-") }
|
|
111
|
-
};
|
|
112
|
-
const iconSetLoaders = {
|
|
113
|
-
"material-icons": () => Promise.all([import("@quasar/extras/material-icons/icons.json"), import("@quasar/extras/material-icons")]).then(([icons, extras]) => createIconSet("material-icons", icons, extras)),
|
|
114
|
-
"material-icons-outlined": () => Promise.all([import("@quasar/extras/material-icons-outlined/icons.json"), import("@quasar/extras/material-icons-outlined")]).then(([icons, extras]) => createIconSet("material-icons-outlined", icons, extras)),
|
|
115
|
-
"material-icons-round": () => Promise.all([import("@quasar/extras/material-icons-round/icons.json"), import("@quasar/extras/material-icons-round")]).then(([icons, extras]) => createIconSet("material-icons-round", icons, extras)),
|
|
116
|
-
"material-icons-sharp": () => Promise.all([import("@quasar/extras/material-icons-sharp/icons.json"), import("@quasar/extras/material-icons-sharp")]).then(([icons, extras]) => createIconSet("material-icons-sharp", icons, extras)),
|
|
117
|
-
"material-symbols-outlined": () => Promise.all([import("@quasar/extras/material-symbols-outlined/icons.json"), import("@quasar/extras/material-symbols-outlined")]).then(([icons, extras]) => createIconSet("material-symbols-outlined", icons, extras)),
|
|
118
|
-
"material-symbols-rounded": () => Promise.all([import("@quasar/extras/material-symbols-rounded/icons.json"), import("@quasar/extras/material-symbols-rounded")]).then(([icons, extras]) => createIconSet("material-symbols-rounded", icons, extras)),
|
|
119
|
-
"material-symbols-sharp": () => Promise.all([import("@quasar/extras/material-symbols-sharp/icons.json"), import("@quasar/extras/material-symbols-sharp")]).then(([icons, extras]) => createIconSet("material-symbols-sharp", icons, extras)),
|
|
120
|
-
"ionicons-v7": () => Promise.all([import("@quasar/extras/ionicons-v7/icons.json"), import("@quasar/extras/ionicons-v7")]).then(([icons, extras]) => createIconSet("ionicons-v7", icons, extras)),
|
|
121
|
-
"ionicons-v8": () => Promise.all([import("@quasar/extras/ionicons-v8/icons.json"), import("@quasar/extras/ionicons-v8")]).then(([icons, extras]) => createIconSet("ionicons-v8", icons, extras)),
|
|
122
|
-
"mdi-v6": () => Promise.all([import("@quasar/extras/mdi-v6/icons.json"), import("@quasar/extras/mdi-v6")]).then(([icons, extras]) => createIconSet("mdi-v6", icons, extras)),
|
|
123
|
-
"mdi-v7": () => Promise.all([import("@quasar/extras/mdi-v7/icons.json"), import("@quasar/extras/mdi-v7")]).then(([icons, extras]) => createIconSet("mdi-v7", icons, extras)),
|
|
124
|
-
"fontawesome-v6": () => Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"), import("@quasar/extras/fontawesome-v6")]).then(([icons, extras]) => createIconSet("fontawesome-v6", icons, extras)),
|
|
125
|
-
"fontawesome-v7": () => Promise.all([import("@quasar/extras/fontawesome-v7/icons.json"), import("@quasar/extras/fontawesome-v7")]).then(([icons, extras]) => createIconSet("fontawesome-v7", icons, extras)),
|
|
126
|
-
"line-awesome": () => Promise.all([import("@quasar/extras/line-awesome/icons.json"), import("@quasar/extras/line-awesome")]).then(([icons, extras]) => createIconSet("line-awesome", icons, extras)),
|
|
127
|
-
"eva-icons": () => Promise.all([import("@quasar/extras/eva-icons/icons.json"), import("@quasar/extras/eva-icons")]).then(([icons, extras]) => createIconSet("eva-icons", icons, extras)),
|
|
128
|
-
themify: () => Promise.all([import("@quasar/extras/themify/icons.json"), import("@quasar/extras/themify")]).then(([icons, extras]) => createIconSet("themify", icons, extras)),
|
|
129
|
-
"bootstrap-icons": () => Promise.all([import("@quasar/extras/bootstrap-icons/icons.json"), import("@quasar/extras/bootstrap-icons")]).then(([icons, extras]) => createIconSet("bootstrap-icons", icons, extras))
|
|
130
|
-
};
|
|
131
|
-
function loadIconSet(name) {
|
|
132
|
-
return iconSetLoaders[name]();
|
|
133
|
-
}
|
|
134
|
-
//#endregion
|
|
135
|
-
//#region src/components/QIconPicker.ts
|
|
136
|
-
/**
|
|
137
|
-
* QIconPicker Properties
|
|
138
|
-
*/
|
|
139
|
-
const useIconPickerProps = {
|
|
140
|
-
modelValue: String,
|
|
141
|
-
iconSet: {
|
|
142
|
-
type: String,
|
|
143
|
-
validator: (v) => [...iconSetNames, ""].includes(v),
|
|
144
|
-
default: ""
|
|
145
|
-
},
|
|
146
|
-
icons: Array,
|
|
147
|
-
filter: String,
|
|
148
|
-
dense: Boolean,
|
|
149
|
-
tooltips: Boolean,
|
|
150
|
-
noFooter: Boolean,
|
|
151
|
-
size: {
|
|
152
|
-
type: String,
|
|
153
|
-
default: "inherit"
|
|
154
|
-
},
|
|
155
|
-
color: String,
|
|
156
|
-
textColor: String,
|
|
157
|
-
selectedColor: {
|
|
158
|
-
type: String,
|
|
159
|
-
default: "primary"
|
|
160
|
-
},
|
|
161
|
-
selectedTextColor: {
|
|
162
|
-
type: String,
|
|
163
|
-
default: "grey-1"
|
|
164
|
-
},
|
|
165
|
-
paginationProps: {
|
|
166
|
-
type: Object,
|
|
167
|
-
default: () => ({
|
|
168
|
-
maxPages: 5,
|
|
169
|
-
input: true
|
|
170
|
-
})
|
|
171
|
-
},
|
|
172
|
-
modelPagination: Object,
|
|
173
|
-
animated: Boolean,
|
|
174
|
-
transitionPrev: {
|
|
175
|
-
type: String,
|
|
176
|
-
default: "slide-right"
|
|
177
|
-
},
|
|
178
|
-
transitionNext: {
|
|
179
|
-
type: String,
|
|
180
|
-
default: "slide-left"
|
|
181
|
-
}
|
|
182
|
-
};
|
|
183
|
-
const direction = {
|
|
184
|
-
NEXT: "next",
|
|
185
|
-
PREV: "prev"
|
|
186
|
-
};
|
|
187
|
-
/**
|
|
188
|
-
* Pagination
|
|
189
|
-
*/
|
|
190
|
-
function useIconPickerPagination(data, props, emit, computedFilteredIcons) {
|
|
191
|
-
function fixPagination(p) {
|
|
192
|
-
if (p.page < 1) p.page = 1;
|
|
193
|
-
if (p.itemsPerPage === void 0 || p.itemsPerPage < 1) p.itemsPerPage = 0;
|
|
194
|
-
return p;
|
|
195
|
-
}
|
|
196
|
-
function samePagination(oldPag, newPag) {
|
|
197
|
-
for (const prop in newPag) if (newPag[prop] !== oldPag[prop]) return false;
|
|
198
|
-
return true;
|
|
199
|
-
}
|
|
200
|
-
const computedPagination = (0, vue.computed)(() => {
|
|
201
|
-
return fixPagination({
|
|
202
|
-
...data.innerPagination,
|
|
203
|
-
...props.modelPagination
|
|
204
|
-
});
|
|
205
|
-
});
|
|
206
|
-
const computedPagesNumber = (0, vue.computed)(() => {
|
|
207
|
-
return computedPagination.value.itemsPerPage === 0 ? 1 : Math.max(1, Math.ceil(computedFilteredIcons.value.length / computedPagination.value.itemsPerPage));
|
|
208
|
-
});
|
|
209
|
-
function setPagination(val) {
|
|
210
|
-
const newPagination = fixPagination({
|
|
211
|
-
...computedPagination.value,
|
|
212
|
-
...val
|
|
213
|
-
});
|
|
214
|
-
if (!samePagination(data.innerPagination, newPagination)) {
|
|
215
|
-
if (props.modelPagination) emit("update:model-pagination", newPagination);
|
|
216
|
-
data.innerPagination = newPagination;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
function updatePagination() {
|
|
220
|
-
if (props.modelPagination !== void 0) setPagination({
|
|
221
|
-
total: computedFilteredIcons.value.length,
|
|
222
|
-
totalPages: computedPagesNumber.value
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
return {
|
|
226
|
-
samePagination,
|
|
227
|
-
computedPagination,
|
|
228
|
-
setPagination,
|
|
229
|
-
updatePagination,
|
|
230
|
-
computedPagesNumber
|
|
231
|
-
};
|
|
232
|
-
}
|
|
233
|
-
/**
|
|
234
|
-
* Icons
|
|
235
|
-
*/
|
|
236
|
-
function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex) {
|
|
237
|
-
let iconSetLoadId = 0;
|
|
238
|
-
async function loadIconSet$1(iconSet) {
|
|
239
|
-
const loadId = ++iconSetLoadId;
|
|
240
|
-
data.iconsList = [];
|
|
241
|
-
if (iconSet) if (typeof window !== "undefined" && window.QIconPicker) {
|
|
242
|
-
const name = iconSet.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
243
|
-
if (window.QIconPicker.iconSet && window.QIconPicker.iconSet[name]) data.iconsList = window.QIconPicker.iconSet[name].icons;
|
|
244
|
-
else {
|
|
245
|
-
console.error(`QIconPicker: no icon set loaded called ${iconSet}`);
|
|
246
|
-
console.error("Built-in icon sets require ESM/CJS bundler support for @quasar/extras lazy imports. With the UMD build, pass an icons array instead.");
|
|
247
|
-
}
|
|
248
|
-
} else if (iconSetNames.includes(iconSet)) try {
|
|
249
|
-
const loadedIconSet = await loadIconSet(iconSet);
|
|
250
|
-
if (loadId === iconSetLoadId) data.iconsList = loadedIconSet.icons;
|
|
251
|
-
} catch (err) {
|
|
252
|
-
console.error(`QIconPicker: failed to load icon set called ${iconSet}`);
|
|
253
|
-
console.error(err);
|
|
254
|
-
}
|
|
255
|
-
else console.error(`QIconPicker: cannot find icon set called ${iconSet}`);
|
|
256
|
-
}
|
|
257
|
-
const computedDisplayedIcons = (0, vue.computed)(() => {
|
|
258
|
-
let icons = [];
|
|
259
|
-
if (data.iconsList) {
|
|
260
|
-
icons = computedFilteredIcons.value;
|
|
261
|
-
if (props.modelPagination && props.modelPagination.itemsPerPage !== 0) icons = icons.slice(computedFirstItemIndex.value, computedLastItemIndex.value);
|
|
262
|
-
}
|
|
263
|
-
return icons;
|
|
264
|
-
});
|
|
265
|
-
const computedFilteredIcons = (0, vue.computed)(() => {
|
|
266
|
-
let icons = data.iconsList;
|
|
267
|
-
if (icons) {
|
|
268
|
-
if (props.filter !== void 0 && props.filter !== "" && props.filter !== null) {
|
|
269
|
-
const filter = props.filter.toLowerCase();
|
|
270
|
-
icons = icons.filter((icon) => icon.name.toLowerCase().includes(filter));
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
return icons;
|
|
274
|
-
});
|
|
275
|
-
return {
|
|
276
|
-
loadIconSet: loadIconSet$1,
|
|
277
|
-
computedDisplayedIcons,
|
|
278
|
-
computedFilteredIcons
|
|
279
|
-
};
|
|
280
|
-
}
|
|
281
|
-
/**
|
|
282
|
-
* Exposes api functions
|
|
283
|
-
*/
|
|
284
|
-
function exposeIconPickerApi(data, expose, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber) {
|
|
285
|
-
const prevPage = () => {
|
|
286
|
-
const { page } = computedPagination.value;
|
|
287
|
-
if (page > 1) {
|
|
288
|
-
setPagination({ page: page - 1 });
|
|
289
|
-
data.direction = direction.PREV;
|
|
290
|
-
}
|
|
291
|
-
};
|
|
292
|
-
const nextPage = () => {
|
|
293
|
-
const { page, itemsPerPage } = computedPagination.value;
|
|
294
|
-
if (computedLastItemIndex.value > 0 && page * itemsPerPage < computedFilteredIcons.value.length) {
|
|
295
|
-
setPagination({ page: page + 1 });
|
|
296
|
-
data.direction = direction.NEXT;
|
|
297
|
-
}
|
|
298
|
-
};
|
|
299
|
-
const lastPage = () => {
|
|
300
|
-
setPagination({ page: computedPagesNumber.value });
|
|
301
|
-
};
|
|
302
|
-
const firstPage = () => {
|
|
303
|
-
setPagination({ page: 0 });
|
|
304
|
-
};
|
|
305
|
-
expose({
|
|
306
|
-
prevPage,
|
|
307
|
-
nextPage,
|
|
308
|
-
lastPage,
|
|
309
|
-
firstPage,
|
|
310
|
-
isLastPage: (0, vue.computed)(() => {
|
|
311
|
-
return computedLastItemIndex.value === 0 ? true : computedPagination.value.page >= computedPagesNumber.value;
|
|
312
|
-
}),
|
|
313
|
-
isFirstPage: (0, vue.computed)(() => {
|
|
314
|
-
return computedPagination.value.page === 1;
|
|
315
|
-
})
|
|
316
|
-
});
|
|
317
|
-
}
|
|
318
|
-
var QIconPicker_default = (0, vue.defineComponent)({
|
|
319
|
-
name: "QIconPicker",
|
|
320
|
-
props: { ...useIconPickerProps },
|
|
321
|
-
emits: ["update:model-value", "update:model-pagination"],
|
|
322
|
-
setup(props, { slots, emit, expose }) {
|
|
323
|
-
const scrollAreaRef = (0, vue.ref)(null);
|
|
324
|
-
const data = (0, vue.reactive)({
|
|
325
|
-
iconsList: [],
|
|
326
|
-
innerPagination: {
|
|
327
|
-
page: 1,
|
|
328
|
-
itemsPerPage: 0,
|
|
329
|
-
totalPages: 0
|
|
330
|
-
},
|
|
331
|
-
width: "100",
|
|
332
|
-
height: "100",
|
|
333
|
-
direction: ""
|
|
334
|
-
});
|
|
335
|
-
const computedFirstItemIndex = (0, vue.computed)(() => {
|
|
336
|
-
const { page, itemsPerPage } = computedPagination.value;
|
|
337
|
-
return (page - 1) * itemsPerPage;
|
|
338
|
-
});
|
|
339
|
-
const computedLastItemIndex = (0, vue.computed)(() => {
|
|
340
|
-
const { page, itemsPerPage } = computedPagination.value;
|
|
341
|
-
return page * itemsPerPage;
|
|
342
|
-
});
|
|
343
|
-
const { loadIconSet, computedDisplayedIcons, computedFilteredIcons } = useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex);
|
|
344
|
-
const { samePagination, computedPagination, setPagination, updatePagination, computedPagesNumber } = useIconPickerPagination(data, props, emit, computedFilteredIcons);
|
|
345
|
-
exposeIconPickerApi(data, expose, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber);
|
|
346
|
-
(0, vue.onMounted)(async () => {
|
|
347
|
-
if (props.iconSet) await loadIconSet(props.iconSet);
|
|
348
|
-
else if (props.icons !== void 0 && props.icons.length > 0) data.iconsList = props.icons;
|
|
349
|
-
updatePagination();
|
|
350
|
-
});
|
|
351
|
-
(0, vue.watch)(() => props.iconSet, async (val) => {
|
|
352
|
-
if (val) {
|
|
353
|
-
await loadIconSet(val);
|
|
354
|
-
updatePagination();
|
|
355
|
-
(0, vue.nextTick)(() => {
|
|
356
|
-
setPagination({ page: 1 });
|
|
357
|
-
}).catch((e) => console.error(e));
|
|
358
|
-
if (scrollAreaRef.value) scrollAreaRef.value.setScrollPosition("vertical", 0);
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
(0, vue.watch)(() => props.icons, () => {
|
|
362
|
-
if (props.icons !== void 0 && props.icons.length > 0) data.iconsList = props.icons;
|
|
363
|
-
updatePagination();
|
|
364
|
-
(0, vue.nextTick)(() => {
|
|
365
|
-
setPagination({ page: 1 });
|
|
366
|
-
}).catch((e) => console.error(e));
|
|
367
|
-
if (scrollAreaRef.value) scrollAreaRef.value.setScrollPosition("vertical", 0);
|
|
368
|
-
});
|
|
369
|
-
(0, vue.watch)(() => props.filter, () => {
|
|
370
|
-
setPagination({
|
|
371
|
-
page: 1,
|
|
372
|
-
totalPages: computedPagesNumber.value
|
|
373
|
-
});
|
|
374
|
-
updatePagination();
|
|
375
|
-
});
|
|
376
|
-
if (props.modelPagination) (0, vue.watch)(() => props.modelPagination, (newVal, oldVal) => {
|
|
377
|
-
if (!samePagination(oldVal, newVal)) updatePagination();
|
|
378
|
-
});
|
|
379
|
-
if (props.modelPagination) {
|
|
380
|
-
(0, vue.watch)(() => props.modelPagination.itemsPerPage, () => {
|
|
381
|
-
updatePagination();
|
|
382
|
-
});
|
|
383
|
-
(0, vue.watch)(() => props.modelPagination.page, () => {
|
|
384
|
-
updatePagination();
|
|
385
|
-
});
|
|
386
|
-
}
|
|
387
|
-
return () => {
|
|
388
|
-
function renderPagination() {
|
|
389
|
-
if (props.modelPagination && props.modelPagination.itemsPerPage === 0) return "";
|
|
390
|
-
const { page, totalPages } = computedPagination.value;
|
|
391
|
-
return slots.pagination ? slots.pagination(computedPagination.value) : (0, vue.h)(quasar.QPagination, {
|
|
392
|
-
class: "q-icon-picker__pagination",
|
|
393
|
-
...props.paginationProps,
|
|
394
|
-
modelValue: page,
|
|
395
|
-
max: totalPages,
|
|
396
|
-
"onUpdate:modelValue": (value) => {
|
|
397
|
-
if (props.animated) if (value > page) data.direction = direction.NEXT;
|
|
398
|
-
else data.direction = direction.PREV;
|
|
399
|
-
setPagination({ page: value });
|
|
400
|
-
}
|
|
401
|
-
});
|
|
402
|
-
}
|
|
403
|
-
function renderFooter() {
|
|
404
|
-
if (props.noFooter !== true && props.modelPagination !== void 0) return (0, vue.h)("div", { class: "q-icon-picker__footer flex flex-center" }, [slots.footer ? slots.footer(computedPagination.value) : renderPagination()]);
|
|
405
|
-
}
|
|
406
|
-
function renderTooltip(name) {
|
|
407
|
-
if (props.tooltips === true) return () => (0, vue.h)(quasar.QTooltip, {}, () => name);
|
|
408
|
-
}
|
|
409
|
-
function renderIcon(icon) {
|
|
410
|
-
const iconValue = icon.prefix !== void 0 ? icon.prefix + " " + icon.name : icon.name;
|
|
411
|
-
const displayValue = icon.icon !== void 0 ? icon.icon : iconValue;
|
|
412
|
-
if (slots.icon) return slots.icon(iconValue);
|
|
413
|
-
const isSelected = iconValue === props.modelValue;
|
|
414
|
-
const textColor = isSelected ? props.selectedTextColor : void 0;
|
|
415
|
-
const color = isSelected ? props.selectedColor : void 0;
|
|
416
|
-
const size = props.size ? props.size : void 0;
|
|
417
|
-
return (0, vue.h)(quasar.QBtn, {
|
|
418
|
-
id: icon.name,
|
|
419
|
-
unelevated: true,
|
|
420
|
-
dense: props.dense,
|
|
421
|
-
noWrap: true,
|
|
422
|
-
size,
|
|
423
|
-
textColor,
|
|
424
|
-
color,
|
|
425
|
-
icon: displayValue,
|
|
426
|
-
onClick: () => emit("update:model-value", iconValue)
|
|
427
|
-
}, renderTooltip(iconValue));
|
|
428
|
-
}
|
|
429
|
-
function renderIcons() {
|
|
430
|
-
return computedDisplayedIcons.value.map((icon) => renderIcon(icon));
|
|
431
|
-
}
|
|
432
|
-
function renderContainer() {
|
|
433
|
-
const container = () => (0, vue.h)("div", {
|
|
434
|
-
key: computedPagination.value.page,
|
|
435
|
-
class: "q-icon-picker__container col"
|
|
436
|
-
}, [...renderIcons()]);
|
|
437
|
-
if (props.animated === true) {
|
|
438
|
-
const transition = "q-transition--" + (data.direction === "prev" ? props.transitionPrev : props.transitionNext);
|
|
439
|
-
return () => (0, vue.h)(vue.Transition, {
|
|
440
|
-
name: transition,
|
|
441
|
-
appear: true
|
|
442
|
-
}, container);
|
|
443
|
-
}
|
|
444
|
-
return container;
|
|
445
|
-
}
|
|
446
|
-
function renderScrollArea() {
|
|
447
|
-
return (0, vue.h)(quasar.QScrollArea, {
|
|
448
|
-
ref: scrollAreaRef,
|
|
449
|
-
style: {
|
|
450
|
-
width: data.width + "px",
|
|
451
|
-
height: data.height + "px"
|
|
452
|
-
}
|
|
453
|
-
}, renderContainer());
|
|
454
|
-
}
|
|
455
|
-
function renderBody() {
|
|
456
|
-
return (0, vue.h)("div", { class: "q-icon-picker__body col column" }, [renderScrollArea(), (0, vue.h)(quasar.QResizeObserver, { onResize: (size) => {
|
|
457
|
-
data.width = size.width;
|
|
458
|
-
data.height = size.height;
|
|
459
|
-
} })]);
|
|
460
|
-
}
|
|
461
|
-
const classes = ["q-icon-picker", "column"];
|
|
462
|
-
if (props.color) classes.push("bg-" + props.color);
|
|
463
|
-
if (props.textColor) classes.push("text-" + props.textColor);
|
|
464
|
-
return (0, vue.h)("div", { class: classes.join(" ") }, [renderBody(), renderFooter()]);
|
|
465
|
-
};
|
|
466
|
-
}
|
|
467
|
-
});
|
|
468
|
-
//#endregion
|
|
469
|
-
//#region src/version.ts
|
|
470
|
-
const version = "3.0.0-beta.0";
|
|
471
|
-
//#endregion
|
|
472
|
-
//#region src/vue-plugin.ts
|
|
473
|
-
function install(app) {
|
|
474
|
-
app.component(String(QIconPicker_default.name), QIconPicker_default);
|
|
475
|
-
}
|
|
476
|
-
//#endregion
|
|
477
|
-
exports.QIconPicker = QIconPicker_default;
|
|
478
|
-
exports.install = install;
|
|
479
|
-
exports.version = version;
|
package/dist/index.cjs.min.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* @quasar/quasar-ui-qiconpicker v3.0.0-beta.0
|
|
3
|
-
* (c) 2026 Jeff Galbraith <jeff@quasar.dev>
|
|
4
|
-
* Released under the MIT License.
|
|
5
|
-
*/
|
|
6
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let vue=require("vue"),quasar=require("quasar");const iconSetNames=["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","material-symbols-outlined","material-symbols-rounded","material-symbols-sharp","ionicons-v7","ionicons-v8","mdi-v6","mdi-v7","fontawesome-v6","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-v6":{createEntry:createSvgEntry("mdi","mdi-")},"mdi-v7":{createEntry:createSvgEntry("mdi","mdi-")},"ionicons-v7":{createEntry:(e,t)=>({name:e,icon:t})},"ionicons-v8":{createEntry:(e,t)=>({name:e,icon:t})},"fontawesome-v6":{createEntry:(e,t)=>({name:"fa-"+pascalToKebab(e.slice(3)),icon:t,prefix:e.slice(0,3)})},"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-v7":()=>Promise.all([import("@quasar/extras/ionicons-v7/icons.json"),import("@quasar/extras/ionicons-v7")]).then(([e,t])=>createIconSet("ionicons-v7",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-v6":()=>Promise.all([import("@quasar/extras/mdi-v6/icons.json"),import("@quasar/extras/mdi-v6")]).then(([e,t])=>createIconSet("mdi-v6",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-v6":()=>Promise.all([import("@quasar/extras/fontawesome-v6/icons.json"),import("@quasar/extras/fontawesome-v6")]).then(([e,t])=>createIconSet("fontawesome-v6",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=(0,vue.computed)(()=>{return i({...o.innerPagination,...a.modelPagination})}),t=(0,vue.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/CJS 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=(0,vue.computed)(()=>{let e=[];return n.iconsList&&(e=s.value,o.modelPagination)&&0!==o.modelPagination.itemsPerPage&&(e=e.slice(t.value,a.value)),e}),s=(0,vue.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)},u=()=>{n({page:s.value})},m=()=>{n({page:0})};e({prevPage:c,nextPage:l,lastPage:u,firstPage:m,isLastPage:(0,vue.computed)(()=>{return 0===i.value||a.value.page>=s.value}),isFirstPage:(0,vue.computed)(()=>{return 1===a.value.page})})}var QIconPicker_default=(0,vue.defineComponent)({name:"QIconPicker",props:{...useIconPickerProps},emits:["update:model-value","update:model-pagination"],setup(l,{slots:u,emit:m,expose:e}){const d=(0,vue.ref)(null),p=(0,vue.reactive)({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},width:"100",height:"100",direction:""}),t=(0,vue.computed)(()=>{const{page:e,itemsPerPage:t}=g.value;return(e-1)*t}),o=(0,vue.computed)(()=>{const{page:e,itemsPerPage:t}=g.value;return e*t}),{loadIconSet:a,computedDisplayedIcons:v,computedFilteredIcons:n}=useIconPickerIcons(p,l,t,o),{samePagination:i,computedPagination:g,setPagination:P,updatePagination:r,computedPagesNumber:s}=useIconPickerPagination(p,l,m,n);return exposeIconPickerApi(p,e,g,P,t,o,n,s),(0,vue.onMounted)(async()=>{l.iconSet?await a(l.iconSet):void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r()}),(0,vue.watch)(()=>l.iconSet,async e=>{e&&(await a(e),r(),(0,vue.nextTick)(()=>{P({page:1})}).catch(e=>console.error(e)),d.value)&&d.value.setScrollPosition("vertical",0)}),(0,vue.watch)(()=>l.icons,()=>{void 0!==l.icons&&l.icons.length>0&&(p.iconsList=l.icons),r(),(0,vue.nextTick)(()=>{P({page:1})}).catch(e=>console.error(e)),d.value&&d.value.setScrollPosition("vertical",0)}),(0,vue.watch)(()=>l.filter,()=>{P({page:1,totalPages:s.value}),r()}),l.modelPagination&&(0,vue.watch)(()=>l.modelPagination,(e,t)=>{i(t,e)||r()}),l.modelPagination&&((0,vue.watch)(()=>l.modelPagination.itemsPerPage,()=>{r()}),(0,vue.watch)(()=>l.modelPagination.page,()=>{r()})),()=>{function e(){if(l.modelPagination&&0===l.modelPagination.itemsPerPage)return"";const{page:t,totalPages:e}=g.value;return u.pagination?u.pagination(g.value):(0,vue.h)(quasar.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),P({page:e})}})}function t(){if(!0!==l.noFooter&&void 0!==l.modelPagination)return(0,vue.h)("div",{class:"q-icon-picker__footer flex flex-center"},[u.footer?u.footer(g.value):e()])}function s(e){if(!0===l.tooltips)return()=>(0,vue.h)(quasar.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(u.icon)return u.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(0,vue.h)(quasar.QBtn,{id:e.name,unelevated:!0,dense:l.dense,noWrap:!0,size:r,textColor:n,color:i,icon:o,onClick:()=>m("update:model-value",t)},s(t))}function a(){return v.value.map(e=>o(e))}function n(){const e=()=>(0,vue.h)("div",{key:g.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()=>(0,vue.h)(vue.Transition,{name:t,appear:!0},e)}}function i(){return(0,vue.h)(quasar.QScrollArea,{ref:d,style:{width:p.width+"px",height:p.height+"px"}},n())}function r(){return(0,vue.h)("div",{class:"q-icon-picker__body col column"},[i(),(0,vue.h)(quasar.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),(0,vue.h)("div",{class:c.join(" ")},[r(),t()])}}});const version="3.0.0-beta.0";function install(e){e.component(String(QIconPicker_default.name),QIconPicker_default)}exports.QIconPicker=QIconPicker_default,exports.install=install,exports.version=version;
|
package/src/index.cjs.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './vue-plugin'
|