@ouestfrance/sipa-bms-ui 8.0.1 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsInputText.spec.ts

@@ -16,6 +16,7 @@ describe('BmsInputText', () => {
 
     expect(inputElement.element.value).toStrictEqual('toto');
   });
+
   it('should react correctly on input', async () => {
     const { wrapper, inputElement } = factory({ modelValue: 'toto' });
 
@@ -34,4 +35,15 @@ describe('BmsInputText', () => {
     await nextTick();
     expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
   });
+
+  it('should emit blur event for form validation', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 'toto',
+      disabled: true,
+    });
+
+    inputElement.setValue('titi');
+    await nextTick();
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+  });
 });

package/src/components/form/BmsInputText.vue

@@ -17,11 +17,16 @@
       :disabled="disabled"
       :errors="errors"
       :hasDate="false"
+      @blur="$emits('blur')"
       @input="onInput"
       @keyup="onInput"
     >
-      <template #icon-start><slot name="icon-start"></slot></template>
-      <template #icon-end><slot name="icon-end"></slot></template>
+      <template #icon-start>
+        <slot name="icon-start"></slot>
+      </template>
+      <template #icon-end>
+        <slot name="icon-end"></slot>
+      </template>
     </RawInputText>
   </field>
 </template>
@@ -60,6 +65,7 @@ const input: Ref<HTMLElement | null> = ref(null);
 
 const $emits = defineEmits<{
   (e: 'update:modelValue', value: string): void;
+  (e: 'blur'): void;
 }>();
 
 const setFocus = () => {

package/src/components/form/RawInputText.vue

@@ -14,6 +14,7 @@
       :placeholder="placeholder"
       :required="required"
       :disabled="disabled"
+      @blur="$emits('blur')"
       @input="onInput"
       @keydown.up="$emits('keyUp')"
       @keydown.down="$emits('keyDown')"
@@ -54,6 +55,7 @@ const input: Ref<HTMLElement | null> = ref(null);
 const $emits = defineEmits<{
   (e: 'update:modelValue', value: string): void;
   (e: 'update:focus', value: boolean): void;
+  (e: 'blur'): void;
   (e: 'keyUp'): void;
   (e: 'keyDown'): void;
   (e: 'keyEnter'): void;

package/src/helpers/form.helper.spec.ts

@@ -0,0 +1,33 @@
+import { BMS_FORM_VALID_URL_REGEX } from './form.helper';
+import { describe, expect, test } from 'vitest';
+
+describe('BMS_FORM_VALID_URL_REGEX', () => {
+  test.each([
+    // URLs valides
+    { url: 'https://google.com', expected: true },
+    { url: 'http://google.com', expected: true },
+    { url: 'google.com', expected: true },
+    { url: 'sub.domain.com', expected: true },
+    { url: 'domain.com/path', expected: true },
+    { url: 'domain.com/path/to/resource', expected: true },
+    { url: 'domain.com/path-with-dash', expected: true },
+    { url: 'domain.com/', expected: true },
+    { url: 'domaine-avec-tiret.fr', expected: true },
+    { url: 'ouest-france.fr/actualite', expected: true },
+    { url: 'http://UPPERCASE.com', expected: true }, // domaine en majuscules
+
+    // URLs invalides
+    { url: 'localhost:8080/actualite', expected: true },
+    { url: '', expected: false },
+    { url: 'not an url', expected: false },
+    { url: 'http:/domain.com', expected: false }, // slash manquant
+    { url: 'http://', expected: false }, // domaine manquant
+    { url: 'domain', expected: false }, // pas d'extension
+    { url: '.com', expected: false }, // pas de domaine
+    { url: 'domain.toolongtld', expected: false }, // tld trop long
+    { url: 'ftp://domain.com', expected: false }, // protocole non supporté
+    { url: 'javascript:alert(1)', expected: false }, // injection JavaScript
+  ])('should validate "$url" as $expected', ({ url, expected }) => {
+    expect(BMS_FORM_VALID_URL_REGEX.test(url)).toBe(expected);
+  });
+});

package/src/helpers/form.helper.ts

@@ -0,0 +1,2 @@
+export const BMS_FORM_VALID_URL_REGEX =
+  /^(https?:\/\/)?(localhost(:\d+)?|([\da-zA-Z][-\da-zA-Z]*[\da-zA-Z]\.)+[a-zA-Z]{2,6})(\/[\w .-]*)*\/?$/;

package/src/showroom/pages/forms.vue

@@ -225,6 +225,18 @@
 
     <hr />
 
+    <BmsInputText
+      ref="inputText1"
+      label="input whith form validation"
+      required
+      v-model="text2"
+      :captions="captionsText2"
+      @blur="onBlurMyInputText"
+      placeholder="This is a placeholder in url format"
+    />
+
+    <hr />
+
     <BmsSelect
       label="select"
       required
@@ -307,6 +319,7 @@ import {
   BmsInputText,
   BmsSelect,
   BmsTextArea,
+  StatusType,
 } from '@/index';
 import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
 import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
@@ -319,9 +332,12 @@ import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.v
 import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
 import { Copy } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { BMS_FORM_VALID_URL_REGEX } from '@/helpers/form.helper';
 
 const { success } = useNotifications();
 const text = ref('');
+const text2 = ref('');
+const captionsText2 = ref();
 const selected = ref('value1');
 const selected2 = ref('');
 const files: Ref<File[]> = ref([]);
@@ -366,6 +382,16 @@ const onSubmit = (e: any) => {
   e.preventDefault();
   success(text.value + ' ' + selected.value);
 };
+
+const onBlurMyInputText = () => {
+  if (!text2.value || BMS_FORM_VALID_URL_REGEX.test(text2.value)) {
+    captionsText2.value = [];
+  } else {
+    captionsText2.value = [
+      { label: 'Veuillez entrer une URL valide', mode: StatusType.Warning },
+    ];
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -378,6 +404,7 @@ const onSubmit = (e: any) => {
   display: flex;
   gap: 8px;
 }
+
 hr {
   border: none;
   border-top: 3px double #333;