@dative-gpi/foundation-shared-components 0.0.215 → 0.0.217

package/components/FSFadeOut.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/FSOptionGroup.vue

@@ -14,9 +14,10 @@
       >
         <FSOptionItem
           v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -59,9 +60,10 @@
       >
         <FSOptionItem
           v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -92,14 +94,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
-import type { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
 
 import FSOptionItem from "./FSOptionItem.vue";
 import FSSlideGroup from "./FSSlideGroup.vue";
@@ -178,6 +177,11 @@ export default defineComponent({
       required: false,
       default: "3px"
     },
+    optionPadding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     gap: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/FSOptionItem.vue

@@ -1,13 +1,12 @@
 <template>
   <FSClickable
-    padding="4px"
     :editable="$props.editable"
     :height="['32px', '28px']"
+    :padding="$props.padding"
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
     :border="false"
-    :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
   >
@@ -52,12 +51,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
@@ -99,16 +95,16 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
-    ItemWidth: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => ["32px","28px"]
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     load: {
       type: Boolean,
       required: false,
@@ -126,13 +122,6 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const width = computed((): string => {
-      if (props.label) {
-        return "fit-content";
-      }
-      return sizeToVar(varToSize(props.ItemWidth));
-    });
-
     const onClick = (event: MouseEvent) => {
       if (props.editable && !props.load) {
         emit("click", event);
@@ -141,7 +130,6 @@ export default defineComponent({
 
     return {
       colors,
-      width,
       onClick
     };
   }

package/components/map/FSMap.vue

@@ -137,7 +137,7 @@ import "leaflet.markercluster";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
-import { clusterMarker, locationMarker, myLocationMarker } from "../../utils";
+import { clusterMarkerHtml, locationMarkerHtml, myLocationMarkerHtml } from "../../utils";
 import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress, useBreakpoints } from "../../composables";
 
@@ -323,7 +323,13 @@ export default defineComponent({
     const displayLocations = () => {
       markerLayerGroup.clearLayers();
       innerModelValue.value.forEach((location) => {
-        const icon = locationMarker(location.icon, getColors(location.color).base, L);
+        const size = 36;
+        const icon = L.divIcon({
+          html: locationMarkerHtml(location.icon, getColors(location.color).base),
+          iconSize: [size, size],
+          className: 'fs-map-location',
+          iconAnchor: [size / 2, size / 2],
+        });
         const marker = LL.marker([location.address.latitude, location.address.longitude], { icon }).addTo(markerLayerGroup);
         markers[location.id] = marker;
         marker.on('click', () => emit('update:selectedLocationId', location.id));
@@ -369,7 +375,13 @@ export default defineComponent({
           showCoverageOnHover: false,
           disableClusteringAtZoom: 17,
           iconCreateFunction: function (cluster: any) {
-            return clusterMarker(cluster.getChildCount(), L);
+            const size = 36;
+            return L.divIcon({
+              html: clusterMarkerHtml(cluster.getChildCount()),
+              className: 'fs-map-location fs-map-location-full',
+              iconSize: [size, size],
+              iconAnchor: [size / 2, size / 2],
+            });
           }
         });
       }
@@ -448,7 +460,13 @@ export default defineComponent({
       map.locate();
       map.on('locationfound', (e: L.LocationEvent) => {
         map.panTo(calculateTargetPosition(e.latlng));
-        const icon = myLocationMarker(L);
+        const size= 16;
+        const icon = L.divIcon({
+          html: myLocationMarkerHtml(L),
+          className: 'fs-map-mylocation',
+          iconSize: [size, size],
+          iconAnchor: [size / 2, size / 2],
+        });
         myLocationLayerGroup.clearLayers();
         LL.marker(e.latlng, { icon }).addTo(myLocationLayerGroup);
       });
@@ -505,7 +523,7 @@ export default defineComponent({
           if (entry.target.id === `left-overlay-${mapId}`) {
             leftOverlayWidth.value = entry.contentRect.width;
           }
-          if(entry.target.id === `left-overlay-mobile-${mapId}`) {
+          if (entry.target.id === `left-overlay-mobile-${mapId}`) {
             leftOverlayHeight.value = entry.contentRect.height;
           }
         });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.215",
+  "version": "0.0.217",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.215",
-    "@dative-gpi/foundation-shared-services": "0.0.215"
+    "@dative-gpi/foundation-shared-domain": "0.0.217",
+    "@dative-gpi/foundation-shared-services": "0.0.217"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0d0aafb99e7a818b3606c3ac8bea917213e389ad"
+  "gitHead": "fc671993afed7c9953bf4325f4788592d280cda7"
 }

package/utils/leafletMarkers.ts

@@ -1,38 +1,23 @@
-export const locationMarker = (icon: string, color: string, L: any, size = 36) => {
+export const locationMarkerHtml = (icon: string, color: string) => {
   const iconHtml = `
   <div style="--fs-map-mylocation-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
     <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
-  return L.divIcon({
-    html: iconHtml,
-    iconSize: [size, size],
-    className: 'fs-map-location',
-    iconAnchor: [size / 2, size / 2],
-  });
+  return iconHtml;
 }
 
-export const clusterMarker = (label: string, L: any, size = 36) => {
+export const clusterMarkerHtml = (label: string) => {
   const iconHtml = `
   <div class="fs-map-cluster">
     <span>${label}</span>
   </div>`;
 
-  return L.divIcon({
-    html: iconHtml,
-    className: 'fs-map-location fs-map-location-full',
-    iconSize: [size, size],
-    iconAnchor: [size / 2, size / 2],
-  })
+  return iconHtml;
 }
 
-export const myLocationMarker = (L: any, size = 16) => {
+export const myLocationMarkerHtml = () => {
   const iconHtml = `<div class="fs-map-mylocation-pin" />`;
 
-  return L.divIcon({
-    html: iconHtml,
-    className: 'fs-map-mylocation',
-    iconSize: [size, size],
-    iconAnchor: [size / 2, size / 2],
-  });
+  return iconHtml;
 }