@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/BmsInputRadioCaptionGroup.vue

@@ -0,0 +1,81 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <span class="input-radio-group-caption-wrapper" :class="align">
+      <slot>
+        <BmsInputRadioCaption
+          v-for="option in options"
+          :key="option.value"
+          v-model="inputValue"
+          :value="option.value"
+          :name="name"
+          :label="option.label || option.value"
+          :disabled="disabled"
+          :required="required"
+          :captions="option.captions"
+        />
+      </slot>
+    </span>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from 'vue';
+import BmsInputRadioCaption from './BmsInputRadioCaption.vue';
+import { v4 as uuid } from 'uuid';
+import { BmsInputRadioCaptionGroupOption } from '@/models';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  options?: BmsInputRadioCaptionGroupOption[];
+  modelValue: any;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  align?: 'row' | 'column';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [],
+  align: 'row',
+});
+
+const name: Ref<string> = ref<string>('radio-group-caption-' + uuid());
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.input-radio-group-caption-wrapper {
+  display: flex;
+  gap: 1em;
+  margin: 0.5em 0;
+  flex-direction: row;
+
+  &.column {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,108 @@
+import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
+import BmsInputRadio from '@/components/form/BmsInputRadio.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/InputRadioGroup',
+  component: BmsInputRadioGroup,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputRadioGroup,
+    BmsInputRadio,
+  },
+  template: `
+      <BmsInputRadioGroup v-bind="args">
+        <template v-if="args.slot" #default>
+          <BmsInputRadio :modelValue='args.modelValue' value='toto' name='sameName'>
+            <template #label><span>toto</span></template>
+          </BmsInputRadio>
+          <BmsInputRadio :modelValue='args.modelValue' value='titi' name='sameName'>
+            <template #label><span>titi</span></template>
+          </BmsInputRadio>
+        </template>
+      </BmsInputRadioGroup>
+    `,
+});
+
+export const DefaultRow = Template.bind({});
+DefaultRow.args = {
+  values: [
+    { value: 'tata', label: 'Tata' },
+    { value: 'titi', label: 'Titi' },
+    { value: 'toto', label: 'Toto' },
+    { value: 'tutu', label: 'Tutu' },
+  ],
+  modelValue: '',
+  label: 'This is a field label',
+};
+
+export const DefaultColumn = Template.bind({});
+DefaultColumn.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: '',
+  label: 'This is a field label',
+  align: 'column',
+};
+
+export const DefaultSelected = Template.bind({});
+DefaultSelected.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+};
+
+export const FullHelp = Template.bind({});
+FullHelp.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+  helperText: 'this is a help',
+  captions: [
+    { label: 'Group Caption 1', mode: StatusType.Success },
+    'Group Caption 2',
+  ],
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+  disabled: true,
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+  required: true,
+};
+
+export const Errors = Template.bind({});
+Errors.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+  errors: ['Error 1', 'Error 2'],
+};
+
+export const Slot = Template.bind({});
+Slot.args = {
+  values: ['tata', 'titi', 'toto', 'tutu'],
+  modelValue: 'toto',
+  label: 'This is a field label',
+  slot: true,
+};

package/src/components/form/BmsInputRadioGroup.vue

@@ -0,0 +1,93 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <span class="input-radio-group-wrapper" :class="align">
+      <slot>
+        <BmsInputRadio
+          v-for="option in computedValues"
+          :key="option.value"
+          v-model="inputValue"
+          :value="option.value"
+          :name="name"
+          :label="option.label || option.value"
+          :disabled="disabled"
+          :required="required"
+          :errors="errors"
+        />
+      </slot>
+    </span>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, ref, Ref } from 'vue';
+import BmsInputRadio from './BmsInputRadio.vue';
+import { v4 as uuid } from 'uuid';
+import { BmsInputRadioGroupOption } from '@/models';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  values?: string[] | BmsInputRadioGroupOption[];
+  modelValue: any;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  align?: 'row' | 'column';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  values: () => [],
+  align: 'row',
+});
+
+const name: Ref<string> = ref<string>('radio-group-' + uuid());
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+
+const computedValues: ComputedRef<BmsInputRadioGroupOption[]> = computed(() => {
+  return props.values.map((curValue) => {
+    if (typeof curValue === 'string') {
+      return {
+        value: curValue,
+        label: curValue,
+      };
+    }
+    return curValue;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.input-radio-group-wrapper {
+  display: flex;
+  gap: 1em;
+  margin: 0.5em 0;
+  flex-direction: row;
+
+  &.column {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+import { field } from '@/plugins/field';
+import BmsInputText, { Props } from './BmsInputText.vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+const factory = (props: Props) => {
+  const wrapper = mount(BmsInputText, { props, global: { plugins: [field] } });
+  const inputElement = wrapper.get('input');
+
+  return { wrapper, inputElement };
+};
+
+describe('BmsInputText', () => {
+  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();
+  });
+});

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

@@ -0,0 +1,78 @@
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import { within } from 'storybook/test';
+import { BookOpen, CloudLightning } from 'lucide-vue-next';
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  title: 'Composants/form/InputText',
+  component: BmsInputText,
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputText,
+    BookOpen,
+    CloudLightning,
+  },
+  template: `
+  <BmsInputText v-bind="args">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputText>
+  `,
+});
+
+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/BmsInputText.vue

