@dative-gpi/foundation-shared-components 1.1.2-fix-dialog-menu → 1.1.3-groupings

package/components/FSChipGroup.vue

@@ -13,7 +13,7 @@
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-if="$props.variant === 'slide'"
+    v-else-if="$props.variant === 'slide'"
     v-bind="$attrs"
   >
     <FSChip
@@ -25,23 +25,103 @@
     />
     <slot />
   </FSSlideGroup>
+  <FSRow
+    v-else-if="$props.variant === 'menu'"
+    align="center-left"
+    width="hug"
+    :wrap="false"
+    v-bind="$attrs"
+  >
+    <component
+      v-if="hasSlots"
+      :is="slotElements[0]"
+    />
+    <FSChip
+      v-else
+      :variant="$props.chipVariant"
+      :color="$props.color"
+      :label="menuLabels[0]"
+    />
+    <FSMenu
+      v-if="slotElements.length > 1 || menuLabels.length > 1"
+      location="bottom end"
+      v-model="menuOpen"
+    >
+      <template
+        #activator="{ props: activatorProps }"
+      >
+        <FSChip
+          v-bind="activatorProps"
+          variant="full"
+          :label="`+${hasSlots ? (slotElements.length - 1) : (menuLabels.length - 1)}`"
+          :color="menuActivatorColor"
+          :clickable="true"
+        />
+      </template>
+      <FSCard
+        padding="16px 24px"
+      >
+        <FSButton
+          style="position: absolute;top:3px;right:3px;"
+          icon="mdi-close"
+          variant="icon"
+          iconSize="18px"
+          :color="ColorEnum.Dark"
+          @click="menuOpen = false"
+        />
+        <FSCol
+          v-if="hasSlots"
+          gap="12px"
+        >
+          <component
+            v-for="(element, index) in slotElements.slice(1)"
+            :key="index"
+            :is="element"
+          />
+        </FSCol>
+        <FSCol
+          v-else
+          gap="12px"
+        >
+          <FSChip
+            v-for="(label, index) in menuLabels"
+            :key="index"
+            :variant="$props.chipVariant"
+            :color="$props.color"
+            :label="label"
+          />
+        </FSCol>
+      </FSCard>
+    </FSMenu>
+  </FSRow>
 </template>
   
   <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, ref, type PropType, useSlots, computed, type VNode } from "vue";
   
 import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
   
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
+import FSButton from "./FSButton.vue";
 import FSChip from "./FSChip.vue";
