@dative-gpi/foundation-shared-components 1.1.23 → 1.1.24-unit-formatter

package/components/FSRouterLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <component
-    :is="wrapperComponent"
-    v-bind="mergedProps"
-    @click="onClick"
-    @auxclick="onAuxClick"
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
   >
     <template
       v-for="(_, name) in $slots"
@@ -14,99 +14,29 @@
         v-bind="{ ...slotData }"
       />
     </template>
-  </component>
+  </router-link>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-import { RouterLink, type RouteLocation } from "vue-router";
+import { defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
+
 import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 
 export default defineComponent({
   name: "FSRouterLink",
   props: {
     to: {
-      type: Object as PropType<RouteLocation | null>,
-      default: null
-    },
-    href: {
-      type: String as PropType<string | null>,
-      default: null
-    },
-    passive: {
-      type: Boolean as PropType<boolean | null>,
-      default: null
-    },
-    type: {
-      type: String as PropType<"button" | "submit" | "reset">,
-      default: "button"
-    },
-    defaultWrapper: {
-      type: String as PropType<"div" | "a" | "button">,
-      default: "button"
-    },
-    passiveWrapper: {
-      type: String as PropType<"div" | "a" | "button">,
-      default: "div"
+      type: Object as PropType<RouteLocation>,
+      required: true
     }
   },
-  setup(props, { attrs, slots }) {
+  setup() {
     const { handleRoutingEvent } = useRouting();
 
-    const actualPassive = computed(() => {
-      if (props.passive !== null) {return props.passive;}
-      return !props.to && !props.href && !attrs.onClick;
-    });
-
-    const wrapperComponent = computed(() => {
-      if (actualPassive.value) {
-        return props.passiveWrapper;
-      }
-      if (props.href) {
-        return "a";
-      }
-      if (props.to) {
-        return RouterLink;
-      }
-      return props.defaultWrapper;
-    });
-
-    const componentProps = computed(() => {
-      if (wrapperComponent.value === RouterLink) {
-        return { to: props.to };
-      } else if (wrapperComponent.value === "a") {
-        return { href: props.href };
-      } else if (wrapperComponent.value === "button") {
-        return { type: props.type };
-      } else {
-        return {};
-      }
-    });
-
-    const mergedProps = computed(() => ({
-      ...componentProps.value,
-      ...attrs
-    }));
-
-    const onClick = (event: MouseEvent) => {
-      if (props.to) {
-        handleRoutingEvent(event, props.to);
-      }
-    };
-
-    const onAuxClick = (event: MouseEvent) => {
-      if (props.to) {
-        handleRoutingEvent(event, props.to);
-      }
-    };
-
     return {
-      wrapperComponent,
-      mergedProps,
-      slots,
-      onClick,
-      onAuxClick
+      handleRoutingEvent
     };
   }
 });
-</script>
+</script>

package/components/FSSlideGroup.vue

@@ -2,7 +2,7 @@
   <v-slide-group
     class="fs-slide-group"
     ref="slideGroupRef"
-    :showArrows="$props.showArrows"
+    :showArrows="true"
     :id="elementId"
     :style="style"
     v-bind="$attrs"
@@ -83,10 +83,6 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 250
-    },
-    showArrows: {
-      type: [Boolean, String] as PropType<boolean | string>,
-      default: true
     }
   },
   setup(props) {

package/components/FSWindow.vue

@@ -85,7 +85,6 @@ import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
-import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -95,7 +94,6 @@ export default defineComponent({
     FSCard,
     FSIcon,
     FSText,
-    FSCol,
     FSRow
   },
   props: {

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -29,7 +29,7 @@
       />
     </template>
   </FSAgendaHorizontalEvent>
-  <FSCard
+  <FSClickable
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -50,7 +50,7 @@
       :variant="$props.variant"
       :width="width"
     />
-  </FSCard>
+  </FSClickable>
 </template>
 
 <script lang="ts">
@@ -58,13 +58,13 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSCard from '../FSCard.vue';
+import FSClickable from '../FSClickable.vue';
 
 
 export default defineComponent({
   name: 'FSAgendaHorizontalEvent',
   components: {
-    FSCard
+    FSClickable
   },
   emits: ['click'],
   props: {

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -28,7 +28,7 @@
       />
     </template>
   </FSAgendaVerticalEvent>
-  <FSCard
+  <FSClickable
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-vertical-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -48,7 +48,7 @@
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
     />
-  </FSCard>
+  </FSClickable>
 </template>
 
 <script lang="ts">
@@ -56,12 +56,12 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSCard from '../FSCard.vue';
+import FSClickable from '../FSClickable.vue';
 
 export default defineComponent({
   name: 'FSAgendaVerticalEvent',
   components: {
-    FSCard
+    FSClickable
   },
   emits: ['click'],
   props: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,9 +1,10 @@
 <template>
-  <FSCard
+  <component
     v-if="$props.modelStatus"
     class="fs-status-rich-card"
     topRightPadding="2px"
     variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
     :padding="$props.padding"
     :height="$props.height"
     :width="$props.width"
@@ -49,7 +50,7 @@
         v-bind="{ color }"
       />
     </template>
-  </FSCard>
+  </component>
 </template>
 
 <script lang="ts">
@@ -58,19 +59,19 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSClickable from "../FSClickable.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSStatusRichCard",
   components: {
+    FSClickable,
     FSCard,
     FSIcon,
     FSText,
-    FSRow,
     FSCol
   },
   props: {
@@ -157,6 +158,8 @@ export default defineComponent({
     }));
 
     return {
+      FSClickable,
+      FSCard,
       color,
       style,
       title,

package/components/fields/FSAutocompleteField.vue

@@ -291,7 +291,6 @@
           >
             <FSRow
               align="center-left"
-              :title="item.raw[$props.itemTitle!]"
               :wrap="false"
             >
               <FSCheckbox

package/components/fields/FSEntityFieldUI.vue

@@ -233,14 +233,6 @@ export default defineComponent({
         {
           id: EntityType.Folder,
           label: $tr("ui.common.folders", "Folders")
-        },
-        {
-          id: EntityType.Grouping,
-          label: $tr("ui.common.groupings", "Groupings")
-        },
-        {
-          id: EntityType.Subgrouping,
-          label: $tr("ui.common.subgroupings", "Categories")
         }
       ];
 
@@ -267,10 +259,6 @@ export default defineComponent({
           return "mdi-view-dashboard";
         case EntityType.Folder:
           return "mdi-folder";
-        case EntityType.Grouping:
-          return "mdi-chart-donut";
-        case EntityType.Subgrouping:
-          return "mdi-shape-outline";
         default:
           return "mdi-cube";
       }

package/components/fields/FSRichTextField.vue

@@ -246,7 +246,6 @@ import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -257,7 +256,6 @@ export default defineComponent({
     FSAutoCompleteField,
     FSTextField,
     FSText,
-    FSSpan,
     FSIcon,
     FSCard,
     FSMenu,

package/components/lists/FSDataIteratorItem.vue

@@ -63,7 +63,6 @@ import { defineComponent, type PropType } from "vue";
 import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRow from "../FSRow.vue";
-import FSCol from "../FSCol.vue";
 import FSText from "../FSText.vue";
 import FSTile from '../tiles/FSTile.vue';
 
@@ -72,7 +71,6 @@ export default defineComponent({
   components: {
     FSTile,
     FSText,
-    FSCol,
     FSRow
   },
   props: {

package/components/lists/FSDataTableUI.vue

@@ -97,14 +97,6 @@
             :filters="filters[header.value]"
             @update:filter="(value) => toggleFilter(header.value, value)"
           >
-            <template
-              #custom="{ filter, toggle, variant }"
-            >
-              <slot
-                :name="`${filterSlot(header)}-custom`"
-                v-bind="{ filter, toggle, variant }"
-              />
-            </template>
             <template
               #default="{ filter }"
             >
@@ -749,12 +741,10 @@ import FSFilterButton from "./FSFilterButton.vue";
 import FSHiddenButton from "./FSHiddenButton.vue";
 import FSHeaderButton from "./FSHeaderButton.vue";
 import FSOptionGroup from "../FSOptionGroup.vue";
-import FSSlideGroup from "../FSSlideGroup.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSDraggable from "./FSDraggable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSDivider from "../FSDivider.vue";
-import FSButton from '../FSButton.vue';
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSIcon from "../FSIcon.vue";
@@ -773,12 +763,10 @@ export default defineComponent({
     FSSearchField,
     FSSelectField,
     FSOptionGroup,
-    FSSlideGroup,
     FSDraggable,
     FSToggleSet,
     FSCheckbox,
     FSDivider,
-    FSButton,
     FSCard,
     FSChip,
     FSIcon,

package/components/lists/FSFilterButton.vue

@@ -40,7 +40,6 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
-            align="center-left"
             :clickable="true"
             @click="onToggleAll"
           />
@@ -57,35 +56,25 @@
           <FSCol
             gap="6px"
           >
-            <template
+            <FSChip
               v-for="(filter, index) in searchedFilters"
+              class="fs-filter-button-chip"
+              :variant="getVariant(filter)"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="filter.text"
+              :clickable="true"
               :key="index"
+              @click="() => onToggle(filter)"
             >
-              <slot
-                name="custom"
-                v-bind="{ filter, toggle: () => onToggle(filter), variant: getVariant(filter) }"
+              <template
+                #default
               >
-                <FSChip
-                  class="fs-filter-button-chip"
-                  :variant="getVariant(filter)"
-                  :height="['30px', '24px']"
-                  :color="$props.color"
-                  :label="filter.text"
-                  align="center-left"
-                  :clickable="true"
-                  :border="false"
-                  @click="() => onToggle(filter)"
-                >
-                  <template
-                    #default
-                  >
-                    <slot
-                      v-bind="{ filter }"
-                    />
-                  </template>
-                </FSChip>
-              </slot>
-            </template>
+                <slot
+                  v-bind="{ filter }"
+                />
+              </template>
+            </FSChip>
           </FSCol>
         </FSFadeOut>
       </FSCol>
@@ -96,7 +85,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -164,21 +153,21 @@ export default defineComponent({
       return props.filters;
     });
 
-    const getVariant = (filter: FSDataTableFilter): CardVariant => {
+    const getVariant = (filter: FSDataTableFilter): "standard" | "full" | "borderless" => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         if (filter.hidden) {
-          return CardVariants.Background;
+          return "borderless";
         }
-        return CardVariants.Full;
+        return "full";
       }
-      return CardVariants.Background;
+      return "borderless";
     };
 
-    const getAllVariant = (): CardVariant => {
+    const getAllVariant = (): "standard" | "full" => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
-        return CardVariants.Background;
+        return "standard";
       }
-      return CardVariants.Full;
+      return "full";
     };
 
     const onToggle = (filter: FSDataTableFilter): void => {

package/components/lists/FSHeaderButton.vue

@@ -32,8 +32,7 @@
           <FSChip
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
-            variant="background"
-            :border="false"
+            variant="borderless"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
             :clickable="true"
@@ -42,8 +41,7 @@
           <FSChip
             v-if="!$props.first"
             class="fs-header-button-chip"
-            variant="background"
-            :border="false"
+            variant="borderless"
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
@@ -53,8 +51,7 @@
           <FSChip
             v-if="!$props.last"
             class="fs-header-button-chip"
-            variant="background"
-            :border="false"
+            variant="borderless"
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"

package/components/lists/FSTileList.vue

@@ -2,21 +2,12 @@
   <FSCol
     gap="12px"
   >
-    <FSRow
-      v-if="$props.searchable || $slots.action"
-      :wrap="false"
-      align="center-left"
-    >
-      <FSSearchField
-        v-if="$props.searchable"
-        :hideHeader="true"
-        :modelValue="actualSearch"
-        @update:modelValue="onSearch"
-      />
-      <slot
-        name="action"
-      />
-    </FSRow>
+    <FSSearchField
+      v-if="$props.searchable"
+      :hideHeader="true"
+      :modelValue="actualSearch"
+      @update:modelValue="onSearch"
+    />
     <FSFadeOut
       v-if="$props.direction == ListDirections.Column"
       :maxHeight="$props.maxHeight"
@@ -118,13 +109,11 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
 import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTileList",
   components: {
     FSCol,
-    FSRow,
     FSFadeOut,
     FSLoader,
     FSSlideGroup,
@@ -234,12 +223,6 @@ export default defineComponent({
       actualSearch.value = value;
     });
 
-    watch(() => props.singleSelect, () => {
-      if(props.singleSelect && props.modelValue.length > 1) { 
-        emit("update:modelValue", []); 
-      } 
-    }, { immediate: true });
-
     return {
       actualSearch,
       filteredItems,

package/components/map/FSMap.vue

@@ -389,7 +389,7 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: props.zoom });
+      fitBounds(props.bounds, { maxZoom: 14 });
     });
 
     watch(() => props.enableScrollWheelZoom, (newValue) => {

package/components/map/FSMapMarker.vue

@@ -11,9 +11,8 @@ import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerCluster
 import { useColors } from "../../composables";
 import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
-import { MAP, MARKERCLUSTERGROUP } from './keys';
-import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
 import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
+import { MAP, MARKERCLUSTERGROUP } from './keys';
 
 export default {
   name: 'FSMapMarker',
@@ -24,8 +23,8 @@ export default {
       required: false
     },
     color: {
-      type: String as PropType<ColorBase>,
-      default: ColorEnum.Primary,
+      type: String,
+      default: 'primary',
       required: false
     },
     latlng: {

package/components/selects/FSSelectMapLayer.vue

@@ -48,11 +48,6 @@ export default defineComponent({
         icon: 'mdi-map',
         label: $tr("ui.map-layer.map", "Map")
       },
-      {
-        id: MapLayers.OpenStreetMap,
-        icon: 'mdi-map-plus',
-        label: $tr("ui.map-layer.open-street-map", "Open Street Map")
-      },
       {
         id: MapLayers.Imagery,
         icon: 'mdi-satellite',

package/components/tiles/FSChartTileUI.vue

@@ -68,7 +68,6 @@ import { ApplicationScope, ChartType } from "@dative-gpi/foundation-shared-domai
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSImage from "../FSImage.vue";
-import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
@@ -81,7 +80,6 @@ export default defineComponent({
   name: "FSChartTileUI",
   components: {
     FSImage,
-    FSIcon,
     FSTile,
     FSRow,
     FSCol,

package/components/tiles/FSFolderTileUI.vue

@@ -14,12 +14,12 @@
         gap="6px"
       >
         <FSEntityCountBadge
-          :label="$tr('ui.common.folders', 'Folders')"
+          :label="$tr('ui.common.folders', 'Folder(s)')"
           :count="$props.recursiveFoldersIds?.length ?? 0"
           :color="ColorEnum.Primary"
         />
         <FSEntityCountBadge
-          :label="$tr('ui.common.dashboards', 'Dashboards')"
+          :label="$tr('ui.common.dashboards', 'Dashboard(s)')"
           :count="dashboardCount"
           :color="ColorEnum.Success"
         />

package/components/tiles/FSLocationTileUI.vue

@@ -60,7 +60,6 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 
 import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
-import FSIcon from "../FSIcon.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
@@ -71,7 +70,6 @@ export default defineComponent({
   components: {
     FSEntityCountBadge,
     FSSimpleTileUI,
-    FSIcon,
     FSColor,
     FSSpan,
     FSCol,