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

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

@@ -1,7 +1,9 @@
 <template>
   <FSTile 
+    :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
     :editable="$props.editable"
+    :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
@@ -17,21 +19,29 @@
       >
         <FSCol
           gap="6px"
+          :width="infoWidth"
         >
-          <FSText
+          <FSSpan
             font="text-button"
             :lineClamp="2"
           >
             {{ $props.label }}
-          </FSText>
-          <FSText
+          </FSSpan>
+          <FSSpan
             font="text-overline"
             variant="soft"
           >
             {{ $props.code }}
-          </FSText>
+          </FSSpan>
         </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :height="imageSize"
+          :width="imageSize"
+          :imageId="$props.imageId"
+        />
         <FSIconCard
+          v-else
           :backgroundColor="iconBackgroundColor"
           :icon="$props.icon"
           :size="imageSize"
@@ -42,47 +52,44 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIconCard from "../FSIconCard.vue";
-import FSText from "../FSText.vue";
+import FSImage from "../FSImage.vue";
+import FSSpan from "../FSSpan.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,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
   },
   props: {
-    label: {
-      type: String as PropType<string | null>,
+    imageId: {
+      type: String as PropType<string>,
       required: false,
       default: null
     },
-    modelValue: {
-      type: Boolean,
+    label: {
+      type: String as PropType<string | null>,
       required: false,
-      default: false
+      default: null
     },
     code: {
       type: String as PropType<string | null>,
       required: false,
       default: null
     },
-    bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Light
-    },
     iconBackgroundColor: {
       type: Boolean,
       required: false,
@@ -93,6 +100,26 @@ export default defineComponent({
       required: false,
       default: "mdi-ab-testing"
     },
+    activeColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -110,12 +137,8 @@ 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;
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
     });
 
     return {

package/components/tiles/FSTile.vue

@@ -1,20 +1,40 @@
 <template>
   <FSClickable
-    v-if="$props.href || $props.to || $attrs.onClick"
-    variant="background"
+    v-if="$props.singleSelect"
     class="fs-tile"
     padding="12px"
+    :variant="variant"
     :height="height"
-    :width="width"
+    :color="color"
     :style="style"
+    @click="() => $emit('update:modelValue', !$props.modelValue)"
+    v-bind="$attrs"
+  >
+    <slot />
+    <div
+      v-if="$props.bottomColor"
+      class="fs-tile-bottom"
+      :style="style"
+    />
+  </FSClickable>
+  <FSClickable
+    v-else-if="$props.href || $props.to || $attrs.onClick"
+    variant="background"
+    class="fs-tile"
+    padding="12px"
+    :color="ColorEnum.Background"
     :href="$props.href"
+    :height="height"
     :to="$props.to"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />
     <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
+      variant="background"
+      :color="ColorEnum.Background"
       :border="false"
       v-bind="$attrs"
     >
@@ -30,10 +50,11 @@
   </FSClickable>
   <FSCard
     v-else
+    variant="background"
     class="fs-tile"
     padding="12px"
+    :color="color"
     :style="style"
-    :width="width"
     :height="height"
     v-bind="$attrs"
   >
@@ -41,6 +62,7 @@
     <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
+      variant="background"
       :border="false"
       v-bind="$attrs"
     >
@@ -58,11 +80,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue } 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 { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -91,6 +113,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    activeColor: {
+      type: [Array, String] as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
     bottomColor: {
       type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
       required: false,
@@ -100,6 +127,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -107,7 +139,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 +149,23 @@ export default defineComponent({
       return {};
     });
 
-    const width = computed(() => {
-      return isMobileSized.value ? 336 : 352;
+    const height = computed((): number => {
+      return isMobileSized.value ? 156 : 170;
+    });
+
+    const variant = computed((): "standard" | "background" => {
+      return (props.singleSelect && props.modelValue) ? "standard" : "background";
     });
 
-    const height = computed(() => {
-      return isMobileSized.value ? 156 : 170;
+    const color = computed((): ColorBase => {
+      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
     });
 
     return {
+      ColorEnum,
+      variant,
       height,
-      width,
+      color,
       style
     };
   }

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -1,6 +1,8 @@
 <template>
   <FSTile
+    :activeColor="ColorEnum.Primary"
     :editable="$props.editable"
+    :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
@@ -18,16 +20,17 @@
           gap="4px"
           :width="infoWidth"
         >
-          <FSText
+          <FSSpan
             font="text-button"
             :lineClamp="2"
           >
-            {{ title }}
-          </FSText>
+            {{ $props.name }}
+          </FSSpan>
           <FSRow
             v-if="roleLabel"
             align="center-left"
             gap="4px"
+            :wrap="false"
           >
             <FSIcon
               v-if="roleIcon"
@@ -36,12 +39,12 @@
             >
               {{ roleIcon }}
             </FSIcon>
-            <FSText
+            <FSSpan
               font="text-overline"
               variant="soft"
             >
               {{ roleLabel }}
-            </FSText>
+            </FSSpan>
           </FSRow>
         </FSCol>
         <FSImage
@@ -55,15 +58,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { UserType } from "@dative-gpi/foundation-core-domain/models";
 
 import FSImage from "../FSImage.vue";
-import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -72,7 +74,7 @@ export default defineComponent({
   name: "FSUserOrganisationTileUI",
   components: {
     FSImage,
-    FSText,
+    FSSpan,
     FSTile,
     FSCol,
     FSRow
@@ -88,16 +90,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    userType: {
-      type: Number as PropType<UserType>,
-      required: false,
-      default: UserType.User
-    },
     roleIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -113,6 +105,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
     modelValue: {
       type: Boolean,
       required: false,
@@ -128,13 +125,6 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const title = computed((): string | null => {
-      switch (props.userType) {
-        case UserType.ServiceAccount: return props.label;
-        default: return props.name;
-      }
-    });
-
     const roleIcon = computed((): string | null => {
       if (props.admin) {
         return "mdi-crown-outline";
@@ -150,24 +140,25 @@ export default defineComponent({
     });
 
     const imageSize = computed((): number => {
+      if (!props.imageId) {
+        return 0;
+      }
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): number => {
-      let width = isMobileSized.value ? 288 : 304;
-      if (props.imageId) {
-        width -= imageSize.value;
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
       }
-      return width;
+      return `calc(100% - ${imageSize.value}px - 24px)`;
     });
 
     return {
+      ColorEnum,
       imageSize,
       infoWidth,
-      ColorEnum,
       roleLabel,
-      roleIcon,
-      title
+      roleIcon
     };
   }
 });

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
+  }
+}

package/composables/useAutocomplete.ts

@@ -1,4 +1,5 @@
-import { computed, onMounted, ref, Ref, watch } from "vue";
+import type { Ref} from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import _ from "lodash";
 
 import { useDebounce } from "./useDebounce";
@@ -60,11 +61,11 @@ export const useAutocomplete = <TInfos>(
     }
   });
   
-  watch(entities, () => {
+  watch(() => entities.value, () => {
     if (init.value) {
       init.value = false;
-      entitiesLength.value = entities.value.length;
     }
+    entitiesLength.value = entities.value.length;
   });
 
   onMounted((): void => {