@dative-gpi/foundation-shared-components 0.0.7 → 0.0.9

package/components/tiles/FSGroupTileUI.vue

@@ -0,0 +1,192 @@
+<template>
+  <FSTile
+    :bottomColor="ColorEnum.Error"
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-center"
+        gap="24px"
+        :wrap="false"
+        :height="infoHeight"
+      >
+        <FSCol
+          gap="12px"
+        >
+          <FSCol
+            gap="6px"
+            :width="infoWidth"
+          >
+            <FSSpan
+              font="text-button"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              font="text-overline"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <FSCol
+            gap="6px"
+          >
+            <FSRow
+              align="center-left"
+            >
+              <FSColor
+                align="center-center"
+                padding="0 8px"
+                height="24px"
+                :color="ColorEnum.Primary"
+              >
+                <FSText
+                  font="text-overline"
+                >
+                  {{ groupsLabel }}
+                </FSText>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
+              </FSSpan>
+            </FSRow>
+            <FSRow
+              align="center-left"
+            >
+              <FSColor
+                align="center-center"
+                padding="0 8px"
+                height="24px"
+                :color="ColorEnum.Success"
+              >
+                <FSText
+                  font="text-overline"
+                >
+                  {{ deviceOrganisationsLabel }}
+                </FSText>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
+              </FSSpan>
+            </FSRow>
+          </FSCol>
+        </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :width="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSImage from "../FSImage.vue";
+import FSColor from "../FSColor.vue";
+import FSSpan from "../FSSpan.vue";
+import FSText from "../FSText.vue";
+import FSTile from "../FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSGroupTileUI",
+  components: {
+    FSImage,
+    FSColor,
+    FSSpan,
+    FSText,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String,
+      required: false,
+      default: null
+    },
+    recursiveGroupsIds: {
+      type: Array as PropType<String[]>,
+      required: false,
+      default: () => []
+    },
+    recursiveDeviceOrganisationsIds: {
+      type: Array as PropType<String[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const groupsLabel = computed((): string => {
+      return props.recursiveGroupsIds.length > 99 ? "99+" : props.recursiveGroupsIds.length.toString();
+    });
+
+    const deviceOrganisationsLabel = computed((): string => {
+      return props.recursiveDeviceOrganisationsIds.length > 99 ? "99+" : props.recursiveDeviceOrganisationsIds.length.toString();
+    });
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      let width = isMobileSized.value ? 288 : 304;
+      if (props.imageId) {
+        width -= imageSize.value;
+      }
+      return `${width}px`;
+    });
+
+    const infoHeight = computed((): string => {
+      return `${imageSize.value}px`;
+    });
+
+    return {
+      ColorEnum,
+      groupsLabel,
+      deviceOrganisationsLabel,
+      imageSize,
+      infoWidth,
+      infoHeight
+    };
+  }
+});
+</script>

package/composables/index.ts

@@ -1,2 +1,3 @@
+export * from "./useBreakpoints";
 export * from "./useColors";
-export * from "./useTouch";
+export * from "./useSlots";

package/composables/useBreakpoints.ts

@@ -0,0 +1,33 @@
+import { computed, onMounted, onUnmounted, ref } from "vue";
+
+export const useBreakpoints = () => {
+    const windowWidth = ref(window.innerWidth);
+
+    const onWidthChange = () => windowWidth.value = window.innerWidth;
+
+    onMounted(() => {
+        window.addEventListener("resize", onWidthChange);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener("resize", onWidthChange);
+    });
+
+    const isTouchScreenEnabled = (): boolean => {
+        return navigator.maxTouchPoints > 0;
+    };
+
+    const isMobileSized = computed((): boolean => {
+        return windowWidth.value < 1264;
+    });
+
+    const isExtraSmall = computed((): boolean => {
+        return windowWidth.value < 600;
+    });
+
+    return {
+        isTouchScreenEnabled,
+        isMobileSized,
+        isExtraSmall
+    };
+}

package/composables/useColors.ts

