@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/components/tiles/FSPlaylistTileUI.vue

@@ -0,0 +1,149 @@
+<template>
+  <FSTile
+    :activeColor="ColorEnum.Primary"
+    :modelValue="$props.modelValue"
+    :width="$props.width"
+    :height="$props.height"
+    padding="16px 24px"
+    v-bind="$attrs"
+  >
+    <FSRow
+      :wrap="false"
+    >
+      <FSCol
+        gap="16px"
+        width="fill"
+      >
+        <FSSpan
+          font="text-button"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIcon>
+            mdi-view-dashboard-outline
+          </FSIcon>
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr('ui.dashboards.dynamic', '{0} dashboard(s)', $props.dashboardsCount) }}
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="automaticTransition"
+          />
+          <FSSpan
+            font="text-overline"
+            v-if="automaticTransition"
+          >
+            {{$tr('ui.playlist.transition-delay.dynamic', 'Transition : {0}', getTimeBestString($props.delay ?? 0))}}
+          </FSSpan>
+          <FSSpan
+            font="text-overline"
+            v-else
+          >
+            {{ $tr('ui.playlist.automatic-transition', 'Automatic transition') }}
+          </FSSpan>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="$props.looped"
+          />
+          <FSSpan
+            font="text-overline"
+          >
+            {{ $tr('entity.playlist.looped', 'Looped') }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+      <slot
+        name="actions"
+      />
+    </FSRow>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { getTimeBestString } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSIconCheck from "../FSIconCheck.vue";
+import FSTile from "../tiles/FSTile.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSPlaylistTileUI",
+  components: {
+    FSIconCheck,
+    FSIcon,
+    FSTile,
+    FSSpan,
+    FSRow,
+    FSCol
+  },
+  inheritAttrs: false,
+  props: {
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => 'hug'
+    },
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    dashboardsCount: {
+      type: Number,
+      required: true
+    },
+    delay: {
+      type: Number ,
+      required: false
+    },
+    looped: {
+      type: Boolean,
+      required: true
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+
+    const automaticTransition = computed((): boolean => {
+      return props.delay ? props.delay > 0 : false;
+    });
+
+    return {
+      getTimeBestString,
+      automaticTransition,
+      ColorEnum
+    };
+  }
+});
+</script>

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/FSSubgroupingTileUI.vue

@@ -0,0 +1,97 @@
+<template>
+  <FSSimpleTileUI
+    :bottomColor="null"
+    v-bind="$attrs"
+  >
+    <template
+      #append-info
+    >
+      <FSRow
+        v-if="$props.groupingLabel && $props.groupingIcon"
+        align="center-left"
+        :wrap="false"
+      >
+        <FSColor
+          height="24px"
+          :color="$props.groupingColor"
+          :border="false"
+          variant="standard"
+        >
+          <FSRow
+            align="center-center"
+            width="24px"
+          >
+            <FSIcon
+              size="16px"
+            >
+              {{ $props.groupingIcon }}
+            </FSIcon>
+          </FSRow>
+        </FSColor>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.groupingLabel }}
+        </FSSpan>
+      </FSRow>
+      <FSEntityCountBadge
+        :label="$tr('ui.common.devices', 'Devices')"
+        :count="$props.deviceOrganisationsCount ?? 0"
+        :color="ColorEnum.Primary"
+      />
+    </template>
+  </FSSimpleTileUI>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSEntityCountBadge from "./FSEntityCountBadge.vue";
+import FSSimpleTileUI from './FSSimpleTileUI.vue';
+import FSColor from "../FSColor.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSSubgroupingTileUI",
+  components: {
+    FSEntityCountBadge,
+    FSSimpleTileUI,
+    FSColor,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    groupingLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    groupingIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    groupingColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    deviceOrganisationsCount: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  inheritAttrs: false,
+  setup() {
+    return {
+      ColorEnum,
+    };
+  }
+});
+</script>

package/components/tiles/FSTile.vue

@@ -1,67 +1,26 @@
 <template>
   <FSCol
     class="fs-tile"
-    :height="$props.height"
+    :style="style"
     :width="$props.width"
+    :height="$props.height"
   >
-    <FSClickable
-      v-if="($props.href || $props.to || $attrs.onClick)"
-      variant="background"
-      class="fs-tile"
-      padding="12px"
-      :href="$props.href"
-      width="100%"
-      height="100%"
-      topRightPadding="1px"
-      :to="$props.to"
-      :style="style"
-      v-bind="$attrs"
-    >
-      <slot />
-      <template 
-        v-if="$props.selectable"
-        #top-right
-      >
-        <FSCard
-          padding="8px"
-          :border="false"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </template>
-    </FSClickable>
-
-    <FSClickable
-      v-else-if="$props.selectable && $props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
-    
     <FSCard
-      v-else
-      variant="background"
       class="fs-tile"
+      :variant="selectionState.variant"
+      :color="selectionState.color"
       padding="12px"
-      :style="style"
       width="100%"
       height="100%"
       topRightPadding="1px"
+      :to="$props.to"
+      :href="$props.href"
+      v-on="selectionState.listeners"
       v-bind="$attrs"
     >
       <slot />
       <template 
-        v-if="$props.selectable"
+        v-if="selectionState.showCheckbox"
         #top-right
       >
         <FSCard
@@ -74,8 +33,7 @@
           />
         </FSCard>
       </template>
-    </FSCard>  
-    
+    </FSCard>
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -96,17 +54,17 @@ import { type RouteLocation } from "vue-router";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
-import FSClickable from "../FSClickable.vue";
-import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
-    FSClickable,
+    FSCard,
     FSCheckbox,
