@ouestfrance/sipa-bms-ui 7.14.1

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

@@ -0,0 +1,74 @@
+import BmsTextArea from '@/components/form/BmsTextArea.vue';
+import { within } from 'storybook/test';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/TextArea',
+  component: BmsTextArea,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsTextArea,
+  },
+  template: `
+  <BmsTextArea v-bind="args">
+  </BmsTextArea>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+  disabled: true,
+};
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+  iconStart: true,
+  iconEnd: true,
+};
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+  errors: ['Error 1', 'Error 2'],
+};
+
+export const WithFocusState = {
+  args: {
+    modelValue: '',
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.getByRole('input').click();
+    await canvas.getByRole('input').focus();
+  },
+};

package/src/components/form/BmsTextArea.vue

@@ -0,0 +1,112 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <textarea
+      ref="textArea"
+      :value="modelValue"
+      role="input"
+      :class="classes"
+      :required="required"
+      :placeholder="placeholder"
+      @input="onInput"
+      @keydown.enter.stop
+      cols="10"
+    >
+      {{ modelValue }}
+    </textarea>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from 'vue';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  modelValue: string;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: string[];
+  errors?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  disabled: false,
+});
+
+const textArea: Ref<HTMLElement | null> = ref(null);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const onInput = (e: Event) => {
+  if (!props.disabled)
+    $emits('update:modelValue', (e?.target as HTMLInputElement).value);
+};
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+
+const setFocus = () => {
+  if (textArea.value) {
+    textArea.value.focus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+</script>
+
+<style scoped lang="scss">
+.field__input {
+  textarea {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    padding: 1em;
+    margin: 0.5em 0;
+    border-radius: var(--bms-border-radius);
+    border: 1px solid var(--field-border-color);
+    background-color: var(--textarea-background-color);
+    min-height: 96px;
+    outline: none;
+    font: inherit;
+    color: inherit;
+    &:hover {
+      --field-border-color: var(--bms-grey-100);
+    }
+
+    &:active,
+    &:focus {
+      --field-border-color: var(--field-border-color-active);
+    }
+
+    &.is-error {
+      --field-border-color: var(--bms-red-100);
+      --textarea-background-color: var(--bms-red-25);
+    }
+
+    &.is-disabled {
+      --field-border-color: var(--bms-grey-25);
+      --textarea-background-color: var(--bms-grey-25);
+      pointer-events: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,35 @@
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Formkit Exemple',
+};
+
+const Template = () => ({
+  template: `
+  <FormKit type="form" >
+  <FormKit
+    type="text"
+    label="Champ texte"
+    placeholder="Placeholder"
+  />
+  <FormKit
+    type="select"
+    label="Select"
+    :options="['titi', 'toto']"
+  />
+  <FormKit
+    type="select"
+    disabled
+    label="Select disabled"
+  />
+    </FormKit>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,103 @@
+import RawAutocomplete, {
+  type Props,
+} from '@/components/form/RawAutocomplete.vue';
+import { mount } from '@vue/test-utils';
+import { field } from '@/plugins/field';
+import { nextTick } from 'vue';
+
+const factory = (props?: Props) => {
+  const wrapper = mount(RawAutocomplete, {
+    global: {
+      plugins: [field],
+    },
+    props: {
+      options: [
+        { label: 'titi', value: 'i' },
+        { label: 'toto', value: 'o' },
+        { label: 'tutu', value: 'u' },
+      ],
+      modelValue: '',
+      ...props,
+    },
+    attachTo: document.body,
+  });
+
+  const inputElement = wrapper.get('input');
+  return { wrapper, inputElement };
+};
+
+describe('BmsAutocomplete', () => {
+  it('should mount component correctly', async () => {
+    const { wrapper } = factory();
+
+    expect(wrapper.text()).toContain('titi');
+    expect(wrapper.text()).toContain('toto');
+    expect(wrapper.text()).toContain('tutu');
+  });
+
+  it('should show options on click', async () => {
+    const { wrapper, inputElement } = factory();
+    const menu = wrapper.get('[data-testid="autocomplete-menu"]');
+
+    expect(menu.isVisible()).toBeFalsy();
+    await inputElement.trigger('input');
+    expect(menu.isVisible()).toBeTruthy();
+  });
+
+  it('should load with default value', async () => {
+    const { inputElement } = factory({ modelValue: 'i' } as Props);
+    expect(inputElement.element.value).toStrictEqual('titi');
+  });
+
+  it('should change input value if parent modelvalue change', async () => {
+    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    expect(inputElement.element.value).toStrictEqual('titi');
+    wrapper.setProps({ modelValue: 'u' });
+    await nextTick();
+    expect(inputElement.element.value).toStrictEqual('tutu');
+  });
+
+  it('should reset input value if parent modelvalue change for unknown value', async () => {
+    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    expect(inputElement.element.value).toStrictEqual('titi');
+    wrapper.setProps({ modelValue: 'not_found' });
+    await nextTick();
+    expect(inputElement.element.value).toStrictEqual('');
+  });
+
+  it('should not reset input value if parent modelvalue change for nullable value', async () => {
+    const { wrapper, inputElement } = factory({ modelValue: 'i' } as Props);
+    expect(inputElement.element.value).toStrictEqual('titi');
+    wrapper.setProps({ modelValue: undefined });
+    await nextTick();
+    expect(inputElement.element.value).toStrictEqual('titi');
+  });
+
+  it('should populate input on option selection', async () => {
+    const { wrapper, inputElement } = factory();
+    const titi = wrapper.get('[data-testid="i"]');
+    expect(inputElement.element.value).toStrictEqual('');
+    await titi.trigger('click');
+    expect(inputElement.element.value).toStrictEqual('titi');
+  });
+
+  it('should be able to select with keyboard', async () => {
+    const { wrapper, inputElement } = factory();
+    const titi = wrapper.get('[data-testid="i"]');
+
+    expect(titi.classes()).toStrictEqual([]);
+    await inputElement.trigger('focus');
+    await inputElement.trigger('keydown.down');
+    expect(titi.classes()).toStrictEqual(['selected']);
+  });
+
+  it('should filter options', async () => {
+    const { wrapper, inputElement } = factory();
+
+    await inputElement.setValue('ti');
+
+    expect(wrapper.text()).toContain('titi');
+    expect(wrapper.text()).not.toContain('toto');
+    expect(wrapper.text()).not.toContain('tutu');
+  });
+});

