@lab-anssi/ui-kit 1.62.0 → 1.63.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icones/extract/icon-df57f3bd.svg +1 -0
- package/dist/dsfr/DsfrCombobox.svelte +2512 -0
- package/dist/dsfr/DsfrCombobox.svelte.d.ts +85 -0
- package/dist/dsfr/DsfrTabs.svelte +3 -4
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/ui-kit-components.json +199 -0
- package/dist/web-types.json +321 -1
- package/dist/webcomponents/lab-anssi-ui-kit.iife.js +9 -9
- package/dist/webcomponents/lab-anssi-ui-kit.jsx.d.ts +26 -0
- package/package.json +4 -4
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import type { TextSize, TextWeight } from "../types";
|
|
2
|
+
type ComboboxOption = {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
};
|
|
7
|
+
type ComboboxOptionGroup = {
|
|
8
|
+
legend?: string;
|
|
9
|
+
hint?: string;
|
|
10
|
+
options: ComboboxOption[];
|
|
11
|
+
};
|
|
12
|
+
interface Props {
|
|
13
|
+
/** Attribut id de la liste déroulante riche */
|
|
14
|
+
id: string;
|
|
15
|
+
/** Libellé de la liste déroulante riche */
|
|
16
|
+
label: string;
|
|
17
|
+
/** Permet de masquer le label */
|
|
18
|
+
hideLabel?: boolean;
|
|
19
|
+
/** Texte additionnel sous le libellé */
|
|
20
|
+
hint?: string;
|
|
21
|
+
/** Texte avant sélection d'une option */
|
|
22
|
+
placeholder?: string;
|
|
23
|
+
/** Active le mode sélection multiple (cases à cocher au lieu de boutons radio) */
|
|
24
|
+
multiple?: boolean;
|
|
25
|
+
/** Active le champ de recherche dans la liste */
|
|
26
|
+
searchable?: boolean;
|
|
27
|
+
/** Affiche le bouton "Tout sélectionner" (mode multiple uniquement) */
|
|
28
|
+
selectAllButton?: boolean;
|
|
29
|
+
/** Groupes d'options de la liste déroulante */
|
|
30
|
+
optionGroups?: ComboboxOptionGroup[];
|
|
31
|
+
/** Valeur sélectionnée (mode "sélection unique") */
|
|
32
|
+
value?: string;
|
|
33
|
+
/** Valeurs sélectionnées (mode "sélection multiple") */
|
|
34
|
+
values?: string[];
|
|
35
|
+
/** Désactive la liste déroulante riche */
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
/** Statut du message */
|
|
38
|
+
status?: "default" | "valid" | "error" | "info";
|
|
39
|
+
/** Texte du message d'erreur */
|
|
40
|
+
errorMessage?: string;
|
|
41
|
+
/** Texte du message de succès */
|
|
42
|
+
validMessage?: string;
|
|
43
|
+
/** Texte du message d'information */
|
|
44
|
+
infoMessage?: string;
|
|
45
|
+
/** Attribut name du champ */
|
|
46
|
+
name?: string;
|
|
47
|
+
/** Attribut form du composant */
|
|
48
|
+
form?: string;
|
|
49
|
+
/** Rend la sélection obligatoire */
|
|
50
|
+
required?: boolean;
|
|
51
|
+
/** `ElementInternals` interface pour l'association du composant aux formulaires */
|
|
52
|
+
internals?: ElementInternals;
|
|
53
|
+
/** Callback appelé lors du changement de valeur (mode "sélection unique") */
|
|
54
|
+
onvaluechanged?: (value: string) => void;
|
|
55
|
+
/** Callback appelé lors du changement de valeurs (mode "sélection multiple") */
|
|
56
|
+
onvalueschanged?: (values: string[]) => void;
|
|
57
|
+
/** Applique une classe utilitaire de taille de texte DSFR sur le label */
|
|
58
|
+
labelSize?: TextSize;
|
|
59
|
+
/** Applique une classe utilitaire de graisse DSFR sur le label */
|
|
60
|
+
labelWeight?: TextWeight;
|
|
61
|
+
}
|
|
62
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
63
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
64
|
+
$$bindings?: Bindings;
|
|
65
|
+
} & Exports;
|
|
66
|
+
(internal: unknown, props: Props & {
|
|
67
|
+
$$events?: Events;
|
|
68
|
+
$$slots?: Slots;
|
|
69
|
+
}): Exports & {
|
|
70
|
+
$set?: any;
|
|
71
|
+
$on?: any;
|
|
72
|
+
};
|
|
73
|
+
z_$$bindings?: Bindings;
|
|
74
|
+
}
|
|
75
|
+
declare const DsfrCombobox: $$__sveltets_2_IsomorphicComponent<Props, {
|
|
76
|
+
[evt: string]: CustomEvent<any>;
|
|
77
|
+
}, {
|
|
78
|
+
search: {};
|
|
79
|
+
options: {};
|
|
80
|
+
'messages-group': {};
|
|
81
|
+
}, {
|
|
82
|
+
setCustomValidity: (message: string) => void;
|
|
83
|
+
}, "values" | "value">;
|
|
84
|
+
type DsfrCombobox = InstanceType<typeof DsfrCombobox>;
|
|
85
|
+
export default DsfrCombobox;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
hasIcon: { attribute: "has-icon", type: "Boolean" },
|
|
6
6
|
tabs: { attribute: "tabs", type: "Array" },
|
|
7
7
|
ariaLabel: { attribute: "aria-label", type: "String" },
|
|
8
|
-
activeTabIndex: { attribute: "active-tab-index", type: "Number" },
|
|
8
|
+
activeTabIndex: { attribute: "active-tab-index", type: "Number", reflect: true },
|
|
9
9
|
},
|
|
10
10
|
extend: (CustomElementClass) => {
|
|
11
11
|
return class extends CustomElementClass {
|
|
@@ -24,12 +24,11 @@
|
|
|
24
24
|
}}
|
|
25
25
|
/>
|
|
26
26
|
|
|
27
|
-
<script lang="ts">import {
|
|
28
|
-
import { getIconsStyleSheet, setIconClass, setThemeable } from "../utilitaires";
|
|
27
|
+
<script lang="ts">import { getIconsStyleSheet, setIconClass, setThemeable } from "../utilitaires";
|
|
29
28
|
import { createSlot } from "../directives/actions.svelte";
|
|
30
29
|
setThemeable($host());
|
|
31
30
|
let { hasIcon, tabs = [], ariaLabel, activeTabIndex = 0, ontabchanged } = $props();
|
|
32
|
-
let activeIndex = $
|
|
31
|
+
let activeIndex = $derived(activeTabIndex);
|
|
33
32
|
let tabsElement;
|
|
34
33
|
let tabsListElement;
|
|
35
34
|
let tabButtons = [];
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export { default as DsfrCallout } from "./dsfr/DsfrCallout.svelte";
|
|
|
38
38
|
export { default as DsfrCard } from "./dsfr/DsfrCard.svelte";
|
|
39
39
|
export { default as DsfrCheckbox } from "./dsfr/DsfrCheckbox.svelte";
|
|
40
40
|
export { default as DsfrCheckboxesGroup } from "./dsfr/DsfrCheckboxesGroup.svelte";
|
|
41
|
+
export { default as DsfrCombobox } from "./dsfr/DsfrCombobox.svelte";
|
|
41
42
|
export { default as DsfrContainer } from "./dsfr/DsfrContainer.svelte";
|
|
42
43
|
export { default as DsfrContent } from "./dsfr/DsfrContent.svelte";
|
|
43
44
|
export { default as DsfrConnect } from "./dsfr/DsfrConnect.svelte";
|
package/dist/index.js
CHANGED
|
@@ -38,6 +38,7 @@ export { default as DsfrCallout } from "./dsfr/DsfrCallout.svelte";
|
|
|
38
38
|
export { default as DsfrCard } from "./dsfr/DsfrCard.svelte";
|
|
39
39
|
export { default as DsfrCheckbox } from "./dsfr/DsfrCheckbox.svelte";
|
|
40
40
|
export { default as DsfrCheckboxesGroup } from "./dsfr/DsfrCheckboxesGroup.svelte";
|
|
41
|
+
export { default as DsfrCombobox } from "./dsfr/DsfrCombobox.svelte";
|
|
41
42
|
export { default as DsfrContainer } from "./dsfr/DsfrContainer.svelte";
|
|
42
43
|
export { default as DsfrContent } from "./dsfr/DsfrContent.svelte";
|
|
43
44
|
export { default as DsfrConnect } from "./dsfr/DsfrConnect.svelte";
|
|
@@ -1335,6 +1335,205 @@
|
|
|
1335
1335
|
"slots": [],
|
|
1336
1336
|
"example": "<dsfr-checkboxes-group\n id={args.id}\n legend={args.legend}\n checkboxes={args.checkboxes}\n hint={args.hint}\n size={args.size}\n inline={args.inline || undefined}\n disabled={args.disabled || undefined}\n values={args.values}\n status={args.status}\n error-message={args.errorMessage}\n valid-message={args.validMessage}\n legend-size={args.legendSize}\n legend-weight={args.legendWeight}\n ></dsfr-checkboxes-group>"
|
|
1337
1337
|
},
|
|
1338
|
+
{
|
|
1339
|
+
"tagName": "dsfr-combobox",
|
|
1340
|
+
"title": "Composants/DSFR/Combobox",
|
|
1341
|
+
"source": "src/lib/dsfr/DsfrCombobox.svelte",
|
|
1342
|
+
"props": [
|
|
1343
|
+
{
|
|
1344
|
+
"name": "id",
|
|
1345
|
+
"attribute": "id",
|
|
1346
|
+
"type": "String",
|
|
1347
|
+
"tsType": "string",
|
|
1348
|
+
"description": "Attribut id de la liste déroulante riche"
|
|
1349
|
+
},
|
|
1350
|
+
{
|
|
1351
|
+
"name": "label",
|
|
1352
|
+
"attribute": "label",
|
|
1353
|
+
"type": "String",
|
|
1354
|
+
"tsType": "string",
|
|
1355
|
+
"description": "Libellé de la liste déroulante riche"
|
|
1356
|
+
},
|
|
1357
|
+
{
|
|
1358
|
+
"name": "hideLabel",
|
|
1359
|
+
"attribute": "hide-label",
|
|
1360
|
+
"type": "Boolean",
|
|
1361
|
+
"tsType": "boolean",
|
|
1362
|
+
"description": "Permet de masquer le label"
|
|
1363
|
+
},
|
|
1364
|
+
{
|
|
1365
|
+
"name": "hint",
|
|
1366
|
+
"attribute": "hint",
|
|
1367
|
+
"type": "String",
|
|
1368
|
+
"tsType": "string",
|
|
1369
|
+
"description": "Texte additionnel sous le libellé"
|
|
1370
|
+
},
|
|
1371
|
+
{
|
|
1372
|
+
"name": "placeholder",
|
|
1373
|
+
"attribute": "placeholder",
|
|
1374
|
+
"type": "String",
|
|
1375
|
+
"tsType": "string",
|
|
1376
|
+
"description": "Texte avant sélection d'une option"
|
|
1377
|
+
},
|
|
1378
|
+
{
|
|
1379
|
+
"name": "multiple",
|
|
1380
|
+
"attribute": "multiple",
|
|
1381
|
+
"type": "Boolean",
|
|
1382
|
+
"tsType": "boolean",
|
|
1383
|
+
"description": "Active le mode sélection multiple (cases à cocher au lieu de boutons radio)"
|
|
1384
|
+
},
|
|
1385
|
+
{
|
|
1386
|
+
"name": "searchable",
|
|
1387
|
+
"attribute": "searchable",
|
|
1388
|
+
"type": "Boolean",
|
|
1389
|
+
"tsType": "boolean",
|
|
1390
|
+
"description": "Active le champ de recherche dans la liste"
|
|
1391
|
+
},
|
|
1392
|
+
{
|
|
1393
|
+
"name": "selectAllButton",
|
|
1394
|
+
"attribute": "select-all-button",
|
|
1395
|
+
"type": "Boolean",
|
|
1396
|
+
"tsType": "boolean",
|
|
1397
|
+
"description": "Affiche le bouton \"Tout sélectionner\" (mode multiple uniquement)"
|
|
1398
|
+
},
|
|
1399
|
+
{
|
|
1400
|
+
"name": "optionGroups",
|
|
1401
|
+
"attribute": "option-groups",
|
|
1402
|
+
"type": "Object",
|
|
1403
|
+
"tsType": "ComboboxOptionGroup[]",
|
|
1404
|
+
"description": "Groupes d'options de la liste déroulante"
|
|
1405
|
+
},
|
|
1406
|
+
{
|
|
1407
|
+
"name": "value",
|
|
1408
|
+
"attribute": "value",
|
|
1409
|
+
"type": "String",
|
|
1410
|
+
"tsType": "string",
|
|
1411
|
+
"description": "Valeur sélectionnée (mode \"sélection unique\")"
|
|
1412
|
+
},
|
|
1413
|
+
{
|
|
1414
|
+
"name": "values",
|
|
1415
|
+
"attribute": "values",
|
|
1416
|
+
"type": "Object",
|
|
1417
|
+
"tsType": "string[]",
|
|
1418
|
+
"description": "Valeurs sélectionnées (mode \"sélection multiple\")"
|
|
1419
|
+
},
|
|
1420
|
+
{
|
|
1421
|
+
"name": "disabled",
|
|
1422
|
+
"attribute": "disabled",
|
|
1423
|
+
"type": "Boolean",
|
|
1424
|
+
"tsType": "boolean",
|
|
1425
|
+
"description": "Désactive la liste déroulante riche"
|
|
1426
|
+
},
|
|
1427
|
+
{
|
|
1428
|
+
"name": "status",
|
|
1429
|
+
"attribute": "status",
|
|
1430
|
+
"type": "String",
|
|
1431
|
+
"tsType": "\"default\" | \"valid\" | \"error\" | \"info\"",
|
|
1432
|
+
"description": "Statut du message",
|
|
1433
|
+
"options": [
|
|
1434
|
+
"default",
|
|
1435
|
+
"valid",
|
|
1436
|
+
"error",
|
|
1437
|
+
"info"
|
|
1438
|
+
]
|
|
1439
|
+
},
|
|
1440
|
+
{
|
|
1441
|
+
"name": "errorMessage",
|
|
1442
|
+
"attribute": "error-message",
|
|
1443
|
+
"type": "String",
|
|
1444
|
+
"tsType": "string",
|
|
1445
|
+
"description": "Texte du message d'erreur"
|
|
1446
|
+
},
|
|
1447
|
+
{
|
|
1448
|
+
"name": "validMessage",
|
|
1449
|
+
"attribute": "valid-message",
|
|
1450
|
+
"type": "String",
|
|
1451
|
+
"tsType": "string",
|
|
1452
|
+
"description": "Texte du message de succès"
|
|
1453
|
+
},
|
|
1454
|
+
{
|
|
1455
|
+
"name": "infoMessage",
|
|
1456
|
+
"attribute": "info-message",
|
|
1457
|
+
"type": "String",
|
|
1458
|
+
"tsType": "string",
|
|
1459
|
+
"description": "Texte du message d'information"
|
|
1460
|
+
},
|
|
1461
|
+
{
|
|
1462
|
+
"name": "name",
|
|
1463
|
+
"attribute": "name",
|
|
1464
|
+
"type": "String",
|
|
1465
|
+
"tsType": "string",
|
|
1466
|
+
"description": "Attribut name du champ"
|
|
1467
|
+
},
|
|
1468
|
+
{
|
|
1469
|
+
"name": "form",
|
|
1470
|
+
"attribute": "form",
|
|
1471
|
+
"type": "String",
|
|
1472
|
+
"tsType": "string",
|
|
1473
|
+
"description": "Attribut form du composant"
|
|
1474
|
+
},
|
|
1475
|
+
{
|
|
1476
|
+
"name": "required",
|
|
1477
|
+
"attribute": "required",
|
|
1478
|
+
"type": "Boolean",
|
|
1479
|
+
"tsType": "boolean",
|
|
1480
|
+
"description": "Rend la sélection obligatoire"
|
|
1481
|
+
},
|
|
1482
|
+
{
|
|
1483
|
+
"name": "labelSize",
|
|
1484
|
+
"attribute": "label-size",
|
|
1485
|
+
"type": "String",
|
|
1486
|
+
"tsType": "TextSize",
|
|
1487
|
+
"description": "Applique une classe utilitaire de taille de texte DSFR sur le label",
|
|
1488
|
+
"options": [
|
|
1489
|
+
"xs",
|
|
1490
|
+
"sm",
|
|
1491
|
+
"md",
|
|
1492
|
+
"lg",
|
|
1493
|
+
"xl",
|
|
1494
|
+
"lead"
|
|
1495
|
+
]
|
|
1496
|
+
},
|
|
1497
|
+
{
|
|
1498
|
+
"name": "labelWeight",
|
|
1499
|
+
"attribute": "label-weight",
|
|
1500
|
+
"type": "String",
|
|
1501
|
+
"tsType": "TextWeight",
|
|
1502
|
+
"description": "Applique une classe utilitaire de graisse DSFR sur le label",
|
|
1503
|
+
"options": [
|
|
1504
|
+
"light",
|
|
1505
|
+
"regular",
|
|
1506
|
+
"bold",
|
|
1507
|
+
"heavy"
|
|
1508
|
+
]
|
|
1509
|
+
}
|
|
1510
|
+
],
|
|
1511
|
+
"events": [
|
|
1512
|
+
{
|
|
1513
|
+
"name": "valuechanged",
|
|
1514
|
+
"detail": "optionValue"
|
|
1515
|
+
},
|
|
1516
|
+
{
|
|
1517
|
+
"name": "valueschanged",
|
|
1518
|
+
"detail": "values"
|
|
1519
|
+
}
|
|
1520
|
+
],
|
|
1521
|
+
"slots": [
|
|
1522
|
+
{
|
|
1523
|
+
"name": "slotSearch",
|
|
1524
|
+
"description": "Champ de recherche personnalisé (remplace le DsfrInput par défaut). Visible uniquement si `searchable` est activé."
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
"name": "slotOptions",
|
|
1528
|
+
"description": "Contenu personnalisé de la liste d'options (remplace le rendu automatique des groupes d'options)"
|
|
1529
|
+
},
|
|
1530
|
+
{
|
|
1531
|
+
"name": "slotMessagesGroup",
|
|
1532
|
+
"description": "Messages personnalisés (remplace le DsfrMessagesGroup par défaut)"
|
|
1533
|
+
}
|
|
1534
|
+
],
|
|
1535
|
+
"example": "<dsfr-combobox\n id={args.id}\n label={args.label}\n hide-label={args.hideLabel || undefined}\n hint={args.hint}\n placeholder={args.placeholder}\n multiple={args.multiple || undefined}\n searchable={args.searchable}\n select-all-button={args.selectAllButton || undefined}\n option-groups={args.optionGroups ? JSON.stringify(args.optionGroups) : undefined}\n value={args.value}\n values={args.values}\n disabled={args.disabled || undefined}\n status={args.status}\n error-message={args.errorMessage}\n valid-message={args.validMessage}\n info-message={args.infoMessage}\n name={args.name}\n form={args.form}\n required={args.required || undefined}\n label-size={args.labelSize}\n label-weight={args.labelWeight}\n onvaluechanged={(e: CustomEvent) => args.onvaluechanged?.(e.detail)}\n onvalueschanged={(e: CustomEvent) => args.onvalueschanged?.(e.detail)}\n ></dsfr-combobox>"
|
|
1536
|
+
},
|
|
1338
1537
|
{
|
|
1339
1538
|
"tagName": "dsfr-connect",
|
|
1340
1539
|
"title": "Composants/DSFR/Connect Button",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@lab-anssi/ui-kit",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.63.0",
|
|
5
5
|
"framework-config": {
|
|
6
6
|
"enable-when": {
|
|
7
7
|
"file-extensions": [
|
|
@@ -1821,6 +1821,326 @@
|
|
|
1821
1821
|
}
|
|
1822
1822
|
]
|
|
1823
1823
|
},
|
|
1824
|
+
{
|
|
1825
|
+
"name": "dsfr-combobox",
|
|
1826
|
+
"attributes": [
|
|
1827
|
+
{
|
|
1828
|
+
"name": "id",
|
|
1829
|
+
"description": "Attribut id de la liste déroulante riche",
|
|
1830
|
+
"value": {
|
|
1831
|
+
"type": "string"
|
|
1832
|
+
}
|
|
1833
|
+
},
|
|
1834
|
+
{
|
|
1835
|
+
"name": "label",
|
|
1836
|
+
"description": "Libellé de la liste déroulante riche",
|
|
1837
|
+
"value": {
|
|
1838
|
+
"type": "string"
|
|
1839
|
+
}
|
|
1840
|
+
},
|
|
1841
|
+
{
|
|
1842
|
+
"name": "hide-label",
|
|
1843
|
+
"description": "Permet de masquer le label",
|
|
1844
|
+
"value": {
|
|
1845
|
+
"type": "boolean"
|
|
1846
|
+
}
|
|
1847
|
+
},
|
|
1848
|
+
{
|
|
1849
|
+
"name": "hint",
|
|
1850
|
+
"description": "Texte additionnel sous le libellé",
|
|
1851
|
+
"value": {
|
|
1852
|
+
"type": "string"
|
|
1853
|
+
}
|
|
1854
|
+
},
|
|
1855
|
+
{
|
|
1856
|
+
"name": "placeholder",
|
|
1857
|
+
"description": "Texte avant sélection d'une option",
|
|
1858
|
+
"value": {
|
|
1859
|
+
"type": "string"
|
|
1860
|
+
}
|
|
1861
|
+
},
|
|
1862
|
+
{
|
|
1863
|
+
"name": "multiple",
|
|
1864
|
+
"description": "Active le mode sélection multiple (cases à cocher au lieu de boutons radio)",
|
|
1865
|
+
"value": {
|
|
1866
|
+
"type": "boolean"
|
|
1867
|
+
}
|
|
1868
|
+
},
|
|
1869
|
+
{
|
|
1870
|
+
"name": "searchable",
|
|
1871
|
+
"description": "Active le champ de recherche dans la liste",
|
|
1872
|
+
"value": {
|
|
1873
|
+
"type": "boolean"
|
|
1874
|
+
}
|
|
1875
|
+
},
|
|
1876
|
+
{
|
|
1877
|
+
"name": "select-all-button",
|
|
1878
|
+
"description": "Affiche le bouton \"Tout sélectionner\" (mode multiple uniquement)",
|
|
1879
|
+
"value": {
|
|
1880
|
+
"type": "boolean"
|
|
1881
|
+
}
|
|
1882
|
+
},
|
|
1883
|
+
{
|
|
1884
|
+
"name": "option-groups",
|
|
1885
|
+
"description": "Groupes d'options de la liste déroulante",
|
|
1886
|
+
"value": {
|
|
1887
|
+
"type": "string"
|
|
1888
|
+
}
|
|
1889
|
+
},
|
|
1890
|
+
{
|
|
1891
|
+
"name": "value",
|
|
1892
|
+
"description": "Valeur sélectionnée (mode \"sélection unique\")",
|
|
1893
|
+
"value": {
|
|
1894
|
+
"type": "string"
|
|
1895
|
+
}
|
|
1896
|
+
},
|
|
1897
|
+
{
|
|
1898
|
+
"name": "values",
|
|
1899
|
+
"description": "Valeurs sélectionnées (mode \"sélection multiple\")",
|
|
1900
|
+
"value": {
|
|
1901
|
+
"type": "string"
|
|
1902
|
+
}
|
|
1903
|
+
},
|
|
1904
|
+
{
|
|
1905
|
+
"name": "disabled",
|
|
1906
|
+
"description": "Désactive la liste déroulante riche",
|
|
1907
|
+
"value": {
|
|
1908
|
+
"type": "boolean"
|
|
1909
|
+
}
|
|
1910
|
+
},
|
|
1911
|
+
{
|
|
1912
|
+
"name": "status",
|
|
1913
|
+
"description": "Statut du message",
|
|
1914
|
+
"value": {
|
|
1915
|
+
"type": "'default' | 'valid' | 'error' | 'info'"
|
|
1916
|
+
}
|
|
1917
|
+
},
|
|
1918
|
+
{
|
|
1919
|
+
"name": "error-message",
|
|
1920
|
+
"description": "Texte du message d'erreur",
|
|
1921
|
+
"value": {
|
|
1922
|
+
"type": "string"
|
|
1923
|
+
}
|
|
1924
|
+
},
|
|
1925
|
+
{
|
|
1926
|
+
"name": "valid-message",
|
|
1927
|
+
"description": "Texte du message de succès",
|
|
1928
|
+
"value": {
|
|
1929
|
+
"type": "string"
|
|
1930
|
+
}
|
|
1931
|
+
},
|
|
1932
|
+
{
|
|
1933
|
+
"name": "info-message",
|
|
1934
|
+
"description": "Texte du message d'information",
|
|
1935
|
+
"value": {
|
|
1936
|
+
"type": "string"
|
|
1937
|
+
}
|
|
1938
|
+
},
|
|
1939
|
+
{
|
|
1940
|
+
"name": "name",
|
|
1941
|
+
"description": "Attribut name du champ",
|
|
1942
|
+
"value": {
|
|
1943
|
+
"type": "string"
|
|
1944
|
+
}
|
|
1945
|
+
},
|
|
1946
|
+
{
|
|
1947
|
+
"name": "form",
|
|
1948
|
+
"description": "Attribut form du composant",
|
|
1949
|
+
"value": {
|
|
1950
|
+
"type": "string"
|
|
1951
|
+
}
|
|
1952
|
+
},
|
|
1953
|
+
{
|
|
1954
|
+
"name": "required",
|
|
1955
|
+
"description": "Rend la sélection obligatoire",
|
|
1956
|
+
"value": {
|
|
1957
|
+
"type": "boolean"
|
|
1958
|
+
}
|
|
1959
|
+
},
|
|
1960
|
+
{
|
|
1961
|
+
"name": "label-size",
|
|
1962
|
+
"description": "Applique une classe utilitaire de taille de texte DSFR sur le label",
|
|
1963
|
+
"value": {
|
|
1964
|
+
"type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lead'"
|
|
1965
|
+
}
|
|
1966
|
+
},
|
|
1967
|
+
{
|
|
1968
|
+
"name": "label-weight",
|
|
1969
|
+
"description": "Applique une classe utilitaire de graisse DSFR sur le label",
|
|
1970
|
+
"value": {
|
|
1971
|
+
"type": "'light' | 'regular' | 'bold' | 'heavy'"
|
|
1972
|
+
}
|
|
1973
|
+
},
|
|
1974
|
+
{
|
|
1975
|
+
"name": "onvaluechanged",
|
|
1976
|
+
"description": "detail: optionValue",
|
|
1977
|
+
"value": {
|
|
1978
|
+
"type": "(event: CustomEvent) => void"
|
|
1979
|
+
}
|
|
1980
|
+
},
|
|
1981
|
+
{
|
|
1982
|
+
"name": "onvalueschanged",
|
|
1983
|
+
"description": "detail: values",
|
|
1984
|
+
"value": {
|
|
1985
|
+
"type": "(event: CustomEvent) => void"
|
|
1986
|
+
}
|
|
1987
|
+
}
|
|
1988
|
+
],
|
|
1989
|
+
"js": {
|
|
1990
|
+
"properties": [
|
|
1991
|
+
{
|
|
1992
|
+
"name": "id",
|
|
1993
|
+
"description": "Attribut id de la liste déroulante riche",
|
|
1994
|
+
"type": "string"
|
|
1995
|
+
},
|
|
1996
|
+
{
|
|
1997
|
+
"name": "label",
|
|
1998
|
+
"description": "Libellé de la liste déroulante riche",
|
|
1999
|
+
"type": "string"
|
|
2000
|
+
},
|
|
2001
|
+
{
|
|
2002
|
+
"name": "hideLabel",
|
|
2003
|
+
"description": "Permet de masquer le label",
|
|
2004
|
+
"type": "boolean"
|
|
2005
|
+
},
|
|
2006
|
+
{
|
|
2007
|
+
"name": "hint",
|
|
2008
|
+
"description": "Texte additionnel sous le libellé",
|
|
2009
|
+
"type": "string"
|
|
2010
|
+
},
|
|
2011
|
+
{
|
|
2012
|
+
"name": "placeholder",
|
|
2013
|
+
"description": "Texte avant sélection d'une option",
|
|
2014
|
+
"type": "string"
|
|
2015
|
+
},
|
|
2016
|
+
{
|
|
2017
|
+
"name": "multiple",
|
|
2018
|
+
"description": "Active le mode sélection multiple (cases à cocher au lieu de boutons radio)",
|
|
2019
|
+
"type": "boolean"
|
|
2020
|
+
},
|
|
2021
|
+
{
|
|
2022
|
+
"name": "searchable",
|
|
2023
|
+
"description": "Active le champ de recherche dans la liste",
|
|
2024
|
+
"type": "boolean"
|
|
2025
|
+
},
|
|
2026
|
+
{
|
|
2027
|
+
"name": "selectAllButton",
|
|
2028
|
+
"description": "Affiche le bouton \"Tout sélectionner\" (mode multiple uniquement)",
|
|
2029
|
+
"type": "boolean"
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
"name": "optionGroups",
|
|
2033
|
+
"description": "Groupes d'options de la liste déroulante",
|
|
2034
|
+
"type": "string"
|
|
2035
|
+
},
|
|
2036
|
+
{
|
|
2037
|
+
"name": "value",
|
|
2038
|
+
"description": "Valeur sélectionnée (mode \"sélection unique\")",
|
|
2039
|
+
"type": "string"
|
|
2040
|
+
},
|
|
2041
|
+
{
|
|
2042
|
+
"name": "values",
|
|
2043
|
+
"description": "Valeurs sélectionnées (mode \"sélection multiple\")",
|
|
2044
|
+
"type": "string"
|
|
2045
|
+
},
|
|
2046
|
+
{
|
|
2047
|
+
"name": "disabled",
|
|
2048
|
+
"description": "Désactive la liste déroulante riche",
|
|
2049
|
+
"type": "boolean"
|
|
2050
|
+
},
|
|
2051
|
+
{
|
|
2052
|
+
"name": "status",
|
|
2053
|
+
"description": "Statut du message",
|
|
2054
|
+
"type": "'default' | 'valid' | 'error' | 'info'"
|
|
2055
|
+
},
|
|
2056
|
+
{
|
|
2057
|
+
"name": "errorMessage",
|
|
2058
|
+
"description": "Texte du message d'erreur",
|
|
2059
|
+
"type": "string"
|
|
2060
|
+
},
|
|
2061
|
+
{
|
|
2062
|
+
"name": "validMessage",
|
|
2063
|
+
"description": "Texte du message de succès",
|
|
2064
|
+
"type": "string"
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"name": "infoMessage",
|
|
2068
|
+
"description": "Texte du message d'information",
|
|
2069
|
+
"type": "string"
|
|
2070
|
+
},
|
|
2071
|
+
{
|
|
2072
|
+
"name": "name",
|
|
2073
|
+
"description": "Attribut name du champ",
|
|
2074
|
+
"type": "string"
|
|
2075
|
+
},
|
|
2076
|
+
{
|
|
2077
|
+
"name": "form",
|
|
2078
|
+
"description": "Attribut form du composant",
|
|
2079
|
+
"type": "string"
|
|
2080
|
+
},
|
|
2081
|
+
{
|
|
2082
|
+
"name": "required",
|
|
2083
|
+
"description": "Rend la sélection obligatoire",
|
|
2084
|
+
"type": "boolean"
|
|
2085
|
+
},
|
|
2086
|
+
{
|
|
2087
|
+
"name": "labelSize",
|
|
2088
|
+
"description": "Applique une classe utilitaire de taille de texte DSFR sur le label",
|
|
2089
|
+
"type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lead'"
|
|
2090
|
+
},
|
|
2091
|
+
{
|
|
2092
|
+
"name": "labelWeight",
|
|
2093
|
+
"description": "Applique une classe utilitaire de graisse DSFR sur le label",
|
|
2094
|
+
"type": "'light' | 'regular' | 'bold' | 'heavy'"
|
|
2095
|
+
},
|
|
2096
|
+
{
|
|
2097
|
+
"name": "onvaluechanged",
|
|
2098
|
+
"description": "detail: optionValue",
|
|
2099
|
+
"type": "(event: CustomEvent) => void"
|
|
2100
|
+
},
|
|
2101
|
+
{
|
|
2102
|
+
"name": "onvalueschanged",
|
|
2103
|
+
"description": "detail: values",
|
|
2104
|
+
"type": "(event: CustomEvent) => void"
|
|
2105
|
+
}
|
|
2106
|
+
],
|
|
2107
|
+
"events": [
|
|
2108
|
+
{
|
|
2109
|
+
"name": "valuechanged",
|
|
2110
|
+
"description": "detail: optionValue"
|
|
2111
|
+
},
|
|
2112
|
+
{
|
|
2113
|
+
"name": "valueschanged",
|
|
2114
|
+
"description": "detail: values"
|
|
2115
|
+
}
|
|
2116
|
+
]
|
|
2117
|
+
},
|
|
2118
|
+
"doc-url": "https://betagouv.github.io/lab-anssi-ui-kit/?path=/docs/composants-dsfr-combobox--docs",
|
|
2119
|
+
"events": [
|
|
2120
|
+
{
|
|
2121
|
+
"name": "valuechanged",
|
|
2122
|
+
"description": "detail: optionValue"
|
|
2123
|
+
},
|
|
2124
|
+
{
|
|
2125
|
+
"name": "valueschanged",
|
|
2126
|
+
"description": "detail: values"
|
|
2127
|
+
}
|
|
2128
|
+
],
|
|
2129
|
+
"slots": [
|
|
2130
|
+
{
|
|
2131
|
+
"name": "slotSearch",
|
|
2132
|
+
"description": "Champ de recherche personnalisé (remplace le DsfrInput par défaut). Visible uniquement si `searchable` est activé."
|
|
2133
|
+
},
|
|
2134
|
+
{
|
|
2135
|
+
"name": "slotOptions",
|
|
2136
|
+
"description": "Contenu personnalisé de la liste d'options (remplace le rendu automatique des groupes d'options)"
|
|
2137
|
+
},
|
|
2138
|
+
{
|
|
2139
|
+
"name": "slotMessagesGroup",
|
|
2140
|
+
"description": "Messages personnalisés (remplace le DsfrMessagesGroup par défaut)"
|
|
2141
|
+
}
|
|
2142
|
+
]
|
|
2143
|
+
},
|
|
1824
2144
|
{
|
|
1825
2145
|
"name": "dsfr-connect",
|
|
1826
2146
|
"attributes": [
|