@dative-gpi/foundation-shared-components 1.0.139 → 1.0.140-selectable

package/components/lists/FSDataTableUI.vue

@@ -112,7 +112,7 @@
             :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
-            :editable="true"
+            :clickable="true"
             @click="resetFilter"
           />
           <FSHiddenButton
@@ -478,18 +478,20 @@
               >
                 <FSDataIteratorItem
                   v-if="item.type === 'item'"
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.showSelect"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -649,18 +651,20 @@
                 v-bind="{ index, item: item.raw, toggleSelect }"
               >
                 <FSDataIteratorItem
-                  :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
+                  :leftColor="$props.rowColor ? $props.rowColor(item.raw) : null"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                  :clickable="onClickLibrary.clickable"
-                  :showSelect="$props.showSelect"
-                  :itemTo="$props.itemTo"
-                  :color="$props.color"
+                  :selectable="$props.showSelect"
+                  :singleSelect="$props.singleSelect"
+                  :to="$props.itemTo"
+                  :bottomColor="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
-                  @update:modelValue="toggleSelect"
-                  @auxclick="() => onClickLibrary.mobile($event, item)"
-                  @click="() => onClickLibrary.mobile($event, item)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect(item.raw)"
+                  v-bind="onClickLibrary.clickable ? {
+                    onClick: (event) => onClickLibrary.mobile(event, item),
+                    onAuxclick: (event) => onClickLibrary.mobile(event, item)
+                  } : {}"
                 >
                   <template
                     #item.top="props"
@@ -1126,6 +1130,7 @@ export default defineComponent({
     });
 
     const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
