@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

package/components/FSIconCard.vue

@@ -9,10 +9,10 @@
     <FSRow
       align="center-center"
     >
-      <FSIcon 
+      <FSIcon
         :variant="$props.iconVariant"
         :color="$props.iconColor"
-        :size="$props.iconSize"
+        :size="actualIconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -21,10 +21,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType, computed } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import { sizeToVar } from "../utils";
+
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 
@@ -68,13 +70,28 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "56px"
+      default: null
     },
     border: {
       type: Boolean,
       required: false,
       default: true
     }
+  },
+  setup(props){
+    const actualIconSize = computed(() => {
+      if (props.iconSize){
+        return props.iconSize;
+      }
+      else if (props.size) {
+        return `calc(${sizeToVar(props.size)} * 0.42)`;
+      }
+      return "42px";
+    });
+
+    return {
+      actualIconSize
+    };
   }
 });
 </script>

package/components/FSImage.vue

@@ -10,9 +10,8 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
-
-import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+import { IMAGE_THUMBNAIL_URL, IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
+import { useAppAuthToken, useImage } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSImageUI from "./FSImageUI.vue";
 
@@ -26,13 +25,22 @@ export default defineComponent({
       type: String as PropType<string | null>,
       required: false,
       default: null
+    },
+    thumbnail: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false
     }
   },
   setup(props) {
     const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
 
     const source = computed(() => {
-      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
+      if (props.thumbnail) {
+        return props.imageId ? IMAGE_THUMBNAIL_URL(props.imageId, authToken.value) : null;
+      }
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
     });
 
     const onError = (): void => {

package/components/FSImageUI.vue

@@ -42,9 +42,8 @@
 import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 import { decode, isBlurhashValid } from "blurhash";
 
-import type { ImageDetails } from "@dative-gpi/foundation-shared-domain/models";
-
 import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ImageDetails } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSLoader from "./FSLoader.vue";
 
@@ -64,6 +63,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    aspectRatio: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: 1
+    },
     imageB64: {
       type: String as PropType<string | null>,
       required: false,
@@ -79,11 +83,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    aspectRatio: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     borderRadius: {
       type: [String, Number],
       required: false,
@@ -127,10 +126,7 @@ export default defineComponent({
           return undefined;
         }
         if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.width) * (parseFloat(split[1]) / parseFloat(split[0])));
-          }
+          return sizeToVar(varToSize(props.width) / props.aspectRatio);
         }
         return sizeToVar(props.width);
       }
@@ -146,10 +142,7 @@ export default defineComponent({
           return undefined;
         }
         if (props.aspectRatio) {
-          const split = props.aspectRatio.split('/');
-          if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return sizeToVar(varToSize(props.height) * (parseFloat(split[0]) / parseFloat(split[1])));
-          }
+          return sizeToVar(varToSize(props.height) * props.aspectRatio);
         }
         return sizeToVar(props.height);
       }

package/components/FSLink.vue

@@ -2,13 +2,16 @@
   <a
     v-if="$props.href"
     :href="$props.href"
+    :class="classes"
     :style="style"
   >
     <slot>
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
   </a>
-  <router-link
+  <FSRouterLink
     v-else-if="$props.to"
     :to="$props.to"
     :class="classes"
@@ -19,20 +22,29 @@
     <slot
       v-bind="props"
     >
-      {{ $props.label }}
+      <FSSpan>
+        {{ $props.label }}
+      </FSSpan>
     </slot>
-  </router-link>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSRouterLink from "./FSRouterLink.vue";
+import FSSpan from "./FSSpan.vue";
 
 export default defineComponent({
   name: "FSLink",
+  components: {
+    FSRouterLink,
+    FSSpan
+  },
   props: {
     label: {
       type: String as PropType<string | null>,
@@ -40,7 +52,7 @@ export default defineComponent({
       default: null
     },
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: Object as PropType<RouteLocation | null>,
       required: false,
       default: null
     },
@@ -76,6 +88,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -85,15 +98,18 @@ export default defineComponent({
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.base
+          "--fs-link-color"     : colors.value.base,
+          ...fontStyles.value
         };
         case "light": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.light
+          "--fs-link-color"     : colors.value.light,
+          ...fontStyles.value
         };
         case "dark": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-link-color"     : colors.value.dark
+          "--fs-link-color"     : colors.value.dark,
+          ...fontStyles.value
         };
       }
     });

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">,
+      type: String as PropType<"standard" | "button" | "input" | "field" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "standard"
     },
