@ouestfrance/sipa-bms-ui 8.25.3 → 8.26.1

package/dist/sipa-bms-ui.umd.js

@@ -338,7 +338,7 @@
   };
 
   const _hoisted_1$12 = ["href", "target"];
-  const _hoisted_2$G = ["href", "onClick", "target"];
+  const _hoisted_2$H = ["href", "onClick", "target"];
   const _sfc_main$1w = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsLink",
     props: {
@@ -380,7 +380,7 @@
               target: __props.target
             }, _ctx.$attrs), [
               vue.renderSlot(_ctx.$slots, "default")
-            ], 16, _hoisted_2$G)
+            ], 16, _hoisted_2$H)
           ]),
           _: 3
         }, 8, ["to"]));
@@ -430,8 +430,8 @@
   });
 
   const _hoisted_1$10 = { class: "start" };
-  const _hoisted_2$F = { class: "content" };
-  const _hoisted_3$n = { class: "end" };
+  const _hoisted_2$G = { class: "content" };
+  const _hoisted_3$o = { class: "end" };
   const _sfc_main$1u = /* @__PURE__ */ vue.defineComponent({
     __name: "UiButton",
     props: {
@@ -450,10 +450,10 @@
             vue.createElementVNode("span", _hoisted_1$10, [
               vue.renderSlot(_ctx.$slots, "start")
             ]),
-            vue.createElementVNode("span", _hoisted_2$F, [
+            vue.createElementVNode("span", _hoisted_2$G, [
               vue.renderSlot(_ctx.$slots, "default")
             ]),
-            vue.createElementVNode("span", _hoisted_3$n, [
+            vue.createElementVNode("span", _hoisted_3$o, [
               vue.renderSlot(_ctx.$slots, "end")
             ])
           ]),
@@ -38072,8 +38072,8 @@
   }, Symbol.toStringTag, { value: 'Module' }));
 
   const _hoisted_1$_ = { class: "info-line" };
-  const _hoisted_2$E = { class: "icon" };
-  const _hoisted_3$m = { class: "message" };
+  const _hoisted_2$F = { class: "icon" };
+  const _hoisted_3$n = { class: "message" };
   const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsAlert",
     props: {
@@ -38100,10 +38100,10 @@
           class: vue.normalizeClass(["alert", `alert-${props.type}`])
         }, [
           vue.createElementVNode("div", _hoisted_1$_, [
-            vue.createElementVNode("span", _hoisted_2$E, [
+            vue.createElementVNode("span", _hoisted_2$F, [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(alertIcon.value), { size: 20 }))
             ]),
-            vue.createElementVNode("span", _hoisted_3$m, [
+            vue.createElementVNode("span", _hoisted_3$n, [
               vue.renderSlot(_ctx.$slots, "message", {}, () => [
                 vue.createElementVNode("strong", null, vue.toDisplayString(__props.message), 1)
               ], true)
@@ -38163,7 +38163,7 @@
     key: 0,
     class: "icon"
   };
-  const _hoisted_2$D = ["innerHTML"];
+  const _hoisted_2$E = ["innerHTML"];
   const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsCaption",
     props: {
@@ -38201,7 +38201,7 @@
           vue.createElementVNode("span", {
             class: "label",
             innerHTML: vue.unref(sanitizeHtml)(computedCaption.value.label)
-          }, null, 8, _hoisted_2$D)
+          }, null, 8, _hoisted_2$E)
         ], 2);
       };
     }
@@ -38210,21 +38210,21 @@
   const BmsCaption = /* @__PURE__ */ _export_sfc(_sfc_main$1o, [["__scopeId", "data-v-b08dd4e0"]]);
 
   const _hoisted_1$X = { class: "circular-progress" };
-  const _hoisted_2$C = {
+  const _hoisted_2$D = {
     key: 0,
     viewBox: "0 0 100 100"
   };
-  const _hoisted_3$l = { transform: "rotate(-90, 50, 50)" };
-  const _hoisted_4$c = ["stroke-dashoffset"];
-  const _hoisted_5$8 = { class: "percent" };
+  const _hoisted_3$m = { transform: "rotate(-90, 50, 50)" };
+  const _hoisted_4$d = ["stroke-dashoffset"];
+  const _hoisted_5$9 = { class: "percent" };
   const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsCircularProgress",
     props: ["progress"],
     setup(__props) {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
-          __props.progress ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$C, [
-            vue.createElementVNode("g", _hoisted_3$l, [
+          __props.progress ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$D, [
+            vue.createElementVNode("g", _hoisted_3$m, [
               _cache[0] || (_cache[0] = vue.createElementVNode("circle", {
                 opacity: ".08",
                 r: "45",
@@ -38243,10 +38243,10 @@
                 "stroke-linecap": "round",
                 "stroke-dashoffset": 283 - __props.progress * 283 / 100,
                 "stroke-dasharray": "283"
-              }, null, 8, _hoisted_4$c)
+              }, null, 8, _hoisted_4$d)
             ])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_5$8, vue.toDisplayString(__props.progress) + "%", 1)
+          vue.createElementVNode("div", _hoisted_5$9, vue.toDisplayString(__props.progress) + "%", 1)
         ]);
       };
     }
@@ -38317,32 +38317,105 @@
 
   const BmsGhost = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__scopeId", "data-v-205789ac"]]);
 
-  const _hoisted_1$W = { class: "bms-loader" };
+  const _hoisted_1$W = {
+    viewBox: "0 0 38 38",
+    xmlns: "http://www.w3.org/2000/svg"
+  };
+  const _hoisted_2$C = ["id"];
+  const _hoisted_3$l = {
+    fill: "none",
+    "fill-rule": "evenodd"
+  };
+  const _hoisted_4$c = { transform: "translate(1 1)" };
+  const _hoisted_5$8 = ["stroke"];
   function transformIntoPx(totransform) {
     return typeof totransform === "string" ? totransform : `${totransform}px`;
   }
   const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
     __name: "BmsLoader",
     props: {
-      size: { default: "inherit" }
+      size: { default: "inherit" },
+      mode: { default: StatusType.Default }
     },
     setup(__props) {
       vue.useCssVars((_ctx) => ({
-        "v71df0f7a": sizeInPx.value
+        "fe29ee96": sizeInPx.value
       }));
+      const gradientId = vue.useId();
       const props = __props;
       const sizeInPx = vue.computed(() => {
         return transformIntoPx(props.size);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [..._cache[0] || (_cache[0] = [
-          vue.createStaticVNode('<svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" data-v-7cc96135><defs data-v-7cc96135><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a" data-v-7cc96135><stop stop-color="currentColor" stop-opacity="0" offset="0%" data-v-7cc96135></stop><stop stop-color="currentColor" stop-opacity=".631" offset="63.146%" data-v-7cc96135></stop><stop stop-color="currentColor" offset="100%" data-v-7cc96135></stop></linearGradient></defs><g fill="none" fill-rule="evenodd" data-v-7cc96135><g transform="translate(1 1)" data-v-7cc96135><path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2" data-v-7cc96135><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" data-v-7cc96135></animateTransform></path><circle fill="#fff" cx="36" cy="18" r="1" data-v-7cc96135><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" data-v-7cc96135></animateTransform></circle></g></g></svg>', 1)
-        ])]);
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["bms-loader", __props.mode])
+        }, [
+          (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$W, [
+            vue.createElementVNode("defs", null, [
+              vue.createElementVNode("linearGradient", {
+                x1: "8.042%",
+                y1: "0%",
+                x2: "65.682%",
+                y2: "23.865%",
+                id: vue.unref(gradientId)
+              }, [..._cache[0] || (_cache[0] = [
+                vue.createElementVNode("stop", {
+                  "stop-color": "currentColor",
+                  "stop-opacity": "0",
+                  offset: "0%"
+                }, null, -1),
+                vue.createElementVNode("stop", {
+                  "stop-color": "currentColor",
+                  "stop-opacity": ".631",
+                  offset: "63.146%"
+                }, null, -1),
+                vue.createElementVNode("stop", {
+                  "stop-color": "currentColor",
+                  offset: "100%"
+                }, null, -1)
+              ])], 8, _hoisted_2$C)
+            ]),
+            vue.createElementVNode("g", _hoisted_3$l, [
+              vue.createElementVNode("g", _hoisted_4$c, [
+                vue.createElementVNode("path", {
+                  d: "M36 18c0-9.94-8.06-18-18-18",
+                  id: "Oval-2",
+                  stroke: `url(#${vue.unref(gradientId)})`,
+                  "stroke-width": "2"
+                }, [..._cache[1] || (_cache[1] = [
+                  vue.createElementVNode("animateTransform", {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 18 18",
+                    to: "360 18 18",
+                    dur: "0.9s",
+                    repeatCount: "indefinite"
+                  }, null, -1)
+                ])], 8, _hoisted_5$8),
+                _cache[2] || (_cache[2] = vue.createElementVNode("circle", {
+                  fill: "#fff",
+                  cx: "36",
+                  cy: "18",
+                  r: "1"
+                }, [
+                  vue.createElementVNode("animateTransform", {
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 18 18",
+                    to: "360 18 18",
+                    dur: "0.9s",
+                    repeatCount: "indefinite"
+                  })
+                ], -1))
+              ])
+            ])
+          ]))
+        ], 2);
       };
     }
   });
 
