@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/BmsFilePicker.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { Trash2 } from 'lucide-vue-next';
+import { onMounted, onUnmounted, Ref, ref } from 'vue';
+import { BmsIconButton } from '@/index';
+
+const files: Ref<File[] | undefined> = ref();
+const isDragOver = ref(false);
+
+const props = withDefaults(
+  defineProps<{ modelValue?: File[]; limit: number }>(),
+  {
+    limit: 10,
+  },
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+onMounted(() => {
+  window.addEventListener('dragover', onDragStartEvent);
+  window.addEventListener('dragleave', onDragEndEvent);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('dragover', onDragStartEvent);
+  window.addEventListener('dragleave', onDragEndEvent);
+});
+
+function onDragStartEvent() {
+  isDragOver.value = true;
+}
+
+function onDragEndEvent() {
+  isDragOver.value = false;
+}
+
+async function onSelectFile(event: Event) {
+  const target = event?.target as HTMLInputElement;
+  const file = target?.files?.[0];
+
+  if (!file) {
+    return;
+  }
+
+  try {
+    await checkSize(file);
+
+    isDragOver.value = false;
+    emit('update:modelValue', [file]);
+  } catch (error) {
+    alert(error);
+    return;
+  }
+}
+
+function checkSize(file: File): Promise<boolean> {
+  return new Promise((resolve, reject) => {
+    if (file.size / 1048576 > props.limit) {
+      reject(`Le fichier dépasse la limite autorisée de ${props.limit}Mo`);
+
+      return;
+    }
+
+    resolve(true);
+  });
+}
+
+async function onDropFile(event: DragEvent) {
+  if (!event.dataTransfer?.files) {
+    return;
+  }
+
+  const file = event.dataTransfer?.files[0];
+
+  try {
+    await checkSize(file);
+
+    isDragOver.value = false;
+    emit('update:modelValue', [file]);
+  } catch (error) {
+    alert(error);
+    return;
+  }
+}
+
+function onDeleteFile(file: File) {
+  emit(
+    'update:modelValue',
+    files.value?.filter((f) => f !== file),
+  );
+}
+</script>
+
+<template>
+  <div class="file-upload">
+    <div
+      v-if="!modelValue || !modelValue.length"
+      class="file-upload__drop-area"
+      :class="{ 'is-active': isDragOver }"
+      data-testid="file-upload-drop-area"
+      @drop.prevent="onDropFile($event)"
+      @dragover.prevent
+    >
+      <label class="file-upload__label">
+        <template v-if="isDragOver">Déposer votre image ici</template>
+        <template v-else
+          >Glissez votre image ici ou cliquez pour parcourir</template
+        >
+        <input
+          data-testid="file-upload-input-file"
+          type="file"
+          @change="onSelectFile($event)"
+        />
+      </label>
+    </div>
+
+    <div v-else>
+      <template v-if="modelValue.length">
+        <div
+          v-for="file in modelValue"
+          :key="file.name"
+          class="file-upload__file"
+        >
+          <span class="file-upload__file-name">
+            {{ file.name }}
+          </span>
+          <BmsIconButton @click="onDeleteFile(file)"><Trash2 /></BmsIconButton>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.file-upload {
+  --drop-color: var(--bms-grey-10);
+
+  &__label {
+    display: block;
+    padding: 4em 1em;
+    text-align: center;
+    border-radius: var(--bms-border-radius);
+    border: 1px dashed var(--bms-border-color);
+    background: var(--drop-color);
+
+    &:hover {
+      --drop-color: var(--bms-grey-25);
+    }
+  }
+
+  &__drop-area {
+    input[type='file'] {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+      left: 0;
+      width: 0;
+      height: 0;
+    }
+
+    &.is-active {
+      --drop-color: var(--bms-main-25);
+    }
+  }
+
+  &__file {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5em 0.5em 0.5em 1em;
+    border-radius: var(--bms-border-radius);
+    border: 1px solid var(--bms-grey-25);
+    background: var(--bms-grey-10);
+
+    &-name {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      flex: 1 1 auto;
+    }
+
+    .button {
+      flex: 0 0 auto;
+    }
+  }
+}
+</style>

package/src/components/form/BmsInputBooleanCheckbox.stories.js

@@ -0,0 +1,90 @@
+import BmsInputBooleanCheckbox from '@/components/form/BmsInputBooleanCheckbox.vue';
+import { ref } from 'vue';
+import { StatusType } from '@/models';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputBooleanCheckbox',
+  component: BmsInputBooleanCheckbox,
+};
+
+const Template = (args) => ({
+  setup() {
+    const curentValue = ref(args.modelValue);
+    return { args, curentValue };
+  },
+  components: {
+    BmsInputBooleanCheckbox,
+  },
+  template: `
+      <div>
+        <BmsInputBooleanCheckbox v-bind="{...args}" v-model="curentValue">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputBooleanCheckbox>
+        Valeur de mon champ : {{ curentValue }}
+      </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  labelValue: 'check me !',
+  name: 'myCheckboxName',
+};
+
+export const WithNotBooleanModelValue = Template.bind({});
+WithNotBooleanModelValue.args = {
+  modelValue: 'COCHEEEEEEEE',
+  labelValue: 'check me !',
+  name: 'myCheckboxName',
+};
+
+export const DefaultWithCheckedValue = Template.bind({});
+DefaultWithCheckedValue.args = {
+  modelValue: true,
+  labelValue: 'check me !',
+  name: 'myCheckboxName',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'My label',
+  labelValue: 'check me !',
+  modelValue: false,
+  name: 'myCheckboxName',
+};
+
+export const WithLabelAsSlot = Template.bind({});
+WithLabelAsSlot.args = {
+  name: 'myCheckboxName',
+  labelValue: 'check me !',
+  modelValue: false,
+  labelSlot: '<strong>This is a slotted label</strong>',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: 'myCheckboxName',
+  labelValue: 'check me !',
+  label: 'My label',
+  modelValue: false,
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  name: 'myCheckboxName',
+  labelValue: 'check me !',
+  label: 'My label',
+  modelValue: false,
+  captions: [{ label: 'moyen bien', mode: StatusType.Warning }],
+  errors: ['oups ! ', { label: 'pas bien', mode: StatusType.Warning }],
+};

package/src/components/form/BmsInputBooleanCheckbox.vue

@@ -0,0 +1,70 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :required="required"
+    :helperText="helperText"
+    :captions="captions"
+    :disabled="disabled"
+  >
+    <UiBmsInputCheckbox
+      class="field-checkbox"
+      :modelValue="modelValue"
+      :name="name"
+      :label="labelValue"
+      :disabled="disabled"
+      :required="required"
+      :error="errors.length > 0"
+      @update:modelValue="(value: any) => $emit('update:modelValue', value)"
+    >
+      <template #label>
+        <slot name="label" />
+      </template>
+    </UiBmsInputCheckbox>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { Caption } from '@/models/caption.model';
+import UiBmsInputCheckbox from '@/components/form/UiBmsInputCheckbox.vue';
+
+export interface Props {
+  modelValue: any;
+  labelValue: string;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  helperText?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  label: '',
+  disabled: false,
+  errors: () => [],
+});
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+onMounted(() => {
+  if (
+    props.modelValue === null ||
+    props.modelValue === undefined ||
+    typeof props.modelValue !== 'boolean'
+  ) {
+    $emits('update:modelValue', false);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.field-checkbox {
+  padding: 0.5em 0;
+}
+</style>

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

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import BmsInputCheckboxCaption from './BmsInputCheckboxCaption.vue';
+import { field } from '@/plugins/field';
+
+const factory = (props: any) => {
+  return mount(BmsInputCheckboxCaption, {
+    props,
+    global: {
+      plugins: [field],
+    },
+  });
+};
+
+describe('BmsInputCheckboxCaption', () => {
+  it('should return an array with element if element is clicked and model is an array', async () => {
+    const wrapper = factory({ modelValue: [], value: 'toto', name: 'name' });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['toto']]);
+  });
+  it('should return an array without element if element is clicked and model is an array', async () => {
+    const wrapper = factory({
+      modelValue: ['toto'],
+      value: 'toto',
+      name: 'name',
+    });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[]]);
+  });
+  it('should return a boolean true if model is a boolean', async () => {
+    const wrapper = factory({
+      modelValue: false,
+      name: 'name',
+    });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+  });
+  it('should return a boolean false if model is a boolean', async () => {
+    const wrapper = factory({
+      modelValue: true,
+      name: 'name',
+    });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([false]);
+  });
+});

package/src/components/form/BmsInputCheckboxCaption.stories.js

@@ -0,0 +1,92 @@
+import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
+import { StatusType } from '@/models/status-type.model';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputCheckboxCaption',
+  component: BmsInputCheckboxCaption,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputCheckboxCaption,
+  },
+  template: `
+      <div>
+        <BmsInputCheckboxCaption v-bind="args">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputCheckboxCaption>
+      </div>
+      <div>
+        <BmsInputCheckboxCaption v-bind="{...args, modelValue: true}">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputCheckboxCaption>
+      </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: null,
+  label: 'MyLabel',
+  name: 'myInput',
+};
+
+export const WithLabelAsSlot = Template.bind({});
+WithLabelAsSlot.args = {
+  modelValue: null,
+  labelSlot: 'This is a slotted value',
+  name: 'myInput',
+};
+
+export const WithCaptions = Template.bind({});
+WithCaptions.args = {
+  label: 'My label',
+  modelValue: null,
+  captions: ['Caption form my label 1', 'Caption form my label 2'],
+  name: 'myInput',
+};
+
+export const WithCaptionMode = Template.bind({});
+WithCaptionMode.args = {
+  label: 'My label',
+  modelValue: null,
+  captions: [
+    { label: 'Caption form my label 1', mode: StatusType.Default },
+    { label: 'Caption form my label 2', mode: StatusType.Success },
+    { label: 'Caption form my label 3', mode: StatusType.Danger },
+    { label: 'Caption form my label 4', mode: StatusType.Warning },
+  ],
+  name: 'myInput',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: null,
+  disabled: true,
+  captions: ['Caption form my label 1', 'Caption form my label 2'],
+  name: 'myInput',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: 'My label',
+  modelValue: null,
+  errors: ['Error 1', 'Error 2'],
+  captions: ['Caption form my label 1', 'Caption form my label 2'],
+  name: 'myInput',
+};

package/src/components/form/BmsInputCheckboxCaption.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="input-checkbox-caption"
+    :class="{ disabled, error: errors.length > 0 }"
+    @click.self="onClick"
+  >
+    <UiBmsInputCheckbox
+      v-model="inputValue"
+      :value="value"
+      :label="label"
+      :name="name"
+      :disabled="disabled"
+      :error="errors.length > 0"
+      :required="required"
+    >
+      <template #label>
+        <slot name="label">{{ label }}</slot>
+      </template>
+    </UiBmsInputCheckbox>
+    <span
+      class="group-caption"
+      v-for="message in concatErrors()"
+      :key="message.label"
+      @click="onClick"
+    >
+      <BmsCaption :caption="message" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Caption } from '@/models/caption.model';
+import BmsCaption from '@/components/feedback/BmsCaption.vue';
+import { convertStringToCaption } from '@/helpers';
+import UiBmsInputCheckbox from './UiBmsInputCheckbox.vue';
+
+export interface Props {
+  modelValue: any;
+  value?: any;
+  label?: string;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: true,
+  required: false,
+  label: '',
+  disabled: false,
+  errors: () => [],
+  captions: () => [],
+});
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+
+const concatErrors = (): Caption[] => {
+  return props.errors
+    .map((e) => convertStringToCaption(e))
+    .concat(props.captions.map((c) => convertStringToCaption(c)));
+};
+
+const onClick = () => {
+  if (Array.isArray(props.modelValue)) {
+    if (!inputValue.value.includes(props.value)) {
+      inputValue.value = [...inputValue.value, props.value];
+    } else {
+      inputValue.value = (inputValue.value as any[]).filter(
+        (val) => val !== props.value,
+      );
+    }
+  } else if (typeof props.modelValue === 'boolean') {
+    inputValue.value = !inputValue.value;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-checkbox-caption {
+  --input-checkbox-caption-border-color: var(--bms-grey-25);
+  --input-checkbox-caption-background-color: transparent;
+
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  padding: 8px;
+  gap: 8px;
+  border: 1px solid var(--input-checkbox-caption-border-color);
+  border-radius: 4px;
+  background-color: var(--input-checkbox-caption-background-color);
+
+  .group-caption {
+    cursor: default;
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  &:hover {
+    --input-checkbox-caption-border-color: var(--bms-main-100);
+  }
+
+  &.disabled {
+    --input-checkbox-caption-border-color: var(--bms-grey-50);
+    --input-checkbox-caption-background-color: var(--bms-grey-25);
+  }
+
+  &.error {
+    --input-checkbox-caption-border-color: var(--bms-red-100);
+    --input-checkbox-caption-background-color: var(--bms-red-25);
+  }
+}
+</style>