@dative-gpi/foundation-shared-components 0.0.74 → 0.0.75

package/components/FSCard.vue

@@ -148,7 +148,7 @@ export default defineComponent({
     });
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-card"];
+      const classNames = ["fs-card", "fs-background"];
       switch(props.variant) {
         case "gradient": 
           classNames.push("fs-card-gradient"); 

package/components/FSCarousel.vue

@@ -1,7 +1,7 @@
 <template>
   <v-carousel
-    class="fs-carousel"
     :hideDelimiters="true"
+    :class="classes"
     :style="style"
     v-bind="$attrs"
   >
@@ -51,14 +51,20 @@ export default defineComponent({
       };
     });
 
+    const classes = computed((): string[] => {
+      const classNames = ["fs-carousel", "fs-background"];
+      return classNames;
+    });
+
     const value = (component: VNode, index: number): any => {
       return component?.props?.value ?? index;
     };
 
     return {
-      getChildren,
+      classes,
       slots,
       style,
+      getChildren,
       value
     };
   }

package/components/FSCheckbox.vue

@@ -3,6 +3,7 @@
     width="hug"
   >
     <v-checkbox
+      class="fs-stopclick"
       hide-details
       :ripple="false"
       :rules="$props.rules"

package/components/FSColor.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, Ref } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";

package/components/FSColorIcon.vue

@@ -1,33 +1,47 @@
 <template>
-  <v-icon
+  <FSColor
+    class="fs-color-icon"
     :color="$props.color"
-    :class="classes"
-    :style="style"
-    v-bind="$attrs"
+    :border="false"
+    :height="size"
+    :width="size"
   >
