@dative-gpi/foundation-shared-components 1.1.16 → 1.1.18

package/components/FSAccordionPanel.vue

@@ -77,6 +77,7 @@ import FSRichTextField from "./fields/FSRichTextField.vue";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -86,6 +87,7 @@ export default defineComponent({
     FSIcon,
     FSSpan,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSButton.vue

@@ -141,6 +141,7 @@ import { useColors } from "@dative-gpi/foundation-shared-components/composables"
 
 import FSRouterLink from './FSRouterLink.vue';
 import FSText from "./FSText.vue";
+import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSCard from './FSCard.vue';
 import FSCol from "./FSCol.vue";
@@ -158,6 +159,7 @@ export default defineComponent({
     FSRouterLink,
     FSCard,
     FSText,
+    FSSpan,
     FSIcon,
     FSCol,
     FSRow

package/components/FSDialogContent.vue

@@ -68,6 +68,7 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -76,6 +77,7 @@ export default defineComponent({
     FSButton,
     FSCard,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSDialogFormBody.vue

@@ -99,6 +99,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import FSFadeOut from "./FSFadeOut.vue";
 import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -107,6 +108,7 @@ export default defineComponent({
     FSFadeOut,
     FSButton,
     FSForm,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSDivider.vue

@@ -41,11 +41,15 @@ import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/co
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDivider",
   components: {
-    FSText
+    FSText,
+    FSCol,
+    FSRow
   },
   props: {
     label: {

package/components/FSEditImageUI.vue

@@ -170,6 +170,7 @@ import FSCardPlaceholder from "./FSCardPlaceholder.vue";
 import FSImageUI from "./FSImageUI.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -182,6 +183,7 @@ export default defineComponent({
     FSImageUI,
     FSCard,
     FSText,
+    FSSpan,
     FSCol,
     FSRow
   },

package/components/FSGridMosaic.vue

@@ -40,6 +40,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import type { FSGridMosaic } from "@dative-gpi/foundation-shared-components/models";
 
 import FSGrid from "./FSGrid.vue";
+import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -47,6 +48,7 @@ export default defineComponent({
   name: "FSGridMosaic",
   components: {
     FSGrid,
+    FSText,
     FSCol,
     FSRow
   },

package/components/FSIconCard.vue

@@ -30,12 +30,14 @@ import { sizeToVar } from "../utils";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSIconCard",
   components: {
     FSCard,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
     size: {

package/components/FSInstantPicker.vue

@@ -89,6 +89,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
 
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSSlider from '@dative-gpi/foundation-shared-components/components/FSSlider.vue';
@@ -100,6 +101,7 @@ export default defineComponent({
   name: "FSInstantPicker",
   components: {
     FSCol,
+    FSRow,
     FSSpan,
     FSText,
     FSSlider,

package/components/FSPlayButtons.vue

@@ -49,12 +49,14 @@ import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
 
 import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
 import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 
 export default defineComponent({
   name: "FSPlayButtons",
   components: {
     FSCard,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
     modelValue: {

package/components/FSRangePicker.vue

@@ -89,6 +89,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
 
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
@@ -100,6 +101,7 @@ export default defineComponent({
   name: "FSRangePicker",
   components: {
     FSCol,
+    FSRow,
     FSSpan,
     FSText,
     FSTermField,

package/components/FSWindow.vue

@@ -85,6 +85,7 @@ 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({
@@ -94,6 +95,7 @@ export default defineComponent({
     FSCard,
     FSIcon,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -61,6 +61,7 @@ import { useColors } from "@dative-gpi/foundation-shared-components/composables"
 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({
@@ -69,6 +70,7 @@ export default defineComponent({
     FSCard,
     FSIcon,
     FSText,
+    FSRow,
     FSCol
   },
   props: {

package/components/fields/FSDurationField.vue

@@ -0,0 +1,184 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow
+      :wrap="false"
+      align="center-left"
+    >
+      <FSNumberField
+        suffix="h"
+        :hideHeader="true"
+        :modelValue="innerHours"
+        :disabled="$props.disabled"
+        :rules="[() => messages.length === 0 || '']"
+        @update:modelValue="onChangeHours"
+      />
+      <FSSpan>:</FSSpan>
+      <FSNumberField
+        suffix="min"
+        :hideHeader="true"
+        :disabled="$props.disabled"
+        :rules="[() => messages.length === 0 || '']"
+        :modelValue="innerMinutes"
+        @update:modelValue="onChangeMinutes"
+      />
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { NumberRules } from "@dative-gpi/foundation-shared-components/models";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSNumberField from "./FSNumberField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSDurationField",
+  components: {
+    FSNumberField,
+    FSBaseField,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    maxDuration: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    minDuration: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMessages } = useRules();
+    const MS_PER_MINUTE = 60 * 1000;
+    const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+
+    const innerHours = ref<number | null>(null);
+    const innerMinutes = ref<number | null>(null);
+
+    const durationRules = computed(() => {
+      const rules: any[] = [...props.rules];
+      if (props.required) {
+        rules.push(NumberRules.required());
+      }
+      if (props.minDuration != null) {
+        const minHours = Math.floor(props.minDuration / MS_PER_HOUR);
+        const minMinutes = Math.floor((props.minDuration % MS_PER_HOUR) / MS_PER_MINUTE);
+        const label = minHours > 0 ? `${minHours}h${minMinutes.toString().padStart(2, '0')}` : `${minMinutes}min`;
+        rules.push((v: any) => (v != null && v >= props.minDuration!) || `Min. ${label}`);
+      }
+      if (props.maxDuration != null) {
+        const maxHours = Math.floor(props.maxDuration / MS_PER_HOUR);
+        const maxMinutes = Math.floor((props.maxDuration % MS_PER_HOUR) / MS_PER_MINUTE);
+        const label = maxHours > 0 ? `${maxHours}h${maxMinutes.toString().padStart(2, '0')}` : `${maxMinutes}min`;
+        rules.push((v: any) => (v != null && v <= props.maxDuration!) || `Max. ${label}`);
+      }
+      return rules;
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, durationRules.value));
+
+    const reset = (): void => {
+      if (props.modelValue == null) {
+        innerHours.value = null;
+        innerMinutes.value = null;
+        return;
+      }
+      innerHours.value = Math.floor(props.modelValue / MS_PER_HOUR);
+      innerMinutes.value = Math.floor((props.modelValue % MS_PER_HOUR) / MS_PER_MINUTE);
+    };
+
+    const emitValue = (): void => {
+      const hours = innerHours.value ?? 0;
+      const minutes = innerMinutes.value ?? 0;
+      emit("update:modelValue", (hours * MS_PER_HOUR) + (minutes * MS_PER_MINUTE));
+    };
+
+    const onChangeHours = (value: number | null): void => {
+      innerHours.value = value;
+      emitValue();
+    };
+
+    const onChangeMinutes = (value: number | null): void => {
+      value = Math.min(59, Math.max(0, value ?? 0));
+      innerMinutes.value = value;
+      emitValue();
+    };
+
+    watch(() => props.modelValue, () => {
+      const currentHours = innerHours.value ?? 0;
+      const currentMinutes = innerMinutes.value ?? 0;
+      const currentTotal = (currentHours * MS_PER_HOUR) + (currentMinutes * MS_PER_MINUTE);
+      if (currentTotal !== (props.modelValue ?? 0)) {
+        reset();
+      }
+    }, { immediate: true });
+
+    return {
+      NumberRules,
+      innerHours,
+      innerMinutes,
+      durationRules,
+      messages,
+      onChangeHours,
+      onChangeMinutes
+    };
+  }
+});
+</script>

package/components/fields/FSRichTextField.vue

@@ -246,6 +246,7 @@ 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";
@@ -256,6 +257,7 @@ export default defineComponent({
     FSAutoCompleteField,
     FSTextField,
     FSText,
+    FSSpan,
     FSIcon,
     FSCard,
     FSMenu,

package/components/lists/FSDataIteratorItem.vue

@@ -63,6 +63,7 @@ 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';
 
@@ -71,6 +72,7 @@ export default defineComponent({
   components: {
     FSTile,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/lists/FSDataTableUI.vue

@@ -749,10 +749,12 @@ 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";
@@ -771,10 +773,12 @@ export default defineComponent({
     FSSearchField,
     FSSelectField,
     FSOptionGroup,
+    FSSlideGroup,
     FSDraggable,
     FSToggleSet,
     FSCheckbox,
     FSDivider,
+    FSButton,
     FSCard,
     FSChip,
     FSIcon,

package/components/tiles/FSChartTileUI.vue

@@ -68,6 +68,7 @@ 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";
@@ -80,6 +81,7 @@ export default defineComponent({
   name: "FSChartTileUI",
   components: {
     FSImage,
+    FSIcon,
     FSTile,
     FSRow,
     FSCol,

package/components/tiles/FSLocationTileUI.vue

@@ -60,6 +60,7 @@ 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";
@@ -70,6 +71,7 @@ export default defineComponent({
   components: {
     FSEntityCountBadge,
     FSSimpleTileUI,
+    FSIcon,
     FSColor,
     FSSpan,
     FSCol,

package/components/tiles/FSServiceAccountOrganisationTileUI.vue

@@ -64,6 +64,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSSpan from "../FSSpan.vue";
+import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -73,6 +74,7 @@ export default defineComponent({
   components: {
     FSImage,
     FSSpan,
+    FSIcon,
     FSTile,
     FSCol,
     FSRow

package/components/tiles/FSTile.vue

@@ -56,13 +56,15 @@ import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-compone
 
 import FSCard from "../FSCard.vue";
 import FSCheckbox from "../FSCheckbox.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
     FSCard,
-    FSCheckbox
+    FSCheckbox,
+    FSCol
   },
   props: {
     to: {

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -65,6 +65,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSSpan from "../FSSpan.vue";
+import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -74,6 +75,7 @@ export default defineComponent({
   components: {
     FSImage,
     FSSpan,
+    FSIcon,
     FSTile,
     FSCol,
     FSRow

package/components/toggleSets/FSToggleSetPosition.vue

@@ -24,8 +24,13 @@ import type { PropType } from "vue";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { Position } from "@dative-gpi/foundation-shared-domain/enums";
 
+import FSToggleSet from "../FSToggleSet.vue";
+
 export default defineComponent({
   name: "FSToggleSetPosition",
+  components: {
+    FSToggleSet
+  },
   props: {
     modelValue: {
       type: Number as PropType<Position>,

package/composables/useMapLayers.ts

@@ -57,6 +57,18 @@ export const useMapLayers = () => {
               className: 'fs-map-tile-base-layer'
             })
           ]
+        },
+        {
+          name: MapLayers.OpenStreetMap,
+          label: $tr("ui.map-layer.open-street-map", "OpenStreetMap"),
+          image: new URL("../assets/images/map/open-street-map.png", import.meta.url).href,
+          layers: [
+            tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
+              maxZoom: 19,
+              attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+              className: 'fs-map-tile-base-layer'
+            })
+          ]
         }
       ];
     } catch (err) {

package/models/map.ts

@@ -10,7 +10,8 @@ export interface MapLayer {
 export enum MapLayers {
   Map = "map",
   Imagery = "imagery",
-  Snow= "snow"
+  Snow= "snow",
+  OpenStreetMap = "open-street-map"
 }
 
 export enum MapOverlayPositions {

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.16",
-    "@dative-gpi/foundation-shared-services": "1.1.16"
+    "@dative-gpi/foundation-shared-domain": "1.1.18",
+    "@dative-gpi/foundation-shared-services": "1.1.18"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "2ede680103cbec86d21636377bb03c9c300cb8c8"
+  "gitHead": "5fbb75c2d2c18eeef57f17f2fd6962a05b1e6275"
 }