@dative-gpi/foundation-shared-components 1.1.3-groupings → 1.1.3-sandbox-1

package/components/FSChipGroup.vue

@@ -13,7 +13,7 @@
     <slot />
   </FSWrapGroup>
   <FSSlideGroup
-    v-else-if="$props.variant === 'slide'"
+    v-if="$props.variant === 'slide'"
     v-bind="$attrs"
   >
     <FSChip
@@ -25,103 +25,23 @@
     />
     <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, ref, type PropType, useSlots, computed, type VNode } from "vue";
+import { defineComponent, type PropType } 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,
-    FSButton,
-    FSChip,
-    FSCard,
-    FSMenu,
-    FSCol,
-    FSRow
+    FSChip
   },
   props: {
     labels: {
@@ -130,7 +50,7 @@ export default defineComponent({
       default: () => []
     },
     variant: {
-      type: String as PropType<"wrap" | "slide" | "menu">,
+      type: String as PropType<"wrap" | "slide">,
       required: false,
       default: "wrap"
     },
@@ -144,45 +64,6 @@ 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/map/FSMapMarker.vue

@@ -48,26 +48,30 @@ 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(),
@@ -77,7 +81,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),
@@ -89,7 +93,7 @@ export default {
 
       const size = 16;
       return divIcon({
-        html: pinMarkerHtml(getColors(props.color).base, props.label),
+        html: props.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],
@@ -103,11 +107,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
@@ -115,7 +119,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if(props.to) {
+      if (props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -127,19 +131,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], () => {
-      if(!actualMarker.value || !map.value) {
+    watch([() => props.variant, () => props.color, () => props.selected, () => props.html], () => {
+      if (!actualMarker.value || !map.value) {
         return;
       }
 
@@ -148,7 +152,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;
       }
 
@@ -156,7 +160,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if(!newMarkerElement) {
+      if (!newMarkerElement) {
         return;
       }
 
@@ -165,8 +169,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/composables/index.ts

@@ -5,8 +5,10 @@ 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/composables/useDynamicVNode.ts

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,32 @@
+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
+  };
+}

package/package.json

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

package/components/FSGroupingChip.vue

@@ -1,110 +0,0 @@
-<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

@@ -1,135 +0,0 @@
-<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/FSSubgroupingTileUI.vue

@@ -1,45 +0,0 @@
-<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>