@dative-gpi/foundation-shared-components 1.1.0 → 1.1.1

package/components/FSCard.vue

@@ -134,6 +134,10 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { emit }) {
@@ -224,7 +228,7 @@ export default defineComponent({
           ...baseStyle,
           "--fs-card-background-color": lights.light,
           "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : lights.lightContrast!
+          "--fs-card-color"           : props.clickable ? lights.dark : lights.lightContrast!
         };
       }
       
@@ -295,6 +299,9 @@ export default defineComponent({
       if (actualClickable.value) {
         classNames.push("fs-card-clickable");
       }
+      if (props.disableHoverStyle) {
+        classNames.push("fs-card-disable-hover-style");
+      }
       if (props.disabled) {
         classNames.push("fs-card-disabled");
       }

package/components/FSColor.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
@@ -26,9 +26,9 @@ export default defineComponent({
   },
   props: {
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "standard"
+      default: CardVariants.Standard
     },
     color: {
       type: String as PropType<ColorBase>,

package/components/FSColorIcon.vue

@@ -5,6 +5,7 @@
     :border="false"
     :height="actualSize"
     :width="actualSize"
+    :disableHoverStyle="true"
   >
     <FSRow
       align="center-center"

package/components/FSSnackbar.vue

@@ -0,0 +1,146 @@
+<template>
+  <v-snackbar
+    class="fs-snackbar"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    :multi-line="$props.multiLine"
+    :location="$props.location"
+    :timeout="$props.timeout"
+    :style="style"
+  >
+    <slot>
+      <FSRow
+        align="center-left"
+        :wrap="false"
+        gap="12px"
+      >
+        <FSIcon
+          v-if="$props.icon"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.text"
+          :ellipsis="!$props.multiLine"
+        >
+          {{ $props.text }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <template
+      v-if="$slots.actions || $props.closeButton"
+      #actions
+    >
+      <slot
+        name="actions"
+      >
+        <FSButton
+          v-if="$props.closeButton"
+          icon="mdi-close"
+          variant="icon"
+          @click="$emit('update:modelValue', false)"
+        />
+      </slot>
+    </template>
+  </v-snackbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum, type SnackbarVariant, SnackbarVariants } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSButton from "./FSButton.vue";
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSSnackbar",
+  components: {
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    text: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    timeout: {
+      type: Number,
+      required: false,
+      default: 5000
+    },
+    location: {
+      type: String as PropType<"top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right">,
+      required: false,
+      default: "bottom"
+    },
+    multiLine: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closeButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    variant: {
+      type: String as PropType<SnackbarVariant>,
+      required: false,
+      default: SnackbarVariants.Full
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+
+    const style = computed((): StyleValue => {
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
+          "--fs-snackbar-background-color": colors.value.light,
+          "--fs-snackbar-color": colors.value.dark
+        };
+        default: return {
+          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
+          "--fs-snackbar-background-color": colors.value.base,
+          "--fs-snackbar-color": colors.value.light
+        };
+      }
+    });
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/lists/FSTileList.vue

@@ -2,12 +2,21 @@
   <FSCol
     gap="12px"
   >
-    <FSSearchField
-      v-if="$props.searchable"
-      :hideHeader="true"
-      :modelValue="actualSearch"
-      @update:modelValue="onSearch"
-    />
+    <FSRow
+      v-if="$props.searchable || $slots.action"
+      :wrap="false"
+      align="center-left"
+    >
+      <FSSearchField
+        v-if="$props.searchable"
+        :hideHeader="true"
+        :modelValue="actualSearch"
+        @update:modelValue="onSearch"
+      />
+      <slot
+        name="action"
+      />
+    </FSRow>
     <FSFadeOut
       v-if="$props.direction == ListDirections.Column"
       :maxHeight="$props.maxHeight"
@@ -109,11 +118,13 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
 import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTileList",
   components: {
     FSCol,
+    FSRow,
     FSFadeOut,
     FSLoader,
     FSSlideGroup,
@@ -223,6 +234,12 @@ export default defineComponent({
       actualSearch.value = value;
     });
 
+    watch(() => props.singleSelect, () => {
+      if(props.singleSelect && props.modelValue.length > 1) { 
+        emit("update:modelValue", []); 
+      } 
+    }, { immediate: true });
+
     return {
       actualSearch,
       filteredItems,

package/components/map/FSMapMarker.vue

@@ -11,8 +11,9 @@ import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerCluster
 import { useColors } from "../../composables";
 import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
-import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP, MARKERCLUSTERGROUP } from './keys';
+import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 
 export default {
   name: 'FSMapMarker',
@@ -23,8 +24,8 @@ export default {
       required: false
     },
     color: {
-      type: String,
-      default: 'primary',
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary,
       required: false
     },
     latlng: {

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"
+      >
+        <FSText
+          font="text-button"
+        >
+          {{ $props.label }}
+        </FSText>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIcon>
+            mdi-view-dashboard-outline
+          </FSIcon>
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr('ui.dashboards.dynamic', '{0} dashboard(s)', $props.dashboardsCount) }}
+          </FSText>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="automaticTransition"
+          />
+          <FSText
+            font="text-overline"
+            v-if="automaticTransition"
+          >
+            {{$tr('ui.playlist.transition-delay.dynamic', 'Transition : {0}', getTimeBestString($props.delay ?? 0))}}
+          </FSText>
+          <FSText
+            font="text-overline"
+            v-else
+          >
+            {{ $tr('ui.playlist.automatic-transition', 'Automatic transition') }}
+          </FSText>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="$props.looped"
+          />
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr('entity.playlist.looped', 'Looped') }}
+          </FSText>
+        </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 FSText from "../FSText.vue";
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSPlaylistTileUI",
+  components: {
+    FSIconCheck,
+    FSIcon,
+    FSTile,
+    FSText,
+    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/models/variants.ts

@@ -4,4 +4,10 @@ export enum CardVariants {
   Standard = "standard",
   Full = "full",
   Gradient = "gradient"
+}
+
+export type SnackbarVariant = "standard" | "full";
+export enum SnackbarVariants {
+  Standard = "standard",
+  Full = "full"
 }

package/package.json

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

package/styles/components/fs_button.scss

@@ -9,7 +9,6 @@
 
     @include clickscreen {
         &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            filter: brightness(0.8) !important;
             cursor: pointer !important;
         }
     }

package/styles/components/fs_card.scss

@@ -44,19 +44,19 @@
             border-color: var(--fs-card-active-border-color) !important;
             color: var(--fs-card-active-color) !important;
 
-            & .fs-card-clickable {
+            & .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):hover:not(:has( .fs-stopclick:hover)) {
+            &: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 {
+                & .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);
                 }

package/styles/components/fs_snackbar.scss

@@ -0,0 +1,7 @@
+.fs-snackbar {
+    .v-snackbar__wrapper {
+        border-radius: var(--fs-snackbar-border-radius);
+        background-color: var(--fs-snackbar-background-color);
+        color: var(--fs-snackbar-color);
+    }
+}

package/styles/components/index.scss

@@ -16,7 +16,6 @@
 @import "fs_col.scss";
 @import "fs_color_field.scss";
 @import "fs_color.scss";
-@import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
@@ -52,6 +51,7 @@
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";
+@import "fs_snackbar.scss";
 @import "fs_span.scss";
 @import "fs_status_rich_card.scss";
 @import "fs_switch.scss";

package/styles/components/fs_color_icon.scss

@@ -1,3 +0,0 @@
-.fs-color-icon {
-    cursor: pointer;
-}