@@ -2,28 +2,36 @@ import { useTheme } from "vuetify";
 
 import Color from "color";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum, ColorVariations } from "@dative-gpi/foundation-shared-components/models";
 
 export const useColors = () => {
     const theme = useTheme().current.value;
 
-    const lighten = (color: ColorBase, base: Color): Color => {
-        switch (color) {
-            case ColorBase.Light:
-            case ColorBase.Dark: return base.value(Math.min(base.value() + 10, 100));
-            default: return base.saturationv(10).value(Math.min(base.value() + 10, 100));
+    const isGrayScale = (color: Color): boolean => {
+        const maxDiff = Math.max(
+            Math.abs(color.red() - color.green()),
+            Math.abs(color.green() - color.blue()),
+            Math.abs(color.blue() - color.red())
+        );
+        return maxDiff < 10;
+    };
+
+    const lighten = (base: Color): Color => {
+        if (isGrayScale(base)) {
+            return base.value(Math.min(base.value() + 10, 100));
         }
+        return base.saturationv(10).value(100);
     };
 
     const darken = (base: Color): Color => {
         return base.value(Math.max(base.value() - 15, 0));
     };
 
-    const getColors = (color: ColorBase | String) => {
-        const themed = (Object as any).values(ColorBase).includes(color);
+    const getColors = (color: ColorBase): ColorVariations => {
+        const themed = (Object as any).values(ColorEnum).includes(color);
 
-        const base = themed ? new Color(theme.colors[color as ColorBase]) : new Color(color);
-        const light = lighten(color as ColorBase, base);
+        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        const light = lighten(base);
         const dark = darken(base);
 
         return {
@@ -33,24 +41,46 @@ export const useColors = () => {
         };
     };
 
-    const getContrasts = (color: ColorBase | string) => {
-        switch (color) {
-            case ColorBase.Light: {
-                const base = new Color(theme.colors[ColorBase.Dark]);
-                return {
-                    light: base.hex(),
-                    base: base.hex(),
-                    dark: base.hex()
-                };
-            }
-            default: {
-                return getColors(color);
+    const getContrasts = (color: ColorBase): ColorVariations => {
+        const themed = (Object as any).values(ColorEnum).includes(color);
+
+        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+
+        if (isGrayScale(base)) {
+            switch (color) {
+                case ColorEnum.Light:
+                    return getColors(ColorEnum.Dark);
+                case ColorEnum.Dark:
+                    return getColors(ColorEnum.Light);
+                default:
+                    if (base.value() > 50) {
+                        base.value(Math.max(base.value() - 65, 0));
+                    }
+                    else {
+                        base.value(Math.min(base.value() + 65, 100));
+                    }
+                    break;
             }
         }
+        return getColors(color);
+    };
+
+    const getGradients = (colors: ColorBase | ColorBase[]): ColorVariations => {
+        const variations = Array.isArray(colors) ? colors.map(getColors) : [getColors(colors)];
+
+        if (variations.length === 1) {
+            return variations[0];
+        }
+        return {
+            light: `linear-gradient(90deg, ${variations.map(v => v.light).join(", ")})`,
+            base: `linear-gradient(90deg, ${variations.map(v => v.base).join(", ")})`,
+            dark: `linear-gradient(90deg, ${variations.map(v => v.dark).join(", ")})`,
+        };
     }
 
     return {
         getColors,
-        getContrasts
+        getContrasts,
+        getGradients
     };
 }

package/composables/useSlots.ts

@@ -0,0 +1,43 @@
+import { useSlots as useVueSlots } from "vue"
+
+export const useSlots = () => {
+    const getChildren = (name: string | 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();
+                    }
+                // Custom component
+                case "object":
+                    return slot();
+                // Pre-existing component
+                case "string":
+                    return slot();
+            }
+            return slot();
+        }
+        return null;
+    };
+
+    const getFirstChild = (name: string | undefined): any => {
+        const children = getChildren(name);
+        if (children != null) {
+            return children[0];
+        }
+        return null;
+    };
+
+    return {
+        slots: { ...useVueSlots() },
+        getChildren,
+        getFirstChild
+    };
+}

package/index.ts

@@ -0,0 +1,6 @@
+export * from "./aliases";
+export * from "./composables";
+export * from "./models";
+export * from "./plugins";
+export * from "./themes";
+export * from "./utils";

package/models/breadcrumbs.ts

@@ -0,0 +1,8 @@
+export interface FSBreadcrumbItem {
+  href: string | undefined,
+  replace: boolean | undefined,
+  to: string | undefined,
+  exact: boolean | undefined,
+  title: string,
+  disabled: boolean
+}

package/models/colors.ts

@@ -0,0 +1,17 @@
+export enum ColorEnum {
+    Background = "background",
+    Light      = "light",
+    Dark       = "dark",
+    Primary    = "primary",
+    Error      = "error",
+    Warning    = "warning",
+    Success    = "success"
+};
+
+export interface ColorVariations {
+    light: string;
+    base: string;
+    dark: string;
+};
+
+export type ColorBase = (String | ColorEnum);

package/models/deviceAlerts.ts

@@ -0,0 +1,10 @@
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+
+export interface FSDeviceAlert {
+    id: string;
+    label: string;
+    status: AlertStatus;
+    criticity: Criticity;
+    sourceTimestamp?: number;
+    enqueuedTimestamp?: number;
+}

package/models/deviceConnectivities.ts

@@ -0,0 +1,11 @@
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+
+export interface FSDeviceConnectivity {
+    id: string;
+    sourceTimestamp?: number;
+    enqueuedTimestamp?: number;
+    processedTimestamp?: number;
+    status: ConnectivityStatus;
+    icon: string;
+    color: string;
+}

package/models/deviceStatuses.ts

@@ -0,0 +1,16 @@
+export interface FSDeviceStatus {
+    modelStatusId: string;
+    statusGroups: FSDeviceStatusGroup[];
+}
+
+export interface FSDeviceStatusGroup {
+    label: string;
+    groupByValue?: string;
+    value: string;
+    unit?: string;
+    icon: string;
+    color: string;
+    sourceTimestamp?: number;
+    enqueuedTimestamp?: number;
+    processedTimestamp?: number;
+}

package/models/dispositions.ts

@@ -0,0 +1,33 @@
+export interface FSDataTableColumn {
+    [key: string]: any;
+    text?: string;
+    value?: string;
+    index: number;
+    hidden: boolean;
+    width?: string | number;
+
+    sortable?: boolean;
+    sort?: (a: any, b: any) => number;
+
+    filterable?: boolean;
+    fixedFilters?: { value: any, text: string }[];
+    methodFilter?: (value: any, item: any) => boolean;
+    filter?: (value: any, search: string, item: any) => boolean;
+
+    innerValue?: (value: any) => any;
+
+    // Should not be set directly !
+    slotName?: string;
+}
+
+export interface FSDataTableFilter {
+    text: string;
+    value: string;
+    hidden: boolean;
+    filter?: (value: any, property: any, item: any) => boolean;
+}
+
+export interface FSDataTableOrder {
+    key: string;
+    order: "asc" | "desc";
+}

package/models/index.ts

@@ -0,0 +1,9 @@
+export * from "./breadcrumbs";
+export * from "./colors";
+export * from "./deviceAlerts";
+export * from "./deviceConnectivities";
+export * from "./deviceStatuses";
+export * from "./dispositions";
+export * from "./modelStatuses";
+export * from "./rules";
+export * from "./toggleSets";

package/models/modelStatuses.ts

@@ -0,0 +1,11 @@
+export interface FSModelStatus {
+    id: string;
+    label: string;
+    inline: boolean;
+    index: number;
+    groupById?: string;
+    groupByLabel?: string;
+    showDefault: boolean;
+    iconDefault?: string;
+    colorDefault?: string;
+}

package/models/rules.ts

@@ -0,0 +1,50 @@
+import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+
+const { epochToLongDateFormat } = useTimeZone();
+const { $tr } = useTranslationsProvider();
+
+export const TextRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
+    max: (max: number, message: string) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
+    email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
+    digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
+    uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
+    lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
+    special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
+};
+
+export const TagRules = {
+    required: (message: string) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
+    max: (max: number, message: string) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
+};
+
+export const NumberRules = {
+    required: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (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) => (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) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
+};
+
+export const IconRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+};
+
+export const DateRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
+    max: (max: number, message: string) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
+};
+
+export const SelectRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
+};
+
+export const AutocompleteRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
+};