package/src/components/form/RawAutocomplete.vue

@@ -0,0 +1,218 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <RawInputText
+      ref="autocompleteInput"
+      v-model="inputText"
+      :type="InputType.TEXT"
+      :disabled="disabled"
+      @keyDown="keyDown"
+      @keyUp="keyUp"
+      @keyEnter="keyEnter"
+      :class="classes"
+      :placeholder="placeholder"
+      :required="required"
+      @input="onInput"
+      v-model:focus="isInputFocused"
+    >
+      <template #icon-start>
+        <slot name="icon-start"></slot>
+      </template>
+      <template #icon-end>
+        <slot name="icon-end"></slot>
+      </template>
+    </RawInputText>
+    <template #datalist>
+      <FieldDatalist
+        data-testid="autocomplete-menu"
+        v-show="isInputFocused"
+        :options="filteredMenuItems"
+        :currentSelectedItemIndex="currentSelectedItemIndex"
+        @select="
+          (optionValue: string) => selectItem({ value: optionValue, label: '' })
+        "
+      >
+        <template #option="{ option }: { option: any }">
+          <slot name="option" :option="option">{{ option }}</slot>
+        </template>
+      </FieldDatalist>
+    </template>
+  </field>
+</template>
+
+<script setup lang="ts">
+import { searchString } from '@/helpers/string.helper';
+import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
+import { computed, ref, Ref, watch } from 'vue';
+import { Caption } from '@/models/caption.model';
+import RawInputText from '@/components/form/RawInputText.vue';
+import { InputType } from '@/models';
+
+export interface Props {
+  options: any[];
+  modelValue?: string | null;
+  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>(), {
+  modelValue: null,
+  open: false,
+});
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | null): void;
+}>();
+
+const getValidOptionByLabel = (label: string) =>
+  props.options.find((o) => o.label === label);
+
+const getValidOptionByValue = (value: string | null) =>
+  props.options.find((o) => o.value === value);
+
+const inputText = ref<string>(
+  getValidOptionByValue(props.modelValue)?.label ?? '',
+);
+const isInputFocused = ref<boolean>(props.open);
+const currentSelectedItemIndex = ref<number>(-1);
+const autocompleteInput: Ref<HTMLElement | null> = ref(null);
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+
+const filteredMenuItems = computed(() =>
+  props.options.filter((o) => searchString(o.label, inputText.value)),
+);
+
+const selectItem = (option: { label: string; value: string | null }) => {
+  const existingOption =
+    getValidOptionByLabel(option.label) || getValidOptionByValue(option.value);
+  if (existingOption) {
+    inputText.value = existingOption.label;
+  } else {
+    inputText.value = option.label;
+  }
+  isInputFocused.value = false;
+};
+
+watch(inputText, function emitUpdate(newLabel) {
+  const option = getValidOptionByLabel(newLabel);
+  if (option) selectItem(option);
+  emits('update:modelValue', option?.value ?? null);
+});
+
+watch(
+  () => props.modelValue,
+  function updateFromProps(newValue) {
+    const option = getValidOptionByValue(newValue);
+    if (option) {
+      selectItem(option);
+      // drop input value only if parent set nullable value
+    } else if (props.modelValue !== undefined && props.modelValue !== null) {
+      inputText.value = '';
+    }
+  },
+);
+
+const onInput = () => {
+  isInputFocused.value = true;
+  currentSelectedItemIndex.value = -1;
+};
+
+const keyDown = () => {
+  if (currentSelectedItemIndex.value < filteredMenuItems.value.length - 1) {
+    currentSelectedItemIndex.value++;
+  } else {
+    currentSelectedItemIndex.value = 0;
+  }
+};
+
+const keyUp = () => {
+  if (currentSelectedItemIndex.value > 0) {
+    currentSelectedItemIndex.value--;
+  } else {
+    currentSelectedItemIndex.value = props.options.length - 1;
+  }
+};
+
+const keyEnter = () => {
+  if (currentSelectedItemIndex.value >= 0) {
+    selectItem(filteredMenuItems.value[currentSelectedItemIndex.value]);
+    currentSelectedItemIndex.value = -1;
+  } else {
+    isInputFocused.value = false;
+  }
+};
+
+const setFocus = () => {
+  if (autocompleteInput.value) {
+    autocompleteInput.value.focus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+</script>
+
+<style scoped lang="scss">
+.field__input {
+  .autocomplete-wrapper {
+    width: 100%;
+    padding: 0.7em;
+    margin: 0.5em 0;
+    border-radius: var(--bms-border-radius);
+    border: 1px solid var(--field-border-color);
+    background-color: var(--input-background-color);
+    height: 48px;
+
+    &:hover {
+      --field-border-color: var(--bms-grey-100);
+    }
+
+    &:has(input:focus) {
+      --field-border-color: var(--field-border-color-active);
+    }
+
+    &.is-error {
+      --field-border-color: var(--bms-red-100);
+      --input-background-color: var(--bms-red-25);
+    }
+
+    &.is-disabled {
+      --field-border-color: var(--bms-grey-25);
+      --input-background-color: var(--bms-grey-25);
+      pointer-events: none;
+    }
+
+    input {
+      outline: none;
+      appearance: none;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      font: inherit;
+      color: inherit;
+      height: 24px;
+      line-height: 1;
+      width: 100%;
+      background-color: transparent;
+    }
+  }
+}
+</style>

package/src/components/form/RawInputText.vue

@@ -0,0 +1,173 @@
+<template>
+  <span class="input-wrapper" :class="classes">
+    <template class="field__input-label">
+      <slot name="label"></slot>
+    </template>
+    <span class="field__input-icon field__input-icon--start">
+      <slot name="icon-start"></slot>
+    </span>
+    <input
+      ref="input"
+      role="input"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      @input="onInput"
+      @keydown.up="$emits('keyUp')"
+      @keydown.down="$emits('keyDown')"
+      @keydown.enter="$emits('keyEnter')"
+    />
+    <span class="field__input-icon field__input-icon--end">
+      <slot name="icon-end"></slot>
+    </span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, Ref, ref } from 'vue';
+import { Caption, InputType } from '@/models';
+
+export interface Props {
+  modelValue: string | number;
+  required?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  focus?: boolean;
+  type?:
+    | InputType.TEXT
+    | InputType.NUMBER
+    | InputType.DATE
+    | InputType.DATETIME;
+  errors?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: InputType.TEXT,
+  required: false,
+  disabled: false,
+  focus: false,
+});
+const input: Ref<HTMLElement | null> = ref(null);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'update:focus', value: boolean): void;
+  (e: 'keyUp'): void;
+  (e: 'keyDown'): void;
+  (e: 'keyEnter'): void;
+}>();
+
+onMounted(() => {
+  document.body.addEventListener('click', (ev) => {
+    if ((ev.target as any) === input.value) {
+      $emits('update:focus', !props.focus);
+      ev.stopPropagation();
+    } else {
+      $emits('update:focus', false);
+    }
+  });
+});
+const setFocus = () => {
+  if (input.value) {
+    input.value.focus();
+    $emits('update:focus', true);
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+
+const onInput = (e: Event) => {
+  if (!props.disabled)
+    $emits('update:modelValue', (e?.target as HTMLInputElement).value);
+};
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+</script>
+
+<style scoped lang="scss">
+.input-wrapper {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  padding: 1em;
+  margin: 0.5em 0;
+  border-radius: var(--bms-border-radius);
+  border: 1px solid var(--field-border-color);
+  background-color: var(--input-background-color);
+  height: 48px;
+
+  &:hover {
+    --field-border-color: var(--bms-grey-100);
+  }
+
+  &:has(input:focus) {
+    box-shadow: 0 0 4px 4px var(--bms-main-25);
+    --field-border-color: var(--field-border-color-active);
+  }
+
+  &.is-error {
+    --field-border-color: var(--bms-red-100);
+    --input-background-color: var(--bms-red-25);
+  }
+
+  &.is-disabled {
+    --field-border-color: var(--bms-grey-25);
+    --input-background-color: var(--bms-grey-25);
+
+    input {
+      pointer-events: none;
+    }
+  }
+
+  .field__input-label {
+    display: block;
+    color: var(--bms-grey-50);
+    font-size: 12px;
+    line-height: 0.2em;
+    margin-top: 6px;
+    margin-bottom: 4px;
+  }
+  .field__input-icon {
+    display: flex;
+
+    &--start {
+      margin-right: 0.5em;
+    }
+
+    &--end {
+      margin-left: 0.5em;
+    }
+
+    :deep(svg) {
+      width: 1em;
+      height: 1em;
+      display: block;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  input {
+    outline: none;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    height: 24px;
+    line-height: 1;
+    width: 100%;
+    background-color: transparent;
+  }
+}
+</style>