-    FSCard
+    FSCol
   },
   props: {
     to: {
@@ -161,7 +119,7 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { emit }) {
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
@@ -177,18 +135,28 @@ export default defineComponent({
       return result;
     });
 
-    const variant = computed((): "standard" | "background" => {
-      return (props.singleSelect && props.modelValue) ? "standard" : "background";
-    });
-
-    const color = computed((): ColorBase => {
-      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+    const selectionState = computed(() => {
+      const isSingleSelect = props.selectable && props.singleSelect && !props.href && !props.to;
+      const showCheckbox = props.selectable && !isSingleSelect;
+      const variant: "standard" | "background" = (isSingleSelect && props.modelValue) ? "standard" : "background";
+      const color: ColorBase = (isSingleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+      const onClick = () => { emit("update:modelValue", !props.modelValue); };
+      const listeners: Record<string, (...args: any[]) => void> = {};
+      if (isSingleSelect) {
+        listeners.click = onClick;
+      }
+      return {
+        isSingleSelect,
+        showCheckbox,
+        variant,
+        color,
+        listeners
+      };
     });
 
     return {
+      selectionState,
       ColorEnum,
-      variant,
-      color,
       style
     };
   }

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/index.ts

@@ -12,4 +12,5 @@ export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
 export * from "./toggleSets";
-export * from "./translations";
+export * from "./variants";
+export * from "./translations";

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/models/tables.ts

@@ -26,6 +26,7 @@ export interface FSDataTableFilter {
   text: string;
   value: string;
   hidden: boolean;
+  custom?: boolean;
   filter?: ((value: any, property: any, item: any) => boolean) | null;
 }
 

package/models/variants.ts

@@ -0,0 +1,33 @@
+export type CardVariant = "background" | "standard" | "full" | "gradient";
+export enum CardVariants {
+  Background = "background",
+  Standard = "standard",
+  Full = "full",
+  Gradient = "gradient"
+}
+
+export type SnackbarVariant = "standard" | "full";
+export enum SnackbarVariants {
+  Standard = "standard",
+  Full = "full"
+}
+
+export type DialogMultiFormVariant = "standard" | "submit";
+export enum DialogMultiFormVariants {
+  Standard = "standard",
+  Submit = "submit"
+}
+
+export type DialogMultiFormMode = "pagination" | "tabs" | "hidden";
+export enum DialogMultiFormModes {
+  Pagination = "pagination",
+  Tabs = "tabs",
+  Hidden = "hidden"
+}
+
+export type ChipGroupVariant = "wrap" | "slide" | "menu";
+export enum ChipGroupVariants {
+  Wrap = "wrap",
+  Slide = "slide",
+  Menu = "menu"
+}

package/package.json

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

package/styles/components/fs_button.scss

@@ -1,20 +1,14 @@
 .fs-button-icon {
+    text-decoration: none;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    color: var(--fs-button-color) !important;
 
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
     }
 
-    & > a, a:hover, a:visited, a:active {
-        color: inherit;
-        text-decoration: none;
-    }
-
     @include clickscreen {
         &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            color: var(--fs-button-hover-color) !important;
             cursor: pointer !important;
         }
     }

package/styles/components/fs_card.scss

@@ -2,11 +2,11 @@
     border: var(--fs-card-border-size) var(--fs-card-border-style);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
-    height: var(--fs-card-height);
-    width: var(--fs-card-width);
-    max-width: var(--fs-card-max-width);
+    height: 100%;
+    width: 100%;
     position: relative;
     display: flex;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     
     border-color: var(--fs-card-border-color);
     color: var(--fs-card-color);
@@ -24,10 +24,81 @@
         background: var(--fs-card-background-color);
     }
 
+    &-load {
+        content: "";
+
+        & > *:not(.fs-card-load__spinner) {
+            opacity: 0;
+        }
+    }
+
+    &-clickable {
+        cursor: pointer;
+
+        &.fs-card-disabled {
+            cursor: default;
+        }
+
+        &:not(.fs-card-disabled):active:not(:has( .fs-stopclick:hover)) {
+            background-color: var(--fs-card-active-background-color) !important;
+            border-color: var(--fs-card-active-border-color) !important;
+            color: var(--fs-card-active-color) !important;
+
+            & .fs-card-clickable:not(.fs-card-disable-hover-style) {
+                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: var(--fs-card-active-background-color);
+            }
+        }
+
+        @include clickscreen {
+            &:not(.fs-card-disabled):not(.fs-card-disable-hover-style):hover:not(:has( .fs-stopclick:hover)) {
+                background-color: var(--fs-card-hover-background-color) !important;
+                border-color: var(--fs-card-hover-border-color) !important;
+                color: var(--fs-card-hover-color) !important;
+
+                & .fs-card-clickable:not(.fs-card-disable-hover-style) {
+                    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                    background-color: var(--fs-card-hover-background-color);
+                }
+            }
+            // Désactive le hover si un parent a .fs-card-load
+            .fs-card-load & {
+                pointer-events: none;
+            }
+        }
+    }
+
     .fs-card-top-right {
         position: absolute;
         line-height: normal;
         right: var(--fs-card-top-right-padding);
         top: var(--fs-card-top-right-padding);
     }
-}
+}
+
+.fs-card-wrapper {
+    display: block;
+    position: relative;
+    padding: 0 !important;
+    height: var(--fs-card-height);
+    width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
+    background: none;
+    border: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+
+.fs-card-load__spinner {
+    cursor: default;
+    position: absolute !important;
+    height: 100% !important;
+    width: 100% !important;
+    left: 0;
+    top: 0;
+    
+    & > svg {
+        height: 24px !important;
+    }
+}
+