@ouestfrance/sipa-bms-ui 8.18.0 → 8.20.0

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

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/form/UiBmsInputCheckbox',
   component: UiBmsInputCheckbox,
 };

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

@@ -8,11 +8,7 @@ export default {
       page: template,
     },
   },
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
+  tags: ['code-only'],
   title: 'Composants/form/Switch',
   component: UiBmsSwitch,
 };

package/src/components/layout/BmsForm_retrocompat.stories.js

@@ -3,6 +3,7 @@ import BmsForm from '@/components/layout/BmsForm.vue';
 export default {
   title: 'Composants/layout/BmsForm/for_retrocompat',
   component: BmsForm,
+  tags: ['code-only'],
 };
 
 const Template = (args) => ({

package/src/components/layout/BmsSplitWindow.vue

@@ -55,6 +55,7 @@ const collapsedLocal = ref(props.collapsed ?? false);
 watch(
   () => props.collapsed,
   (val) => {
+    console.log('watch:collapsed', val);
     collapsedLocal.value = val ?? false;
   },
 );
@@ -110,7 +111,9 @@ onBeforeUnmount(() => {
 
 function onPointerDown(evt: PointerEvent) {
   isDragging.value = true;
-  setCollapsed(false);
+  if (collapsedLocal.value) {
+    setCollapsed(false);
+  }
   startSplit.value = clampSplit.value;
   startPosition.value =
     props.splitOrientation === 'vertical' ? evt.clientX : evt.clientY;
@@ -146,14 +149,14 @@ function onKeyDown(evt: KeyboardEvent) {
   switch (evt.key) {
     case 'ArrowLeft':
     case 'ArrowUp':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = Math.max(min.value, clampSplit.value - 1);
       break;
     case 'ArrowRight':
     case 'ArrowDown':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = Math.min(max.value, clampSplit.value + 1);
@@ -162,13 +165,13 @@ function onKeyDown(evt: KeyboardEvent) {
       setCollapsed(!collapsedLocal.value);
       break;
     case 'Home':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = props.primary === 'first' ? min.value : max.value;
       break;
     case 'End':
-      if (collapsedLocal.value === true) {
+      if (collapsedLocal.value) {
         setCollapsed(false);
       }
       split.value = props.primary === 'first' ? max.value : min.value;
@@ -202,11 +205,14 @@ function clamp(value: number, minValue: number, maxValue: number) {
   <div
     ref="split-window"
     class="split-window"
-    :class="`split-window--${splitOrientation}`"
+    :class="[
+      `split-window--${splitOrientation}`,
+      { 'split-window--dragging': isDragging },
+    ]"
     :style="gridStyle"
   >
     <div
-      class="split-window__first-pane"
+      class="split-window__pane split-window__first-pane"
       :id="primary === 'first' ? primaryId : undefined"
     >
       <slot name="first" />
@@ -223,9 +229,11 @@ function clamp(value: number, minValue: number, maxValue: number) {
       :aria-controls="primaryId"
       @pointerdown.prevent.stop="onPointerDown"
       @keydown="onKeyDown"
-    />
+    >
+      <slot name="separator" />
+    </div>
     <div
-      class="split-window__second-pane"
+      class="split-window__pane split-window__second-pane"
       :id="primary === 'second' ? primaryId : undefined"
     >
       <slot name="second" />
@@ -238,10 +246,17 @@ function clamp(value: number, minValue: number, maxValue: number) {
   display: grid;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+
+  &__pane {
+    display: flex;
+    max-height: 100%;
+    overflow: hidden;
+  }
 
   &__separator {
     position: relative;
-    z-index: 2;
+    z-index: var(--bms-z-index-fixed);
 
     &:before {
       content: '';
@@ -286,5 +301,18 @@ function clamp(value: number, minValue: number, maxValue: number) {
       }
     }
   }
+
+  &--dragging {
+    .split-window__separator {
+      &:before {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform: unset;
+      }
+    }
+  }
 }
 </style>

package/src/components/navigation/BmsBreadcrumb.stories.js

@@ -60,21 +60,3 @@ Default.args = {
     },
   ],
 };
-
-export const WithCustomSeparator = Template.bind({});
-WithCustomSeparator.args = {
-  separator: '❤️',
-  breadcrumbs: [
-    {
-      to: { name: 'firstRoute' },
-      label: 'First route',
-    },
-    {
-      to: { name: 'secondRoute' },
-      label: 'Second route',
-    },
-    {
-      label: 'Third and final route',
-    },
-  ],
-};

package/src/components/navigation/BmsMenu.stories.js

@@ -18,8 +18,8 @@ const Template = (args) => ({
   },
   template: `
     <BmsMenu v-bind="args">
-      <template v-if="args.additionalSlot" #additional>Additional</template>
-      <template v-if="args.footerSlot" #footer>Footer</template>
+      <template v-if="args.additional" #additional>{{args.additional}}</template>
+      <template v-if="args.footer" #footer>{{args.footer}}</template>
     </BmsMenu>
   `,
 });
@@ -80,6 +80,6 @@ WithFooterSlot.args = {
     },
   ],
   activeLink: '/tutu',
-  additionalSlot: true,
-  footerSlot: true,
+  additional: 'Additional',
+  footer: 'Footer',
 };

package/src/components/navigation/BmsMenuNav.stories.js

@@ -21,8 +21,8 @@ const Template = (args) => ({
   },
   template: `
     <BmsMenuNav v-bind="args">
-      <template v-if="args.additionalSlot" #additional>Additional</template>
-      <template v-if="args.additionalSlot" #icon-end="{ item }" >
+      <template v-if="args.additional" #additional>{{args.additional}}</template>
+      <template v-if="args.iconEndCustomSlot" #icon-end="{ item }" >
         <BmsBadge :pending="item.badgeCount"></BmsBadge>
       </template>
     </BmsMenuNav>
@@ -189,5 +189,6 @@ WithAdditionalSlot.args = {
     },
   ],
   activeLink: { path: '/tutu' },
-  additionalSlot: true,
+  additional: 'Additional',
+  iconEndCustomSlot: true,
 };

package/src/components/navigation/UiMenuItem.stories.js

@@ -1,7 +1,8 @@
 import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
-import { Activity } from 'lucide-vue-next';
+import { Activity, ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
 import { vueRouter } from 'storybook-vue3-router';
 import template from '@/documentation/template_internal_component.mdx';
+import { StatusType } from '@/models';
 
 export default {
   parameters: {
@@ -9,7 +10,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/navigation/MenuItem',
+  tags: ['code-only'],
+  title: 'Composants/navigation/UiMenuItem',
   component: UiMenuItem,
   decorators: [
     vueRouter([
@@ -77,3 +79,52 @@ Active.args = {
   },
   active: true,
 };
+
+const TemplateStatus = (args) => ({
+  components: {
+    UiMenuItem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <UiMenuItem :item="args.items[0]"/>
+      <UiMenuItem :item="args.items[0]" :active="true"/>
+      <UiMenuItem :item="args.items[1]"/>
+      <UiMenuItem :item="args.items[1]" :active="true"/>
+      <UiMenuItem :item="args.items[2]"/>
+      <UiMenuItem :item="args.items[2]" :active="true"/>
+      <UiMenuItem :item="args.items[3]"/>
+      <UiMenuItem :item="args.items[3]" :active="true"/>
+    `,
+});
+
+export const WithStatusType = TemplateStatus.bind({});
+WithStatusType.args = {
+  items: [
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldAlert,
+      status: StatusType.Danger,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldAlert,
+      status: StatusType.Warning,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldCheck,
+      status: StatusType.Success,
+    },
+    {
+      label: 'Item label',
+      link: 'http://google.fr',
+      icon: ShieldOff,
+      status: StatusType.Information,
+    },
+  ],
+};

package/src/components/navigation/UiTab.stories.js

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/navigation/UiTab',
   component: UiTab,
   argTypes: {

package/src/components/navigation/UiTenantSwitcher.stories.js

@@ -7,6 +7,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/navigation/UiTenantSwitcher',
   component: UiTenantSwitcher,
 };

package/src/components/table/BmsEmptyScreen.stories.js

@@ -1,31 +1,24 @@
 import BmsEmptyScreen from '@/components/table/BmsEmptyScreen.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/table/EmptyScreen',
   component: BmsEmptyScreen,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {},
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsEmptyScreen,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <BmsEmptyScreen v-bind="args" />
   `,
 });
 
 export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
   title: 'Not found',
   description: "The requested data haven't been found",

package/src/components/table/UiBmsTable.stories.js

@@ -11,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['code-only'],
   title: 'Composants/table/UiBmsTable',
   component: UiBmsTable,
 };

package/src/components/table/UiFilterButton.stories.js

@@ -7,7 +7,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/table/FilterButton',
+  tags: ['code-only'],
+  title: 'Composants/table/UiFilterButton',
   component: UiFilterButton,
   argTypes: {},
 };
@@ -19,16 +20,10 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
-  template: `
-  <div style="display:flex">
-  <UiFilterButton v-bind="args" />
-  </div>
-  `,
+  template: `<UiFilterButton v-bind="args" />`,
 });
 
 export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {};
 
 export const activeFilters = Template.bind({});

package/src/components/utils/BmsRelativeTime.stories.js

@@ -1,6 +1,5 @@
 import BmsRelativeTime from '@/components/utils/BmsRelativeTime.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   title: 'Composants/utils/RelativeTime',
   component: BmsRelativeTime,
@@ -11,17 +10,13 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
   components: {
     BmsRelativeTime,
   },
-  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return { args };
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <div style="width: 400px; text-align: center;">
       <p>
@@ -44,5 +39,4 @@ const Template = (args) => ({
 });
 
 export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Primary.args = {};

package/src/components/feedback/Notification.stories.js

@@ -1,37 +0,0 @@
-import NotificationItem from '../../plugins/notifications/NotificationItem.vue';
-
-export default {
-  title: 'Composants/feedback/Notifications',
-  component: NotificationItem,
-};
-
-const Template = (args) => ({
-  components: {
-    NotificationItem,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <NotificationItem v-bind="args">
-    </NotificationItem>
-  `,
-});
-
-export const Sucess = Template.bind({});
-Sucess.args = {
-  notification: {
-    id: 1,
-    type: 'success',
-    text: 'Sucess',
-  },
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  notification: {
-    id: 1,
-    type: 'error',
-    text: 'Error',
-  },
-};

package/src/components/navigation/UiMenuItemStatus.stories.js

@@ -1,64 +0,0 @@
-import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
-import { ShieldAlert, ShieldCheck, ShieldOff } from 'lucide-vue-next';
-import { StatusType } from '../../models';
-import template from '@/documentation/template_internal_component.mdx';
-
-export default {
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
-  title: 'Composants/navigation/MenuItem',
-  component: UiMenuItem,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: {
-    UiMenuItem,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-      <UiMenuItem :item="args.items[0]"/>
-      <UiMenuItem :item="args.items[0]" :active="true"/>
-      <UiMenuItem :item="args.items[1]"/>
-      <UiMenuItem :item="args.items[1]" :active="true"/>
-      <UiMenuItem :item="args.items[2]"/>
-      <UiMenuItem :item="args.items[2]" :active="true"/>
-      <UiMenuItem :item="args.items[3]"/>
-      <UiMenuItem :item="args.items[3]" :active="true"/>
-    `,
-});
-
-export const WithStatusType = Template.bind({});
-WithStatusType.args = {
-  items: [
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldAlert,
-      status: StatusType.Danger,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldAlert,
-      status: StatusType.Warning,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldCheck,
-      status: StatusType.Success,
-    },
-    {
-      label: 'Item label',
-      link: 'http://google.fr',
-      icon: ShieldOff,
-      status: StatusType.Information,
-    },
-  ],
-};