https://monextranet-campus.ascnd.fr/build/assets/BadgeDoc-C-_qPKnM.js

1import { d as u, o as s, c as b, e as n, w as r, b as l, f as a, t as g, h as t, _ as v } from "./app-KW02oTuk.js";
2import { _ as i, C as f } from "./ParameterRow.vue_vue_type_script_setup_true_lang-CZ3ts8T_.js";
3import "./purifier-DwKNMBJW.js";
4import "./index-C44AX5GR.js";
5const m = { id: "badge", class: "mb-8 scroll-mt-16" }, B = { class: "space-y-10" }, x = { class: "flex flex-wrap gap-x-3 gap-y-2 mb-6" }, D = { class: "flex flex-wrap gap-x-3 gap-y-2 mb-6" }, y = { class: "flex flex-wrap gap-x-3 gap-y-2 mb-6" }, k = { class: "flex flex-wrap gap-x-3 gap-y-2 mb-6" }, w = { class: "flex flex-wrap gap-x-3 gap-y-2 mb-6" }, V = { class: "space-y-0" }, d = `<!-- Variants s\xE9mantiques -->
6<DdBadge label="Primary" variant="primary" />
7<DdBadge label="Destructive" variant="destructive" />
8<DdBadge label="Accent" variant="accent" />
9
10<!-- Variants couleur (filled par d\xE9faut) -->
11<DdBadge label="Default" variant="default" />
12<DdBadge label="Brand" variant="brand" />
13<DdBadge label="Blue" variant="blue" />
14<DdBadge label="Green" variant="green" />
15<DdBadge label="Purple" variant="purple" />
16<DdBadge label="Red" variant="red" />
17<DdBadge label="Orange" variant="orange" />
18<DdBadge label="Yellow" variant="yellow" />
19<DdBadge label="Teal" variant="teal" />
20<DdBadge label="Pink" variant="pink" />
21
22<!-- Appearance : light (pastel) -->
23<DdBadge label="Brand Light" variant="brand" appearance="light" />
24<DdBadge label="Blue Light" variant="blue" appearance="light" />
25<DdBadge label="Green Light" variant="green" appearance="light" />
26
27<!-- Appearance : outline (bordure color\xE9e, fond blanc) -->
28<DdBadge label="Blue Outline" variant="blue" appearance="outline" />
29<DdBadge label="Red Outline" variant="red" appearance="outline" />
30
31<!-- Avec slot et ic\xF4ne -->
32<DdBadge variant="blue" appearance="outline">
33  <DdIcon name="fas fa-info" />
34  DdBadge avec ic\xF4ne
35</DdBadge>`, G = u({ __name: "BadgeDoc", emits: ["copy-code"], setup(P, { emit: o }) {
36  const p = o;
37  return (A, e) => (s(), b("div", m, [n(f, { componentName: "DdBadge", status: "Stable", path: "components/UI/DdBadge.vue", description: "Un badge pour afficher des statuts ou des \xE9tiquettes. Supporte diff\xE9rentes variantes de couleur.", onCopyCode: e[0] || (e[0] = (C) => p("copy-code", d)) }, { example: r(() => [l("div", B, [l("div", null, [e[29] || (e[29] = l("p", { class: "text-sm font-semibold text-gray-800 mb-3" }, "Variants s\xE9mantiques", -1)), e[30] || (e[30] = a()), l("div", x, [n(t, { label: "Primary", variant: "primary" }), e[1] || (e[1] = a()), n(t, { label: "Destructive", variant: "destructive" }), e[2] || (e[2] = a()), n(t, { label: "Accent", variant: "accent" })]), e[31] || (e[31] = a()), e[32] || (e[32] = l("p", { class: "text-sm font-semibold text-gray-800 mb-3" }, "Variants couleur", -1)), e[33] || (e[33] = a()), l("div", D, [n(t, { label: "Default", variant: "default" }), e[3] || (e[3] = a()), n(t, { label: "Brand", variant: "brand" }), e[4] || (e[4] = a()), n(t, { label: "Blue", variant: "blue" }), e[5] || (e[5] = a()), n(t, { label: "Green", variant: "green" }), e[6] || (e[6] = a()), n(t, { label: "Purple", variant: "purple" }), e[7] || (e[7] = a()), n(t, { label: "Orange", variant: "orange" }), e[8] || (e[8] = a()), n(t, { label: "Red", variant: "red" }), e[9] || (e[9] = a()), n(t, { label: "Yellow", variant: "yellow" }), e[10] || (e[10] = a()), n(t, { label: "Pink", variant: "pink" }), e[11] || (e[11] = a()), n(t, { label: "Teal", variant: "teal" })]), e[34] || (e[34] = a()), e[35] || (e[35] = l("p", { class: "text-sm font-semibold text-gray-800 mb-3" }, "Appearance : light", -1)), e[36] || (e[36] = a()), l("div", y, [n(t, { label: "Default", variant: "default", appearance: "light" }), e[12] || (e[12] = a()), n(t, { label: "Brand", variant: "brand", appearance: "light" }), e[13] || (e[13] = a()), n(t, { label: "Blue", variant: "blue", appearance: "light" }), e[14] || (e[14] = a()), n(t, { label: "Green", variant: "green", appearance: "light" }), e[15] || (e[15] = a()), n(t, { label: "Purple", variant: "purple", appearance: "light" }), e[16] || (e[16] = a()), n(t, { label: "Orange", variant: "orange", appearance: "light" }), e[17] || (e[17] = a()), n(t, { label: "Red", variant: "red", appearance: "light" }), e[18] || (e[18] = a()), n(t, { label: "Pink", variant: "pink", appearance: "light" }), e[19] || (e[19] = a()), n(t, { label: "Teal", variant: "teal", appearance: "light" })]), e[37] || (e[37] = a()), e[38] || (e[38] = l("p", { class: "text-sm font-semibold text-gray-800 mb

37-3" }, "Appearance : outline", -1)), e[39] || (e[39] = a()), l("div", k, [n(t, { label: "Default", variant: "default", appearance: "outline" }), e[20] || (e[20] = a()), n(t, { label: "Brand", variant: "brand", appearance: "outline" }), e[21] || (e[21] = a()), n(t, { label: "Blue", variant: "blue", appearance: "outline" }), e[22] || (e[22] = a()), n(t, { label: "Green", variant: "green", appearance: "outline" }), e[23] || (e[23] = a()), n(t, { label: "Purple", variant: "purple", appearance: "outline" }), e[24] || (e[24] = a()), n(t, { label: "Orange", variant: "orange", appearance: "outline" }), e[25] || (e[25] = a()), n(t, { label: "Red", variant: "red", appearance: "outline" }), e[26] || (e[26] = a()), n(t, { label: "Pink", variant: "pink", appearance: "outline" }), e[27] || (e[27] = a()), n(t, { label: "Teal", variant: "teal", appearance: "outline" })]), e[40] || (e[40] = a()), e[41] || (e[41] = l("p", { class: "text-sm font-semibold text-gray-800 mb-3" }, "Avec ic\xF4ne", -1)), e[42] || (e[42] = a()), l("div", w, [n(t, { variant: "blue", appearance: "outline" }, { default: r(() => [n(v, { name: "fas fa-circle-info", color: "blue-500" }), e[28] || (e[28] = a(`
38                                DdBadge avec ic\xF4ne
39                            `, -1))]), _: 1 })])])])]), code: r(() => [l("pre", { class: "line-numbers" }, [l("code", { class: "language-markup" }, g(d))])]), parameters: r(() => [l("div", V, [n(i, { name: "label", type: "String", description: "Texte affich\xE9 dans le badge" }), e[44] || (e[44] = a()), n(i, { name: "variant", type: "String", "default-value": "'primary'", description: "Variant s\xE9mantique ou couleur du badge, \xE0 combiner avec la prop appearance" }, { default: r(() => [...e[43] || (e[43] = [l("ul", { class: "flex flex-col gap-1.5 text-xs text-gray-800 mt-3 ml-4 leading-tight list-disc" }, [l("li", null, [l("code", null, "primary"), a(" / "), l("code", null, "secondary"), a(" / "), l("code", null, "accent"), a(" / "), l("code", null, "destructive"), a(" - Variants s\xE9mantiques. Note : "), l("code", null, "accent"), a(" rend en purple \u2014 la palette de tokens "), l("code", null, "accent"), a(" (pervenche clair) est r\xE9serv\xE9e aux fonds subtils, ne pas la confondre avec ce variant.")]), a(), l("li", null, [l("code", null, "default"), a(" - Gris fonc\xE9")]), a(), l("li", null, [l("code", null, "brand"), a(" - Couleur de marque de l'OF ("), l("code", null, "brand-*"), a(")")]), a(), l("li", null, [l("code", null, "blue"), a(" - Bleu")]), a(), l("li", null, [l("code", null, "green"), a(" - Vert")]), a(), l("li", null, [l("code", null, "purple"), a(" - Violet")]), a(), l("li", null, [l("code", null, "red"), a(" - Rouge")]), a(), l("li", null, [l("code", null, "orange"), a(" - Orange")]), a(), l("li", null, [l("code", null, "yellow"), a(" - Jaune (texte fonc\xE9 en filled, pour le contraste)")]), a(), l("li", null, [l("code", null, "teal"), a(" - Sarcelle")]), a(), l("li", null, [l("code", null, "pink"), a(" - Rose")]), a(), l("li", null, [l("code", null, "*-light"), a(" (ex. "), l("code", null, "blue-light"), a(") - D\xE9pr\xE9ci\xE9, utiliser "), l("code", null, 'appearance="light"')])], -1)])]), _: 1 }), e[45] || (e[45] = a()), n(i, { name: "appearance", type: "String", "default-value": "'filled'", description: "Style du badge : filled (plein), light (pastel), outline (bordure color\xE9e, fond blanc). Remplace le suffixe -light et la prop outline." }), e[46] || (e[46] = a()), n(i, { name: "outline", type: "Boolean", "default-value": "false", description: `D\xE9pr\xE9ci\xE9 : utiliser appearance="outline". Affiche le badge avec un style 'outline' (bordure color\xE9e, fond blanc)` })])]), _: 1 })]));
40} });
41export {
42  G as default
43};