@dative-gpi/foundation-shared-components 1.0.18 → 1.0.19

package/components/FSCheckbox.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-checkbox-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSDivider.vue

@@ -59,7 +59,7 @@ export default defineComponent({
       default: "100%"
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLabel.vue

@@ -35,7 +35,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLink.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSLoader.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       default: "0"
     },
     variant: {
-      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -70,7 +70,7 @@ export default defineComponent({
         case "text-body"     :
         case "text-button"   : return isMobileSized.value ? "14px" : "16px";
         case "text-overline" :
-        case "text-underline": return "16px";
+        case "text-overline": return "16px";
       }
     });
 

package/components/FSRadio.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-radio-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -54,7 +54,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-slider-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSpan.vue

@@ -24,7 +24,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/FSSwitch.vue

@@ -36,7 +36,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-switch-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/FSText.vue

@@ -25,7 +25,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },

package/components/fields/FSBaseField.vue

@@ -48,7 +48,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-base-field-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}

package/components/views/FSEntityHeader.vue

@@ -14,9 +14,9 @@
         :height="imageSize"
         :wrap="false"
       >
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
+        <FSImageUI
+          v-if="$props.imageSource"
+          :source="$props.imageSource"
           :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
@@ -136,9 +136,9 @@
         :height="imageSize"
         :wrap="false"
       >
-        <FSImage
-          v-if="$props.imageId"
-          :imageId="$props.imageId"
+        <FSImageUI
+          v-if="$props.imageSource"
+          :source="$props.imageSource"
           :cover="imageCover"
           :height="imageSize"
           :width="imageSize"
@@ -220,7 +220,7 @@ import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-componen
 import FSBreadcrumbs from "../FSBreadcrumbs.vue";
 import FSSlideGroup from "../FSSlideGroup.vue";
 import FSIconCard from "../FSIconCard.vue";
-import FSImage from "../FSImage.vue";
+import FSImageUI from "../FSImageUI.vue";
 import FSIcon from "../FSIcon.vue";
 import FSText from "../FSText.vue";
 import FSCol from "../FSCol.vue";
