@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/views/FSSkeletonView.vue

@@ -0,0 +1,100 @@
+<template>
+  <template
+    v-if="isExtraSmall"
+  >
+    <FSCol
+      padding="16px 4px 16px 12px"
+      height="100%"
+      gap="16px"
+    >
+      <slot
+        name="header"
+      >
+        <slot
+          name="title"
+        >
+          <FSRow
+            gap="12px"
+          >
+            <slot
+              name="title-image"
+            />
+            <slot
+              name="title-texts"
+            />
+          </FSRow>
+        </slot>
+      </slot>
+      <slot
+        name="breadcrumbs"
+      />
+      <slot
+        name="toolbar"
+      />
+      <slot
+        name="title-append"
+      />
+      <slot
+        name="default"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      padding="24px 8px 24px 24px"
+      height="100vh"
+      gap="16px"
+    >
+      <slot
+        name="header"
+      >
+        <slot
+          name="title"
+        >
+          <FSRow
+            gap="32px"
+          >
+            <slot
+              name="title-image"
+            />
+            <slot
+              name="title-texts"
+            />
+            <v-spacer />
+            <slot
+              name="title-append"
+            />
+          </FSRow>
+        </slot>
+      </slot>
+      <slot
+        name="breadcrumbs"
+      />
+      <slot
+        name="toolbar"
+      />
+      <slot
+        name="default"
+      />
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+export default defineComponent({
+  name: "FSSkeletonView",
+  setup() {
+    const { isExtraSmall } = useBreakpoints();
+
+    return {
+      isExtraSmall
+    };
+  }
+});
+</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/useColors.ts

@@ -53,14 +53,24 @@ 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 getColors = (color: ColorBase): ColorVariations => {
+    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);
+        }
+        catch {
+            return new Color("#000000");
+        }
+    }
 
