Merge branch 'release/1.0.0'

Readme.md

+# UnIcon
+
+## Description
+
+UnIcon est une librairie pour charger et sélectionner les icônes du langage visuel de l'Université de Strasbourg.
+
+La librairie utilise
+des "[élément HTML customisés](https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_custom_elements)" pour
+créer la liste des icônes.
+
+## Installation
+
+```bash
+npm install --save @vue-unistra/unicon
+```
+
+Vous devez ajouter le repository `@vue-unistra` dans votre fichier `.npmrc` :
+
+```bash
+@vue-unistra:registry=https://gitlab.unistra.fr/api/v4/packages/npm/
+```
+
+## Utilisation
+
+### Initialisation
+
+```ts
+import { defineIconListElement } from '@vue-unistra/unicon';
+
+defineIconListElement();
+```
+
+```html
+
+<icon-list></icon-list>
+```
+
+### Importation
+
+Vous pouvez également importer directement la class `IconList` pour créer un élément HTML customisé :
+
+```ts
+import { IconList } from '@vue-unistra/unicon';
+
+customElements.define('my-icon-list', IconList);
+```
+
+```html
+
+<my-icon-list></my-icon-list>
+```
+
+### Props
+
+#### `filter`
+
+- Optional
+- Type: `string`
+
+Filtre les icônes affichées.
+
+```html
+
+<icon-list filter="arrow"></icon-list>
+```
+
+### Events
+
+#### `icon-selected`
+
+- Type: `() => CustomEventDetail`
+
+Événement émis lorsque l'utilisateur clique sur une icône.
+
+```ts
+import type { CustomEventDetail } from '@vue-unistra/unicon';
+
+const iconList = document.querySelector('icon-list');
+iconList.addEventListener('icon-selected', (event) => {
+  const iconDefinition = event.detail;
+  console.log(iconDefinition); // CustomEventDetail
+});
+```

src/plugin.ts

@@ -3,6 +3,6 @@ import { IconList } from '@/components/IconList'
 
 export { IconList } from '@/components/IconList'
 
-export const defineIconList = (): void => {
+export const defineIconListElement = (): void => {
   customElements.define('icon-list', IconList)
 }

types/index.d.ts

-export const defineIconList: () => void
+export const defineIconListElement: () => void
 
 declare module '@vue-unistra/unicon' {
-  export const defineIconList: () => void
+  export const defineIconListElement: () => void
 }
 
+class IconListElement extends HTMLElement {
+  filter?: string
+
+  addEventListener<K extends keyof IconListEventMap>(
+    type: K,
+    listener: (
+      this: IconListClass,
+      event: IconListEventMap[K],
+    ) => void,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+}
+
+export interface IconListEventMap extends HTMLElementEventMap {
+  'icon-selected': CustomEvent<CustomEventDetail>;
+}
+
+export type IconList = IconListElement
+
 export type IconFamilyNameKeys = 'nova-icons' | 'unistra-symbol'
 export type IconFamilyName = 'Nova Icons' | 'Unistra Symbol'