@ouestfrance/sipa-bms-ui 8.10.1 → 8.12.0

package/src/plugins/field/FieldComponent.stories.js

@@ -17,6 +17,7 @@ const Template = (args) => ({
     Album,
   },
   template: `
+  <div style="border:1px solid grey; width: 400px;">
       <field v-bind="args">
         <template #icon-start v-if="args.iconStart">
           <Flashlight/>
@@ -26,12 +27,28 @@ const Template = (args) => ({
           <Album/>
         </template>
       </field>
-    `,
+  </div>
+      `,
 });
 
 export const Default = Template.bind({});
 Default.args = {
   label: 'My label',
+  ellipsisLabel: true,
+  captions: ['Helping text'],
+};
+
+export const NoOverflow = Template.bind({});
+NoOverflow.args = {
+  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
+  ellipsisLabel: false,
+  captions: ['Helping text'],
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  label: 'My label looooooooooooooooooooooooooooooooooooooooooooooong',
+  ellipsisLabel: true,
   captions: ['Helping text'],
 };
 

package/src/plugins/field/FieldComponent.vue

@@ -1,8 +1,15 @@
 <template>
-  <div :class="classes">
+  <div :class="classes" ref="parentElement">
     <div class="field__wrapper">
       <span class="field__label">
-        <span class="field__label__title">{{ label }}</span>
+        <span
+          class="field__label__title"
+          :class="{ ellipsis: ellipsisLabel }"
+          :title="ellipsisLabel ? label : undefined"
+        >
+          {{ label }}
+        </span>
+
         <span v-if="required" class="field__label-required">*</span>
         <span v-if="optional && !required" class="field__label-optional">
           (Optionnel)
@@ -15,7 +22,8 @@
       </span>
 
       <span class="field__input">
-        <slot></slot>
+        <SkeletonField v-if="loading" />
+        <slot v-else></slot>
       </span>
       <span ref="datalist">
         <span class="field__datalist" :class="{ top: openTop }">
@@ -53,16 +61,20 @@ import { useElementBounding, useWindowSize } from '@vueuse/core';
 import { Caption } from '@/models/caption.model';
 import BmsCaption from '@/components/feedback/BmsCaption.vue';
 import { FieldComponentProps } from './field-component.model';
+import SkeletonField from './SkeletonField.vue';
 
 const props = withDefaults(defineProps<FieldComponentProps>(), {
   label: '',
   optional: false,
   small: false,
+  loading: false,
+  ellipsisLabel: false,
 });
 
 const datalist: Ref<HTMLSpanElement | null> = ref<HTMLSpanElement | null>(null);
-const { y } = useElementBounding(datalist);
 
+const { y } = useElementBounding(datalist);
+const parentElement = ref<HTMLElement | null>(null);
 const { height: windowHeight } = useWindowSize();
 
 const classes = computed(() => {
@@ -140,7 +152,6 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   &__wrapper {
     display: inline-block;
     position: relative;
-    min-width: 24rem;
     width: 100%;
     background-color: transparent;
   }
@@ -150,9 +161,17 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     align-items: center;
 
     &__title {
+      display: inline-block;
+      white-space: nowrap;
+
       font-size: 1em;
       font-weight: var(--field-label-font-weight);
       color: var(--field-label-color);
+
+      &.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     &-helper--icon {
@@ -182,10 +201,11 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   }
 
   &.is-small {
-    --field-height: 28px;
+    --field-height: 1.5em;
     --field-padding: 0.5em;
     --field-margin: 0;
     --field-label-font-weight: normal;
+
     .field__captions {
       margin-top: 0.5rem;
     }

package/src/plugins/field/SkeletonField.stories.js

@@ -0,0 +1,21 @@
+import SkeletonField from './SkeletonField.vue';
+
+export default {
+  title: 'Composants/form/SkeletonField',
+  component: SkeletonField,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    SkeletonField,
+  },
+  template: `
+    <SkeletonField v-bind="args" style="width:200px;height:20px"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/plugins/field/SkeletonField.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="skeleton"></div>
+</template>
+
+<style lang="css" scoped>
+@keyframes blink-animation {
+  0% {
+    background-color: var(--bms-main-25);
+  }
+  50% {
+    background-color: var(--bms-main-10);
+  }
+  100% {
+    background-color: var(--bms-main-25);
+  }
+}
+.skeleton {
+  /* background-color: var(--bms-main-25); */
+  min-height: var(--field-height);
+  border-radius: var(--bms-border-radius);
+  height: 100%;
+  width: 100%;
+  /* opacity: 0.7; */
+  /* transition: background-color 1000ms linear; */
+  animation: blink-animation 2s steps(10, start) infinite alternate;
+}
+</style>

package/src/plugins/field/field-component.model.ts

@@ -2,6 +2,7 @@ import { Caption } from '@/models';
 
 export interface FieldComponentProps {
   label?: string;
+  loading?: boolean;
   required?: boolean;
   optional?: boolean;
   helperText?: string;
@@ -9,4 +10,5 @@ export interface FieldComponentProps {
   captions?: (string | Caption)[];
   disabled?: boolean;
   small?: boolean;
+  ellipsisLabel?: boolean;
 }

package/src/showroom/App.vue

@@ -92,6 +92,11 @@ const menuItems: (MenuItem | ParentMenuItem)[] = [
     link: '/draggable-list',
     id: 'draggableList',
   },
+  {
+    label: 'Formulaire asynchrone',
+    link: '/loading-form',
+    id: 'loadingForm',
+  },
   {
     label: 'External Url',
     link: 'https://google.fr',

package/src/showroom/pages/loading-form.vue

@@ -0,0 +1,78 @@
+<template>
+  <BmsInputToggle label="Loading" name="loading" v-model="loading" />
+  <BmsInputToggle label="Small" name="small" v-model="small" />
+  <BmsForm>
+    <template #section1>
+      <h2>Formulaire statique aux options dynamiques</h2>
+      <BmsSelect
+        label="Select"
+        v-model="select"
+        :loading="loading"
+        :small="small"
+        :options="selectOptions"
+      />
+      <BmsAutocomplete
+        label="Autocomplete"
+        v-model="autocomplete"
+        :loading="loading"
+        :small="small"
+        :options="autocompleteOptions"
+      />
+      <BmsInputText
+        label="Text"
+        v-model="autocomplete"
+        :loading="loading"
+        :small="small"
+      />
+      <BmsInputBooleanCheckbox
+        :model-value="false"
+        :loading="loading"
+        :small="small"
+        label="boolean"
+        name="boolean"
+        label-value="oui"
+      />
+      <BmsInputRadioCaptionGroup
+        :loading="loading"
+        :small="small"
+        label="Radio Buttons"
+        v-model="radio"
+        :options="[
+          { value: 'tata', label: 'Tata', captions: ['Caption'] },
+          { value: 'titi', label: 'Titi', captions: ['Caption'] },
+          { value: 'toto', label: 'Toto', captions: ['Caption'] },
+          { value: 'tutu', captions: ['Caption'] },
+        ]"
+        :captions="loading ? [] : ['this is a question']"
+        required
+      />
+    </template>
+  </BmsForm>
+</template>
+
+<script setup lang="ts">
+import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
+import BmsInputBooleanCheckbox from '@/components/form/BmsInputBooleanCheckbox.vue';
+import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import BmsForm from '@/components/layout/BmsForm.vue';
+import { InputOption } from '@/models';
+import { ref } from 'vue';
+
+const loading = ref(true);
+const small = ref(true);
+const select = ref([]);
+const autocomplete = ref('');
+
+const selectOptions = ref<InputOption[]>([
+  { label: 'label 1', value: 1 },
+  { label: 'label 2', value: 2 },
+]);
+const autocompleteOptions = ref<InputOption[]>([
+  { label: 'label 1', value: 1 },
+  { label: 'label 2', value: 2 },
+]);
+const radio = ref('toto');
+</script>