Merge pull request #700 from Dative-GPI/features/groupings-v2

menu ChipsGroup is back

Author: peyronth

dev/storybook/src/stories/shared/ChipGroup.stories.ts

@@ -40,31 +40,35 @@ export const Wrap: Story = {
   })
 }
 
-export const MaxItems: Story = {
+export const Menu: Story = {
   render: () => ({
     components: { FSChipGroup, FSSubgroupingChip, FSText },
     template: `
     <div style="display: flex; flex-direction: column; gap: 20px;">
       <FSText font="text-h3"> With labels (maxItems=1) </FSText>
       <FSChipGroup
+        variant="menu"
         :items="['Bâtiment', 'Usage énergétique', 'Remontées mécaniques', 'Parking']"
         :maxItems="1"
       />
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText font="text-h3"> With labels (single, maxItems=1) </FSText>
       <FSChipGroup
+        variant="menu"
         :items="['Bâtiment']"
         :maxItems="1"
       />
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText font="text-h3"> With labels (maxItems=2) </FSText>
       <FSChipGroup
+        variant="menu"
         :items="['Bâtiment', 'Usage énergétique', 'Remontées mécaniques', 'Parking']"
         :maxItems="2"
       />
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText font="text-h3"> With slot item.chip (maxItems=1) </FSText>
       <FSChipGroup
+        variant="menu"
         :items="[
           { groupingIcon: 'mdi-flash', groupingLabel: 'Usage énergétique', groupingColor: '#FF9800', icon: 'mdi-office-building', label: 'Bâtiment' },
           { groupingIcon: 'mdi-office-building', groupingLabel: 'Bâtiment', groupingColor: '#2196F3', icon: 'mdi-flash', label: 'Usage énergétique' },
@@ -86,6 +90,7 @@ export const MaxItems: Story = {
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText font="text-h3"> Without maxItems (all visible) </FSText>
       <FSChipGroup
+        variant="menu"
         :items="['Bâtiment', 'Usage énergétique', 'Remontées mécaniques', 'Parking']"
       />
     </div>`

src/core/foundation-core-components/components/lists/subgroupings/FSSubgroupingsChipGroup.vue

@@ -3,6 +3,7 @@
     v-if="$props.subgroupings && $props.subgroupings.length > 0"
     :items="$props.subgroupings"
     :maxItems="$props.maxItems"
+    :variant="$props.variant"
   >
     <template
       #item.chip="{ item }"
@@ -28,6 +29,7 @@ import type { SubgroupingInfos } from "@dative-gpi/foundation-core-domain/models
 
 import FSSubgroupingChip from "@dative-gpi/foundation-shared-components/components/FSSubgroupingChip.vue";
 import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
+import { ChipGroupVariants, type ChipGroupVariant } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSSubgroupingsChipGroup",
@@ -48,7 +50,12 @@ export default defineComponent({
       type: Number as PropType<number | null>,
       required: false,
       default: 1
-    }
+    },
+    variant: {
+      type: String as PropType<ChipGroupVariant>,
+      required: false,
+      default: ChipGroupVariants.Menu
+    },
   }
 });
 </script>

src/shared/foundation-shared-components/components/FSChipGroup.vue

@@ -1,7 +1,49 @@
 <template>
   <FSWrapGroup
-    v-if="$props.variant === 'wrap' && $props.items"
+    v-if="$props.variant == ChipGroupVariants.Wrap"
     v-bind="$attrs"
+  >
+    <template
+      v-for="(item, index) in $props.items"
+      :key="index"
+    >
+      <slot
+        name="item.chip"
+        v-bind="{ index, item }"
+      >
+        <FSChip
+          :variant="$props.chipVariant"
+          :color="$props.color"
+          :label="item.label ?? item"
+        />
+      </slot>
+    </template>
+    <slot />
+  </FSWrapGroup>
+  <FSSlideGroup
+    v-else-if="$props.variant == ChipGroupVariants.Slide"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(item, index) in $props.items"
+      :key="index"
+    >
+      <slot
+        name="item.chip"
+        v-bind="{ index, item }"
+      >
+        <FSChip
+          :variant="$props.chipVariant"
+          :color="$props.color"
+          :label="item.label ?? item"
+        />
+      </slot>
+    </template>
+    <slot />
+  </FSSlideGroup>
+  <FSRow
+    v-else-if="$props.variant == ChipGroupVariants.Menu && $props.items"
+    :wrap="false"
   >
     <template
       v-for="(item, index) in $props.items.slice(0, $props.maxItems ?? $props.items.length)"
@@ -70,28 +112,7 @@
       </FSCard>
     </FSMenu>
     <slot />
-  </FSWrapGroup>
-  <FSSlideGroup
-    v-else-if="$props.variant === 'slide'"
-    v-bind="$attrs"
-  >
-    <template
-      v-for="(item, index) in $props.items"
-      :key="index"
-    >
-      <slot
-        name="item.chip"
-        v-bind="{ index, item }"
-      >
-        <FSChip
-          :variant="$props.chipVariant"
-          :color="$props.color"
-          :label="item.label ?? item"
-        />
-      </slot>
-    </template>
-    <slot />
-  </FSSlideGroup>
+  </FSRow>
 </template>
 
   <script lang="ts">
@@ -106,6 +127,7 @@ import FSChip from "./FSChip.vue";
 import FSCard from "./FSCard.vue";
 import FSMenu from "./FSMenu.vue";
 import FSCol from "./FSCol.vue";
+
 import { useColors } from "../composables";
   
 export default defineComponent({
@@ -156,6 +178,7 @@ export default defineComponent({
 
     return {
       menuActivatorColor,
+      ChipGroupVariants,
       ColorEnum,
       menuOpen
     };

src/shared/foundation-shared-components/models/variants.ts

@@ -25,8 +25,9 @@ export enum DialogMultiFormModes {
   Hidden = "hidden"
 }
 
-export type ChipGroupVariant = "wrap" | "slide";
+export type ChipGroupVariant = "wrap" | "slide" | "menu";
 export enum ChipGroupVariants {
   Wrap = "wrap",
-  Slide = "slide"
+  Slide = "slide",
+  Menu = "menu"
 }