@ouestfrance/sipa-bms-ui 7.14.1

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

@@ -0,0 +1,153 @@
+import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
+import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
+import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputCheckboxCaptionGroup',
+  component: BmsInputCheckboxCaptionGroup,
+};
+
+const Template = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxCaptionGroup,
+    BmsInputCheckboxCaption,
+  },
+  template: `
+      <BmsInputCheckboxCaptionGroup v-bind="args" v-model="modelValue"/>
+      Mes valeurs cochées sont : {{modelValue}}
+    `,
+});
+
+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: ['tata', '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'],
+};

package/src/components/form/BmsInputCheckboxCaptionGroup.vue

@@ -0,0 +1,81 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <span class="input-checkbox-group-caption-wrapper" :class="align">
+      <BmsInputCheckboxCaption
+        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"
+      />
+    </span>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { Ref, computed, ref } from 'vue';
+import { v4 as uuid } from 'uuid';
+import { BmsInputCheckboxCaptionGroupOption } from '@/models';
+import { Caption } from '@/models/caption.model';
+import BmsInputCheckboxCaption from './BmsInputCheckboxCaption.vue';
+
+export interface Props {
+  options?: BmsInputCheckboxCaptionGroupOption[];
+  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',
+  captions: () => [],
+  errors: () => [],
+});
+
+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-checkbox-group-caption-wrapper {
+  display: flex;
+  gap: 1em;
+  margin: 0.5em 0;
+  flex-direction: row;
+
+  &.column {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,94 @@
+import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
+import BmsInputCheckbox from '@/components/form/BmsInputBooleanCheckbox.vue';
+import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputCheckboxGroup',
+  component: BmsInputCheckboxGroup,
+};
+
+const Template = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxGroup,
+    BmsInputCheckbox,
+  },
+  template: `
+      <BmsInputCheckboxGroup v-bind="args" v-model="modelValue"/>
+      Mes valeurs cochées sont : {{modelValue}}
+    `,
+});
+
+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: ['titi', 'tutu'],
+  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'],
+};

package/src/components/form/BmsInputCheckboxGroup.vue

@@ -0,0 +1,94 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <span class="input-checkbox-group-wrapper" :class="align">
+      <UiBmsInputCheckbox
+        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"
+        :error="errors.length > 0"
+      />
+    </span>
+  </field>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, ref, Ref } from 'vue';
+import { v4 as uuid } from 'uuid';
+import { type BmsInputCheckboxGroupOption } from '@/models';
+import { Caption } from '@/models/caption.model';
+import UiBmsInputCheckbox from './UiBmsInputCheckbox.vue';
+
+export interface Props {
+  values: string[] | BmsInputCheckboxGroupOption[];
+  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>(), {
+  align: 'row',
+  errors: () => [],
+  captions: () => [],
+});
+
+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<BmsInputCheckboxGroupOption[]> = computed(
+  () => {
+    return props.values.map((curValue) => {
+      if (typeof curValue === 'string') {
+        return {
+          value: curValue,
+          label: curValue,
+        };
+      }
+      return curValue;
+    });
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.input-checkbox-group-wrapper {
+  display: flex;
+  gap: 1em;
+  margin: 0.5em 0;
+  flex-direction: row;
+
+  &.column {
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,43 @@
+import BmsInputCode from '@/components/form/BmsInputCode.vue';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputCode',
+  component: BmsInputCode,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputCode,
+  },
+  template: `
+    <BmsInputCode v-bind="args"/>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  captions: ['There is more information'],
+  label: 'Label',
+  type: 'html',
+  modelValue: '',
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  modelValue: 'Une valeur',
+  label: 'Label',
+  type: 'html',
+  modelValue: `
+  <div></div>
+  <div></div>`,
+};

package/src/components/form/BmsInputCode.vue

@@ -0,0 +1,71 @@
+<template>
+  <field
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+  >
+    <div class="code-mirror">
+      <Codemirror
+        v-model="input"
+        :autofocus="true"
+        :indent-with-tab="true"
+        :tab-size="4"
+        :extensions="extensions"
+      />
+    </div>
+  </field>
+</template>
+
+<script setup lang="ts">
+import { Caption } from '@/models';
+import { html } from '@codemirror/lang-html';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { linter, lintGutter } from '@codemirror/lint';
+import { computed } from 'vue';
+import { Codemirror } from 'vue-codemirror';
+
+export interface Props {
+  type: 'html' | 'json';
+  modelValue: string;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  errors: () => [],
+  captions: () => [],
+});
+
+const input = defineModel({ type: String, default: '' });
+
+const emit = defineEmits(['update:modelValue']);
+
+const extensions = computed<any[]>(() => {
+  switch (props.type) {
+    case 'html':
+      return [html()];
+
+    default:
+      return [json(), lintGutter(), linter(jsonParseLinter())];
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.code-mirror {
+  max-height: 50rem;
+  width: 100%;
+  overflow: auto;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,71 @@
+import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
+import { within } from 'storybook/test';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/InputDateTime',
+  component: BmsInputDateTime,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputDateTime,
+  },
+  template: `
+  <BmsInputDateTime v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  captions: ['There is more information'],
+};
+
+export const WithoutTime = Template.bind({});
+WithoutTime.args = {
+  label: 'My label',
+  hasTime: false,
+  captions: ['There is more information'],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: 'My label',
+  modelValue: '2018-06-12T19:30',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: '2018-06-12T19:30',
+  disabled: true,
+};
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  label: 'My label',
+  modelValue: '2018-06-12T19:30',
+  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/BmsInputDateTime.vue

@@ -0,0 +1,55 @@
+<template>
+  <BmsInputText
+    :modelValue="modelValue"
+    :label="label"
+    :required="required"
+    :optional="optional"
+    :disabled="disabled"
+    :helperText="helperText"
+    :placeholder="placeholder"
+    :captions="captions"
+    :errors="errors"
+    :inputType="inputType"
+    @input="onInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, Ref, ref } from 'vue';
+import { Caption } from '@/models/caption.model';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import { InputType } from '@/models';
+
+export interface Props {
+  modelValue: string;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: string[] | Caption[];
+  errors?: string[] | Caption[];
+  hasTime?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  disabled: false,
+  hasTime: true,
+});
+
+const inputType = computed(() =>
+  props.hasTime ? InputType.DATETIME : InputType.DATE,
+);
+
+const $emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const onInput = (e: Event) => {
+  const value = (e?.target as HTMLInputElement).value;
+  if (!props.disabled && value) $emits('update:modelValue', value);
+};
+</script>