package/models/toggleSets.ts

@@ -0,0 +1,7 @@
+export interface FSToggle {
+    id: string | number;
+    prependIcon?: string;
+    label?: string;
+    appendIcon?: string;
+    icon?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,10 +9,19 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.7",
-    "@dative-gpi/foundation-shared-services": "0.0.7",
+    "@dative-gpi/foundation-shared-domain": "0.0.9",
+    "@dative-gpi/foundation-shared-services": "0.0.9",
     "@fontsource/montserrat": "^5.0.16",
+    "@lexical/history": "^0.12.5",
+    "@lexical/link": "^0.12.5",
+    "@lexical/plain-text": "^0.12.5",
+    "@lexical/rich-text": "^0.12.5",
+    "@lexical/selection": "^0.12.5",
+    "@lexical/text": "^0.12.5",
+    "@lexical/utils": "^0.12.5",
+    "blurhash": "^2.0.5",
     "color": "^4.2.3",
+    "lexical": "^0.12.5",
     "vue": "^3.2.0"
   },
   "devDependencies": {
@@ -20,5 +29,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "970e56be5ba41712db154bd27ad98962dbeb802e"
+  "gitHead": "d079d93c7d8677f8269b97bc71820bc35dc46921"
 }

package/plugins/colorPlugin.ts

@@ -1,13 +1,13 @@
 import { DefineComponent, Plugin } from "vue";
 import { useTheme } from "vuetify";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export const ColorPlugin: Plugin = {
     install: (app) => {
         app.config.globalProperties.$color = function(this: InstanceType<DefineComponent>, key: ColorBase): string {
             const theme = this.$vuetify ? (this.$vuetify as any).theme.current : useTheme().current.value;
-            return theme.colors[key];
+            return theme.colors[key] ?? key;
         }
     }
 }

package/shims-plugin.d.ts

@@ -1,6 +1,6 @@
 import Vue from "vue";
 
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 declare module "vue" {
     interface ComponentCustomProperties {