-        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
-
+    const getColors = (color: ColorBase): ColorVariations => {
+        const base = parseColor(color);
+        
         const light = getLight(base);
         const soft = getSoft(base);
         const dark = getDark(base);
@@ -96,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

@@ -3,12 +3,13 @@ import { defineAsyncComponent } from "vue";
 import { MagicFieldType } from "../models/magicFields";
 
 const FIELDS = {
-  [MagicFieldType.NumberField]  : defineAsyncComponent(() => import("../components/fields/FSNumberField.vue")),
-  [MagicFieldType.TextField]    : defineAsyncComponent(() => import("../components/fields/FSTextField.vue")),
-  [MagicFieldType.Switch]       : defineAsyncComponent(() => import("../components/FSSwitch.vue")),
-  [MagicFieldType.DateTimeField]: defineAsyncComponent(() => import("../components/fields/FSDateTimeField.vue")),
-  [MagicFieldType.IconField]    : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
-  [MagicFieldType.TimeField]    : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
+  [MagicFieldType.NumberField]    : defineAsyncComponent(() => import("../components/fields/FSNumberField.vue")),
+  [MagicFieldType.TextField]      : defineAsyncComponent(() => import("../components/fields/FSTextField.vue")),
+  [MagicFieldType.Switch]         : defineAsyncComponent(() => import("../components/FSSwitch.vue")),
+  [MagicFieldType.DateTimeField]  : defineAsyncComponent(() => import("../components/fields/FSDateTimeField.vue")),
+  [MagicFieldType.IconField]      : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
+  [MagicFieldType.TimeField]      : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
+  [MagicFieldType.TimeStepField]  : defineAsyncComponent(() => import("../components/fields/FSTimeStepField.vue")),
 };
 
 export const useMagicFieldProvider = () => {

package/composables/useSlots.ts

@@ -1,32 +1,55 @@
-import type { Slot} from "vue";
-import { useSlots as useVueSlots } from "vue"
+import { type Slot, useSlots as useVueSlots } from "vue"
 
 export const useSlots = () => {
-    const getChildren = (name: string | undefined = undefined): any => {
-        const innerSlots = { ...useVueSlots() };
-        const innerName = name ?? "default";
-        if (innerSlots[innerName] != null) {
-            const slot = innerSlots[innerName]!;
-            switch (typeof(slot()[0].type)) {
-                // Directive wrapper (v-for, v-if)
-                case "symbol":
-                    switch (slot()[0].type) {
-                        case Symbol.for("v-fgt"): return slot()[0].children;
-                        case Symbol.for("v-cmt"): return slot();
-                        default:                  return slot();
-                    }
-                // Custom component
-                case "object": return slot();
-                // Pre-existing component
-                case "string": return slot();
-            }
-            return slot();
-        }
-        return null;
-    };
+  const getChildren = (name: string | undefined = undefined): any => {
+    const innerSlots = { ...useVueSlots() };
+    const innerName = name ?? "default";
+    if (innerSlots[innerName] != null) {
+      return recursiveGetChildren(innerSlots[innerName]!());
+    }
+    return null;
+  };
 
-    return {
-        slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
-        getChildren
-    };
+  const recursiveGetChildren = (elements: any): any => {
+    if (elements == null) {
+      return null;
+    }
+    const returnElements: any[] = [];
+    for (const element of elements) {
+      switch (typeof(element.type)) {
+        // Directive wrapper (v-for, v-if)
+        case "symbol":
+          switch (element.type) {
+            case Symbol.for("v-fgt"):
+              returnElements.push(...recursiveGetChildren(element.children));
+              break;
+            case Symbol.for("v-cmt"):
+              returnElements.push(element);
+              break;
+            default:
+              returnElements.push(element);
+              break;
+          }
+          break;
+        // Custom component
+        case "object":
+          returnElements.push(element);
+          break;
+        // Pre-existing component
+        case "string":
+          returnElements.push(element);
+          break;
+        // Default
+        default:
+          returnElements.push(element);
+          break;
+      }
+    }
+    return returnElements;
+  };
+
+  return {
+    slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
+    getChildren
+  };
 }

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

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

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,10 +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/enums";
 
-const { epochToLongDateFormat } = useAppTimeZone()!;
+const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
@@ -30,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"))
@@ -44,7 +45,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 = {
@@ -65,12 +66,16 @@ export const TimeRules = {
     max: (max: number, message: string | undefined = undefined) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };
 
+export const TimeStepRules = {
+    required: (message: string | undefined = undefined) => (value: { value: number, unit: TimeUnit } | null) => (!!value && value.value !== 0) || (message ?? $tr("ui.rules.required", "Required")),
+}
+
 export const ToggleRules = {
     required: (message: string | undefined = undefined) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
 };
 
 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;

package/package.json

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

package/styles/components/fs_agenda.scss

@@ -0,0 +1,32 @@
+.fs-agenda-view {
+  min-height: 0;
+}
+
+.fs-agenda-label-day-container {
+  flex-shrink: 0;
+}
+
+.fs-agenda-label-day {
+  border-bottom: 1px solid var(--fs-agenda-label-day-border-bottom-color);
+  border-right: 1px solid var(--fs-agenda-label-day-border-right-color);
+  min-height: 0px;
+}
+
+.fs-agenda-label-day-now {
+  border-bottom: 4px solid var(--fs-clickable-border-color);
+}
+
+.fs-agenda-body {
+  position: relative;
+}
+
+.fs-agenda-row-day {
+  position: relative;
+  border-bottom: 1px solid var(--fs-agenda-row-day-border-bottom-color);
+}
+
+.fs-day-agenda-hour-line {
+  border-top: solid 1px var(--fs-day-agenda-hour-line-color);
+  width: 100%;
+  height: 100%;
+}

package/styles/components/fs_agenda_event.scss

@@ -0,0 +1,41 @@
+.fs-agenda-event {
+  position: absolute !important;
+  left: var(--fs-agenda-event-left);
+  top: var(--fs-agenda-event-top);
+
+  &.fs-agenda-event-past {
+    opacity: 0.5;
+  }
+
+  >.fs-card {
+    border-left: solid 3px var(--fs-clickable-border-color) !important;
+  }
+}
+
+.fs-agenda-event .fs-col,
+.fs-agenda-event .fs-row {
+  overflow: hidden;
+}
+
+.fs-day-agenda .fs-agenda-event {
+  .fs-agenda-event-day-label-container {
+    overflow: visible !important;
+  }
+}
+
+.fs-week-agenda .fs-agenda-event{
+  margin-top: 3px;
+  margin-bottom: 3px;
+  height: calc(100% - 6px) !important;
+}
+
+.fs-month-agenda .fs-agenda-event {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  height: calc(100% - 4px) !important;
+}
+
+.fs-agenda-event-current span {
+  text-overflow: unset;
+  flex-shrink: 0;
+}

package/styles/components/fs_agenda_hours_col.scss

@@ -0,0 +1,4 @@
+.fs-agenda-hours-col {
+  transform: translateY(calc(-2.4% + 4px));
+  overflow: visible;
+}

package/styles/components/fs_agenda_hours_row.scss

@@ -0,0 +1,13 @@
+.fs-agenda-hours-row {
+  transform: translateX(calc(-2.4% + 2px));
+}
+
+.fs-agenda-hours-row-text {
+  padding: 0 2px;
+}
+
+.fs-agenda-hours-row-marker {
+  height: 4px;
+  border-right: solid 1px var(--fs-agenda-hours-row-marker-color);
+  transform: translateY(-4px);
+}

package/styles/components/fs_agenda_time_line_marker.scss

@@ -0,0 +1,19 @@
+.fs-agenda-horizontal-time-line-marker {
+  position: absolute;
+  top: 0;
+  left: var(--fs-agenda-horizontal-time-line-marker-left);
+  width: 2px;
+  height: 100%;
+  z-index: 1;
+  background-color: var(--fs-agenda-horizontal-time-line-marker-color);
+}
+
+.fs-agenda-vertical-time-line-marker {
+  position: absolute;
+  top: var(--fs-agenda-vertical-time-line-marker-top);
+  left: 0;
+  width: 100%;
+  height: 2px;
+  z-index: 1;
+  background-color: var(--fs-agenda-vertical-time-line-marker-color);
+}

package/styles/components/fs_card.scss

@@ -12,7 +12,6 @@
     &-elevation {
         box-shadow: 0px 1px 8px 0px #00000029;
         border-radius: 4px;
-        margin: 4px;
     }
 
     &-background {

package/styles/components/fs_clickable.scss

@@ -17,7 +17,8 @@
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-hover-background-color);
         }
     }
@@ -27,7 +28,8 @@
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-background {
+        & .fs-card-clickable {
+            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             background-color: var(--fs-clickable-active-background-color);
         }
     }
@@ -42,7 +44,7 @@ a:has(.fs-clickable) {
 }
 
 button:has(.fs-clickable) {
-    position: relative !important;
+    position: relative;
     height: var(--fs-clickable-height);
     width: var(--fs-clickable-width);
 }

package/styles/components/fs_color_field.scss

@@ -1,5 +1,6 @@
 .fs-color-field .fs-card {
   cursor: var(--fs-color-field-cursor) !important;
+  min-width: var(--fs-base-field-min-width);
   border-color: var(--fs-color-field-border-color) !important;
   .fs-text {
     color: var(--fs-color-field-color) !important;

package/styles/components/fs_data_table.scss

@@ -1,4 +1,6 @@
 .fs-data-table {
+  background-color: var(--fs-data-table-row-background-color) !important;
+  
   & > .v-table__wrapper {
     padding: 0 1px 0 0;
 

package/styles/components/fs_dialog.scss

@@ -1,18 +1,14 @@
-.fs-dialog-mobile {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: 100% !important;
-    width: 100% !important;
-    margin: 0 !important;
-    align-self: flex-end;
-  }
+.fs-dialog-mobile > .v-overlay__content {
+  max-height: calc(100% - 40px) !important;
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  align-self: flex-end;
 }
 
-.fs-dialog {
-  & > .v-overlay__content {
-    max-height: calc(100% - 40px) !important;
-    max-width: calc(100% - 40px) !important;
-    min-width: 35vw !important;
-    width: fit-content !important;
-  }
+.fs-dialog > .v-overlay__content {
+  max-height: calc(100vh - 40px) !important;
+  max-width: calc(100vw - 40px) !important;
+  width: fit-content !important;
+  margin: 20px !important;
 }

package/styles/components/fs_edit_image.scss

@@ -2,6 +2,14 @@
     color: var(--fs-edit-image-overline-text-color) !important;
 }
 
+.fs-edit-image-standard-row {
+    min-width: 0;
+}
+
+.fs-edit-image-standard-label-wrapper {
+    min-width: 0;
+}
+
 .fs-edit-image-hidden-button {
     display: none;
 }

package/styles/components/fs_fade_out.scss

@@ -2,8 +2,9 @@
     @extend .fs-hide-y-scrollbar;
     
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    max-height: var(--fs-fade-out-height);
+    max-height: var(--fs-fade-out-max-height);
     padding: var(--fs-fade-out-padding);
+    height: var(--fs-fade-out-height);
     width: var(--fs-fade-out-width);
     flex-direction: column;
     position: relative;

package/styles/components/fs_filter_button.scss

@@ -1,10 +1,5 @@
 .fs-filter-button-menu {
-    @include web {
-        min-width: 200px !important;
-    }
-    @include mobile {
-        min-width: 180px !important;
-    }
+    min-width: 300px !important;
 }
 
 .fs-filter-button-chip {