@@ -0,0 +1,79 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <RawInputText
+      ref="input"
+      :type="inputType"
+      :modelValue="modelValue"
+      :required="required"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :errors="errors"
+      :hasDate="false"
+      @input="onInput"
+      @keyup="onInput"
+    >
+      <template #icon-start><slot name="icon-start"></slot></template>
+      <template #icon-end><slot name="icon-end"></slot></template>
+    </RawInputText>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { Ref, ref } from 'vue';
+import { Caption } from '@/models/caption.model';
+import RawInputText from '@/components/form/RawInputText.vue';
+import { InputType } from '@/models';
+
+export interface Props {
+  inputType?:
+    | InputType.TEXT
+    | InputType.NUMBER
+    | InputType.DATE
+    | InputType.DATETIME;
+  modelValue: string | number;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inputType: InputType.TEXT,
+  label: '',
+  required: false,
+  disabled: false,
+});
+
+const input: Ref<HTMLElement | null> = ref(null);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const setFocus = () => {
+  if (input.value) {
+    (input.value as any).setFocus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+
+const onInput = (e: Event) => {
+  if (!props.disabled)
+    $emits('update:modelValue', (e?.target as HTMLInputElement).value);
+};
+</script>

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

@@ -0,0 +1,37 @@
+import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
+import { ref } from 'vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/BmsInputToggle',
+  component: BmsInputToggle,
+};
+
+const Template = (args) => ({
+  setup() {
+    const curentValue = ref(args.modelValue);
+    return { args, curentValue };
+  },
+  components: {
+    BmsInputToggle,
+  },
+  template: `
+    <BmsInputToggle  v-bind="{...args}" v-model="curentValue"/>
+    Valeur de mon toggle : {{ curentValue }}
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = { label: 'without value', name: 'my-input' };
+
+export const On = Template.bind({});
+On.args = { label: 'Label', modelValue: true, name: 'my-input' };
+
+export const Off = Template.bind({});
+Off.args = { label: 'Label', modelValue: false, name: 'my-input' };

package/src/components/form/BmsInputToggle.vue

@@ -0,0 +1,66 @@
+<template>
+  <field :disabled="disabled">
+    <label class="input-toggle" :class="{ isOn: modelValue, disabled }">
+      <span class="input-switch-info">{{ label }}</span>
+      <UiBmsSwitch
+        :modelValue="modelValue"
+        :disabled="disabled"
+        :name="name"
+        @update:modelValue="
+          (value: boolean) => $emit('update:modelValue', value)
+        "
+      />
+    </label>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import UiBmsSwitch from '@/components/form/UiBmsSwitch.vue';
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    name: string;
+    modelValue: boolean;
+    label: string;
+  }>(),
+  {
+    disabled: false,
+    modelValue: false,
+  },
+);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.input-toggle {
+  --label-color: var(--bms-grey-100);
+  --cursor: pointer;
+
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  .input-switch-info {
+    color: var(--label-color);
+    transition: 0.2s;
+  }
+
+  &.isOn {
+    --label-color: var(--bms-main-100);
+  }
+
+  &.disabled {
+    --label-color: var(--bms-grey-50);
+    --cursor: default;
+  }
+
+  &:hover {
+    cursor: var(--cursor);
+  }
+}
+</style>

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

@@ -0,0 +1,41 @@
+import { field } from '@/plugins/field';
+import BmsSearch, { Props } from './BmsSearch.vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+const factory = (props: Props) => {
+  const wrapper = mount(BmsSearch, { props, global: { plugins: [field] } });
+  const inputElement = wrapper.get('input');
+
+  return { wrapper, inputElement };
+};
+
+describe('BmsSearch', () => {
+  it('should display correct value on init', () => {
+    const { inputElement } = factory({
+      modelValue: 'toto',
+      placeholder: 'placeholderrr',
+    });
+
+    expect(inputElement.element.value).toStrictEqual('toto');
+    expect(inputElement.element.placeholder).toStrictEqual('placeholderrr');
+  });
+  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();
+  });
+});

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

@@ -0,0 +1,70 @@
+import BmsSearch from '@/components/form/BmsSearch.vue';
+import { within } from 'storybook/test';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/Search',
+  component: BmsSearch,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsSearch,
+  },
+  template: `
+    <BmsSearch v-bind="args"/>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  modelValue: 'Une valeur',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Une valeur',
+  disabled: true,
+};
+
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = {
+  placeholder: 'Type here !!!!!',
+};
+
+export const Captions = Template.bind({});
+Captions.args = {
+  captions: ['Very good info', 'Yes yes'],
+};
+
+export const Errors = Template.bind({});
+Errors.args = {
+  errors: ['Very bad errors', 'No no'],
+};
+
+export const WithFocusState = {
+  args: {
+    modelValue: '',
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.getByRole('input').click();
+    await canvas.getByRole('input').focus();
+  },
+};