@dative-gpi/foundation-shared-components 1.0.194-sandbox2 → 1.1.0-fix01

package/components/FSCard.vue

@@ -134,6 +134,10 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { emit }) {
@@ -224,7 +228,7 @@ export default defineComponent({
           ...baseStyle,
           "--fs-card-background-color": lights.light,
           "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : lights.lightContrast!
+          "--fs-card-color"           : props.clickable ? lights.dark : lights.lightContrast!
         };
       }
       
@@ -295,6 +299,9 @@ export default defineComponent({
       if (actualClickable.value) {
         classNames.push("fs-card-clickable");
       }
+      if (props.disableHoverStyle) {
+        classNames.push("fs-card-disable-hover-style");
+      }
       if (props.disabled) {
         classNames.push("fs-card-disabled");
       }

package/components/FSColor.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
@@ -26,9 +26,9 @@ export default defineComponent({
   },
   props: {
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "standard"
+      default: CardVariants.Standard
     },
     color: {
       type: String as PropType<ColorBase>,

package/components/FSColorIcon.vue

@@ -5,6 +5,7 @@
     :border="false"
     :height="actualSize"
     :width="actualSize"
+    :disableHoverStyle="true"
   >
     <FSRow
       align="center-center"

package/components/map/FSMapMarker.vue

@@ -47,30 +47,26 @@ export default {
     to: {
       type: Object as PropType<RouteLocation | null>,
       required: false
-    },
-    html: {
-      type: String,
-      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(),
@@ -80,7 +76,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),
@@ -92,7 +88,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],
@@ -106,11 +102,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
@@ -118,7 +114,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -130,11 +126,11 @@ 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);
@@ -142,7 +138,7 @@ export default {
     }, { immediate: true });
 
     watch([() => props.variant, () => props.color, () => props.selected], () => {
-      if (!actualMarker.value || !map.value) {
+      if(!actualMarker.value || !map.value) {
         return;
       }
 
@@ -151,7 +147,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;
       }
 
@@ -159,7 +155,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if (!newMarkerElement) {
+      if(!newMarkerElement) {
         return;
       }
 
@@ -168,8 +164,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,7 +5,6 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
-export * from "./useDynamicVNode";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.194-sandbox2",
+  "version": "1.1.0-fix01",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.194-sandbox2",
-    "@dative-gpi/foundation-shared-services": "1.0.194-sandbox2"
+    "@dative-gpi/foundation-shared-domain": "1.1.0-fix01",
+    "@dative-gpi/foundation-shared-services": "1.1.0-fix01"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -30,7 +30,6 @@
     "@mdi/font": "^7.4.47",
     "blurhash": "2.0.5",
     "color": "^4.2.3",
-    "echarts": "6.0.0",
     "leaflet": "1.9.4",
     "leaflet.markercluster": "1.5.3"
   },
@@ -39,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "5df5719c976317438c5031ce8f3e30ff0f9f24c6"
+  "gitHead": "278e797abb199f1bf32f7758b2eec5e101537874"
 }

package/styles/components/fs_button.scss

@@ -9,7 +9,6 @@
 
     @include clickscreen {
         &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            filter: brightness(0.8) !important;
             cursor: pointer !important;
         }
     }

package/styles/components/fs_card.scss

@@ -44,19 +44,19 @@
             border-color: var(--fs-card-active-border-color) !important;
             color: var(--fs-card-active-color) !important;
 
-            & .fs-card-clickable {
+            & .fs-card-clickable:not(.fs-card-disable-hover-style) {
                 transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
                 background-color: var(--fs-card-active-background-color);
             }
         }
 
         @include clickscreen {
-            &:not(.fs-card-disabled):hover:not(:has( .fs-stopclick:hover)) {
+            &:not(.fs-card-disabled):not(.fs-card-disable-hover-style):hover:not(:has( .fs-stopclick:hover)) {
                 background-color: var(--fs-card-hover-background-color) !important;
                 border-color: var(--fs-card-hover-border-color) !important;
                 color: var(--fs-card-hover-color) !important;
 
-                & .fs-card-clickable {
+                & .fs-card-clickable:not(.fs-card-disable-hover-style) {
                     transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
                     background-color: var(--fs-card-hover-background-color);
                 }

package/styles/components/index.scss

@@ -16,7 +16,6 @@
 @import "fs_col.scss";
 @import "fs_color_field.scss";
 @import "fs_color.scss";
-@import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";

package/composables/useDynamicVNode.ts

@@ -1,61 +0,0 @@
-import { uuidv4 } from "@dative-gpi/bones-ui";
-import { h, render, nextTick, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
-
-export function useDynamicVNode<TProps extends Record<string, any>>(component: Component) {
-  const id = uuidv4();
-
-  let vnode: VNode | null = null;
-  let container: 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) => {
-    await nextTick();
-
-    const mountPoint = document.getElementById(id);
-    if (!mountPoint) {
-      return;
-    }
-
-    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);
-    }
-    vnode = null;
-    container = null;
-  };
-
-  const sanitizeStyle = (style?: string): string =>
-    style
-      ? style.replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-      : "";
-
-  const getHtml = (style?: string) => {
-    const safeStyle = sanitizeStyle(style);
-    return `<div id="${id}"${safeStyle ? ` style="${safeStyle}"` : ""}></div>`;
-  };
-
-  onBeforeUnmount(unmount);
-
-  return {
-    mount,
-    unmount,
-    getHtml
-  };
-}

package/composables/useResize.ts

@@ -1,35 +0,0 @@
-import { onMounted, onBeforeUnmount, type Ref } from 'vue';
-import type * as echarts from 'echarts';
-
-export function useChartResize(chartInstance: Ref<echarts.ECharts | null>) {
-  let resizeObserver: ResizeObserver | null = null;
-
-  const resizeChart = () => {
-    if (chartInstance.value) {
-      chartInstance.value.resize();
-    }
-  };
-
-  onMounted(() => {
-    resizeObserver = new ResizeObserver(() => {
-      resizeChart();
-    });
-
-    const chartElement = chartInstance.value?.getDom();
-    if (chartElement) {
-      resizeObserver.observe(chartElement);
-    }
-
-    window.addEventListener('resize', resizeChart);
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    resizeObserver?.disconnect();
-    resizeObserver = null;
-  });
-
-  return {
-    resizeChart
-  };
-}

package/styles/components/fs_color_icon.scss

@@ -1,3 +0,0 @@
-.fs-color-icon {
-    cursor: pointer;
-}