@@ -51,7 +51,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-loader-background-color": backgrounds.base,
       "--fs-loader-border-radius"   : ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
-      "--fs-loader-padding"         : sizeToVar(props.padding),
+      "--fs-loader-padding"         : sizeToVar(getPadding.value),
       "--fs-loader-height"          : sizeToVar(getHeight.value),
       "--fs-loader-width"           : sizeToVar(getWidth.value)
     }));
@@ -63,22 +63,24 @@ export default defineComponent({
         case "input"         :
         case "field"         : return isMobileSized.value ? "36px" : "40px";
         case "chip"          : return isMobileSized.value ? "20px" : "24px";
-        case "text-h1"       : return isMobileSized.value ? "32px" : "40px";
-        case "text-h2"       : return isMobileSized.value ? "24px" : "32px";
-        case "text-h3"       : return isMobileSized.value ? "20px" : "24px";
-        case "text-h4"       : return isMobileSized.value ? "16px" : "20px";
+
+        case "text-h1"       : return isMobileSized.value ? "28px" : "36px";
+        case "text-h2"       : return isMobileSized.value ? "22px" : "26px";
+        case "text-h3"       : return isMobileSized.value ? "16px" : "20px";
         case "text-body"     :
-        case "text-button"   : return isMobileSized.value ? "14px" : "16px";
-        case "text-overline" :
-        case "text-overline": return "16px";
+        case "text-button"   : return isMobileSized.value ? "12px" : "14px";
+        case "text-overline" : return isMobileSized.value ? "10px" : "12px";
       }
     });
 
     const getWidth = computed((): string | number => {
+      if (props.width != null) {
+        return sizeToVar(props.width);
+      }
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
-        case "button"  : return isMobileSized ? "36px" : "40px";
-        case "input"   : return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "button"  : return isMobileSized.value ? "36px" : "40px";
+        case "input"   : return isMobileSized.value ? "calc(50% - 124px)" : "calc(50% - 132px)";
         case "field"   : return "100%";
         case "chip"    : return "8vw";
         case "text-h1" : return "calc(50% - 32px)";
@@ -88,6 +90,21 @@ export default defineComponent({
       }
     });
 
+    const getPadding = computed((): string | number => {
+      if (props.padding !== "0") {
+        return sizeToVar(props.padding);
+      }
+      switch (props.variant) {
+        case "text-h1"       : return "2px 0";
+        case "text-h2"       : return isMobileSized.value ? "1px 0" : "3px 0";
+        case "text-h3"       : return "2px 0";
+        case "text-body"     :
+        case "text-button"   : return isMobileSized.value ? "2px 0" : "3px 0";;
+        case "text-overline" : return isMobileSized.value ? "3px 0" : "2px 0";
+        default              : return sizeToVar(props.padding);
+      }
+    });
+
     return {
       style
     };

package/components/FSOptionGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes(props.variant)"
+    v-if="props.variant === 'wrap'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -46,7 +46,7 @@
     />
   </FSWrapGroup>
   <FSSlideGroup
-    v-else
+    v-else-if="props.variant === 'slide'"
     class="fs-option-group"
     :padding="props.padding"
     :gap="props.gap"
@@ -91,6 +91,54 @@
       v-bind="{ toggle, getVariant, getColor, getClass }"
     />
   </FSSlideGroup>
+  <FSRow
+    v-else
+    class="fs-option-group-full-width"
+    width="100%"
+    :padding="props.padding"
+    :gap="props.gap"
+    :style="style"
+    :wrap="false"
+  >
+    <template
+      v-if="props.values.length"
+    >
+      <template
+        v-if="!$slots.item"
+      >
+        <FSOptionItem
+          v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :icon="item.icon"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template
+        v-else
+      >
+        <template
+          v-for="item in props.values"
+        >
+          <slot
+            name="item"
+            v-bind="{ item, toggle, getVariant, getColor, getClass }"
+          />
+        </template>
+      </template>
+    </template>
+    <slot
+      v-else
+      v-bind="{ toggle, getVariant, getColor, getClass }"
+    />
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -128,7 +176,7 @@ export default defineComponent({
       default: "4px"
     },
     variant: {
-      type: String as PropType<"wrap" | "slide">,
+      type: String as PropType<"wrap" | "slide" | "fullwidth">,
       required: false,
       default: "wrap"
     },

package/components/FSRouterLink.vue

@@ -0,0 +1,42 @@
+<template>
+  <router-link
+    :to="$props.to"
+    @auxclick="handleRoutingEvent($event, $props.to)"
+    @click="handleRoutingEvent($event, $props.to)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
+      />
+    </template>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
+
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
+
+export default defineComponent({
+  name: "FSRouterLink",
+  props: {
+    to: {
+      type: Object as PropType<RouteLocation>,
+      required: true
+    }
+  },
+  setup() {
+    const { handleRoutingEvent } = useRouting();
+
+    return {
+      handleRoutingEvent
+    };
+  }
+});
+</script>

package/components/FSSlideGroup.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
@@ -59,6 +59,16 @@ export default defineComponent({
     FSButton
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -76,6 +86,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getChildren } = useSlots();
     const { getColors } = useColors();
 
@@ -89,10 +100,13 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const style = computed((): StyleValue => ({
-      "--fs-group-padding"     : sizeToVar(props.padding),
-      "--fs-group-gap"         : sizeToVar(props.gap),
-      "--fs-group-color"       : darks.soft,
-      "--fs-group-hover-color" : darks.dark
+      "--fs-group-padding"    : sizeToVar(props.padding),
+      "--fs-group-gap"        : sizeToVar(props.gap),
+      "--fs-group-color"      : darks.soft,
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-width"      : sizeToVar(props.width),
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-icon-size"  : isMobileSized.value ? "20px" : "24px",
     }));
 
     const nextClasses = computed((): string[] => {

package/components/FSSpan.vue

@@ -13,7 +13,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSSpan",
@@ -37,13 +37,20 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    align: {
+      type: String as PropType<"left" | "center" | "right">,
+      required: false,
+      default: "left"
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
-      "--fs-span-line-clamp": props.lineClamp.toString()
+      "--fs-span-line-clamp": props.lineClamp.toString(),
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {

package/components/FSSwitch.vue

@@ -1,10 +1,58 @@
 <template>
-  <FSCol
+  <FSRow
     width="hug"
+    align="top-left"
+    gap="16px"
+    padding="8px 0px"
+    :wrap="false"
   >
+    <v-switch
+      v-if="variant == 'left'"
+      class="fs-switch"
+      hide-details
+      inset
+      :validateOn="validateOn"
+      :rules="$props.rules"
+      :ripple="false"
+      :style="style"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onToggle"
+      v-bind="$attrs"
+    />
+    <slot>
+      <FSCol
+        width="hug"
+        v-if="$props.label || $props.description || $slots.description"
+      >
+        <FSSpan
+          v-if="$props.label"
+          class="fs-switch-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <slot
+          name="description"
+        >
+          <FSSpan
+            v-if="$props.description"
+            class="fs-switch-description"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.description }}
+          </FSSpan>
+        </slot>
+        <slot
+          name="footer"
+        />
+      </FSCol>
+    </slot>
     <FSRow
-      width="hug"
-      align="center-left"
+      v-if="variant == 'right'"
+      align="center-right"
     >
       <v-switch
         class="fs-switch"
@@ -18,31 +66,8 @@
         @update:modelValue="onToggle"
         v-bind="$attrs"
       />
-      <slot>
-        <FSSpan
-          v-if="$props.label"
-          class="fs-switch-label"
-          :style="style"
-          :font="font"
-          @click.stop="onToggle"
-        >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
     </FSRow>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-switch-description"
-        font="text-overline"
-        :style="style"
-      >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
-  </FSCol>
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -78,6 +103,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    variant: {
+      type: String as PropType<"left" | "right">,
+      required: false,
+      default: "left"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,

package/components/FSTab.vue

@@ -26,19 +26,6 @@
             {{ $props.label }}
           </FSSpan>
         </slot>
-        <v-spacer
-          v-if="$props.tag"
-        />
-        <slot
-          name="tag"
-        >
-          <FSSpan
-            v-if="$props.tag"
-            class="fs-tab-tag"
-          >
-            {{ $props.tag }}
-          </FSSpan>
-        </slot>
         <slot
           name="append"
         >
@@ -49,6 +36,21 @@
             {{ $props.appendIcon }}
           </FSIcon>
         </slot>
+        <FSRow
+          align="center-right"
+          :wrap="false"
+        >
+          <slot
+            name="tag"
+          >
+            <FSSpan
+              v-if="$props.tag"
+              class="fs-tab-tag"
+            >
+              {{ $props.tag }}
+            </FSSpan>
+          </slot>
+        </FSRow>
       </FSRow>
     </slot>
   </v-tab>