@dative-gpi/foundation-shared-components 1.0.6 → 1.0.9

package/components/lists/FSLoadDataTable.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -81,11 +81,9 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-load-data-table-background-color": backgroundColors.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-load-data-table-background-color": backgroundColors.base
+    }));
 
     return {
       style

package/components/map/FSMap.vue

@@ -129,17 +129,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
-
-import * as L from "leaflet";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
 import "leaflet.markercluster";
+import * as L from "leaflet";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { type Address, type FSArea } from '@dative-gpi/foundation-shared-domain/models';
 
 import { clusterMarkerHtml, locationMarkerHtml, myLocationMarkerHtml } from "../../utils";
-import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 import { useColors, useAddress, useBreakpoints } from "../../composables";
+import { ColorEnum, type FSLocation, type MapLayer } from "../../models";
 
 import FSMapEditPointAddressOverlay from "./FSMapEditPointAddressOverlay.vue";
 import FSMapLayerButton from "./FSMapLayerButton.vue";
@@ -309,16 +308,14 @@ export default defineComponent({
       return margin;
     });
 
-    const style = computed((): { [key: string]: string | undefined } => {
-      return {
-        "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
-        "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
-        "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
-        "--fs-map-leaflet-container-height": props.height as string,
-        "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
-        "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-map-location-pin-color": getColors(ColorEnum.Primary).base,
+      "--fs-map-mylocation-pin-color": getColors(ColorEnum.Primary).base,
+      "--fs-map-mylocation-pin-color-alpha": getColors(ColorEnum.Primary).base + "50",
+      "--fs-map-leaflet-container-height": props.height as string,
+      "--fs-map-leaflet-bottom-overlay-margin": `${bottomMargin.value}px`,
+      "--fs-map-container-grayscale": props.grayscale ? '0.9' : '0'
+    }));
 
     const displayLocations = () => {
       markerLayerGroup.clearLayers();

package/components/map/FSMapOverlay.vue

@@ -1,14 +1,14 @@
 <template>
   <FSCol
     v-show="isExtraSmall"
-    :id="`left-overlay-mobile-${$props.mapId}`"
-    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
-    :style="style"
     class="fs-map-overlay-left-mobile"
     ref="mobileOverlayElement"
     align="bottom-center"
     width="hug"
     gap="2px"
+    :height="$props.mode === 'expand' ? '100%' : ($props.mode === 'half' ? '50%' : 'hug')"
+    :id="`left-overlay-mobile-${$props.mapId}`"
+    :style="style"
     @click="$event.target === mobileOverlayElement?.$el ? $emit('update:mode', 'collapse') : null"
   >
     <FSCard
@@ -17,16 +17,16 @@
       :border="false"
     >
       <FSCol
-        gap="0px"
         height="fill"
+        gap="0px"
       >
         <FSRow
           align="center-center"
           @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
         >
           <FSButton
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
             variant="icon"
+            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
             @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
           />
         </FSRow>
@@ -38,8 +38,8 @@
             name="leftoverlay-header"
           />
           <FSFadeOut
-            :height="$props.mode === 'collapse' ? '0px' : '100%'"
             maskHeight="0px"
+            :height="$props.mode === 'collapse' ? '0px' : '100%'"
           >
             <slot
               name="leftoverlay-body"
@@ -51,11 +51,11 @@
   </FSCol>
   <FSCol
     v-show="!isExtraSmall"
-    :style="style"
-    :id="`left-overlay-${$props.mapId}`"
     class="fs-map-overlay-left"
     width="hug"
     gap="2px"
+    :id="`left-overlay-${$props.mapId}`"
+    :style="style"
   >
     <FSCard
       padding="4px"
@@ -82,7 +82,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
 
 import { useBreakpoints } from "../../composables";
 
@@ -124,7 +124,7 @@ export default defineComponent({
     const leftOverlayMenuMobile = ref(false);
     const mobileOverlayElement = ref(null);
 
-    const style = computed((): { [key: string]: string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (props.mode === "expand") {
         return {
           "--fs-map-overlay-max-height": `calc(${props.height} - 40px)`,

package/components/selects/FSSelectDateSetting.vue

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

package/components/tiles/FSLoadTile.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -92,6 +92,10 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
+    const style = computed((): StyleValue => ({
+      "--fs-load-tile-background-color": backgroundColors.base
+    }));
+
     const heights = computed(() => {
       return {
         image: isMobileSized.value ? "90px" : "100px",
@@ -108,12 +112,6 @@ export default defineComponent({
       }
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-load-tile-background-color": backgroundColors.base
-      };
-    });
-
     return {
       heights,
       widths,

package/components/views/FSEntityHeader.vue

@@ -150,9 +150,9 @@
         />
         <FSIcon
           v-else-if="$props.icon"
+          :color="$props.color"
           :icon="$props.icon"
           :size="imageSize"
-          :color="$props.color"
         />
         <FSCol
           align="center-left"
@@ -210,7 +210,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSBreadcrumbs from "../FSBreadcrumbs.vue";
@@ -245,8 +245,8 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color : {
-      type: Object as PropType<ColorEnum | null>,
+    color: {
+      type: String as PropType<ColorBase>,
       required: false,
       default: null
     },

package/components/views/FSListHeader.vue

@@ -0,0 +1,83 @@
+<template>
+  <template
+    v-if="isExtraSmall"
+  >
+    <FSCol
+      gap="12px"
+    >
+      <FSText
+        font="text-h3"
+      >
+        {{  $props.title }}
+      </FSText>
+      <FSBreadcrumbs
+        :items="$props.breadcrumbs"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      gap="16px"
+    >
+      <FSText
+        font="text-h2"
+      >
+        {{  $props.title }}
+      </FSText>
+      <FSBreadcrumbs
+        :items="$props.breadcrumbs"
+      />
+      <FSSlideGroup
+        v-if="$slots['toolbar']"
+        style="min-width: 100%;"
+      >
+        <slot
+          name="toolbar"
+        />
+      </FSSlideGroup>
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSBreadcrumbs from "../FSBreadcrumbs.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSListHeader",
+  components: {
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSText,
+    FSCol
+  },
+  props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<Array<FSBreadcrumbItem>>,
+      required: false,
+      default: () => []
+    },
+  },
+  setup() {
+    const { isExtraSmall } = useBreakpoints();
+
+    return {
+      isExtraSmall
+    };
+  }
+});
+</script>

package/components/views/FSListView.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSListHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :title="$props.title"
+        padding="0 14px 0 0"
+      >
+        <template
+          #toolbar
+        >
+          <slot
+            name="toolbar"
+          />
+        </template>
+      </FSListHeader>
+    </template>
+    <template
+      #default
+    >
+      <FSFadeOut
+        padding="0 8px 0 0"
+        :height="height"
+      >
+        <slot
+          name="default"
+        />
+      </FSFadeOut>
+    </template>
+  </FSSkeletonView>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSSkeletonView from "./FSSkeletonView.vue";
+import FSListHeader from "./FSListHeader.vue";
+import FSFadeOut from "../FSFadeOut.vue";
+
+export default defineComponent({
+  name: "FSListView",
+  components: {
+    FSSkeletonView,
+    FSListHeader,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup() {
+    const { isExtraSmall, windowHeight } = useBreakpoints();
+
+    const headerRef = ref<HTMLElement | null>(null);
+
+    const height = computed((): string => {
+      let other = isExtraSmall.value ? 16 + 16 : 24 + 24 // Paddings
+        + (headerRef.value?.clientHeight ?? 0);          // Header
+
+      return `${windowHeight.value - other}px`;
+    });
+
+    return {
+      headerRef,
+      height
+    };
+  }
+});
+</script>

package/models/rules.ts

@@ -44,7 +44,7 @@ export const DateRules = {
     required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string | undefined = undefined) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
     max: (max: number, message: string | undefined = undefined) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max))),
-    validateExpression: (variant: "default" | "before-after") => (value: string) => validateExpression(value, variant)
+    validateExpression: (variant: "default" | "before-after" | undefined = "default") => (value: string) => validateExpression(value, variant)
 };
 
 export const SelectRules = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.6",
-    "@dative-gpi/foundation-shared-services": "1.0.6"
+    "@dative-gpi/foundation-shared-domain": "1.0.9",
+    "@dative-gpi/foundation-shared-services": "1.0.9"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b2bbdea22792b7454a5234d8a6b8bb43553f3202"
+  "gitHead": "018a67489fc022344c90d45b02bfabdcd0dcefec"
 }

package/utils/badge.ts

@@ -0,0 +1,9 @@
+export const getBadgeFromNumber = (value: number, parenthesis: boolean = false): string => {
+  if (value < 1) {
+    return "";
+  }
+  if (value > 99) {
+    return `${parenthesis ? '(' : ''}99+${parenthesis ? ')' : ''}`;
+  }
+  return `${parenthesis ? '(' : ''}${value.toString()}${parenthesis ? ')' : ''}`;
+}

package/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./badge";
 export * from "./color";
 export * from "./css";
 export * from "./error";