@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/BmsAutocomplete.vue

@@ -0,0 +1,100 @@
+<template>
+  <RawAutocomplete
+    v-model="modelValue"
+    :options="optionsLabelValue"
+    :open="open"
+    :label="label"
+    :optional="optional"
+    :disabled="disabled"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :helperText="helperText"
+    :placeholder="placeholder"
+  >
+    <template #icon-start v-if="currentOptionIcon">
+      <span
+        class="icon"
+        v-if="typeof currentOptionIcon === 'string'"
+        v-html="currentOptionIcon"
+      ></span>
+      <component v-else :is="currentOptionIcon" />
+    </template>
+    <template #option="{ option }: { option: any }">
+      <template v-if="option.icon">
+        <span
+          class="icon datalist-icon"
+          v-if="typeof option.icon === 'string'"
+          v-html="option.icon"
+        ></span>
+
+        <component class="icon datalist-icon" v-else :is="option.icon" />
+      </template>
+      {{ option.label }}
+    </template>
+  </RawAutocomplete>
+</template>
+
+<script setup lang="ts">
+import { type Component, computed } from 'vue';
+import RawAutocomplete from './RawAutocomplete.vue';
+import { Caption } from '@/models';
+
+export interface Props {
+  options:
+    | string[]
+    | { label: string; value: string; icon?: Component | string }[];
+  modelValue?: string;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+});
+
+const modelValue = defineModel<string>('modelValue');
+
+const currentOptionIcon = computed(() => {
+  const option = props.options.find(
+    (o) => typeof o !== 'string' && o.value === modelValue.value,
+  );
+  if (!option || typeof option === 'string') return undefined;
+  return option.icon;
+});
+
+const optionsLabelValue = computed(() =>
+  Array.isArray(props.options) &&
+  !!props.options.length &&
+  typeof props.options[0] === 'string'
+    ? props.options.map((o) => ({ label: o, value: o }))
+    : props.options,
+);
+</script>
+
+<style scoped lang="scss">
+.icon {
+  height: 1em;
+  width: 1em;
+
+  &.datalist-icon {
+    margin: 0 0.5em;
+  }
+
+  :deep(svg) {
+    height: 100%;
+    width: 100%;
+
+    * {
+      fill: currentColor !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,69 @@
+import { BookOpen, CloudLightning } from 'lucide-vue-next';
+import BmsBetweenInput from './BmsBetweenInput.vue';
+import { StatusType, InputType } from '../../models';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/BetweenInput',
+  component: BmsBetweenInput,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsBetweenInput,
+    BookOpen,
+    CloudLightning,
+  },
+  template: `
+  <BmsBetweenInput v-bind="args" @update:value-from="args.valueFrom = $event" @update:value-to="args.valueTo = $event">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsBetweenInput>
+  <template v-if="args.valueFrom && args.valueTo"><br/>Current range : entre <b>{{ args.valueFrom }}</b> et <b>{{ args.valueTo }}</b></template>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  placeholderFrom: 'Placeholder From',
+  placeholderTo: 'Placeholder To',
+  captions: ['There is more information'],
+};
+
+export const WithDate = Template.bind({});
+WithDate.args = {
+  inputType: InputType.DATETIME,
+  label: 'My label',
+  placeholderFrom: 'Placeholder From',
+  placeholderTo: 'Placeholder To',
+  captions: [{ label: 'Give some date range', mode: StatusType.Warning }],
+};
+
+export const WithBadPresetValueDate = Template.bind({});
+WithBadPresetValueDate.args = {
+  inputType: InputType.DATETIME,
+  label: 'My label',
+  placeholderFrom: 'Placeholder From',
+  placeholderTo: 'Placeholder To',
+  valueFrom: '2024-12-25 12:00',
+  valueTo: '2009-06-21 23:50',
+  captions: [{ label: 'Give some date range', mode: StatusType.Warning }],
+};
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  label: 'My label',
+  placeholderFrom: 'Placeholder From',
+  placeholderTo: 'Placeholder To',
+  errors: ["That's not good here"],
+};

package/src/components/form/BmsBetweenInput.vue

@@ -0,0 +1,146 @@
+<template>
+  <field
+    :label="label"
+    :errors="allErrors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+    class="field-between"
+  >
+    <RawInputText
+      :type="inputType"
+      :modelValue="valueFrom"
+      :placeholder="placeholderFrom"
+      :required="required"
+      :errors="errors"
+      @input="onInput($event, 'from')"
+    >
+      <template #label>
+        {{ inputType === InputType.NUMBER ? 'Entre' : 'Du' }}
+      </template>
+    </RawInputText>
+
+    <ArrowRight :size="40" class="field-between__separator" />
+
+    <RawInputText
+      :type="inputType"
+      :modelValue="valueTo"
+      :placeholder="placeholderTo"
+      :required="required"
+      :errors="allErrors"
+      @input="onInput($event, 'to')"
+    >
+      <template #label>
+        {{ inputType === InputType.NUMBER ? 'Et' : 'Au' }}
+      </template>
+    </RawInputText>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { computed, Ref, ref } from 'vue';
+import { Caption } from '@/models/caption.model';
+import RawInputText from '@/components/form/RawInputText.vue';
+import { ArrowRight } from 'lucide-vue-next';
+import { InputType } from '@/models';
+
+export interface Props {
+  inputType: InputType.NUMBER | InputType.DATE | InputType.DATETIME;
+  valueFrom?: any;
+  valueTo?: any;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholderFrom?: string;
+  placeholderTo?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inputType: InputType.NUMBER,
+  valueFrom: 0,
+  valueTo: 0,
+  label: '',
+  requiredFrom: false,
+  requiredTo: false,
+  disabled: false,
+});
+
+const inputFrom: Ref<HTMLElement | null> = ref(null);
+
+const $emits = defineEmits<{
+  (e: 'update:valueFrom', value: string | number): void;
+  (e: 'update:valueTo', value: string | number): void;
+}>();
+
+const setFocus = () => {
+  if (inputFrom.value) {
+    inputFrom.value.focus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+
+const allErrors = computed(() => {
+  let msg = null;
+  if (
+    props.inputType === InputType.NUMBER &&
+    props.valueTo &&
+    props.valueFrom > props.valueTo &&
+    Number(props.valueTo) > 0
+  ) {
+    msg = 'La seconde valeur doit être supérieure à la première';
+  }
+  try {
+    if (
+      props.inputType !== InputType.NUMBER &&
+      props.valueTo !== 0 &&
+      new Date(props.valueFrom) > new Date(props.valueTo)
+    ) {
+      msg = 'La seconde date doit être supérieure à la première';
+    }
+  } catch (e) {
+    return props.errors;
+  }
+  if (msg) {
+    return props.errors?.length
+      ? ([...props.errors].concat([msg]) as string[] | Caption[])
+      : [msg];
+  }
+  return props.errors;
+});
+
+const onInput = (e: Event, emitter: 'from' | 'to') => {
+  if (!props.disabled) {
+    const value = (e?.target as HTMLInputElement).value;
+    const emittedValue =
+      props.inputType === InputType.NUMBER ? Number(value) : value;
+    emitter === 'from'
+      ? $emits('update:valueFrom', emittedValue)
+      : $emits('update:valueTo', emittedValue);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.field-between {
+  &__separator {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .input-wrapper {
+    display: unset;
+    margin-left: 0;
+    position: relative;
+    padding: 0.2em 1em;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+import BmsChip from '@/components/form/BmsChip.vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Chip',
+  component: BmsChip,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsChip,
+  },
+  template: `
+  <BmsChip v-bind="args">
+    Content in a slot
+  </BmsChip>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Green = Template.bind({});
+Green.args = {
+  color: 'green',
+};
+
+export const Red = Template.bind({});
+Red.args = {
+  color: 'red',
+};
+
+export const Blue = Template.bind({});
+Blue.args = {
+  color: 'blue',
+};
+
+export const Grey = Template.bind({});
+Grey.args = {
+  color: 'grey',
+};
+
+export const Orange = Template.bind({});
+Orange.args = {
+  color: 'orange',
+};
+
+export const Purple = Template.bind({});
+Purple.args = {
+  color: 'purple',
+};
+
+export const Unknown = Template.bind({});
+Unknown.args = {
+  color: 'Unknown',
+};

package/src/components/form/BmsChip.vue

@@ -0,0 +1,92 @@
+<template>
+  <span class="chip" :class="appliedColor"><slot></slot></span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { ChipColor } from '@/models';
+
+interface Props {
+  color?: ChipColor;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: ChipColor.Grey,
+});
+
+const appliedColor = computed(() => {
+  if (!Object.values(ChipColor).includes(props.color)) {
+    return ChipColor.Grey;
+  }
+  return props.color;
+});
+</script>
+
+<style lang="scss" scoped>
+.chip {
+  --chip-color: transparent;
+  --chip-background-color: transparent;
+
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: var(--chip-color);
+  background-color: var(--chip-background-color);
+  cursor: default;
+
+  &.green {
+    --chip-color: var(--bms-green-100);
+    --chip-background-color: var(--bms-green-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-green-50);
+    }
+  }
+
+  &.red {
+    --chip-color: var(--bms-red-100);
+    --chip-background-color: var(--bms-red-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-red-50);
+    }
+  }
+
+  &.purple {
+    --chip-color: var(--bms-main-analog-100);
+    --chip-background-color: var(--bms-main-analog-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-main-analog-50);
+    }
+  }
+  &.blue {
+    --chip-color: var(--bms-main-100);
+    --chip-background-color: var(--bms-main-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-main-50);
+    }
+  }
+
+  &.grey {
+    --chip-color: var(--bms-grey-100);
+    --chip-background-color: var(--bms-grey-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-grey-50);
+    }
+  }
+
+  &.orange {
+    --chip-color: var(--bms-orange-100);
+    --chip-background-color: var(--bms-orange-25);
+
+    &:hover {
+      --chip-background-color: var(--bms-orange-50);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,94 @@
+import BmsFilePicker from '@/components/form/BmsFilePicker.vue';
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import { nextTick } from 'vue';
+window['alert'] = () => {};
+vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+const fakeFile = {
+  lastModified: 1576593160479,
+  lastModifiedDate: {},
+  name: 'nirzar-pangarkar-5APj-fzKE-k-unsplash.jpg',
+  size: 665780,
+  type: 'image/jpeg',
+  webkitRelativePath: '',
+};
+
+describe('BmsFilePicker', () => {
+  describe('drop behavior', () => {
+    it('should update on drop file', async () => {
+      const wrapper = mount(BmsFilePicker, {
+        props: {
+          modelValue: [],
+          limit: 5,
+        },
+      });
+
+      const dropArea = wrapper.get('[data-testid="file-upload-drop-area"]');
+
+      await dropArea.trigger('drop', {
+        dataTransfer: {
+          files: [fakeFile],
+        },
+      });
+
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[fakeFile]]);
+    });
+
+    it('should not update when file too big', async () => {
+      const wrapper = mount(BmsFilePicker, {
+        props: {
+          modelValue: [],
+          limit: 1,
+        },
+      });
+
+      const dropArea = wrapper.get('[data-testid="file-upload-drop-area"]');
+
+      await dropArea.trigger('drop', {
+        dataTransfer: {
+          files: [{ ...fakeFile, size: 6665780 }],
+        },
+      });
+
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+    });
+  });
+
+  describe('select behavior', () => {
+    it('should update on drop file', async () => {
+      const wrapper = mount(BmsFilePicker, {
+        props: {
+          modelValue: [],
+          limit: 5,
+        },
+      });
+
+      (wrapper.vm as any).onSelectFile({ target: { files: { 0: fakeFile } } });
+
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[fakeFile]]);
+    });
+
+    it('should not update when file too big', async () => {
+      const wrapper = mount(BmsFilePicker, {
+        props: {
+          modelValue: [],
+          limit: 1,
+        },
+      });
+
+      (wrapper.vm as any).onSelectFile({
+        target: { files: { 0: { ...fakeFile, size: 6665780 } } },
+      });
+      await nextTick();
+
+      expect(wrapper.emitted()['update:modelValue']).not.toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,53 @@
+import BmsFilePicker from '@/components/form/BmsFilePicker.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/FilePicker',
+  component: BmsFilePicker,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    limit: {
+      control: { type: 'number' },
+    },
+    modelValue: {},
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    BmsFilePicker,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <BmsFilePicker v-bind="args" />
+  `,
+});
+
+export const Empty = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Empty.args = {};
+
+export const WithFiles = Template.bind({});
+WithFiles.args = {
+  modelValue: [
+    {
+      name: 'Name of a file',
+    },
+    {
+      name: 'Name of a second file',
+    },
+  ],
+};