@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/form/BmsInputNumber.vue

@@ -0,0 +1,67 @@
+<template>
+  <BmsInputText
+    :modelValue="modelValue"
+    :label="label"
+    :required="required"
+    :optional="optional"
+    :disabled="disabled"
+    :helperText="helperText"
+    :placeholder="placeholder"
+    :captions="captions"
+    :errors="errors"
+    :inputType="InputType.NUMBER"
+    @input="onInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from 'vue';
+import { Caption } from '@/models/caption.model';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import { InputType } from '@/models';
+
+export interface Props {
+  modelValue: number;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  max?: number;
+  min?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  disabled: false,
+});
+
+const input: Ref<HTMLElement | null> = ref(null);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: number): void;
+}>();
+
+const onInput = (e: Event) => {
+  if (!props.disabled)
+    $emits('update:modelValue', Number((e?.target as HTMLInputElement).value));
+};
+
+const classes = computed(() => {
+  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+});
+
+const setFocus = () => {
+  if (input.value) {
+    input.value.focus();
+  }
+};
+
+defineExpose({
+  setFocus,
+});
+</script>

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

@@ -0,0 +1,79 @@
+import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputRadio',
+  component: BmsInputRadio,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputRadio,
+  },
+  template: `
+                <div>
+                  <BmsInputRadio v-bind="args">
+                      <template v-if="args.labelSlot" #label>
+                        <span v-html='args.labelSlot' />
+                      </template>
+                  </BmsInputRadio>
+              </div>
+              <div>
+                  <BmsInputRadio v-bind="{...args, modelValue: 'titi'}">
+                      <template v-if="args.labelSlot" #label>
+                        <span v-html='args.labelSlot' />
+                      </template>
+                  </BmsInputRadio>
+              </div>
+             `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: null,
+  value: 'titi',
+  name: 'myInput',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'My label',
+  modelValue: null,
+  value: 'titi',
+  name: 'myInput',
+};
+
+export const WithLabelAsSlot = Template.bind({});
+WithLabelAsSlot.args = {
+  modelValue: null,
+  labelSlot: '<strong>This is a slotted label</strong>',
+  value: 'titi',
+  name: 'myInput',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: null,
+  disabled: true,
+  value: 'titi',
+  name: 'myInput',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  label: 'My label',
+  modelValue: null,
+  errors: ['Error 1', 'Error 2'],
+  value: 'titi',
+  name: 'myInput',
+};

package/src/components/form/BmsInputRadio.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="input-radio" :class="{ disabled, error: errors.length > 0 }">
+    <label>
+      <input
+        type="radio"
+        v-model="inputValue"
+        :value="value"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+      />
+      <span v-if="hasLabel" class="input-radio-info">
+        <slot name="label">{{ label }}</slot>
+      </span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+import { Caption } from '@/models/caption.model';
+
+export interface Props {
+  modelValue: any;
+  value: any;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  errors?: string[] | Caption[];
+  required?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  label: '',
+  disabled: false,
+  errors: () => [],
+});
+
+const slots = useSlots();
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const hasLabel = computed(() => slots.label || props.label);
+
+const inputValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val: any) {
+    $emits('update:modelValue', val);
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.input-radio {
+  --input-radio-default-color: var(--bms-grey-100);
+  --input-radio-default-color-checked: var(--bms-main-100);
+
+  width: fit-content;
+
+  label {
+    display: flex;
+    gap: 4px;
+  }
+
+  &.error {
+    --input-radio-default-color: var(--bms-danger-color);
+    --input-radio-default-color-checked: var(--bms-danger-color);
+  }
+
+  &.disabled {
+    --input-radio-default-color: var(--bms-grey-50);
+    --input-radio-default-color-checked: var(--bms-grey-50);
+    pointer-events: none;
+    input-radio-info {
+      color: var(--bms-grey-50);
+    }
+  }
+
+  &-info {
+    line-height: 16px;
+    cursor: default;
+  }
+}
+input[type='radio'] {
+  appearance: none;
+  margin: 0;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--input-radio-default-color);
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--input-radio-default-color-checked);
+  }
+
+  &:hover {
+    border: 2px solid var(--input-radio-default-color-checked);
+  }
+
+  &:checked {
+    border: 2px solid var(--input-radio-default-color-checked);
+
+    &::before {
+      transform: scale(1);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.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/InputRadioCaption',
+  component: BmsInputRadioCaption,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputRadioCaption,
+  },
+  template: `
+      <div>
+        <BmsInputRadioCaption v-bind="args">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputRadioCaption>
+      </div>
+      <div>
+        <BmsInputRadioCaption v-bind="{...args, modelValue: 'titi'}">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </BmsInputRadioCaption>
+      </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: null,
+  label: 'MyLabel',
+  value: 'titi',
+  name: 'myInput',
+};
+
+export const WithLabelAsSlot = Template.bind({});
+WithLabelAsSlot.args = {
+  modelValue: null,
+  labelSlot: 'This is a slotted value',
+  value: 'titi',
+  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'],
+  value: 'titi',
+  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 },
+  ],
+  value: 'titi',
+  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'],
+  value: 'titi',
+  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'],
+  value: 'titi',
+  name: 'myInput',
+};

package/src/components/form/BmsInputRadioCaption.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="input-radio-caption"
+    :class="{ disabled, error: errors.length > 0 }"
+    @click="inputValue = value"
+  >
+    <BmsInputRadio
+      v-model="inputValue"
+      :value="value"
+      :name="name"
+      :label="label"
+      :disabled="disabled"
+      :errors="errors"
+      :required="required"
+    >
+      <template #label>
+        <slot name="label">{{ label }}</slot>
+      </template>
+    </BmsInputRadio>
+    <span
+      class="group-caption"
+      v-for="message in concatErrors()"
+      :key="message.label"
+    >
+      <BmsCaption :caption="message" />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import BmsInputRadio from './BmsInputRadio.vue';
+import { Caption } from '@/models/caption.model';
+import BmsCaption from '@/components/feedback/BmsCaption.vue';
+import { convertStringToCaption } from '@/helpers';
+
+export interface Props {
+  modelValue: any;
+  value: any;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  required?: boolean;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  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)));
+};
+</script>
+
+<style lang="scss" scoped>
+.input-radio-caption {
+  --input-radio-caption-border-color: var(--bms-grey-25);
+  --input-radio-caption-background-color: transparent;
+
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  padding: 8px;
+  gap: 8px;
+  border: 1px solid var(--input-radio-caption-border-color);
+  border-radius: 4px;
+  background-color: var(--input-radio-caption-background-color);
+
+  .group-caption {
+    cursor: default;
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  &:hover {
+    --input-radio-caption-border-color: var(--bms-main-100);
+  }
+
+  &.disabled {
+    --input-radio-caption-border-color: var(--bms-grey-50);
+    --input-radio-caption-background-color: var(--bms-grey-25);
+  }
+
+  &.error {
+    --input-radio-caption-border-color: var(--bms-red-100);
+    --input-radio-caption-background-color: var(--bms-red-25);
+  }
+}
+</style>

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

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