-    <slot />
-  </v-icon>
+    <FSRow
+      align="center-center"
+    >
+      <FSIcon
+        :color="$props.color"
+        :size="$props.size"
+      >
+        <slot />
+      </FSIcon>
+    </FSRow>  
+</FSColor>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSColor from "./FSColor.vue";
+import FSIcon from "./FSIcon.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSColorIcon",
+  components: {
+    FSColor,
+    FSIcon,
+    FSRow
+  },
   props: {
     size: {
-      type: String as PropType<"s" | "m" | "l">,
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
       default: "m"
     },
-    variant: {
-      type: String as PropType<"standard" | "full">,
-      required: false,
-      default: "standard"
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -35,34 +49,19 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-
-    const style = computed((): { [key: string] : string | undefined } => {
-      switch (props.variant) {
-        case "full": return {
-          "--fs-icon-background-color": colors.value.light
-        };
-        default: return {
-          "--fs-icon-background-color": "transparent"
-        };
-      }
-    });
+    const { isMobileSized } = useBreakpoints();
 
-    const classes = computed((): string[] => {
-      const classNames = [`fs-icon-${props.size}`];
-      switch (props.variant) {
-        case "full":
-          classNames.push("fs-color-icon");
-          break;
+    const size = computed((): string[] | number[] | string | number | null => {
+      switch(props.size) {
+        case "s": return isMobileSized.value ? "18px" : "20px";
+        case "m": return isMobileSized.value ? "20px" : "26px";
+        case "l": return isMobileSized.value ? "36px" : "40px";
+        default: return props.size;
       }
-      return classNames;
     });
 
     return {
-      style,
-      classes
+      size
     };
   }
 });

package/components/FSEditImage.vue

@@ -1,19 +1,21 @@
 <template>
   <FSRow
+    width="hug"
     gap="24px"
   >
     <FSImage
       class="fs-edit-image"
       :aspectRatio="$props.aspectRatio"
-      :imageId="$props.imageId"
       :height="$props.height"
-      :imageB64="realSource"
       :width="$props.width"
+      :imageId="$props.imageId"
+      :imageB64="realSource"
       :style="style"
     />
     <FSCol
-      height="fill"
       align="bottom-left"
+      height="fill"
+      width="hug"
     >
       <FSText
         v-if="fileSelected"

package/components/FSIcon.vue

@@ -14,7 +14,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar } from "../utils";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSIcon",

package/components/FSImage.vue

@@ -37,8 +37,7 @@
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
-import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
-import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
+import { useImageBlurHash, useRawImage } from "@dative-gpi/foundation-shared-services/composables";
 import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSLoader from "./FSLoader.vue";
@@ -87,6 +86,7 @@ export default defineComponent({
   },
   setup(props) {
     const { fetch: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+    const { fetch: fetchRawImage, entity: image } = useRawImage();
 
     const imageRef = ref<HTMLFormElement | null>(null);
     const canvasRef = ref<HTMLCanvasElement | null>(null);
@@ -150,8 +150,10 @@ export default defineComponent({
           return `${imageType.value},${imageData.value}`;
         }
       }
-      else if (props.imageId) {
-        return IMAGE_RAW_URL(props.imageId);
+      if (props.imageId) {
+        if (image.value) {
+          return image.value;
+        }
       }
     });
 
@@ -182,6 +184,12 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.imageId, () => {
+      if (props.imageId) {
+        fetchRawImage(props.imageId);
+      }
+    }, { immediate: true });
+
     watch(() => blurHash.value, () => {
       if (canvasRef.value && imageRef.value) {
         if (blurHash.value && isBlurhashValid(blurHash.value.blurHash).result) {

package/components/deviceOrganisations/FSConnectivity.vue

@@ -5,9 +5,10 @@
   >
     <template #activator="{ props }">
       <FSColorIcon
+        class="fs-stopclick"
         size="m"
-        variant="full"
         :color="$props.deviceConnectivity.color"
+        @click.prevent.stop
         v-bind="props"
       >
         {{ $props.deviceConnectivity.icon }}

package/components/deviceOrganisations/FSStatus.vue

@@ -5,9 +5,10 @@
   >
     <template #activator="{ props }">
       <FSColorIcon
+        class="fs-stopclick"
         size="m"
-        variant="full"
         :color="$props.statusGroup.color"
+        @click.prevent.stop
         v-bind="props"
       >
         {{ $props.statusGroup.icon }}

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -5,19 +5,21 @@
     <template #prev="{ props }">
       <FSButton
         v-if="$props.modelStatuses.length > 1"
-        variant="icon"
         icon="mdi-chevron-left"
+        class="fs-stopclick"
+        variant="icon"
         :color="ColorEnum.Dark"
-        @click="props.onClick"
+        @click.prevent.stop="props.onClick"
       />
     </template>
     <template #next="{ props }">
       <FSButton
         v-if="$props.modelStatuses.length > 1"
-        variant="icon"
         icon="mdi-chevron-right"
+        class="fs-stopclick"
+        variant="icon"
         :color="ColorEnum.Dark"
-        @click="props.onClick"
+        @click.prevent.stop="props.onClick"
       />
     </template>
     <FSRow

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -9,9 +9,10 @@
         :color="criticityColor"
       >
         <FSColorIcon
+          class="fs-stopclick"
           size="m"
-          variant="full"
           :color="criticityColor"
+          @click.prevent.stop
           v-bind="props"
         >
           {{ statusIcon }}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.74",
+  "version": "0.0.75",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.74",
-    "@dative-gpi/foundation-shared-services": "0.0.74",
+    "@dative-gpi/foundation-shared-domain": "0.0.75",
+    "@dative-gpi/foundation-shared-services": "0.0.75",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "f52cb04f253d357a3cbb09881718d2cdea09917d"
+  "gitHead": "d06115ff4fb375224f9ec1cb5521c66a73509ba2"
 }

package/styles/components/fs_carousel.scss

@@ -1,4 +1,9 @@
 .fs-carousel {
     background-color: var(--fs-carousel-background-color);
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     height: var(--fs-carousel-height) !important;
+
+    & > .v-window__container > .v-window-item {
+        cursor: inherit !important;
+    }
 }

package/styles/components/fs_clickable.scss

@@ -8,37 +8,27 @@
     border-color: var(--fs-clickable-border-color) !important;
     color: var(--fs-clickable-color) !important;
 
-    & .fs-card {
-        background-color: var(--fs-clickable-background-color) !important;
-        border-color: var(--fs-clickable-border-color) !important;
-        color: var(--fs-clickable-color) !important;
-    }
-
     &.fs-clickable-disabled {
         cursor: default;
     }
 
-    &:not(.fs-clickable-disabled):hover {
+    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-hover-background-color) !important;
         border-color: var(--fs-clickable-hover-border-color) !important;
         color: var(--fs-clickable-hover-color) !important;
 
-        & .fs-card {
-            background-color: var(--fs-clickable-hover-background-color) !important;
-            border-color: var(--fs-clickable-hover-border-color) !important;
-            color: var(--fs-clickable-hover-color) !important;
+        & .fs-background {
+            background-color: var(--fs-clickable-hover-background-color);
         }
     }
 
-    &:not(.fs-clickable-disabled):active {
+    &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
         color: var(--fs-clickable-active-color) !important;
 
-        & .fs-card {
-            background-color: var(--fs-clickable-active-background-color) !important;
-            border-color: var(--fs-clickable-active-border-color) !important;
-            color: var(--fs-clickable-active-color) !important;
+        & .fs-background {
+            background-color: var(--fs-clickable-active-background-color);
         }
     }
 }

package/styles/components/fs_color_icon.scss

@@ -1,37 +1,3 @@
 .fs-color-icon {
-    background-color: var(--fs-icon-background-color);
-    border-radius: 4px;
-
-    &.fs-icon-s {
-        @include web {
-            width: 20px;
-            height: 20px;
-        }
-        @include mobile {
-            width: 18px;
-            height: 18px;
-        }
-    }
-
-    &.fs-icon-m {
-        @include web {
-            width: 26px;
-            height: 26px;
-        }
-        @include mobile {
-            width: 20px;
-            height: 20px;
-        }
-    }
-
-    &.fs-icon-l {
-        @include web {
-            width: 40px;
-            height: 40px;
-        }
-        @include mobile {
-            width: 36px;
-            height: 36px;
-        }
-    }
+    cursor: pointer;
 }