@ouestfrance/sipa-bms-ui 8.23.5 → 8.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.23.5",
+  "version": "8.24.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsBetweenInput.vue

@@ -48,8 +48,8 @@ export interface Props {
   helperText?: string;
   placeholderFrom?: string;
   placeholderTo?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
+  captions?: (string | Caption)[];
+  errors?: (string | Caption)[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -102,7 +102,7 @@ const allErrors = computed(() => {
   }
   if (msg) {
     return props.errors?.length
-      ? ([...props.errors].concat([msg]) as string[] | Caption[])
+      ? ([...props.errors].concat([msg]) as (string | Caption)[])
       : [msg];
   }
   return props.errors;

package/src/components/form/BmsInputCheckboxCaption.vue

@@ -42,8 +42,8 @@ export interface Props {
   name: string;
   disabled?: boolean;
   required?: boolean;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
+  errors?: (string | Caption)[];
+  captions?: (string | Caption)[];
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/components/form/BmsInputCheckboxCaptionGroup.vue

@@ -31,8 +31,8 @@ export interface Props {
   optional?: boolean;
   disabled?: boolean;
   helperText?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
+  captions?: (string | Caption)[];
+  errors?: (string | Caption)[];
   align?: 'row' | 'column';
 }
 

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

@@ -46,6 +46,13 @@ WithValue.args = {
   modelValue: '2018-06-12T19:30',
 };
 
+export const WithStep = Template.bind({});
+WithStep.args = {
+  label: 'My label',
+  modelValue: '2018-06-12T19:30',
+  step: 10,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   label: 'My label',

package/src/components/form/BmsInputDateTime.vue

@@ -10,6 +10,7 @@
     :captions="captions"
     :errors="errors"
     :inputType="inputType"
+    :step="step"
     @input="onInput"
   />
 </template>
@@ -28,9 +29,10 @@ export interface Props {
   disabled?: boolean;
   helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
+  captions?: (string | Caption)[];
+  errors?: (string | Caption)[];
   hasTime?: boolean;
+  step?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -38,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
   disabled: false,
   hasTime: true,
+  step: 0,
 });
 
 const inputType = computed(() =>

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

@@ -80,6 +80,14 @@ WithLimitAndEmptyValue.args = {
   errors: [],
 };
 
+export const WithStep = Template.bind({});
+WithStep.args = {
+  label: 'My label',
+  modelValue: 10,
+  modelValueSmall: 10,
+  step: 10,
+};
+
 export const WithLimitExceeded = Template.bind({});
 WithLimitExceeded.args = {
   label: 'My label',

package/src/components/form/BmsInputNumber.vue

@@ -12,6 +12,7 @@
     :inputType="InputType.NUMBER"
     :min="min"
     :max="max"
+    :step="step"
     @input="onInput"
   />
 </template>
@@ -32,6 +33,7 @@ export interface Props {
   placeholder?: string;
   captions?: (string | Caption)[];
   errors?: (string | Caption)[];
+  step?: number;
   max?: number;
   min?: number;
 }
@@ -40,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   required: false,
   disabled: false,
+  step: 0,
 });
 
 const input: Ref<HTMLElement | null> = ref(null);

package/src/components/form/BmsInputRadioCaption.vue

@@ -41,8 +41,8 @@ export interface Props {
   label?: string;
   disabled?: boolean;
   required?: boolean;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
+  errors?: (string | Caption)[];
+  captions?: (string | Caption)[];
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -16,9 +16,7 @@ export default {
 
 const Template = (args) => ({
   setup() {
-    const modelValue = ref(args.modelValue);
-    const modelValueSmall = ref(args.modelValueSmall);
-    return { args, modelValue, modelValueSmall };
+    return { args };
   },
   components: {
     BmsInputText,
@@ -26,12 +24,12 @@ const Template = (args) => ({
     CloudLightning,
   },
   template: `
-  <BmsInputText v-bind="args" v-model="modelValue">
+  <BmsInputText v-bind="args" v-model="args.modelValue">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputText>
   <br/>
-  <BmsInputText v-bind="{...args, small:true}" v-model="modelValueSmall">
+  <BmsInputText v-bind="{...args, small:true}" v-model="args.modelValueSmall">
     <template v-if="args.iconStart" #icon-start><BookOpen/></template>
     <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
   </BmsInputText>

package/src/components/form/BmsInputText.vue

@@ -11,6 +11,7 @@
       :errors="computedErrors"
       :hasDate="false"
       :small="small"
+      :step="step"
       :min="min"
       :max="max"
       :minlength="minlength"
@@ -39,13 +40,15 @@ export interface Props extends FieldComponentProps {
     | InputType.TEXT
     | InputType.NUMBER
     | InputType.DATE
-    | InputType.DATETIME;
+    | InputType.DATETIME
+    | InputType.TIME;
   modelValue: string | number;
   placeholder?: string;
   min?: number;
   max?: number;
   minlength?: number;
   maxlength?: number;
+  step?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -0,0 +1,65 @@
+import BmsInputTime from '@/components/form/BmsInputTime.vue';
+import { BookOpen, CloudLightning, Mail, Eye } from 'lucide-vue-next';
+import template from '@/documentation/template_field_dependency.mdx';
+import { ref } from 'vue';
+
+export default {
+  title: 'Composants/form/InputTime',
+  component: BmsInputTime,
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsInputTime,
+    BookOpen,
+    CloudLightning,
+  },
+  template: `
+  <BmsInputTime v-bind="args" v-model="args.modelValue">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputTime>
+  <br/>
+  <BmsInputTime v-bind="{...args, small:true}" v-model="args.modelValueSmall">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputTime>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+  modelValue: '',
+  modelValueSmall: '',
+};
+
+export const WithSeconds = Template.bind({});
+WithSeconds.args = {
+  label: 'My label hasSeconds',
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+  modelValue: '',
+  modelValueSmall: '',
+  hasSeconds: true,
+};
+
+export const WithStep = Template.bind({});
+WithStep.args = {
+  label: 'My label',
+  placeholder: 'Placeholder',
+  captions: ['There is more information'],
+  modelValue: '',
+  modelValueSmall: '',
+  step: 10, // max 15 (multiple de 60)
+};

package/src/components/form/BmsInputTime.vue

@@ -0,0 +1,62 @@
+<template>
+  <BmsInputText
+    :modelValue="modelValue"
+    :label="label"
+    :required="required"
+    :optional="optional"
+    :disabled="disabled"
+    :helperText="helperText"
+    :placeholder="placeholder"
+    :captions="captions"
+    :errors="errors"
+    :inputType="InputType.TIME"
+    :step="computedStep"
+    @input="onInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { Caption } from '@/models/caption.model';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import { InputType } from '@/models';
+import { computed } from 'vue';
+
+export interface Props {
+  modelValue: string;
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+  captions?: (string | Caption)[];
+  errors?: (string | Caption)[];
+  step?: number;
+  hasSeconds?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  disabled: false,
+  step: 0,
+  hasSeconds: false,
+});
+
+const computedStep = computed(() => {
+  if (props.hasSeconds && !props.step) {
+    return 1;
+  } else {
+    return props.step;
+  }
+});
+
+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>

package/src/components/form/BmsMultiSelect.vue

@@ -202,7 +202,7 @@ const filteredOptions = computed(() =>
     display: block;
     width: 1em;
     height: 1em;
-    margin: 0 1em 0 0.5em;
+    margin: 0 var(--field-padding);
   }
 }
 </style>

package/src/components/form/BmsSearch.vue

@@ -26,7 +26,7 @@ export interface Props {
   modelValue: string;
   placeholder?: string;
   disabled?: boolean;
-  errors?: string[] | Caption[];
+  errors?: (string | Caption)[];
 }
 
 const input: Ref<typeof BmsInputText | null> = ref(null);

package/src/components/form/BmsTag.vue

@@ -39,7 +39,7 @@ const emits = defineEmits(['dismiss', 'click']);
   justify-content: center;
   align-items: center;
   gap: 8px;
-  border-radius: 12px;
+  border-radius: var(--bms-border-radius-xlarge);
   border: 1px solid var(--tag-border-color);
   width: fit-content;
   padding: 4px 8px;
@@ -62,7 +62,8 @@ const emits = defineEmits(['dismiss', 'click']);
   }
 
   &.small {
-    padding: 2px 4px;
+    padding: 0px 4px;
+    margin-block: 1px;
     gap: 4px;
   }
 

package/src/components/form/RawInputText.vue

@@ -16,6 +16,7 @@
       :disabled="disabled"
       :max="max"
       :min="min"
+      :step="computedStep"
       :minlength="minlength"
       :maxlength="maxlength"
       @blur="$emits('blur')"
@@ -42,11 +43,13 @@ export interface Props extends FieldComponentProps {
   max?: number;
   minlength?: number;
   maxlength?: number;
+  step?: number;
   type?:
     | InputType.TEXT
     | InputType.NUMBER
     | InputType.DATE
-    | InputType.DATETIME;
+    | InputType.DATETIME
+    | InputType.TIME;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -54,9 +57,24 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
   disabled: false,
   focus: false,
+  step: 0,
 });
 const input: Ref<HTMLElement | null> = ref(null);
 
+const computedStep = computed(() => {
+  if (
+    [
+      InputType.TIME,
+      InputType.DATE,
+      InputType.DATETIME,
+      InputType.NUMBER,
+    ].includes(props.type)
+  ) {
+    return props.step || 0;
+  }
+  return 0;
+});
+
 const $emits = defineEmits<{
   'update:modelValue': [value: string];
   blur: [];

package/src/index.ts

@@ -36,6 +36,7 @@ import BmsSearch from './components/form/BmsSearch.vue';
 import BmsSelect from './components/form/BmsSelect.vue';
 import BmsTag from './components/form/BmsTag.vue';
 import BmsTextArea from './components/form/BmsTextArea.vue';
+import BmsInputTime from './components/form/BmsInputTime.vue';
 
 import BmsContentPageLayout from './components/layout/BmsContentPageLayout.vue';
 import BmsCard from './components/layout/BmsCard.vue';
@@ -111,6 +112,7 @@ export const createBmsUi = () => ({
     app.component('BmsSelect', BmsSelect);
     app.component('BmsTag', BmsTag);
     app.component('BmsTextArea', BmsTextArea);
+    app.component('BmsInputTime', BmsInputTime);
 
     app.component('BmsContentPageLayout', BmsContentPageLayout);
     app.component('BmsCard', BmsCard);
@@ -187,6 +189,7 @@ export {
   BmsInputRadioCaption,
   BmsInputRadioCaptionGroup,
   BmsInputText,
+  BmsInputTime,
   BmsInputToggle,
   BmsMultiSelect,
   BmsSearch,

package/src/models/form.model.ts

@@ -14,13 +14,13 @@ export interface BmsInputCheckboxGroupOption {
 export interface BmsInputRadioCaptionGroupOption {
   value: any;
   label?: string;
-  captions: string[] | Caption[];
+  captions: (string | Caption)[];
 }
 
 export interface BmsInputCheckboxCaptionGroupOption {
   value: any;
   label?: string;
-  captions: string[] | Caption[];
+  captions: (string | Caption)[];
 }
 
 export enum InputType {
@@ -28,6 +28,7 @@ export enum InputType {
   NUMBER = 'number',
   DATE = 'date',
   DATETIME = 'datetime-local',
+  TIME = 'time',
 }
 
 export interface InputOption {