@@ -232,14 +232,14 @@ export default defineComponent({
     FSBreadcrumbs,
     FSSlideGroup,
     FSIconCard,
-    FSImage,
+    FSImageUI,
     FSIcon,
     FSText,
     FSCol,
     FSRow
   },
   props: {
-    imageId: {
+    imageSource: {
       type: String as PropType<string | null>,
       required: false,
       default: null

package/components/views/FSEntityView.vue

@@ -1,147 +1,36 @@
 <template>
-  <FSSkeletonView>
-    <template
-      #header
-    >
-      <FSEntityHeader
-        ref="headerRef"
-        :breadcrumbs="$props.breadcrumbs"
-        :description="$props.description"
-        :subtitle="$props.subtitle"
-        :imageId="$props.imageId"
-        :title="$props.title"
-        :light="lightHeader"
-        :icon="$props.icon"
-        :color="$props.color"
-        :iconBackgroundColors="$props.iconBackgroundColors"
-        :imageCover="$props.imageCover"
-      >
-        <template
-          #title-append
-        >
-          <slot
-            name="title-append"
-          />
-        </template>
-        <template
-          #toolbar
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </template>
-      </FSEntityHeader>
-    </template>
-    <template
-      #default
-    >
-      <!-- <FSFadeOut
-        padding="0 8px 0 0"
-        :height="height"
-        @scroll="onScroll"
-      > -->
-      <slot
-        name="default"
-      />
-      <!-- </FSFadeOut> -->
-    </template>
-  </FSSkeletonView>
+  <FSEntityViewUI
+    :imageSource="source"
+    v-bind="$attrs"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import FSEntityHeader from "./FSEntityHeader.vue";
-import FSSkeletonView from "./FSSkeletonView.vue";
-// import FSFadeOut from "../FSFadeOut.vue";
+import FSEntityViewUI from "./FSEntityViewUI.vue";
 
 export default defineComponent({
   name: "FSEntityView",
   components: {
-    FSEntityHeader,
-    FSSkeletonView
-    // FSFadeOut
+    FSEntityViewUI
   },
   props: {
     imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
-    },
-    imageCover: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    icon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    color : {
-      type: Object as PropType<ColorEnum | null>,
-      required: false,
-      default: null
-    },
-    iconBackgroundColors: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    subtitle: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<FSBreadcrumbItem[]>,
-      required: false,
-      default: () => []
     }
   },
-  setup() {
-    const { isExtraSmall, windowHeight } = useBreakpoints();
-    const { slots } = useSlots();
-
-    const headerRef = ref<HTMLElement | null>(null);
-
-    const lightHeader = ref(false);
-
-    const height = computed((): string => {
-      let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
-
-      return `${windowHeight.value - other}px`;
+  setup(props) {
+    const source = computed(() => {
+      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
     });
 
-    // const onScroll = (event: any): void => {
-    //   if (event.onTop) {
-    //     lightHeader.value = false;
-    //   }
-    //   else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
-    //     lightHeader.value = true;
-    //   }
-    // };
-
     return {
-      lightHeader,
-      headerRef,
-      height,
-      slots
-      // onScroll
+      source
     };
   }
 });

package/components/views/FSEntityViewUI.vue

@@ -0,0 +1,148 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSEntityHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :description="$props.description"
+        :subtitle="$props.subtitle"
+        :imageSource="$props.imageSource"
+        :title="$props.title"
+        :light="lightHeader"
+        :icon="$props.icon"
+        :color="$props.color"
+        :iconBackgroundColors="$props.iconBackgroundColors"
+        :imageCover="$props.imageCover"
+      >
+        <template
+          #title-append
+        >
+          <slot
+            name="title-append"
+          />
+        </template>
+        <template
+          #toolbar
+          v-if="slots['toolbar']"
+        >
+          <slot
+            name="toolbar"
+          />
+        </template>
+      </FSEntityHeader>
+    </template>
+    <template
+      #default
+    >
+      <!-- <FSFadeOut
+        padding="0 8px 0 0"
+        :height="height"
+        @scroll="onScroll"
+      > -->
+      <slot
+        name="default"
+      />
+      <!-- </FSFadeOut> -->
+    </template>
+  </FSSkeletonView>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSEntityHeader from "./FSEntityHeader.vue";
+import FSSkeletonView from "./FSSkeletonView.vue";
+// import FSFadeOut from "../FSFadeOut.vue";
+
+export default defineComponent({
+  name: "FSEntityViewUI",
+  components: {
+    FSEntityHeader,
+    FSSkeletonView
+    // FSFadeOut
+  },
+  props: {
+    imageSource: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color : {
+      type: Object as PropType<ColorEnum | null>,
+      required: false,
+      default: null
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup() {
+    const { isExtraSmall, windowHeight } = useBreakpoints();
+    const { slots } = useSlots();
+
+    const headerRef = ref<HTMLElement | null>(null);
+
+    const lightHeader = ref(false);
+
+    const height = computed((): string => {
+      let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
+
+      return `${windowHeight.value - other}px`;
+    });
+
+    // const onScroll = (event: any): void => {
+    //   if (event.onTop) {
+    //     lightHeader.value = false;
+    //   }
+    //   else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
+    //     lightHeader.value = true;
+    //   }
+    // };
+
+    return {
+      lightHeader,
+      headerRef,
+      height,
+      slots
+      // onScroll
+    };
+  }
+});
+</script>

package/package.json

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

package/styles/globals/text_fonts.scss

@@ -10,13 +10,13 @@
     @include web {
         font-size: 36px !important;
         line-height: 40px !important;
-        letter-spacing: -2% !important;
+        letter-spacing: -0.72px !important;
     }
 
     @include mobile {
         font-size: 28px !important;
         line-height: 32px !important;
-        letter-spacing: -5% !important;
+        letter-spacing: -1.4px !important;
     }
 }
 
@@ -28,13 +28,13 @@
     @include web {
         font-size: 26px !important;
         line-height: 32px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.78px !important;
     }
 
     @include mobile {
         font-size: 22px !important;
         line-height: 24px !important;
-        letter-spacing: -4% !important;
+        letter-spacing: -0.88px !important;
     }
 }
 
@@ -46,13 +46,13 @@
     @include web {
         font-size: 20px !important;
         line-height: 24px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.6px !important;
     }
 
     @include mobile {
         font-size: 16px !important;
         line-height: 20px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.48px !important;
     }
 }
 
@@ -65,13 +65,13 @@
     @include web {
         font-size: 14px !important;
         line-height: 20px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
@@ -84,13 +84,13 @@
     @include web {
         font-size: 14px !important;
         line-height: 20px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: -3% !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
@@ -98,27 +98,7 @@
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;
     text-transform: none !important;
-
-    @include web {
-        font-weight: 600 !important;
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
-
-    @include mobile {
-        font-weight: 500 !important;
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
-}
-
-.text-underline {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-    text-transform: none !important;
+    font-weight: 600 !important;
 
     @include web {
         font-size: 12px !important;