-  const BmsLoader = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-7cc96135"]]);
+  const BmsLoader = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__scopeId", "data-v-4503885b"]]);
 
   function tryOnScopeDispose(fn) {
     if (vue.getCurrentScope()) {
@@ -69325,6 +69398,8 @@
       minlength: {},
       maxlength: {},
       step: {},
+      pattern: {},
+      patternMessage: {},
       label: { default: "" },
       loading: { type: Boolean },
       required: { type: Boolean, default: false },
@@ -69340,44 +69415,61 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const input = vue.ref(null);
-      const internalErrors = vue.ref([]);
+      const onChangeErrors = vue.ref([]);
+      const onChangeCaptions = vue.ref([]);
+      const onBlurErrors = vue.ref([]);
       const computedErrors = vue.computed(() => {
-        return props.errors ? internalErrors.value.concat(props.errors) : internalErrors.value;
+        return props.errors ? onChangeErrors.value.concat(props.errors, onBlurErrors.value) : onChangeErrors.value.concat(onBlurErrors.value);
       });
-      const internalCaptions = vue.ref([]);
       const computedCaptions = vue.computed(() => {
-        return props.captions ? internalCaptions.value.concat(props.captions) : internalCaptions.value;
+        return props.captions ? onChangeCaptions.value.concat(props.captions) : onChangeCaptions.value;
       });
       vue.onMounted(() => {
+        onBlurErrors.value = [];
+        onChangeErrors.value = [];
+        onChangeCaptions.value = [];
+        checkPattern();
         checkLimit();
       });
       const $emits = __emit;
+      const checkPattern = () => {
+        const hasValue = props.modelValue !== null && props.modelValue !== void 0;
+        if (hasValue && props.pattern) {
+          const regex = new RegExp(props.pattern);
+          if (!regex.test(String(props.modelValue))) {
+            onBlurErrors.value.push(
+              props.patternMessage || `La valeur ne correspond pas au motif attendu ( ${props.pattern} )`
+            );
+          }
+        }
+      };
       const checkLimit = () => {
-        internalErrors.value = [];
-        internalCaptions.value = [];
         const hasValue = props.modelValue !== null && props.modelValue !== void 0;
         if (hasValue && props.inputType === InputType.TEXT && typeof props.modelValue === "string") {
           if (props.minlength !== void 0 && props.modelValue.length < props.minlength) {
-            internalErrors.value = [
+            onChangeErrors.value.push(
               "Longueur inférieur au minimum autorisé (min:" + props.minlength + ")"
-            ];
+            );
           }
           if (props.maxlength !== void 0) {
             if (props.modelValue.length > props.maxlength) {
-              internalErrors.value = [
+              onChangeErrors.value.push(
                 `Longueur supérieure au maximum autorisé (max:${props.maxlength})`
-              ];
+              );
             } else if (props.modelValue.length === props.maxlength) {
-              internalCaptions.value = [
-                {
-                  label: `Attention, vous avez atteint la limite de ${props.maxlength} caractères.`,
-                  mode: StatusType.Warning
-                }
-              ];
+              onChangeCaptions.value.push({
+                label: `Attention, vous avez atteint la limite de ${props.maxlength} caractères.`,
+                mode: StatusType.Warning
+              });
             }
           }
         }
       };
+      const onBlur = () => {
+        $emits("blur");
+        onBlurErrors.value = [];
+        checkPattern();
+      };
       const setFocus = () => {
         if (input.value) {
           input.value.setFocus();
@@ -69388,7 +69480,11 @@
       });
       vue.watch(
         () => props.modelValue,
-        () => checkLimit()
+        () => {
+          onChangeErrors.value = [];
+          onChangeCaptions.value = [];
+          checkLimit();
+        }
       );
       return (_ctx, _cache) => {
         const _component_field = vue.resolveComponent("field");
@@ -69414,8 +69510,9 @@
               max: __props.max,
               minlength: __props.minlength,
               maxlength: __props.maxlength,
-              onBlur: _cache[1] || (_cache[1] = ($event) => $emits("blur")),
-              onFocus: _cache[2] || (_cache[2] = ($event) => $emits("focus"))
+              pattern: __props.pattern,
+              onBlur,
+              onFocus: _cache[1] || (_cache[1] = ($event) => $emits("focus"))
             }, {
               "icon-start": vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "icon-start")
@@ -69424,7 +69521,7 @@
                 vue.renderSlot(_ctx.$slots, "icon-end")
               ]),
               _: 3
-            }, 8, ["type", "modelValue", "required", "placeholder", "disabled", "errors", "small", "step", "min", "max", "minlength", "maxlength"])
+            }, 8, ["type", "modelValue", "required", "placeholder", "disabled", "errors", "small", "step", "min", "max", "minlength", "maxlength", "pattern"])
           ]),
           _: 3
         }, 16, ["captions", "errors"]);
@@ -69693,9 +69790,6 @@
         if (!props.disabled)
           $emits("update:modelValue", Number((e?.target).value));
       };
-      vue.computed(() => {
-        return { "is-error": props.errors?.length, "is-disabled": props.disabled };
-      });
       const checkLimit = () => {
         internalErrors.value = [];
         const hasValue = props.modelValue !== null && props.modelValue !== void 0;