@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -0,0 +1,132 @@
+<template>
+  <FSFadeOut
+    height="100%"
+    maxHeight="100%"
+    :scrollOutside="false"
+    :disableTopMask="true"
+  >
+    <FSCol
+      height="fill"
+      gap="0px"
+    >
+      <slot
+        name="header"
+      >
+
+        <FSRow
+          padding="24px 16px 16px 24px"
+          style="position: sticky; top: 0px; z-index: 3;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+          </slot>
+        </FSRow>
+        <FSCol
+          v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
+          :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
+          gap="16px"
+        >
+          <FSCol>
+            <slot
+              name="breadcrumbs"
+            >
+              <FSBreadcrumbs
+                :items="$props.breadcrumbs"
+              />
+            </slot>
+          </FSCol>
+        </FSCol>
+        <FSRow
+          v-if="$slots.toolbar"
+          padding="0px 16px 8px 24px"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+        >
+          <FSSlideGroup>
+            <slot
+              name="toolbar"
+            />
+          </FSSlideGroup>
+        </FSRow>
+      </slot>
+
+      <FSCol
+        height="fill"
+        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
+        gap="0px"
+      >
+        <slot />
+      </FSCol>
+    </FSCol>
+  </FSFadeOut>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed } from "vue";
+
+import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { useColors } from "../../../composables"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSBreadcrumbs from "../../FSBreadcrumbs.vue";
+import FSSlideGroup from "../../FSSlideGroup.vue";
+import FSFadeOut from "../../FSFadeOut.vue"
+
+export default defineComponent({
+  name: "FSBaseDefaultDesktopView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    },
+    stickyToolbar: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    toolbarTopOffset: {
+      type: String,
+      required: false,
+      default: "72px" 
+    },
+    stickyTitleTopOffset: {
+      type: String,
+      required: false,
+      default: "0px"
+    }
+  },
+  setup(){
+    const { getColors } = useColors();
+
+    const backgroundColor = computed(() => {
+      return getColors(ColorEnum.Background).base;
+    });
+
+    return {
+      backgroundColor
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -0,0 +1,198 @@
+<template>
+  <FSBaseDefaultMobileView
+    :toolbarTopOffset="topOffset + 'px'"
+    :stickyTitleTopOffset="topOffset + 'px'"
+    @scroll="onScroll"
+  >
+    <template
+      #title
+    >
+      <FSRow
+        gap="24px"
+        :wrap="false"
+      >
+        <FSImage 
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :cover="$props.imageCover"
+          :height="actualImageSize"
+          :width="actualImageSize"
+        />
+        <FSIconCard
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :iconColor="$props.iconColor"
+          :border="$props.iconBorder"
+          :icon="$props.icon"
+          :size="actualImageSize"
+        />
+        <FSCol
+          align="center-left"
+          height="fill"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h3"
+            >
+              {{ $props.title }}
+            </FSText>
+            <slot
+              name="title-extra"
+              v-bind="{ topOffset }"
+            >
+              <slot
+                name="subtitle"
+              >
+                <FSText
+                  v-if="$props.subtitle && topOffset < 60"
+                  font="text-button"
+                >
+                  {{ $props.subtitle }}
+                </FSText>
+              </slot>
+              <slot
+                name="description"
+              >
+                <FSText
+                  v-if="$props.description && topOffset < 20"
+                  font="text-body"
+                >
+                  {{ $props.description }}
+                </FSText>
+              </slot>
+            </slot>
+          </slot>
+        </FSCol>
+      </FSRow>
+    </template>
+
+    <template
+      v-for="(_, name) in slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, useSlots, type PropType, computed, ref } from "vue";
+
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../../../utils"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSImage from "../../FSImage.vue";
+import FSIconCard from "../../FSIconCard.vue"
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseEntityMobileView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBaseDefaultMobileView,
+    FSImage,
+    FSIconCard,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    description: {
+      type: String,
+      required: false
+    },
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    imageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["124px", "96px", "80px"]
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-ab-testing"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    minImageSize: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["48px", "48px", "48px"]
+    }
+  },
+  setup(props){
+    const slots = { ...useSlots() };
+
+    const topOffset = ref(0);
+
+    const actualImageSize = computed(() => {
+      const size = sizeToVar(props.imageSize);
+      const minSize = sizeToVar(props.minImageSize);
+      return `max(calc(${size} - ${topOffset.value}px), ${minSize})`;
+    });
+
+    const onScroll = (event: Event) => {
+      const actualScrollTop = (event.target as HTMLElement).scrollTop;
+
+      const minSize = sizeToVar(props.minImageSize);
+      const actualMinSize = parseInt(minSize);
+
+      topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
+    }
+
+    delete slots.title;
+
+    return {
+      slots,
+      onScroll,
+      topOffset,
+      actualImageSize
+    }
+  }
+});
+</script>

