https://espace.labelleouvrage.fr/build/assets/InputDoc-CsWmhlsW.js

1import { d as E, r as s, o as U, a as C, g as d, w as o, f as a, h as l, t as n, b3 as m, a6 as r, V as i } from "./app-CSFh7Ls_.js";
2import { _ as t, C as T } from "./ParameterRow.vue_vue_type_script_setup_true_lang-CVywgFj6.js";
3import "./purifier-DwKNMBJW.js";
4import "./index-C44AX5GR.js";
5const w = { id: "input", class: "mb-8 scroll-mt-16" }, N = { class: "space-y-10" }, P = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, k = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, A = { class: "grid grid-cols-1 md:grid-cols-3 gap-4" }, B = { class: "grid grid-cols-1 md:grid-cols-4 gap-4" }, R = { class: "grid grid-cols-1 md:grid-cols-2 gap-4" }, $ = { class: "space-y-0" }, x = `<DdLabel for="textValue">Texte simple</DdLabel>
6<DdInput id="textValue" v-model="textValue" placeholder="Texte simple" />
7
8<DdLabel for="emailValue">Email</DdLabel>
9<DdInput id="emailValue" v-model="emailValue" type="email" placeholder="Email" />
10
11<DdLabel for="numberValue">Nombre</DdLabel>
12<DdInput id="numberValue" v-model="numberValue" type="number" placeholder="Nombre" />
13
14<DdLabel for="passwordValue">Mot de passe</DdLabel>
15<DdInput id="passwordValue" v-model="passwordValue" type="password" placeholder="Mot de passe" />
16
17<DdLabel for="colorValue">Couleur</DdLabel>
18<DdInput id="colorValue" v-model="colorValue" type="color" placeholder="Couleur" />`, j = `<DdLabel for="leftIconValue">Rechercher...</DdLabel>
19<DdInput id="leftIconValue" v-model="textValue" icon="fas fa-search" placeholder="Rechercher..." />
20
21<DdLabel for="autoSaveValue">Autosaved...</DdLabel>
22<DdInput id="autoSaveValue" v-model="autoSaveValue" placeholder="Sauvegarde automatique..." />`, F = `<DdLabel for="successValue">Success</DdLabel>
23<DdInput id="successValue" v-model="successValue" variant="success" />
24
25<DdLabel for="errorValue">Error</DdLabel>
26<DdInput id="errorValue" v-model="errorValue" variant="error" />
27
28<DdLabel for="disabledValue">Disabled</DdLabel>
29<DdInput id="disabledValue" v-model="disabledValue" disabled />`, G = `<DdLabel for="requiredValue">Requis (min 3 chars)</DdLabel>
30<DdInput
31    id="requiredValue"
32    v-model="requiredValue"
33    placeholder="Requis (min 3 chars)"
34    required
35    :rules="[v => v?.length >= 3 || 'Au moins 3 caract\xE8res']"
36/>
37
38<DdLabel for="patternValue">Email</DdLabel>
39<DdInput
40    id="patternValue"
41    v-model="patternValue"
42    placeholder="[email protected]"
43    type="email"
44/>
45
46<DdLabel for="backendErrorValue">Erreur externe</DdLabel>
47<DdInput
48    id="backendErrorValue"
49    v-model="backendErrorValue"
50    errorMessage="Cet identifiant est d\xE9j\xE0 pris"
51    placeholder="Erreur externe"
52/>`, W = `<DdLabel for="sizeMini">Mini</DdLabel>
53<DdInput id="sizeMini" size="mini" placeholder="Mini" />
54
55<DdLabel for="sizeSmall">Petit (small)</DdLabel>
56<DdInput id="sizeSmall" size="small" placeholder="Petit" />
57
58<DdLabel for="sizeDefault">Par d\xE9faut (default)</DdLabel>
59<DdInput id="sizeDefault" placeholder="Par d\xE9faut" />
60
61<DdLabel for="sizeLarge">Grand (large)</DdLabel>
62<DdInput id="sizeLarge" size="large" placeholder="Grand" />`, Y = E({ __name: "InputDoc", emits: ["copy-code"], setup(H, { emit: q }) {
63  const p = s(""), f = s(""), V = s(null), v = s(""), b = s("#c12f2f"), D = s("Validation r\xE9ussie"), g = s("Valeur invalide"), L = s("Non modifiable"), y = s(""), z = s("invalid-email"), S = s("User01"), I = s(""), M = q;
64  return (J, e) => (U(), C("div", w, [d(T, { componentName: "DdInput", status: "WIP", path: "components/UI/DdForm/DdInput.vue", description: "Champ de saisie textuel polyvalent avec support pour diff\xE9rents types, ic\xF4nes et \xE9tats de validation.", onCopyCode: e[13] || (e[13] = (u) => M("copy-code", x)) }, { example: o(() => [a("div", N, [d(m, { legend: "Types basiques" }, { default: o(() => [a("div", P, [a("div", null, [d(r, { for: "textValue" }, { default: o(() => e[14] || (e[14] = [l("Texte simple")])), _: 1, __: [14] }), e[15] || (e[15] = l()), d(i, { id: "textValue", modelValue: p.value, "onUpdate:modelValue": e[0] || (e[0] = (u) => p.value = u), placeholder: "Texte simple", class: "js-fais-quelquechose", "data-js": "fais-quelquechose" }, null, 8, ["modelValue"])]), e[24] || (e[24] = l()), a("div", null, [d(r, { for: "emailValue" }, { default: o(() => e[16] || (e[16] = [l("Email")])), _: 1, __: [16] }), e[17] || (e[17] = l()), d(i, { id: "emailValue", modelValue: f.value, "onUpdate:modelValue": e[1] || (e[1] = (u) => f.value = u), type: "email", placeholder: "Email" }, null, 8, ["modelValue"])]), e[25] || (e[25] = l()), a("div", null, [d(r, { for: "numberValue" }, { default: o(() => e[18] || (e[18] = [l("Nombre")])), _: 1, __: [18] }), e[19] || (e[19] = l()), d(i, { id: "numberValue", modelValue: V.value, "onUpdate:modelValue": e[2] || (e[2] = (u) => V.value = u), type: "number", placeholder: "Nombre" }, null, 8, ["modelValue"])]), e[26] || (e[26] = l()), a("div", null, [d(r, { for: "passwordValue" }, { default: o(() => e[20] || (e[20] = [l("Mot de passe")])), _: 1, __: [20] }), e[21] || (e[21] = l()), d(i, { id: "passwordValue", modelValue: v.value, "onUpdate:modelValue": e[3] || (e[3] = (u) => v.value = u), type: "password", placeholder: "Mot de passe" }, null, 8, ["modelValue"])]), e[27] || (e[27] = l()), a("div", null, [d(r, { for: "color

64Value" }, { default: o(() => e[22] || (e[22] = [l("Couleur")])), _: 1, __: [22] }), e[23] || (e[23] = l()), d(i, { id: "colorValue", modelValue: b.value, "onUpdate:modelValue": e[4] || (e[4] = (u) => b.value = u), type: "color", placeholder: "Couleur" }, null, 8, ["modelValue"])])])]), _: 1 }), e[72] || (e[72] = l()), d(m, { legend: "Avec ic\xF4nes" }, { default: o(() => [a("div", k, [a("div", null, [d(r, { for: "leftIconValue" }, { default: o(() => e[28] || (e[28] = [l("Rechercher...")])), _: 1, __: [28] }), e[29] || (e[29] = l()), d(i, { id: "leftIconValue", modelValue: p.value, "onUpdate:modelValue": e[5] || (e[5] = (u) => p.value = u), icon: "fas fa-search", placeholder: "Rechercher..." }, null, 8, ["modelValue"])]), e[32] || (e[32] = l()), a("div", null, [d(r, { for: "autoSaveValue" }, { default: o(() => e[30] || (e[30] = [l("Autosaved...")])), _: 1, __: [30] }), e[31] || (e[31] = l()), d(i, { id: "autoSaveValue", autosave: "", modelValue: I.value, "onUpdate:modelValue": e[6] || (e[6] = (u) => I.value = u), placeholder: "Sauvegarde automatique..." }, null, 8, ["modelValue"])])])]), _: 1 }), e[73] || (e[73] = l()), d(m, { legend: "\xC9tats" }, { default: o(() => [a("div", A, [a("div", null, [d(r, { for: "successValue" }, { default: o(() => e[33] || (e[33] = [l("Success")])), _: 1, __: [33] }), e[34] || (e[34] = l()), d(i, { id: "successValue", modelValue: D.value, "onUpdate:modelValue": e[7] || (e[7] = (u) => D.value = u), variant: "success" }, null, 8, ["modelValue"])]), e[39] || (e[39] = l()), a("div", null, [d(r, { for: "errorValue" }, { default: o(() => e[35] || (e[35] = [l("Error")])), _: 1, __: [35] }), e[36] || (e[36] = l()), d(i, { id: "errorValue", modelValue: g.value, "onUpdate:modelValue": e[8] || (e[8] = (u) => g.value = u), variant: "error" }, null, 8, ["modelValue"])]), e[40] || (e[40] = l()), a("div", null, [d(r, { for: "disabledValue" }, { default: o(() => e[37] || (e[37] = [l("Disabled")])), _: 1, __: [37] }), e[38] || (e[38] = l()), d(i, { id: "disabledValue", modelValue: L.value, "onUpdate:modelValue": e[9] || (e[9] = (u) => L.value = u), disabled: "" }, null, 8, ["modelValue"])])])]), _: 1 }), e[74] || (e[74] = l()), d(m, { legend: "Tailles" }, { default: o(() => [a("div", B, [a("div", null, [d(r, { for: "sizeMini" }, { default: o(() => e[41] || (e[41] = [l("Mini")])), _: 1, __: [41] }), e[42] || (e[42] = l()), d(i, { id: "sizeMini", size: "mini", placeholder: "Mini" })]), e[57] || (e[57] = l()), a("div", null, [d(r, { for: "sizeSmall" }, { default: o(() => e[43] || (e[43] = [l("Small")])), _: 1, __: [43] }), e[44] || (e[44] = l()), d(i, { id: "sizeSmall", size: "small", placeholder: "Small" })]), e[58] || (e[58] = l()), a("div", null, [d(r, { for: "sizeDefault" }, { default: o(() => e[45] || (e[45] = [l("Par d\xE9faut")])), _: 1, __: [45] }), e[46] || (e[46] = l()), d(i, { id: "sizeDefault", placeholder: "Par d\xE9faut" })]), e[59] || (e[59] = l()), a("div", null, [d(r, { for: "sizeLarge" }, { default: o(() => e[47] || (e[47] = [l("Large")])), _: 1, __: [47] }), e[48] || (e[48] = l()), d(i, { id: "sizeLarge", size: "large", placeholder: "Large" })]), e[60] || (e[60] = l()), a("div", null, [d(r, { for: "sizeMini" }, { default: o(() => e[49] || (e[49] = [l("Mini avec ic\xF4ne")])), _: 1, __: [49] }), e[50] || (e[50] = l()), d(i, { id: "sizeMini", size: "mini", placeholder: "Mini", icon: "fas fa-search" })]), e[61] || (e[61] = l()), a("div", null, [d(r, { for: "sizeSmall" }, { default: o(() => e[51] || (e[51] = [l("Small avec ic\xF4ne")])), _: 1, __: [51] }), e[52] || (e[52] = l()), d(i, { id: "sizeSmall", size: "small", placeholder: "Small", icon: "fas fa-search" })]), e[62] || (e[62] = l()), a("div", null, [d(r, { for: "sizeDefault" }, { default: o(() => e[53] || (e[53] = [l("Par d\xE9faut avec ic\xF4ne")])), _: 1, __: [53] }), e[54] || (e[54] = l()), d(i, { id: "sizeDefault", placeholder: "Par d\xE9faut", icon: "fas fa-search" })]), e[63] || (e[63] = l()), a("div", null, [d(r, { for: "sizeLarge" }, { default: o(() => e[55] || (e[55] = [l("Large avec ic\xF4ne")])), _: 1, __: [55] }), e[56] || (e[56] = l()), d(i, { id: "sizeLarge", size: "large", placeholder: "Large", icon: "fas fa-search" })])])]), _: 1 }), e[75] || (e[75] = l()), d(m, { legend: "Validation" }, { default: o(() => [a("div", R, [a("div", null, [d(r, { for: "requiredValue" }, { default: o(() => e[64] || (e[64] = [l("Requis (min 3 chars)")])), _: 1, __: [64] }), e[65] || (e[65] = l()), d(i, { id: "requiredValue", modelValue: 

64y.value, "onUpdate:modelValue": e[10] || (e[10] = (u) => y.value = u), placeholder: "Requis (min 3 chars)", required: "", rules: [(u) => u?.length >= 3 || "Au moins 3 caract\xE8res"] }, null, 8, ["modelValue", "rules"])]), e[70] || (e[70] = l()), a("div", null, [d(r, { for: "patternValue" }, { default: o(() => e[66] || (e[66] = [l("Email")])), _: 1, __: [66] }), e[67] || (e[67] = l()), d(i, { id: "patternValue", modelValue: z.value, "onUpdate:modelValue": e[11] || (e[11] = (u) => z.value = u), placeholder: "[email protected]", type: "email" }, null, 8, ["modelValue"])]), e[71] || (e[71] = l()), a("div", null, [d(r, { for: "backendErrorValue" }, { default: o(() => e[68] || (e[68] = [l("Erreur externe")])), _: 1, __: [68] }), e[69] || (e[69] = l()), d(i, { id: "backendErrorValue", modelValue: S.value, "onUpdate:modelValue": e[12] || (e[12] = (u) => S.value = u), errorMessage: "Cet identifiant est d\xE9j\xE0 pris", placeholder: "Erreur externe" }, null, 8, ["modelValue"])])])]), _: 1 })])]), code: o(() => [a("pre", { class: "line-numbers" }, [a("code", { class: "language-markup" }, `// Types basiques
65` + n(x) + `
66
67// Avec ic\xF4nes
68` + n(j) + `

69
70// \xC9tats
71` + n(F) + `
72
73// Validation
74` + n(G) + `
75
76// Tailles
77` + n(W))])]), parameters: o(() => [a("div", $, [d(t, { name: "modelValue", type: "String | Number", description: "Valeur du champ (v-model)" }), e[76] || (e[76] = l()), d(t, { name: "type", type: "String", "default-value": "'text'", description: "Type d'input (text, email, number, password, tel, url, search)" }), e[77] || (e[77] = l()), d(t, { name: "placeholder", type: "String", description: "Texte indicatif" }), e[78] || (e[78] = l()), d(t, { name: "variant", type: "String", "default-value": "'default'", description: "Style visuel (default, success, error)" }), e[79] || (e[79] = l()), d(t, { name: "size", type: "String", "default-value": "'default'", description: "Taille du champ (mini, small, default, large)" }), e[80] || (e[80] = l()), d(t, { name: "icon", type: "String", description: "Nom de l'ic\xF4ne FontAwesome" }), e[81] || (e[81] = l()), d(t, { name: "iconPosition", type: "String", "default-value": "'left'", description: "Position de l'ic\xF4ne (left, right)" }), e[82] || (e[82] = l()), d(t, { name: "disabled", type: "Boolean", "default-value": "false", description: "D\xE9sactive le champ" }), e[83] || (e[83] = l()), d(t, { name: "readonly", type: "Boolean", "default-value": "false", description: "Lecture seule" }), e[84] || (e[84] = l()), d(t, { name: "invalid", type: "Boolean", "default-value": "false", description: "Force l'\xE9tat d'erreur" }), e[85] || (e[85] = l()), d(t, { name: "rules", type: "Array", "default-value": "[]", description: "Tableau de fonctions de validation: (v) => true | string" }), e[86] || (e[86] = l()), d(t, { name: "errorMessage", type: "String", description: "Message d'erreur externe (force l'\xE9tat invalide)" }), e[87] || (e[87] = l()), d(t, { name: "autosave", type: "Boolean", "default-value": "false", description: "Active l'autosave (n\xE9cessite un contexte parent DdForm avec autosave)" })])]), _: 1, __: [88, 89] })]));
78} });
79export {
80  Y as default
81};