+      console.log(props["onClick:row"]);
       if (props["onClick:row"] || props.itemTo) {
         return {
           clickable: true,

package/components/lists/FSFilterButton.vue

@@ -12,7 +12,7 @@
         variant="standard"
         :height="['30px', '24px']"
         :color="ColorEnum.Dark"
-        :editable="true"
+        :clickable="true"
         :label="label"
         v-bind="props"
       />
@@ -40,7 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
-            :editable="true"
+            :clickable="true"
             @click="onToggleAll"
           />
           <FSDivider />
@@ -63,7 +63,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="() => onToggle(filter)"
             >

package/components/lists/FSHeaderButton.vue

@@ -35,7 +35,7 @@
             variant="borderless"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:hide')"
           />
           <FSChip
@@ -45,7 +45,7 @@
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:left')"
           />
           <FSChip
@@ -55,7 +55,7 @@
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"
-            :editable="true"
+            :clickable="true"
             @click="$emit('update:right')"
           />
         </FSCol>

package/components/lists/FSHiddenButton.vue

@@ -10,7 +10,7 @@
         prependIcon="mdi-eye-off-outline"
         :height="[30, 24]"
         :color="ColorEnum.Light"
-        :editable="true"
+        :clickable="true"
         :label="$tr('data-table.hidden-columns', '{0} hidden column(s)', $props.headers.length.toString())"
         v-bind="props"
       />
@@ -46,7 +46,7 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="header.text"
-              :editable="true"
+              :clickable="true"
               :key="index"
               @click="$emit('update:show', header)"
             >

package/components/lists/FSSimpleListItem.vue

@@ -3,7 +3,6 @@
     v-bind="$props.tileProps"
     :width="$props.width"
     height="fit-content"
-    :editable="false"
   >
     <slot
       name="item"

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -147,11 +146,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSGroupTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile
     :activeColor="ColorEnum.Primary"
     :bottomColor="ColorEnum.Error"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -169,11 +168,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/tiles/FSLoadTile.vue

@@ -40,7 +40,7 @@
       />
     </FSRow>
     <FSCard
-      v-if="$props.editable"
+      v-if="$props.selectable"
       class="fs-tile-checkbox"
       :height="['40px', '32px']"
       :width="['40px', '32px']"
@@ -48,6 +48,7 @@
     >
       <FSCheckbox
         :modelValue="$props.modelValue"
+        :disabled="true"
         @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
       />
     </FSCard>
@@ -81,7 +82,7 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -1,7 +1,6 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -108,11 +107,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSSimpleTileUI.vue

@@ -2,7 +2,6 @@
   <FSTile 
     :activeColor="$props.activeColor"
     :bottomColor="$props.bottomColor"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -136,11 +135,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/components/tiles/FSTile.vue

@@ -4,58 +4,52 @@
     :height="$props.height"
     :width="$props.width"
   >
-    <template
-      v-if="$props.editable"
+    <FSClickable
+      v-if="($props.href || $props.to || $attrs.onClick)"
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
+      :style="style"
+      v-bind="$attrs"
     >
-      <FSClickable
-        v-if="$props.singleSelect"
-        padding="12px"
-        :variant="variant"
-        :color="color"
-        :style="style"
-        width="100%"
-        height="100%"
-        @click="() => $emit('update:modelValue', !$props.modelValue)"
-        v-bind="$attrs"
-      >
-        <slot />
-      </FSClickable>
-      <FSClickable
-        v-else-if="$props.href || $props.to || $attrs.onClick"
-        variant="background"
-        class="fs-tile"
-        padding="12px"
-        :color="ColorEnum.Background"
-        :href="$props.href"
-        width="100%"
-        height="100%"
-        :to="$props.to"
-        :style="style"
-        v-bind="$attrs"
+      <slot />
+      <FSCard
+        v-if="$props.selectable"
+        class="fs-tile-checkbox"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
+        :border="false"
       >
-        <slot />
-        <FSCard
-          v-if="$props.editable"
-          class="fs-tile-checkbox"
-          variant="background"
-          :height="['40px', '32px']"
-          :width="['40px', '32px']"
-          :border="false"
-          v-bind="$attrs"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </FSClickable>
-    </template>
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
+
+    <FSClickable
+      v-else-if="$props.selectable && $props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </FSClickable>
+    
     <FSCard
       v-else
       variant="background"
       class="fs-tile"
       padding="12px"
-      :color="color"
       :style="style"
       width="100%"
       height="100%"
@@ -63,13 +57,12 @@
     >
       <slot />
       <FSCard
-        v-if="$props.editable"
+        v-if="$props.selectable"
         class="fs-tile-checkbox"
         variant="background"
         :height="['40px', '32px']"
         :width="['40px', '32px']"
         :border="false"
-        v-bind="$attrs"
       >
         <FSCheckbox
           :modelValue="$props.modelValue"
@@ -77,6 +70,7 @@
         />
       </FSCard>
     </FSCard>  
+    
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -139,7 +133,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -1,7 +1,6 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -114,11 +113,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {

package/composables/useAddress.ts

@@ -1,20 +1,25 @@
+/// <reference types="@types/google.maps" />
 import _ from "lodash";
 
 import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAppLanguageCode } from '@dative-gpi/foundation-shared-services/composables';
 
 export const useAddress = () => {
   const enabled = true;
+  const { languageCode } = useAppLanguageCode();
+
   let initialized = false;
+  let userLocation: google.maps.LatLngLiteral | null;
   let searchService: google.maps.places.AutocompleteService;
   let placeService: google.maps.places.PlacesService;
   let sessionId: google.maps.places.AutocompleteSessionToken;
-  
 
   const init = async () => {
     await window.initMap;
+    userLocation = await getCurrentLocation();
     searchService = new google.maps.places.AutocompleteService();
     placeService = new google.maps.places.PlacesService(
-      document.getElementById("places") as HTMLDivElement
+      document.createElement("div")
     );
     sessionId = new google.maps.places.AutocompleteSessionToken();
     initialized = true;
@@ -25,11 +30,12 @@ export const useAddress = () => {
       await init();
     } 
 
-    return _search(search).then(result => {
-      return _.map(result, r => ({ id: r.place_id, label: r.description }));
-    }).catch(() => {
-      return [];
-    });
+    const mapsResults = await _search(search);
+
+    return mapsResults.map((result) => ({
+      id: result.place_id,
+      label: result.description
+    }));
   }
 
   const get = async (place: Place): Promise<Address> => {
@@ -78,16 +84,42 @@ export const useAddress = () => {
     });
   }
 
+  const getCurrentLocation = async (): Promise<google.maps.LatLngLiteral | null> => {
+    if (!navigator.geolocation) {
+      return null;
+    }
+  
+    return new Promise((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          });
+        },
+        () => resolve(null)
+      );
+    });
+  };
+
   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) => {
+        /**
+         * ISO 3166 language code
+         */
+        const isoLanguageCode = languageCode.value?.split("-")[0];
+
         searchService!.getPlacePredictions(
           {
             input: search,
-            sessionToken: sessionId!
+            region: isoLanguageCode,
+            language: isoLanguageCode,
+            sessionToken: sessionId,
+            locationBias: userLocation,
           },
           function (result, status) {
             if (status != google.maps.places.PlacesServiceStatus.OK || !result) {

package/composables/useColors.ts

@@ -5,6 +5,8 @@ import Color from "color";
 import type { ColorBase, ColorVariations } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+const colorsCache: Map<string, ColorVariations> = new Map();
+
 export const useColors = () => {
     const theme = useTheme().current.value;
     const baseMinSaturation = 0;
@@ -40,17 +42,17 @@ export const useColors = () => {
     };
 
     const getContrast = (color: Color): Color => {
-        if(isGrayScale(color)){
+        if (isGrayScale(color)) {
             const coeff = 4
             return color
                 .value(color.value() < 70 ? 100 : Math.max(color.value() / coeff, 0));
         }
 
-        if(isPastel(color)){
+        if (isPastel(color)) {
             return color.darken(0.6);
         }
 
-        if(color.darken(0.15).isLight()){
+        if (color.darken(0.15).isLight()) {
             return color.darken(0.8);
         }
 
@@ -59,7 +61,7 @@ export const useColors = () => {
 
     const parseColor = (color: ColorBase): Color => {
         const themed = (Object as any).values(ColorEnum).includes(color);
-        
+
         try {
             return themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
         }
@@ -70,7 +72,7 @@ export const useColors = () => {
 
     const getColors = (color: ColorBase): ColorVariations => {
         const base = parseColor(color);
-        
+
         const light = getLight(base);
         const soft = getSoft(base);
         const dark = getDark(base);
@@ -88,7 +90,7 @@ export const useColors = () => {
     };
 
     const getGradients = (colors: ColorBase | ColorBase[], rotation: number = 90): ColorVariations => {
-        const variations = Array.isArray(colors) ? colors.map(getColors) : [getColors(colors)];
+        const variations = Array.isArray(colors) ? colors.map(getColorsCached) : [getColorsCached(colors)];
 
         if (variations.length === 1) {
             return variations[0];
@@ -121,9 +123,16 @@ export const useColors = () => {
         return colors;
     }
 
+    const getColorsCached = (color: ColorBase): ColorVariations => {
+        if (!colorsCache.has(color)) {
+            const variations = getColors(color);
+            colorsCache.set(color, variations);
+        }
+        return colorsCache.get(color) as ColorVariations;
+    };
 
     return {
-        getColors,
+        getColors : getColorsCached,
         getGradients,
         getBasePaletteColors
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.139",
+  "version": "1.0.140-selectable",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.139",
-    "@dative-gpi/foundation-shared-services": "1.0.139"
+    "@dative-gpi/foundation-shared-domain": "1.0.140-selectable",
+    "@dative-gpi/foundation-shared-services": "1.0.140-selectable"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "e87dd93aeba0c018e180ab8d5764fe997011cea5"
+  "gitHead": "6faaffa554359a3319265c4f25e44a5da901fe20"
 }

package/styles/components/fs_calendar.scss

@@ -32,6 +32,7 @@
     border: 1px solid var(--fs-calendar-border-color) !important;
     border-radius: 4px !important;
     padding: 8px !important;
+    min-height: 380px;
 }
 
 .fs-calendar-header {

package/styles/components/fs_chip.scss

@@ -9,7 +9,7 @@
     padding: 2px 20px !important;
 }
 
-.fs-chip-editable {
+.fs-chip-clickable {
     cursor: pointer !important;
 
     &:active {

package/styles/components/fs_draggable.scss

@@ -1,10 +1,5 @@
 .fs-draggable-item {
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
- 
-  &:has(.fs-data-iterator-item) {
-    flex: 1 1 0 !important;
-    width: 100% !important;
-  }
 }
 
 .fs-draggable-dragging {

package/styles/components/index.scss

@@ -19,7 +19,6 @@
 @import "fs_color.scss";
 @import "fs_color_icon.scss";
 @import "fs_data_table.scss";
-@import "fs_data_iterator_item.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";