@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/tiles/FSDashboardOrganisationTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,11 +7,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTileUI",
@@ -28,7 +30,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDashboardOrganisationTypeTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,11 +7,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardOrganisationTypeTileUI",
@@ -28,7 +30,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDashboardShallowTileUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
     :bottomColor="color"
     :icon="$props.icon"
     v-bind="$attrs"
@@ -7,11 +7,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSDashboardShallowTileUI",
@@ -28,7 +30,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Primary"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -63,9 +64,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import type { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
@@ -140,7 +142,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -189,13 +196,6 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
 
     return {
       carouselDeviceStatuses,
@@ -204,7 +204,6 @@ export default defineComponent({
       singleModelStatuses,
       ColorEnum,
       imageSize,
-      infoWidth
     };
   }
 });

package/components/tiles/FSFolderTileUI.vue

@@ -1,18 +1,20 @@
 <template>
-  <FSSimpleIconTileUI
+  <FSSimpleTileUI
+    :iconBackgroundColor="true"
     :bottomColor="color"
     :icon="$props.icon"
-    :iconBackgroundColor="true"
     v-bind="$attrs"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSimpleIconTileUI from "./FSSimpleIconTileUI.vue";
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
 
 export default defineComponent({
   name: "FSFolderTileUI",
@@ -29,7 +31,7 @@ export default defineComponent({
     }
   },
   components: {
-    FSSimpleIconTileUI
+    FSSimpleTileUI
   },
   setup(props){
     const color = computed(() => {

package/components/tiles/FSGroupTileUI.vue

@@ -3,6 +3,7 @@
     :bottomColor="ColorEnum.Error"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,10 +18,10 @@
       >
         <FSCol
           gap="12px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSCol
             gap="6px"
-            :width="infoWidth"
           >
             <FSText
               font="text-button"
@@ -100,7 +101,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -139,12 +141,12 @@ export default defineComponent({
       default: null
     },
     recursiveGroupsIds: {
-      type: Array as PropType<String[]>,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => []
     },
     recursiveDeviceOrganisationsIds: {
-      type: Array as PropType<String[]>,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => []
     },
@@ -157,7 +159,12 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -174,20 +181,11 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       ColorEnum,
       groupsLabel,
       deviceOrganisationsLabel,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/{FSSimpleIconTileUI.vue → FSSimpleTileUI.vue}

@@ -3,6 +3,7 @@
     :bottomColor="$props.bottomColor"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
+    :width="$props.width"
     v-bind="$attrs"
   >
     <FSCol
@@ -17,6 +18,7 @@
       >
         <FSCol
           gap="6px"
+          :width="`calc(100% - ${imageSize}px - 24px)`"
         >
           <FSText
             font="text-button"
@@ -31,7 +33,14 @@
             {{ $props.code }}
           </FSText>
         </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :height="imageSize"
+          :width="imageSize"
+          :imageId="$props.imageId"
+        />
         <FSIconCard
+          v-else
           :backgroundColor="iconBackgroundColor"
           :icon="$props.icon"
           :size="imageSize"
@@ -42,23 +51,27 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIconCard from "../FSIconCard.vue";
+import FSImage from "../FSImage.vue";
 import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
-  name: "FSSimpleIconTileUI",
+  name: "FSSimpleTileUI",
   components: {
     FSIconCard,
-    FSText,
+    FSImage,
     FSTile,
+    FSText,
     FSCol,
     FSRow
   },
@@ -93,11 +106,21 @@ export default defineComponent({
       required: false,
       default: "mdi-ab-testing"
     },
+    imageId: {
+      type: String as PropType<string>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
       default: true
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
@@ -110,19 +133,10 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.icon) {
-        width -= imageSize.value;
-      }
-      return width;
-    });
-
     return {
       iconBackgroundColor,
       ColorEnum,
-      imageSize,
-      infoWidth
+      imageSize
     };
   }
 });

package/components/tiles/FSTile.vue

@@ -5,7 +5,6 @@
     class="fs-tile"
     padding="12px"
     :height="height"
-    :width="width"
     :style="style"
     :href="$props.href"
     :to="$props.to"
@@ -33,7 +32,6 @@
     class="fs-tile"
     padding="12px"
     :style="style"
-    :width="width"
     :height="height"
     v-bind="$attrs"
   >
@@ -58,11 +56,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation } from "vue-router";
+import type { PropType, StyleValue } from "vue";
+import { computed, defineComponent } from "vue";
+import type { RouteLocation } from "vue-router";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -107,7 +106,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (props.bottomColor) {
         const bottomColors = getGradients(props.bottomColor);
         return {
@@ -117,17 +116,12 @@ export default defineComponent({
       return {};
     });
 
-    const width = computed(() => {
-      return isMobileSized.value ? 336 : 352;
-    });
-
     const height = computed(() => {
       return isMobileSized.value ? 156 : 170;
     });
 
     return {
       height,
-      width,
       style
     };
   }

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -55,7 +55,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";

package/components/toggleSets/FSToggleSetPosition.vue

@@ -0,0 +1,61 @@
+<template>
+  <FSToggleSet
+    :values="positions"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSToggleSet>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import type { PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { Position } from "@dative-gpi/foundation-shared-domain/models";
+
+export default defineComponent({
+  name: "FSToggleSetPosition",
+  props: {
+    modelValue: {
+      type: Number as PropType<Position>,
+      required: false,
+      default: Position.Abscissa
+    },
+    useNone: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const positions = computed((): { id: Position; label: string }[] => {
+      const items = [
+        { id: Position.Abscissa, label: $tr("ui.position.abscissa", "Right") },
+        { id: Position.Ordinate, label: $tr("ui.position.ordinate", "Bottom") }
+      ];
+      if (props.useNone) {
+        items.unshift({ id: Position.None, label: $tr("ui.position.none", "None") });
+      }
+      return items;
+    });
+
+    return {
+      positions
+    };
+  }
+});
+</script>

package/composables/index.ts

@@ -1,6 +1,10 @@
+export * from "./useAddress";
 export * from "./useAutocomplete";
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
+export * from "./useMagicFieldProvider";
 export * from "./useRules";
-export * from "./useSlots";
+export * from "./useSlots";
+export * from "./useTables";
+export * from "./useTreeView";

package/composables/useAddress.ts

@@ -0,0 +1,158 @@
+import type { Place } from "@dative-gpi/foundation-shared-domain/models";
+import { Address } from "@dative-gpi/foundation-shared-domain/models";
+import _ from "lodash";
+
+export const useAddress = () => {
+  const enabled = true;
+  let initialized = false;
+  let searchService: google.maps.places.AutocompleteService;
+  let placeService: google.maps.places.PlacesService;
+  let sessionId: google.maps.places.AutocompleteSessionToken;
+  
+
+  const init = async () => {
+    await window.initMap;
+    searchService = new google.maps.places.AutocompleteService();
+    placeService = new google.maps.places.PlacesService(
+      document.getElementById("places") as HTMLDivElement
+    );
+    sessionId = new google.maps.places.AutocompleteSessionToken();
+    initialized = true;
+  }
+
+  const search = async (search: string): Promise<Place[]> => {
+    if(!initialized){
+      await init();
+    } 
+
+    return _search(search).then(result => {
+      return _.map(result, r => ({ id: r.place_id, label: r.description }));
+    }).catch(() => {
+      return [];
+    });
+  }
+
+  const get = async (place: Place): Promise<Address> => {
+    if(!initialized){
+      await init();
+    } 
+
+    const response = await _get(place.id);
+    sessionId = new google.maps.places.AutocompleteSessionToken();
+    if (response.address_components && response.formatted_address && response.geometry) {
+      return new Address({
+        formattedAddress: response.formatted_address,
+        locality: _find(response.address_components, "locality"),
+        country: _find(response.address_components, "country"),
+        latitude: response.geometry.location?.lat() ?? 0,
+        longitude: response.geometry.location?.lng() ?? 0,
+
+        placeId: place.id,
+        placeLabel: place.label,
+      })
+    }
+    throw new Error("missing informations");
+  }
+
+  const reverseSearch = async (lat: number, lon: number): Promise<Address> => {
+    if(!initialized){
+      await init();
+    }
+
+    return _reverseSearch(lat, lon).then(result => {
+      if (result.length > 0) {
+        const response = result[0];
+        if (response.address_components && response.formatted_address && response.geometry) {
+          return new Address({
+            formattedAddress: response.formatted_address,
+            locality: _find(response.address_components, "locality"),
+            country: _find(response.address_components, "country"),
+            latitude: response.geometry.location?.lat() ?? 0,
+            longitude: response.geometry.location?.lng() ?? 0,
+            placeId: response.place_id,
+            placeLabel: response.formatted_address
+          });
+        }
+      }
+      throw new Error("missing informations");
+    });
+  }
+
+  const _search = (search: string) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.places.AutocompletePrediction[]>(
+      (resolve, reject) => {
+        searchService!.getPlacePredictions(
+          {
+            input: search,
+            sessionToken: sessionId!
+          },
+          function (result, status) {
+            if (status != google.maps.places.PlacesServiceStatus.OK || !result) {
+              reject(status);
+            } else {
+              resolve(result);
+            }
+          }
+        );
+      }
+    );
+  }
+
+  const _reverseSearch = (lat: number, lon: number) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.GeocoderResult[]>((resolve, reject) => {
+      new google.maps.Geocoder().geocode(
+        {
+          location: { lat: lat, lng: lon }
+        },
+        (result, status) => {
+          if (status != google.maps.GeocoderStatus.OK || !result) {
+            reject(status);
+          } else {
+            resolve(result);
+          }
+        }
+      );
+    });
+  }
+
+  const _get = (id: string) => {
+    if (!enabled) {
+      throw new Error("offline mode, do not call this method");
+    }
+    return new Promise<google.maps.places.PlaceResult>((resolve, reject) => {
+      placeService!.getDetails(
+        {
+          placeId: id,
+          sessionToken: sessionId!,
+          fields: ["formatted_address", "geometry", "address_components", "name"]
+        },
+        (result, status) => {
+          if (status != google.maps.places.PlacesServiceStatus.OK || !result) {
+            reject(status);
+          } else {
+            resolve(result);
+          }
+        }
+      );
+    });
+  }
+
+  const _find = (components: google.maps.GeocoderAddressComponent[], type: string): string => {
+    const found = _.find(components, c =>
+      _.some(c.types, t => t === type)
+    );
+    return found?.long_name ?? "";
+  }
+
+  return {
+    search,
+    get,
+    reverseSearch
+  }
+}