package/components/views/mobile/FSBaseMobileView.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSBaseDefaultMobileView
+    v-if="$props.variant === 'default'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDefaultMobileView>
+
+  <FSBaseEntityMobileView
+    v-if="$props.variant === 'entity'"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseEntityMobileView>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSBaseDefaultMobileView from "./FSBaseDefaultMobileView.vue";
+import FSBaseEntityMobileView from "./FSBaseEntityMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseMobileView",
+  components: {
+    FSBaseDefaultMobileView,
+    FSBaseEntityMobileView
+  },
+  props: {
+    variant: {
+      type: String as PropType<"default" | "entity">,
+      required: false,
+      default: "default"
+    }
+  }
+});
+</script>

package/composables/useAddress.ts

@@ -1,7 +1,7 @@
-import type { Place } from "@dative-gpi/foundation-shared-domain/models";
-import { Address } from "@dative-gpi/foundation-shared-domain/models";
 import _ from "lodash";
 
+import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+
 export const useAddress = () => {
   const enabled = true;
   let initialized = false;

package/composables/useBreakpoints.ts

@@ -5,10 +5,19 @@ let initialized = false;
 const windowHeight = ref(window.innerHeight);
 const windowWidth = ref(window.innerWidth);
 
+const windowOuterWidth = ref(!window.document.hasFocus() && window.outerWidth === 0 ? window.innerWidth : window.outerWidth);
+
 export const useBreakpoints = () => {
     const onSizeChange = (): void => {
         windowHeight.value = window.innerHeight;
         windowWidth.value = window.innerWidth;
+
+        // Bug in chromium based browsers where window.outerWidth is 0 when tab loads without focus
+        if (!window.document.hasFocus() && window.outerWidth === 0) {
+            windowOuterWidth.value = window.innerWidth;
+            return;
+        }
+        windowOuterWidth.value = window.outerWidth;
     };
 
     const isTouchScreenEnabled = computed((): boolean => {
@@ -16,11 +25,11 @@ export const useBreakpoints = () => {
     });
 
     const isMobileSized = computed((): boolean => {
-        return windowWidth.value < 1264;
+        return windowOuterWidth.value < 1264;
     });
 
     const isExtraSmall = computed((): boolean => {
-        return windowWidth.value < 600;
+        return windowOuterWidth.value < 600;
     });
 
     if (!initialized) {
@@ -28,11 +37,38 @@ export const useBreakpoints = () => {
         initialized = true;
     }
 
+    const fontStyles = computed(() => ({
+        "--fs-font-h1-font-size"           : isMobileSized.value ? "28px" : "36px",
+        "--fs-font-h1-line-height"         : isMobileSized.value ? "32px" : "40px",
+        "--fs-font-h1-letter-spacing"      : isMobileSized.value ? "-1.4px" : "-0.72px",
+        "--fs-font-h2-font-size"           : isMobileSized.value ? "22px" : "26px",
+        "--fs-font-h2-line-height"         : isMobileSized.value ? "24px" : "32px",
+        "--fs-font-h2-letter-spacing"      : isMobileSized.value ? "-0.88px" : "-0.78px",
+        "--fs-font-h3-font-size"           : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-h3-line-height"         : isMobileSized.value ? "20px" : "24px",
+        "--fs-font-h3-letter-spacing"      : isMobileSized.value ? "-0.48px" : "-0.6px",
+        "--fs-font-button-font-size"       : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-button-line-height"     : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-button-letter-spacing"  : isMobileSized.value ? "-0.36px" : "-0.42px",
+        "--fs-font-overline-font-size"     : isMobileSized.value ? "10px" : "12px",
+        "--fs-font-overline-line-height"   : isMobileSized.value ? "16px" : "16px",
+        "--fs-font-overline-letter-spacing": isMobileSized.value ? "0" : "0",
+        ...bodyStyle.value
+    }));
+
+    const bodyStyle = computed(() => ({
+        "--fs-font-body-font-size"     : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-body-line-height"   : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-body-letter-spacing": isMobileSized.value ? "-0.36px" : "-0.42px",
+    }));
+
     return {
         isTouchScreenEnabled,
         isMobileSized,
         isExtraSmall,
         windowHeight,
-        windowWidth
+        windowWidth,
+        fontStyles,
+        bodyStyle
     };
 }

package/composables/useColors.ts

@@ -53,7 +53,8 @@ export const useColors = () => {
         if(color.darken(0.15).isLight()){
             return color.darken(0.8);
         }
-        return color.lighten(color.value() / 50);
+
+        return color.lightness(color.lightness() < 30 ? 100 : Math.min(color.lightness() + 60, 100));
     }
 
     const parseColor = (color: ColorBase): Color => {
@@ -105,7 +106,7 @@ export const useColors = () => {
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
             const colorsRow = [];
-            for (let hue = 0; hue < 360; hue += 15) {
+            for (let hue = 0; hue < 360; hue += 5) {
                 const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
                 colorsRow.push(color.hex());
             }

package/composables/useMagicFieldProvider.ts

@@ -10,6 +10,7 @@ const FIELDS = {
   [MagicFieldType.IconField]      : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
   [MagicFieldType.TimeField]      : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
   [MagicFieldType.TimeStepField]  : defineAsyncComponent(() => import("../components/fields/FSTimeStepField.vue")),
+  [MagicFieldType.PlotPerField]   : defineAsyncComponent(() => import("../components/selects/chartSelectors/FSPlotPerSelector.vue")),
 };
 
 export const useMagicFieldProvider = () => {

package/models/agenda.ts

@@ -0,0 +1,9 @@
+export interface FSAgendaEvent {
+  id: string;
+  label: string;
+  icon?: string;
+  iconBis?: string;
+  color: string;
+  start: number;
+  end: number;
+}

package/models/deviceAlerts.ts

@@ -1,4 +1,4 @@
-import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import type { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceAlert {
     id: string;

package/models/deviceConnectivities.ts

@@ -1,4 +1,4 @@
-import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import type { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 export interface FSDeviceConnectivity {
     id: string;

package/models/index.ts

@@ -1,3 +1,4 @@
+export * from "./agenda";
 export * from "./breadcrumbs";
 export * from "./colors";
 export * from "./deviceAlerts";

package/models/magicFields.ts

@@ -7,4 +7,5 @@ export enum MagicFieldType {
   IconField     = 5,
   TimeField     = 6,
   TimeStepField = 7,
+  PlotPerField  = 8,
 }

package/models/map.ts

@@ -12,7 +12,7 @@ export interface MapLayer {
 export interface FSLocation {
   id: string;
   label: string;
-  icon: string;
+  icon: string | null;
   address: Address;
-  color: string;
+  color: string | null;
 }

package/models/rules.ts

@@ -1,11 +1,11 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
 import { getTimeBestString } from "../utils";
-import type { TimeUnit } from "@/shared/foundation-shared-domain";
+import type { TimeUnit } from "@/shared/foundation-shared-domain/enums";
 
-const { epochToLongDateFormat } = useAppTimeZone()!;
+const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
@@ -31,7 +31,7 @@ export const TagRules = {
 };
 
 export const NumberRules = {
-    required: (message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
+    required: (message: string | undefined = undefined) => (value: string) => (value != null && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
     integer: (message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
@@ -76,6 +76,6 @@ export const ToggleRules = {
 
 export const TreeViewRules = {
     required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | undefined = undefined) => (value: string[]) => { console.log(value); return (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())); },
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.tree-view-min", "Must select at least {0} elements", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.tree-view-max", "Must select at most {0} elements", max.toString()))
 };

package/models/tables.ts

@@ -8,10 +8,12 @@ export interface FSDataTableColumn {
 
   sortable?: boolean | null;
   sort?: ((a: any, b: any) => number) | null;
+  sortRaw?: ((a: any, b: any) => number) | null;
 
   filterable?: boolean | null;
   fixedFilters?: { value: any, text: string }[] | null;
-  methodFilter?: ((value: any, item: any) => boolean) | null;
+  methodFilter?: ((value: any, property: any) => boolean) | null;
+  methodFilterRaw?: ((value: any, item: any) => boolean) | null;
   filter?: ((value: any, search: string, item: any) => boolean) | null;
 
   innerValue?: ((value: any) => any) | null;
@@ -35,8 +37,9 @@ export interface FSDataTableOrder {
 export interface FSDataTable {
   headers: FSDataTableColumn[];
   sortBy: FSDataTableOrder | null;
-  mode: "table" | "iterator";
+  mode: "table" | "iterator" | null;
   rowsPerPage: -1 | 10 | 30;
+  showFilters: boolean;
   filters: { [key: string]: FSDataTableFilter[] };
   page: number;
 }

package/models/variableNode.ts

@@ -51,14 +51,17 @@ export class VariableNode extends DecoratorNode<Element> {
       content.classList.add("fs-rich-text-field-node-variable-value");
       if (_editor._rootElement) {
         content.textContent = this.getValue(_editor._rootElement);
-      }
-      else {
+  
+        const observer = new MutationObserver(() => {
+          content.textContent = this.getValue(_editor._rootElement!);
+        });
+        observer.observe(_editor._rootElement, { attributes: true, attributeFilter: ['data-variable-values'] });
+      } else {
         content.textContent = this.__defaultValue;
       }
-    }
-    else {
+    } else {
       content.classList.add("fs-rich-text-field-node-variable-code");
-      content.textContent = `{${this.__code}}`
+      content.textContent = `{${this.__code}}`;
     }
     container.appendChild(content);
     return container;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.26",
+  "version": "1.0.28-remove-deprecated2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.26",
-    "@dative-gpi/foundation-shared-services": "1.0.26"
+    "@dative-gpi/foundation-shared-domain": "1.0.28-remove-deprecated2",
+    "@dative-gpi/foundation-shared-services": "1.0.28-remove-deprecated2"
   },
   "peerDependencies": {
-    "@dative-gpi/bones-ui": "^0.0.75",
+    "@dative-gpi/bones-ui": "^1.0.0",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "0.12.5",
     "@lexical/history": "0.12.5",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "55c73ec6624ef58f78303ce68256236984c83ca9"
+  "gitHead": "65c182fd697939a07ad87c683a2f4c2fb765a7c7"
 }