+import FSCard from "./FSCard.vue";
+import FSMenu from "./FSMenu.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+import { useColors } from "../composables";
   
 export default defineComponent({
   name: "FSChipGroup",
   components: {
     FSSlideGroup,
     FSWrapGroup,
-    FSChip
+    FSButton,
+    FSChip,
+    FSCard,
+    FSMenu,
+    FSCol,
+    FSRow
   },
   props: {
     labels: {
@@ -50,7 +130,7 @@ export default defineComponent({
       default: () => []
     },
     variant: {
-      type: String as PropType<"wrap" | "slide">,
+      type: String as PropType<"wrap" | "slide" | "menu">,
       required: false,
       default: "wrap"
     },
@@ -64,6 +144,45 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     }
+  },
+  setup(props) {
+    const slots = useSlots();
+    const { getColors } = useColors();
+    const menuOpen = ref(false);
+
+    const slotElements = computed((): VNode[] => {
+      const defaultSlot = slots.default?.();
+      if (!defaultSlot) {
+        return [];
+      }
+      return defaultSlot.flatMap(node => {
+        if (node.type === Symbol.for('v-fgt')) {
+          return (node.children as VNode[]) ?? [];
+        }
+        return [node];
+      }).filter(node => typeof node.type !== 'symbol');
+    });
+
+    const hasSlots = computed((): boolean => {
+      return slotElements.value.length > 0;
+    });
+
+    const menuLabels = computed((): string[] => {
+      return props.labels ?? [];
+    });
+
+    const menuActivatorColor = computed((): string => {
+      return getColors(props.color).dark;
+    });
+
+    return {
+      menuActivatorColor,
+      slotElements,
+      menuLabels,
+      ColorEnum,
+      hasSlots,
+      menuOpen
+    };
   }
 });
   </script>

package/components/FSDialogMenu.vue

@@ -10,26 +10,18 @@
       :color="$props.color"
       :class="classes"
     >
-      <template
-        #default="slotData"
-      >
+      <FSCol>
         <slot
-          v-if="$slots.body"
           name="body"
-          v-bind="slotData"
-        />
-        <slot
-          v-else
-          name="default"
-          v-bind="slotData"
         />
-      </template>
+      </FSCol>
       <template
-        v-if="$slots['top-right']"
-        #top-right
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
       >
         <slot
-          name="top-right"
+          :name="name"
+          v-bind="slotData"
         />
       </template>
     </FSCard>
@@ -43,11 +35,13 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
 
 export default defineComponent({
   name: "FSDialogMenu",
   components: {
-    FSCard
+    FSCard,
+    FSCol
   },
   props: {
     classes: {

package/components/FSDialogMultiFormBody.vue

@@ -104,7 +104,7 @@
 import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type DialogMultiFormMode, DialogMultiFormModes, type DialogMultiFormVariant } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSPagination from "./FSPagination.vue";
@@ -118,6 +118,7 @@ import FSTabs from "./FSTabs.vue";
 import FSTab from "./FSTab.vue";
 import FSIcon from "./FSIcon.vue";
 import FSWindow from "./FSWindow.vue";
+import { DialogMultiFormVariants } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
@@ -146,9 +147,9 @@ export default defineComponent({
       default: "auto"
     },
     variant: {
-      type: String as PropType<"standard" | "submit">,
+      type: String as PropType<DialogMultiFormVariant>,
       required: false,
-      default: "submit"
+      default: DialogMultiFormVariants.Submit
     },
     steps: {
       type: Number,
@@ -225,9 +226,9 @@ export default defineComponent({
       default: false
     },
     mode: {
-      type: String as PropType<"pagination" | "tabs">,
+      type: String as PropType<DialogMultiFormMode>,
       required: false,
-      default: "pagination"
+      default: DialogMultiFormModes.Pagination
     },
     tabsColor: {
       type: String as PropType<ColorBase>,

package/components/FSGroupingChip.vue

@@ -0,0 +1,110 @@
+<template>
+  <FSChip
+    :height="$props.height"
+    :width="$props.width"
+    :variant="$props.variant"
+    :color="borderColor"
+  >
+    <FSRow
+      align="center-center"
+      width="hug"
+      :wrap="false"
+    >
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="$props.iconColor"
+          :size="$props.iconSize"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSText
+          font="text-overline"
+          :color="textColor"
+        >
+          {{ $props.label }}
+        </FSText>
+      </FSRow>
+    </FSRow>
+  </FSChip>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSChip from "./FSChip.vue";
+import FSRow from "./FSRow.vue";
+
+import { useColors } from "../composables";
+
+export default defineComponent({
+  name: "FSSubgroupingChip",
+  components: {
+    FSChip,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [24, 20]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    variant: {
+      type: String as PropType<"standard" | "full" | "borderless">,
+      required: false,
+      default: "standard"
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "18px"
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    
+    const borderColor = getColors(props.color).dark;
+    const textColor = getColors(ColorEnum.Dark).dark;
+
+    return {
+      borderColor,
+      textColor,
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/FSSubgroupingChip.vue

@@ -0,0 +1,135 @@
+<template>
+  <FSChip
+    :height="$props.height"
+    :width="$props.width"
+    :variant="$props.variant"
+    :color="borderColor"
+  >
+    <FSRow
+      align="center-center"
+      width="hug"
+      :wrap="false"
+    >
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="$props.groupingColor"
+          :size="$props.iconSize"
+        >
+          {{ $props.groupingIcon }}
+        </FSIcon>
+        <FSText
+          font="text-overline"
+          :color="textColor"
+        >
+          {{ $props.groupingLabel }}
+        </FSText>
+      </FSRow>
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :size="$props.iconSize"
+          :color="textColor"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSText
+          font="text-overline"
+          :color="textColor"
+        >
+          {{ $props.label }}
+        </FSText>
+      </FSRow>
+    </FSRow>
+  </FSChip>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSChip from "./FSChip.vue";
+import FSRow from "./FSRow.vue";
+import { useColors } from "../composables";
+
+export default defineComponent({
+  name: "FSSubgroupingChip",
+  components: {
+    FSChip,
+    FSIcon,
+    FSText,
+    FSRow
+  },
+  props: {
+    groupingLabel: {
+      type: String as PropType<string>,
+      required: true
+    },
+    groupingIcon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    groupingColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [24, 20]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
+    variant: {
+      type: String as PropType<"standard" | "full" | "borderless">,
+      required: false,
+      default: "standard"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "18px"
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    
+    const borderColor = getColors(props.color).dark;
+    const textColor = getColors(ColorEnum.Dark).dark;
+
+    return {
+      borderColor,
+      textColor,
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/tiles/FSPlaylistTileUI.vue

@@ -14,11 +14,11 @@
         gap="16px"
         width="fill"
       >
-        <FSText
+        <FSSpan
           font="text-button"
         >
           {{ $props.label }}
-        </FSText>
+        </FSSpan>
         <FSRow
           :wrap="false"
           align="center-left"
@@ -26,11 +26,11 @@
           <FSIcon>
             mdi-view-dashboard-outline
           </FSIcon>
-          <FSText
+          <FSSpan
             font="text-overline"
           >
             {{ $tr('ui.dashboards.dynamic', '{0} dashboard(s)', $props.dashboardsCount) }}
-          </FSText>
+          </FSSpan>
         </FSRow>
         <FSRow
           :wrap="false"
@@ -40,18 +40,18 @@
             variant="fill"
             :value="automaticTransition"
           />
-          <FSText
+          <FSSpan
             font="text-overline"
             v-if="automaticTransition"
           >
             {{$tr('ui.playlist.transition-delay.dynamic', 'Transition : {0}', getTimeBestString($props.delay ?? 0))}}
-          </FSText>
-          <FSText
+          </FSSpan>
+          <FSSpan
             font="text-overline"
             v-else
           >
             {{ $tr('ui.playlist.automatic-transition', 'Automatic transition') }}
-          </FSText>
+          </FSSpan>
         </FSRow>
         <FSRow
           :wrap="false"
@@ -61,11 +61,11 @@
             variant="fill"
             :value="$props.looped"
           />
-          <FSText
+          <FSSpan
             font="text-overline"
           >
             {{ $tr('entity.playlist.looped', 'Looped') }}
-          </FSText>
+          </FSSpan>
         </FSRow>
       </FSCol>
       <slot
@@ -85,7 +85,7 @@ import { getTimeBestString } from "@dative-gpi/foundation-shared-components/util
 import FSIconCheck from "../FSIconCheck.vue";
 import FSTile from "../tiles/FSTile.vue";
 import FSIcon from "../FSIcon.vue";
-import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
@@ -95,7 +95,7 @@ export default defineComponent({
     FSIconCheck,
     FSIcon,
     FSTile,
-    FSText,
+    FSSpan,
     FSRow,
     FSCol
   },

package/components/tiles/FSSubgroupingTileUI.vue

@@ -0,0 +1,45 @@
+<template>
+  <FSSimpleTileUI
+    :bottomColor="null"
+    v-bind="$attrs"
+  >
+    <template
+      #append-info
+    >
+      <FSEntityCountBadge
+        :label="$tr('ui.common.equipments', 'Équipements')"
+        :count="$props.deviceOrganisationsCount ?? 0"
+        :color="ColorEnum.Primary"
+      />
+    </template>
+  </FSSimpleTileUI>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSEntityCountBadge from "./FSEntityCountBadge.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
+
+export default defineComponent({
+  name: "FSSubgroupingTileUI",
+  components: {
+    FSSimpleTileUI,
+    FSEntityCountBadge
+  },
+  props: {
+    deviceOrganisationsCount: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  setup() {
+    return {
+      ColorEnum,
+    };
+  }
+});
+</script>

package/models/variants.ts

@@ -10,4 +10,17 @@ export type SnackbarVariant = "standard" | "full";
 export enum SnackbarVariants {
   Standard = "standard",
   Full = "full"
+}
+
+export type DialogMultiFormVariant = "standard" | "submit";
+export enum DialogMultiFormVariants {
+  Standard = "standard",
+  Submit = "submit"
+}
+
+export type DialogMultiFormMode = "pagination" | "tabs" | "hidden";
+export enum DialogMultiFormModes {
+  Pagination = "pagination",
+  Tabs = "tabs",
+  Hidden = "hidden"
 }

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.2-fix-dialog-menu",
+  "version": "1.1.3-groupings",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.2-fix-dialog-menu",
-    "@dative-gpi/foundation-shared-services": "1.1.2-fix-dialog-menu"
+    "@dative-gpi/foundation-shared-domain": "1.1.3-groupings",
+    "@dative-gpi/foundation-shared-services": "1.1.3-groupings"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8e2aaaa5517eef8d6488fe114d9dbd782a91d13d"
+  "gitHead": "ad40c30f9ecd5b50de62619fa3cfab64e63d7cc5"
 }