@ouestfrance/sipa-bms-ui 7.14.1

package/src/showroom/pages/autocomplete.vue

@@ -0,0 +1,54 @@
+<template>
+  <BmsBackButton :fallback="{ path: '/' }" />
+  <BmsAutocomplete
+    label="Autocomplete avec label/value"
+    :options="optionsLabelValue"
+    v-model="inputLabelValue"
+  />
+
+  Valeur: {{ inputLabelValue }}
+
+  <BmsAutocomplete
+    label="Autocomplete avec icones"
+    :options="optionsIcon"
+    v-model="inputValueIcon"
+  />
+  Valeur: {{ inputValueIcon }}
+
+  <BmsAutocomplete
+    label="Autocomplete avec tableau de strings"
+    :options="optionsText"
+    v-model="inputText"
+  />
+  Valeur: {{ inputText }}
+</template>
+
+<script setup lang="ts">
+import { BmsAutocomplete, BmsBackButton } from '@/index';
+import { Heart, Cat } from 'lucide-vue-next';
+import { range } from 'lodash';
+import { ref } from 'vue';
+
+const optionsLabelValue = ref(
+  range(0, 30).map((i) =>
+    Math.random() > 0.5
+      ? { value: i.toString(), label: `toto-${i}` }
+      : { value: i.toString(), label: `titi-${i}` },
+  ),
+);
+const inputLabelValue = ref('');
+
+const optionsText = ref(
+  range(0, 30).map((i) => (Math.random() > 0.5 ? `toto-${i}` : `titi-${i}`)),
+);
+const inputText = ref('');
+
+const optionsIcon = ref(
+  range(0, 30).map((i) =>
+    Math.random() > 0.5
+      ? { value: i.toString(), label: `toto-${i}`, icon: Heart }
+      : { value: i.toString(), label: `titi-${i}`, icon: Cat },
+  ),
+);
+const inputValueIcon = ref('');
+</script>

package/src/showroom/pages/draggable-list.vue

@@ -0,0 +1,20 @@
+<template>
+  <DraggableList v-model="values" :can-delete="false">
+    <template #default="{ row }: { row: any }">
+      <div>
+        {{ row.value.name }}
+      </div>
+    </template>
+  </DraggableList>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DraggableList from '@/components/table/DraggableList.vue';
+
+const values = ref([
+  { key: '1', value: { name: 'toto' } },
+  { key: '2', value: { name: 'tutu' } },
+  { key: '3', value: { name: 'titi' } },
+]);
+</script>

package/src/showroom/pages/file-picker.vue

