@dative-gpi/foundation-shared-components 1.1.3-sandbox-1 → 1.1.4-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,106 @@
     />
     <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"
+      >
+        <template
+          #top-right
+        >
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            iconSize="18px"
+            :color="ColorEnum.Dark"
+            @click="menuOpen = false"
+          />
+        </template>
+        <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 +133,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 +147,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/FSGroupingChip.vue

@@ -0,0 +1,116 @@
+<template>
+  <FSChip
+    :height="$props.height"
+    :width="$props.width"
+    :variant="$props.variant"
+    :color="borderColor"
+    :disableHoverStyle="$props.disableHoverStyle"
+  >
+    <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 CardVariant, CardVariants, 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<CardVariant>,
+      required: false,
+      default: CardVariants.Background
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "18px"
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  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,138 @@
+<template>
+  <FSChip
+    :color="borderColor"
+    :width="$props.width"
+    :height="$props.height"
+    :variant="$props.variant"
+    :disableHoverStyle="$props.disableHoverStyle"
+    :title="`${$props.groupingLabel} - ${$props.label}`"
+  >
+    <FSRow
+      align="center-left"
+      width="fill"
+      :wrap="false"
+    >
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="$props.groupingColor"
+          :size="$props.iconSize"
+        >
+          {{ $props.groupingIcon }}
+        </FSIcon>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.groupingLabel }}
+        </FSSpan>
+      </FSRow>
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :size="$props.iconSize"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </FSRow>
+    </FSRow>
+  </FSChip>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSChip from "./FSChip.vue";
+import FSRow from "./FSRow.vue";
+
+import { useColors } from "../composables";
+
+export default defineComponent({
+  name: "FSSubgroupingChip",
+  components: {
+    FSChip,
+    FSIcon,
+    FSSpan,
+    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<CardVariant>,
+      required: false,
+      default: CardVariants.Background
+    },
+    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"
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    
+    const borderColor = getColors(props.color).dark;
+
+    return {
+      borderColor,
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -97,6 +97,14 @@
             :filters="filters[header.value]"
             @update:filter="(value) => toggleFilter(header.value, value)"
           >
+            <template
+              #custom="{ filter, toggle, variant }"
+            >
+              <slot
+                :name="`${filterSlot(header)}-custom`"
+                v-bind="{ filter, toggle, variant }"
+              />
+            </template>
             <template
               #default="{ filter }"
             >

package/components/lists/FSFilterButton.vue

@@ -57,27 +57,35 @@
           <FSCol
             gap="6px"
           >
-            <FSChip
+            <template
               v-for="(filter, index) in searchedFilters"
-              class="fs-filter-button-chip"
-              :variant="getVariant(filter)"
-              :height="['30px', '24px']"
-              :color="$props.color"
-              :label="filter.text"
-              align="center-left"
-              :clickable="true"
-              :border="false"
               :key="index"
-              @click="() => onToggle(filter)"
             >
-              <template
-                #default
+              <slot
+                name="custom"
+                v-bind="{ filter, toggle: () => onToggle(filter), variant: getVariant(filter) }"
               >
-                <slot
-                  v-bind="{ filter }"
-                />
-              </template>
-            </FSChip>
+                <FSChip
+                  class="fs-filter-button-chip"
+                  :variant="getVariant(filter)"
+                  :height="['30px', '24px']"
+                  :color="$props.color"
+                  :label="filter.text"
+                  align="center-left"
+                  :clickable="true"
+                  :border="false"
+                  @click="() => onToggle(filter)"
+                >
+                  <template
+                    #default
+                  >
+                    <slot
+                      v-bind="{ filter }"
+                    />
+                  </template>
+                </FSChip>
+              </slot>
+            </template>
           </FSCol>
         </FSFadeOut>
       </FSCol>

package/components/map/FSMapMarker.vue

@@ -48,30 +48,26 @@ export default {
     to: {
       type: Object as PropType<RouteLocation | null>,
       required: false
-    },
-    html: {
-      type: [String, HTMLElement] as PropType<string | HTMLElement>,
-      required: false
     }
   },
   emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
     const { handleRoutingEvent } = useRouting();
 
-    if (!map) {
+    if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
     }
 
-    if (!map.value) {
+    if(!map.value) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
     }
-
+      
     const getMarkerIcon = () => {
-      if (props.variant === 'gps') {
+      if(props.variant === 'gps') {
         const size = 16;
         return divIcon({
           html: gpsMarkerHtml(),
@@ -81,7 +77,7 @@ export default {
         });
       }
 
-      if (props.variant === 'location') {
+      if(props.variant === 'location') {
         const size = 36;
         return divIcon({
           html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
@@ -93,7 +89,7 @@ export default {
 
       const size = 16;
       return divIcon({
-        html: props.html ?? pinMarkerHtml(getColors(props.color).base, props.label),
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
         iconSize: [size, size],
         className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
         iconAnchor: [size / 2, size / 2],
@@ -107,11 +103,11 @@ export default {
     });
 
     const onClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to, true);
         return;
       }
-
+      
       emit('click', {
         ...event,
         latlng: props.latlng
@@ -119,7 +115,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -131,19 +127,19 @@ export default {
     }
 
     watch(map, () => {
-      if (!map.value) {
+      if(!map.value) {
         return;
       }
 
-      if (markerClusterGroup && markerClusterGroup.value) {
+      if(markerClusterGroup && markerClusterGroup.value) {
         actualMarker.value.addTo(markerClusterGroup.value);
       } else {
         actualMarker.value.addTo(map.value);
       }
     }, { immediate: true });
 
-    watch([() => props.variant, () => props.color, () => props.selected, () => props.html], () => {
-      if (!actualMarker.value || !map.value) {
+    watch([() => props.variant, () => props.color, () => props.selected], () => {
+      if(!actualMarker.value || !map.value) {
         return;
       }
 
@@ -152,7 +148,7 @@ export default {
     });
 
     watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
-      if (!actualMarker.value || !map.value || !props.latlng) {
+      if(!actualMarker.value || !map.value || !props.latlng) {
         return;
       }
 
@@ -160,7 +156,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if (!newMarkerElement) {
+      if(!newMarkerElement) {
         return;
       }
 
@@ -169,8 +165,8 @@ export default {
     }, { immediate: true });
 
     onUnmounted(() => {
-      if (actualMarker.value && map.value) {
-        if (markerClusterGroup && markerClusterGroup.value) {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
           markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
         } else {
           map.value.removeLayer(actualMarker.value as Marker);

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/composables/index.ts

@@ -5,10 +5,8 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
-export * from "./useDynamicVNode";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
-export * from "./useResize";
 export * from "./useRules";
 export * from "./useSlots";
 export * from "./useTables";

package/models/tables.ts

@@ -26,6 +26,7 @@ export interface FSDataTableFilter {
   text: string;
   value: string;
   hidden: boolean;
+  custom?: boolean;
   filter?: ((value: any, property: any, item: any) => boolean) | null;
 }
 

package/package.json

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

package/styles/components/fs_filter_button.scss

@@ -1,5 +1,10 @@
 .fs-filter-button-menu {
-    width: 300px;
+    max-width: 400px;
+    overflow: hidden;
+}
+
+.fs-filter-button-menu * {
+    min-width: 0;
 }
 
 .fs-filter-button-chip {

package/composables/useDynamicVNode.ts

@@ -1,62 +0,0 @@
-import { h, render, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
-
-export function useDynamicVNode<TProps extends Record<string, any>>(component: Component<TProps>) {
-
-  let vnode: VNode | null = null;
-  let container: HTMLElement | null = null;
-  let mountPoint: HTMLElement | null = null;
-
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("useDynamicVNode must be used inside setup()");
-  }
-
-  const appContext = instance.appContext;
-
-  const mount = async (props: TProps) => {
-    if (!mountPoint) {
-      throw new Error(`You must call getElement() first to create the mount point`);
-    }
-
-    if (!container) {
-      container = document.createElement("div");
-      mountPoint.appendChild(container);
-    }
-
-    vnode = h(component, props);
-    vnode.appContext = appContext;
-
-    render(vnode, container);
-  };
-
-  const unmount = () => {
-    if (container) {
-      render(null, container);
-      container.remove();
-    }
-    vnode = null;
-    container = null;
-  };
-
-  const getElement = (style?: Partial<CSSStyleDeclaration>): HTMLElement => {
-    if (!mountPoint) {
-      mountPoint = document.createElement("div");
-    }
-    mountPoint = document.createElement("div");
-    Object.assign(mountPoint.style, style ?? {});
-    return mountPoint;
-  };
-
-  const destroy = () => {
-    unmount();
-    mountPoint = null;
-  };
-
-  onBeforeUnmount(destroy);
-
-  return {
-    mount,
-    unmount,
-    getElement
-  };
-}

package/composables/useResize.ts

@@ -1,32 +0,0 @@
-import { onMounted, onBeforeUnmount } from 'vue';
-
-export function useResize(
-  getElement: () => HTMLElement | null | undefined,
-  onResize: () => void
-) {
-  let resizeObserver: ResizeObserver | null = null;
-
-  onMounted(() => {
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => {
-        onResize();
-      });
-      const element = getElement();
-      if (element) {
-        resizeObserver.observe(element);
-      }
-    }
-
-    window.addEventListener('resize', onResize);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', onResize);
-    resizeObserver?.disconnect();
-    resizeObserver = null;
-  });
-
-  return {
-    resize: onResize
-  };
-}