@quasar/quasar-ui-qiconpicker 2.0.7 → 3.0.0-beta.0

package/README.md

@@ -1,297 +1,93 @@
-QIconPicker (Quasar v2, UMD and Vue v3 Compatible)
-===
+# QIconPicker
 
-[![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qiconpicker/next?label=@quasar/quasar-ui-qiconpicker)](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
-[![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qiconpicker.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
-
-QIconPicker is a [Quasar](https://quasar.dev) component. It gives an Icon Picker for your apps.
+QIconPicker is a Quasar component that provides an icon picker for Vue and Quasar applications.
 
-![QIconPicker](https://raw.githubusercontent.com/quasarframework/quasar-ui-qiconpicker/dev/demo/public/q-icon-picker.png)
+[![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qiconpicker/next?label=@quasar/quasar-ui-qiconpicker)](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
+[![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qiconpicker)](https://www.npmjs.com/package/@quasar/quasar-ui-qiconpicker)
 
-# Examples and Documentation
-Can be found [here](https://quasarframework.github.io/quasar-ui-qiconpicker)
+[![Discord](https://img.shields.io/badge/discord-join%20server-738ADB?style=for-the-badge&logo=discord&logoColor=738ADB)](https://chat.quasar.dev)
+[![X](https://img.shields.io/badge/follow-@jgalbraith64-1DA1F2?style=for-the-badge&logo=x&logoColor=1DA1F2)](https://twitter.com/jgalbraith64)
 
-# Usage
+## Usage
 
-## Quasar CLI project
+### Quasar CLI Project
 
 Install the [App Extension](../app-extension).
 
-**OR**:
-
-Create and register a boot file:
-
-```js
-import Vue from 'vue'
-import Plugin from '@quasar/quasar-ui-qiconpicker'
-import '@quasar/quasar-ui-qiconpicker/dist/index.css'
-
-Vue.use(Plugin)
-```
-
-**OR**:
-
-```html
-<style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>
-
-<script>
-import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'
+Or install the UI package directly:
 
-export default {
-  components: {
-    QIconPicker
-  }
-}
-</script>
+```bash
+pnpm add @quasar/quasar-ui-qiconpicker
+# yarn add @quasar/quasar-ui-qiconpicker
+# npm install @quasar/quasar-ui-qiconpicker
+# bun add @quasar/quasar-ui-qiconpicker
 ```
 
-## Vue CLI project
+Then create and register a boot file:
 
 ```js
-import Vue from 'vue'
-import Plugin from '@quasar/quasar-ui-qiconpicker'
+import { defineBoot } from '#q-app'
+import VuePlugin from '@quasar/quasar-ui-qiconpicker'
 import '@quasar/quasar-ui-qiconpicker/dist/index.css'
 
-Vue.use(Plugin)
+export default defineBoot(({ app }) => {
+  app.use(VuePlugin)
+})
 ```
 
-**OR**:
+### Vue 3 Project
 
-```html
-<style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>
+```js
+import { createApp } from 'vue'
+import VuePlugin from '@quasar/quasar-ui-qiconpicker'
+import '@quasar/quasar-ui-qiconpicker/dist/index.css'
+import App from './App.vue'
 
-<script>
-import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'
+const app = createApp(App)
 
-export default {
-  components: {
-    QIconPicker
-  }
-}
-</script>
+app.use(VuePlugin)
+app.mount('#app')
 ```
 
-### Caching
-
-If you are using a large icon set and find it is taking too long to load, you can pre-cache the UMD variant.
-
-You can do this by adding to your **App.vue** (or, any other appropriate) file:
+### Component Import
 
 ```html
-<template>
-  <div id="q-app">
-    <router-view />
-  </div>
-</template>
+<style src="@quasar/quasar-ui-qiconpicker/dist/index.css"></style>
 
-<script>
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/eva-icons.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/fontawesome-v5.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/line-awesome.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/ionicons-v4.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-outlined.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-round.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-sharp.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v6.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/themify.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/bootstrap-icons.umd.js'
-export default {
-  name: 'App'
-}
+<script setup>
+  import { QIconPicker } from '@quasar/quasar-ui-qiconpicker'
 </script>
-
-<style>
-</style>
-```
-
-Don't add them all (unless you have this requirement). Remove the ones from above you won't be needing.
-
-## UMD variant
-
-Exports `window.QIconPicker`.
-
-Add the following tag(s) after the Quasar ones:
-
-```html
-<head>
-  <!-- AFTER the Quasar stylesheet tags: -->
-  <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.min.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  <!-- at end of body, AFTER Quasar script(s): -->
-  <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.min.js"></script>
-</body>
 ```
-If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
-```html
-<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
-```
-
-For **UMD** variants only, there is also a caveat:
-
-You must **also** load the QIconPicker icon set for the icon font(s) that you have loaded:
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>
-```
+### UMD Variant
 
-Choices are:
-1. eva-icons.umd.js
-2. fontawesome-v5.umd.js
-3. ionicons-v4.umd.js
-4. material-icons-outlined.umd.js
-5. material-icons-round.umd.js
-6. material-icons-sharp.umd.js
-7. material-icons.umd.js
-8. mdi-v4.umd.js
-9. mdi-v5.umd.js
-10. mdi-v5.umd.js
-11. themify.umd.js
-12. line-awesome.umd.js
-13. bootstrap-icons.umd.js
+The UMD bundle exports `window.QIconPicker`.
 
-> You can only use one of `mdi-v4`,  `mdi-v5` or `mdi-v6`
-
-### UMD Example
 ```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
-
-    <title>UMD test</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
-    <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.min.css" rel="stylesheet" type="text/css">
-    <link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.css" rel="stylesheet" type="text/css">
-  </head>
-  <body>
-    <div id="q-app">
-      <q-layout view="lHh Lpr fff">
-        <q-header class="glossy bg-primary">
-          <q-toolbar>
-            <q-toolbar-title>
-              quasar-ui-qiconpicker <span class="text-subtitle2">v{{ version }}</span>
-            </q-toolbar-title>
-
-            <div>Quasar v{{ $q.version }}</div>
-          </q-toolbar>
-        </q-header>
-
-        <q-page-container>
-          <q-page padding>
-            <div style="width: 700px;">
-              <q-input
-                v-model="filter"
-                label="Filter"
-                outlined
-                clearable
-                class="q-ma-md">
-              </q-input>
-              <q-icon-picker
-                v-model="value"
-                icon-set="material-icons"
-                :filter="filter"
-                v-model:model-pagination="pagination"
-                style="height: 220px"
-              ></q-icon-picker>
-            </div>
-            <ul class="q-mb-lg">
-              <li>In /ui, run: "yarn build"</li>
-              <li class="text-red">You need to build & refresh page on each change manually.</li>
-              <li>Use self-closing tags only!</li>
-              <li>Example: &lt;my-component&gt;&lt;/my-component&gt;</li>
-            </ul>
-          </q-page>
-        </q-page-container>
-      </q-layout>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.ie.polyfills.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/quasar.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.0/dist/icon-set/material-icons.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons.umd.js"></script>
-
-
-    <script>
-      new Vue({
-        el: '#q-app',
-
-        data: function () {
-          return {
-            version: QIconPicker.version,
-            value: '',
-            filter: '',
-            pagination: {
-              itemsPerPage: 60,
-              page: 0
-            }
-          }
-        }
-      })
-    </script>
-  </body>
-</html>
+<link
+  href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qiconpicker/dist/index.umd.min.js"></script>
 ```
 
-# Codepen
-
-[UMD Example on Codepen](https://codepen.io/Hawkeye64/pen/vYYYewG)
-
-# Building the Projects
+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.
 
 ## Setup
 
-In both the `ui` and `ui/dev` folders:
+This project is a pnpm workspace mono-repo.
 
 ```bash
-$ yarn
+pnpm install
+pnpm build:ui
+pnpm build:docs
 ```
 
-## Developing
-
-In the `ui` folder
-
-```bash
-# start dev in SPA mode
-$ yarn dev
-
-# start dev in UMD mode
-$ yarn dev:umd
-
-# start dev in SSR mode
-$ yarn dev:ssr
-
-# start dev in Cordova iOS mode
-$ yarn dev:ios
-
-# start dev in Cordova Android mode
-$ yarn dev:android
-
-# start dev in Electron mode
-$ yarn dev:electron
-```
-
-## Building package
-
-```bash
-$ yarn build
-```
-
-# build just the JSON API
-```bash
-$ yarn build:api
-```
+## Donate
 
-# Donate
+If you appreciate the work that went into this project, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
 
-If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
+## License
 
-# License
 MIT (c) Jeff Galbraith <jeff@quasar.dev>

package/dist/api/QIconPicker.json

@@ -4,7 +4,7 @@
     "docsUrl": "https://quasarframework.github.io/quasar-ui-qiconpicker/docs"
   },
   "props": {
-    "value": {
+    "model-value": {
       "type": "String",
       "desc": "`v-model`; The selected icon",
       "default": "''",
@@ -16,18 +16,22 @@
     },
     "icon-set": {
       "type": "String",
-      "desc": "The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets)",
+      "desc": "The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets). Built-in sets are lazy loaded from `@quasar/extras`.",
       "category": "model",
       "values": [
         "material-icons",
         "material-icons-outlined",
         "material-icons-round",
         "material-icons-sharp",
-        "ionicons-v4",
-        "mdi-v4",
-        "mdi-v5",
+        "material-symbols-outlined",
+        "material-symbols-rounded",
+        "material-symbols-sharp",
+        "ionicons-v7",
+        "ionicons-v8",
         "mdi-v6",
-        "fontawesome-v5",
+        "mdi-v7",
+        "fontawesome-v6",
+        "fontawesome-v7",
         "line-awesome",
         "eva-icons",
         "themify",
@@ -35,23 +39,17 @@
       ],
       "examples": [
         "icon-set=\"material-icons\"",
-        "icon-set=\"fontawesome-v5\""
+        "icon-set=\"fontawesome-v7\""
       ]
     },
     "icons": {
       "type": "Array",
       "tsType": "IconNameArray",
-      "desc": "An array of objects containing icon information. The object must contain the key `name` with the value being the icon name (ie: `{ name: 'bolt' }`). _**Note:** the icons used must already be loaded by Quasar._",
+      "desc": "An array of objects containing icon information. The object must contain the key `name` with the value being the selected icon name. Use the optional `icon` key for SVG path data used for display, for example `{ name: 'bolt', icon: matBolt }`.",
       "category": "model",
       "examples": [
         ":icons=\"[{ name: 'calendar-today' }, { name: 'bolt' }]\""
-      ],
-      "definition": {
-        "name": {
-          "type": "String",
-          "desc": "The icon name"
-        }
-      }
+      ]
     },
     "filter": {
       "type": "String",
@@ -61,17 +59,6 @@
         ":filter=\"myFilter\""
       ]
     },
-    "tags": {
-      "type": "Array",
-      "tsType": "StringArray",
-      "addedIn": "v1.0.7",
-      "desc": "An array of tags to be used to do filtering by category",
-      "category": "behavior",
-      "examples": [
-        ":tags=\"['accessibility']\"",
-        ":tags=\"['media']\""
-      ]
-    },
     "dense": {
       "type": "Boolean",
       "desc": "Use less of a foot print for the component",
@@ -148,7 +135,10 @@
       "type": "Object",
       "tsType": "PaginationProps",
       "desc": "The properties to pass to the QPagination component",
-      "category": "behavior"
+      "category": "behavior",
+      "__exemption": [
+        "examples"
+      ]
     },
     "animated": {
       "type": "Boolean",
@@ -174,13 +164,19 @@
       ]
     }
   },
+  "events": {
+    "update:model-value": {
+      "type": "String",
+      "desc": "`v-model`; Selected icon name, including the icon prefix when required"
+    }
+  },
   "slots": {
     "icon": {
-      "desc": "Slot for changing the display of the icon",
+      "desc": "Slot for changing the display of the icon.",
       "scope": {
         "name": {
           "type": "String",
-          "desc": "The name of the slotted icon",
+          "desc": "The selected icon name",
           "examples": [
             "bolt",
             "calendar",
@@ -196,16 +192,6 @@
       "desc": "Use if you want to provide your own pagination UI. You can control this with the data from the property `model-pagination`"
     }
   },
-  "events": {
-    "input": {
-      "type": "String",
-      "desc": "`v-model`; Value from when the selection changes"
-    },
-    "tags": {
-      "type": "Array",
-      "desc": "An array of categories (tags) for the selected icon set"
-    }
-  },
   "methods": {
     "prevPage": {
       "desc": "If paginated, will go to previous page if not on 1st page"
@@ -226,4 +212,4 @@
       "desc": "True if on first page otherwise false"
     }
   }
-}
+}