@ouestfrance/sipa-bms-ui 8.10.0 → 8.11.0

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>