@@ -0,0 +1,74 @@
+<template>
+  isFileImage
+  <BmsBackButton :fallback="{ path: '/' }" />
+  <h1>Platform library VueJS BMS</h1>
+  <h2>With png file from url</h2>
+  <bms-input-file label="editing a file" v-model="files"></bms-input-file>
+  <hr />
+  <h2>With svg as string representation</h2>
+  <bms-input-file label="editing a file" v-model="svg"></bms-input-file>
+  <hr />
+  <h2>With no file</h2>
+  <bms-input-file label="adding a file" v-model="add"></bms-input-file>
+</template>
+
+<script lang="ts" setup>
+import { useNotifications } from '@/plugins/notifications';
+import { onMounted, Ref, ref } from 'vue';
+import { BmsBackButton, BmsInputFile } from '@/index';
+
+const { success } = useNotifications();
+const files: Ref<File[]> = ref([]);
+const svg: Ref<File[]> = ref([]);
+const add: Ref<File[]> = ref([]);
+
+onMounted(async () => {
+  const response = await fetch(
+    'https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png',
+  );
+  const blob = await response.blob();
+  files.value = [
+    new File([blob], 'image.jpeg', {
+      type: blob.type,
+    }),
+  ];
+  files.value = [
+    new File([blob], 'image.jpeg', {
+      type: blob.type,
+    }),
+  ];
+
+  // 0. si le svg est un element du dom
+  //const svgString = new XMLSerializer().serializeToString(svgElement);
+  // 1. convertir le svg
+  const svgElement =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-biohazard"><circle cx="12" cy="11.9" r="2"/><path d="M6.7 3.4c-.9 2.5 0 5.2 2.2 6.7C6.5 9 3.7 9.6 2 11.6"/><path d="m8.9 10.1 1.4.8"/><path d="M17.3 3.4c.9 2.5 0 5.2-2.2 6.7 2.4-1.2 5.2-.6 6.9 1.5"/><path d="m15.1 10.1-1.4.8"/><path d="M16.7 20.8c-2.6-.4-4.6-2.6-4.7-5.3-.2 2.6-2.1 4.8-4.7 5.2"/><path d="M12 13.9v1.6"/><path d="M13.5 5.4c-1-.2-2-.2-3 0"/><path d="M17 16.4c.7-.7 1.2-1.6 1.5-2.5"/><path d="M5.5 13.9c.3.9.8 1.8 1.5 2.5"/></svg>';
+  // 2. Créer un Blob à partir du contenu SVG
+  const svgBlob = new Blob([svgElement], { type: 'image/svg+xml' });
+  // 3. Créer un objet File à partir du Blob
+  svg.value = [
+    new File([svgBlob], 'my-svg-file.svg', { type: 'image/svg+xml' }),
+  ];
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-flex {
+  display: flex;
+  gap: 16px;
+}
+
+.chips {
+  display: flex;
+  gap: 8px;
+}
+
+hr {
+  border: none;
+  border-top: 3px double #333;
+  color: #333;
+  overflow: visible;
+  text-align: center;
+  height: 5px;
+}
+</style>

package/src/showroom/pages/forms.vue

@@ -0,0 +1,389 @@
+<template>
+  <BmsBackButton :fallback="{ path: '/' }" />
+  <h1>Platform library VueJS BMS</h1>
+  <h2>Composant de formulaire</h2>
+
+  <bms-input-file label="input" v-model="files"></bms-input-file>
+
+  <hr />
+
+  <BmsInputRadio
+    :captions="['this is a true caption', 'and an other one']"
+    label="label"
+    name="label"
+    value="toto"
+    v-model="selectedRadio"
+  />
+  <BmsInputRadio
+    :captions="['this is a true caption']"
+    label="label"
+    name="label"
+    value="tutu"
+    v-model="selectedRadio"
+  />
+  <BmsInputRadio
+    :captions="['titi']"
+    value="titi"
+    name="label"
+    v-model="selectedRadio"
+    isError
+  >
+    <template #label>This is a slot label</template>
+  </BmsInputRadio>
+
+  <hr />
+
+  <BmsInputRadioGroup
+    label="Radio Buttons"
+    v-model="selectedRadio2"
+    :values="[
+      { value: 'titi', label: 'Titi' },
+      { value: 'toto', label: 'Toto' },
+    ]"
+    align="column"
+    :captions="['this is a question']"
+    :errors="['Prout']"
+  />
+
+  <hr />
+
+  <BmsInputRadioCaption
+    v-model="thirdSelectedRadio"
+    label="Radio with caption toto"
+    value="toto"
+    name="nameSelect"
+    :captions="['Un caption']"
+  />
+  <BmsInputRadioCaption
+    v-model="thirdSelectedRadio"
+    label="Radio with caption titi"
+    value="titi"
+    name="nameSelect"
+    :captions="['Un caption']"
+  />
+
+  <hr />
+
+  <BmsInputRadioGroup
+    label="Radio Buttons"
+    v-model="otherSelectedRadio"
+    align="column"
+    :captions="['this is a question']"
+    required
+  >
+    <template #default>
+      <BmsInputRadio
+        v-model="otherSelectedRadio"
+        required
+        name="aName"
+        value="titi"
+      >
+        <template #label>
+          <div>titi</div>
+        </template>
+      </BmsInputRadio>
+      <BmsInputRadio
+        v-model="otherSelectedRadio"
+        required
+        name="aName"
+        value="toto"
+      >
+        <template #label>
+          <div>toto</div>
+        </template>
+      </BmsInputRadio>
+    </template>
+  </BmsInputRadioGroup>
+
+  <hr />
+
+  <BmsInputRadioCaptionGroup
+    label="Radio Buttons"
+    v-model="fourthSelectedRadio"
+    :options="[
+      { value: 'tata', label: 'Tata', captions: ['Caption'] },
+      { value: 'titi', label: 'Titi', captions: ['Caption'] },
+      { value: 'toto', label: 'Toto', captions: ['Caption'] },
+      { value: 'tutu', captions: ['Caption'] },
+    ]"
+    align="column"
+    :captions="['this is a question']"
+    required
+  />
+  <hr />
+
+  <BmsInputToggle name="toggle0" label="Toggle" v-model="firstToggle" />
+
+  <p>Toggle Value : {{ firstToggle }}</p>
+
+  <hr />
+
+  <BmsInputBooleanCheckbox
+    name="checkbox0"
+    labelValue="IsToto"
+    v-model="firstCheckbox"
+  />
+
+  <BmsInputBooleanCheckbox
+    label="checkbox"
+    name="checkbox0"
+    labelValue="IsToto"
+    v-model="firstCheckbox"
+  />
+  <p>CheckBox Value : {{ firstCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputCheckboxGroup
+    label="Checkbox Buttons"
+    v-model="secondCheckbox"
+    :values="[
+      { value: 'titi', label: 'Titi' },
+      { value: 'toto', label: 'Toto' },
+    ]"
+    align="column"
+    :captions="['this is a question']"
+    :errors="['Prout']"
+  />
+  <p>Checked Values : {{ secondCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputCheckboxCaption
+    v-model="thirdCheckbox"
+    label="Radio with caption toto"
+    name="thirdCheckbox"
+    :captions="['Un caption']"
+  />
+  <p>Checked Values : {{ thirdCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputCheckboxCaption
+    v-model="fourthCheckbox"
+    label="Radio with caption toto"
+    value="toto"
+    name="fourthCheckbox"
+    :captions="['Un caption']"
+  />
+  <BmsInputCheckboxCaption
+    v-model="fourthCheckbox"
+    label="Radio with caption titi"
+    value="titi"
+    name="fourthCheckbox"
+    :captions="['Un caption']"
+  />
+  <p>Checked Values : {{ fourthCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputCheckboxCaption
+    v-model="fourthCheckbox"
+    label="Radio with caption toto"
+    value="toto"
+    name="fourthCheckbox"
+    :captions="['Un caption']"
+  />
+  <BmsInputCheckboxCaption
+    v-model="fourthCheckbox"
+    label="Radio with caption titi"
+    value="titi"
+    name="fourthCheckbox"
+    :captions="['Un caption']"
+  />
+  <p>Checked Values : {{ fourthCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputCheckboxCaptionGroup
+    label="Checkbox Buttons"
+    v-model="fifthCheckbox"
+    :options="[
+      { value: 'tata', label: 'Tata', captions: ['Caption'] },
+      { value: 'titi', label: 'Titi', captions: ['Caption'] },
+      { value: 'toto', label: 'Toto', captions: ['Caption'] },
+      { value: 'tutu', captions: ['Caption'] },
+    ]"
+    align="column"
+    :captions="['this is a question']"
+    required
+  />
+  <p>Checked Values : {{ fifthCheckbox }}</p>
+
+  <hr />
+
+  <BmsInputDateTime v-model="date" label="Date" :has-time="false" />
+  <BmsInputDateTime v-model="dateTime" label="Date & Time" />
+  <form @submit="onSubmit">
+    <BmsInputText
+      ref="inputText0"
+      label="input"
+      required
+      v-model="text"
+      placeholder="This is a placeholder"
+    />
+
+    <hr />
+
+    <BmsSelect
+      label="select"
+      required
+      v-model="selected"
+      placeholder="This is a placeholder"
+      :options="[{ label: 'value1', value: 'value1' }]"
+    />
+
+    <hr />
+
+    <BmsSelect
+      label="select 2"
+      required
+      v-model="selected2"
+      placeholder="This is a placeholder"
+      :options="[{ label: 'value3', value: 'value4' }]"
+    />
+
+    <hr />
+
+    <BmsTextArea
+      label="textArea"
+      required
+      placeholder="This is a placeholder"
+      :model-value="''"
+    />
+
+    <hr />
+
+    <BmsAutocomplete
+      label="autocomplete"
+      placeholder="This is a placeholder"
+      required
+      :model-value="''"
+      :options="[{ label: 'value1', value: '1' }]"
+    />
+    <BmsInputNumber label="Chiffre" v-model="nbr" :min="5" :max="15" />
+
+    <hr />
+
+    <BmsInputCode
+      label="code"
+      v-model="code"
+      required
+      type="json"
+      :captions="['caption 1']"
+    />
+    {{ code }}
+    <hr />
+
+    <BmsForm>
+      <template #form>
+        <BmsInputText label="champ" model-value="This is a cool value" disabled>
+          <template #icon-end>
+            <BmsIconButton @click="coucou">
+              <Copy />
+            </BmsIconButton>
+          </template>
+        </BmsInputText>
+      </template>
+    </BmsForm>
+    <hr />
+
+    <BmsButton submit>Submit</BmsButton>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { useNotifications } from '@/plugins/notifications';
+import { onMounted, Ref, ref } from 'vue';
+import {
+  BmsAutocomplete,
+  BmsBackButton,
+  BmsButton,
+  BmsForm,
+  BmsInputBooleanCheckbox,
+  BmsInputCode,
+  BmsInputFile,
+  BmsInputNumber,
+  BmsInputText,
+  BmsSelect,
+  BmsTextArea,
+} from '@/index';
+import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
+import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
+import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
+import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
+import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
+import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
+import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
+import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
+import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
+import { Copy } from 'lucide-vue-next';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+
+const { success } = useNotifications();
+const text = ref('');
+const selected = ref('');
+const selected2 = ref('');
+const files: Ref<File[]> = ref([]);
+const selectedRadio = ref('titi');
+const selectedRadio2 = ref('titi');
+const otherSelectedRadio = ref('toto');
+const thirdSelectedRadio = ref('titi');
+const fourthSelectedRadio = ref('toto');
+const firstCheckbox = ref([]);
+const firstToggle = ref(false);
+const secondCheckbox = ref([]);
+const thirdCheckbox = ref(false);
+const fourthCheckbox = ref([]);
+const fifthCheckbox = ref([]);
+const nbr = ref(10);
+const inputText0 = ref(null);
+const dateTime = ref('');
+const date = ref('');
+const code = ref('');
+
+onMounted(async () => {
+  const response = await fetch(
+    'https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png',
+  );
+  const blob = await response.blob();
+  files.value = [
+    new File([blob], 'image.jpeg', {
+      type: blob.type,
+    }),
+  ];
+  if (inputText0.value) {
+    (inputText0.value as typeof BmsInputText).setFocus();
+  }
+});
+
+const coucou = () => {
+  console.log('coucou');
+  alert('coucou');
+};
+
+const onSubmit = (e: any) => {
+  e.preventDefault();
+  success(text.value + ' ' + selected.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.tooltip-flex {
+  display: flex;
+  gap: 16px;
+}
+
+.chips {
+  display: flex;
+  gap: 8px;
+}
+hr {
+  border: none;
+  border-top: 3px double #333;
+  color: #333;
+  overflow: visible;
+  text-align: center;
+  height: 5px;
+}
+</style>