@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/BmsSearch.vue

@@ -0,0 +1,62 @@
+<template>
+  <BmsInputText
+    ref="input"
+    v-model="search"
+    :placeholder="placeholder"
+    :errors="errors"
+    :disabled="disabled"
+  >
+    <template #icon-start>
+      <Search />
+    </template>
+
+    <template v-if="search && !disabled" #icon-end>
+      <X class="clean-icon" @click="search = ''" />
+    </template>
+  </BmsInputText>
+</template>
+
+<script setup lang="ts">
+import { Search, X } from 'lucide-vue-next';
+import { Ref, computed, ref } from 'vue';
+import BmsInputText from './BmsInputText.vue';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  modelValue: string;
+  placeholder?: string;
+  disabled?: boolean;
+  errors?: string[] | Caption[];
+}
+
+const input: Ref<typeof BmsInputText | null> = ref(null);
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Rechercher...',
+});
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>();
+
+const search = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: string) {
+    emit('update:modelValue', value);
+  },
+});
+
+const setFocus = () => {
+  if (input.value) {
+    input.value.setFocus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+</script>
+<style lang="scss" scoped>
+.clean-icon:hover {
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils';
+import BmsSelect, { Props } from './BmsSelect.vue';
+import { field } from '@/plugins/field';
+import { nextTick } from 'vue';
+
+const factory = (props: Props) => {
+  const wrapper = mount(BmsSelect, { props, global: { plugins: [field] } });
+  const inputElement = wrapper.find('input');
+  const optionsElement = wrapper.find('ul');
+
+  return { wrapper, inputElement, optionsElement };
+};
+
+describe('BmsSelect', () => {
+  it('should init', () => {
+    const { inputElement } = factory({
+      modelValue: 'toto',
+      options: [{ label: 'toto-label', value: 'toto' }],
+    });
+
+    expect(inputElement.element.value).toStrictEqual('toto-label');
+  });
+  it('should update when click on option', async () => {
+    const { inputElement, optionsElement } = factory({
+      modelValue: '',
+      options: [{ label: 'toto-label', value: 'toto' }],
+    });
+
+    expect(inputElement.element.value).toStrictEqual('');
+    const totoOptionElement = optionsElement.find('[data-testid="toto"]');
+    await totoOptionElement.trigger('click');
+    await nextTick();
+    expect(inputElement.element.value).toStrictEqual('toto-label');
+  });
+
+  it('should update when select with keys', async () => {
+    const { inputElement, optionsElement } = factory({
+      modelValue: '',
+      options: [{ label: 'toto-label', value: 'toto' }],
+    });
+
+    expect(inputElement.element.value).toStrictEqual('');
+    await inputElement.trigger('keydown.down');
+    await inputElement.trigger('keydown.enter');
+    await nextTick();
+    expect(inputElement.element.value).toStrictEqual('toto-label');
+  });
+
+  it('should not display value if not in options', () => {
+    const { inputElement } = factory({
+      modelValue: 'toto',
+      options: [],
+    });
+
+    expect(inputElement.element.value).toStrictEqual('');
+  });
+});

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

@@ -0,0 +1,131 @@
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import { within } from 'storybook/test';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Select',
+  component: BmsSelect,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsSelect,
+  },
+  template: `
+    <BmsSelect v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  captions: ['Helping text'],
+  modelValue: '',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  label: 'My label',
+  captions: ['Helping text'],
+  placeholder: 'This is a placeholder',
+  modelValue: '',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: 'My label',
+  modelValue: 'a',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: 'a',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+  disabled: true,
+};
+
+export const WithFocusState = {
+  args: {
+    label: 'My label',
+    options: [
+      { label: 'titi', value: 'titi' },
+      { label: 'toto', value: 'toto' },
+      { label: 'tutu', value: 'tutu' },
+    ],
+    modelValue: '',
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.getByRole('input').click();
+    await canvas.getByRole('input').focus();
+  },
+};
+
+export const Opened = Template.bind({});
+Opened.parameters = { pseudo: { focus: 'input:first-of-type' } }; //TODO sélecteur CSS plus propre
+Opened.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+  open: true,
+};
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  label: 'My label',
+  modelValue: 'Une valeur',
+  options: [
+    { label: 'a', value: 'a' },
+    { label: 'b', value: 'b' },
+  ],
+  errors: ['error 1', 'error 2'],
+};
+
+export const WithObjectValue = Template.bind({});
+WithObjectValue.args = {
+  label: 'My label',
+  modelValue: { a1: 'a', a2: 'a' },
+  options: [
+    { label: 'a', value: { a1: 'a', a2: 'a' } },
+    { label: 'b', value: { b1: 'b', b2: 'b' } },
+  ],
+};
+
+export const WithIncorrectValue = Template.bind({});
+WithIncorrectValue.args = {
+  label: 'My label',
+  modelValue: 'a',
+  options: [
+    { label: 'b', value: 'b' },
+    { label: 'c', value: 'c' },
+  ],
+};

package/src/components/form/BmsSelect.vue

@@ -0,0 +1,225 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <span class="select-wrapper" ref="selectWrapper" :class="classes">
+      <input
+        ref="selectInput"
+        type="text"
+        role="input"
+        :value="getDisplayValue"
+        :placeholder="placeholder"
+        onkeypress="return false;"
+        :required="required"
+        @keydown.up="keyUp"
+        @keydown.down="keyDown"
+        @keydown.enter="keyEnter"
+      />
+      <span class="icon-down-container">
+        <ChevronDown class="icon-down-button" />
+      </span>
+    </span>
+    <template #datalist>
+      <FieldDatalist
+        v-show="isInputFocused"
+        :options="options"
+        :currentSelectedItemIndex="currentSelectedItemIndex"
+        @select="(option: any) => selectItem(option)"
+      />
+    </template>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { ChevronDown } from 'lucide-vue-next';
+import { Ref, computed, onMounted, ref, watch } from 'vue';
+import _ from 'lodash';
+import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  modelValue: any;
+  options: { label: string; value: any }[];
+  label?: string;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  label: '',
+  disabled: false,
+  required: false,
+  open: false,
+});
+const $emits = defineEmits<{ (e: 'update:modelValue', value: any): void }>();
+
+const isInputFocused = ref<boolean>(props.open);
+const inputValue = ref<any>(props.modelValue);
+const currentSelectedItemIndex = ref<number>(-1);
+const selectInput: Ref<HTMLElement | null> = ref(null);
+const selectWrapper: Ref<HTMLElement | null> = ref(null);
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+
+onMounted(() => {
+  document.body.addEventListener('click', (ev) => {
+    if ((ev.target as any).closest('.select-wrapper') === selectWrapper.value) {
+      isInputFocused.value = !isInputFocused.value;
+      ev.stopPropagation();
+    } else {
+      isInputFocused.value = false;
+    }
+  });
+});
+
+const getDisplayValue = computed(() => {
+  const option = props.options.find((o) =>
+    _.isEqual(o.value, inputValue.value),
+  );
+  if (option) return option.label;
+  return '';
+});
+
+watch(inputValue, function emitUpdate(newValue) {
+  $emits('update:modelValue', newValue);
+});
+
+watch(
+  () => props.modelValue,
+  function updateFromProps(newValue) {
+    inputValue.value = newValue;
+  },
+);
+
+const selectItem = (option: any) => {
+  inputValue.value = option;
+  isInputFocused.value = false;
+};
+
+const keyDown = () => {
+  if (!isInputFocused.value) isInputFocused.value = true;
+  if (currentSelectedItemIndex.value < props.options.length - 1) {
+    currentSelectedItemIndex.value++;
+  } else {
+    currentSelectedItemIndex.value = 0;
+  }
+};
+
+const keyUp = () => {
+  if (!isInputFocused.value) isInputFocused.value = true;
+  if (currentSelectedItemIndex.value > 0) {
+    currentSelectedItemIndex.value--;
+  } else {
+    currentSelectedItemIndex.value = props.options.length - 1;
+  }
+};
+
+const keyEnter = () => {
+  if (currentSelectedItemIndex.value >= 0) {
+    selectItem(props.options[currentSelectedItemIndex.value].value);
+    currentSelectedItemIndex.value = -1;
+  } else {
+    isInputFocused.value = false;
+  }
+};
+
+const setFocus = () => {
+  isInputFocused.value = true;
+  if (selectInput.value) {
+    selectInput.value.focus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+</script>
+
+<style lang="scss" scoped>
+.field__input {
+  --field-border-color: var(--bms-grey-50);
+  --field-border-color-active: var(--bms-main-100);
+  --input-background-color: var(--bms-white);
+
+  .select-wrapper {
+    width: 100%;
+    padding: 0;
+    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;
+
+    display: flex;
+    align-items: center;
+
+    .icon-down {
+      &-container {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+      &-button {
+        width: 1em;
+        margin: 0 1em 0 0.5em;
+        display: block;
+      }
+    }
+
+    &: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 {
+      border: none;
+      background-color: transparent;
+      caret-color: transparent;
+      cursor: pointer;
+      outline: none;
+      appearance: none;
+      padding: 0 0 0 1em;
+      margin: 0;
+      font: inherit;
+      color: inherit;
+      height: 24px;
+      line-height: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,64 @@
+import BmsTag from '@/components/form/BmsTag.vue';
+import { Activity, Trash } from 'lucide-vue-next';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Tag',
+  component: BmsTag,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsTag,
+    Activity,
+    Trash,
+  },
+  template: `
+    <BmsTag v-bind="args">
+      <template #default>
+        <Activity/> message
+      </template>
+      <template v-if="args.templateIcon" #closeIcon>
+        <Trash/>
+      </template>
+    </BmsTag>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Active = Template.bind({});
+Active.args = {
+  active: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const DisabledActive = Template.bind({});
+DisabledActive.args = {
+  disabled: true,
+  active: true,
+};
+
+export const DifferentIcon = Template.bind({});
+DifferentIcon.args = {
+  templateIcon: true,
+};
+
+export const CantBeDismissed = Template.bind({});
+CantBeDismissed.args = {
+  canBeDismissed: false,
+};

package/src/components/form/BmsTag.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="tag"
+    :class="{ active: active, disabled: disabled }"
+    @click="emits('click')"
+  >
+    <slot></slot>
+    <span class="dismiss-button">
+      <BmsIconButton @click.stop="emits('dismiss')" v-if="canBeDismissed">
+        <slot name="closeIcon"><X /></slot>
+      </BmsIconButton>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BmsIconButton } from '@/index';
+import { X } from 'lucide-vue-next';
+
+interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  canBeDismissed?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  active: false,
+  disabled: false,
+  canBeDismissed: true,
+});
+
+const emits = defineEmits(['dismiss', 'click']);
+</script>
+
+<style lang="scss" scoped>
+.tag {
+  --tag-border-color: var(--bms-main-100);
+  --tag-background-color: transparent;
+  --tag-color: var(--bms-main-100);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 12px;
+  border: 1px solid var(--tag-border-color);
+  width: fit-content;
+  padding: 4px 8px;
+  line-height: normal;
+  font-size: 14px;
+  color: var(--tag-color);
+  background-color: var(--tag-background-color);
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    cursor: default;
+    --tag-color: var(--bms-grey-50);
+    --tag-border-color: var(--bms-grey-50);
+
+    &.active {
+      --tag-color: white;
+      --tag-background-color: var(--bms-grey-50);
+    }
+  }
+
+  &:focus,
+  &:hover {
+    --tag-color: var(--bms-main-140);
+    --tag-border-color: var(--bms-main-140);
+  }
+
+  &.active {
+    --tag-color: white;
+    --tag-background-color: var(--bms-main-100);
+    &:focus,
+    &:hover {
+      --tag-border-color: var(--bms-main-140);
+      --tag-background-color: var(--bms-main-140);
+    }
+  }
+
+  :deep(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .dismiss-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--tag-background-color);
+    color: var(--tag-color);
+
+    :deep(.bms-button) {
+      color: currentColor;
+      padding: 0;
+      height: fit-content;
+
+      .content {
+        margin: 0;
+      }
+
+      &:hover {
+        background-color: var(--tag-background-color);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+import { field } from '@/plugins/field';
+import BmsTextArea, { Props } from './BmsTextArea.vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+const factory = (props: Props) => {
+  const wrapper = mount(BmsTextArea, { props, global: { plugins: [field] } });
+  const inputElement = wrapper.get('textarea');
+
+  return { wrapper, inputElement };
+};
+
+describe('BmsTextArea', () => {
+  it('should display correct value on init', () => {
+    const { inputElement } = factory({ modelValue: 'toto' });
+
+    expect(inputElement.element.value).toStrictEqual('toto');
+  });
+  it('should react correctly on input', async () => {
+    const { wrapper, inputElement } = factory({ modelValue: 'toto' });
+
+    inputElement.setValue('titi');
+    await nextTick();
+    expect(wrapper.emitted()['update:modelValue'][0]).toStrictEqual(['titi']);
+  });
+
+  it('should not update if disabled', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 'toto',
+      disabled: true,
+    });
+
+    inputElement.setValue('titi');
+    await nextTick();
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined();
+  });
+});