@dative-gpi/foundation-shared-components 0.0.19 → 0.0.21

package/components/FSButton.vue

@@ -1,71 +1,75 @@
 <template>
-  <v-btn
-    v-if="!['icon'].includes(props.variant)"
-    :ripple="false"
-    :style="style"
+  <FSClickable
+    v-if="!['icon'].includes($props.variant)"
+    :editable="$props.editable"
+    :height="['40px', '36px']"
+    :variant="$props.variant"
+    :color="$props.color"
+    :padding="padding"
     :class="classes"
-    :disabled="!props.editable"
+    :style="style"
+    :width="width"
     v-bind="$attrs"
   >
     <FSRow
       align="center-center"
-      width="hug"
+      width="fill"
       :wrap="false"
     >
-      <slot name="prepend" v-bind="{ color: props.color, colors }">
+      <slot name="prepend" v-bind="{ color: $props.color, colors }">
         <FSIcon
-          v-if="props.prependIcon || props.icon"
+          v-if="$props.prependIcon || $props.icon"
           size="l"
         >
-          {{ props.prependIcon ?? props.icon }}
+          {{ $props.prependIcon ?? $props.icon }}
         </FSIcon>
       </slot>
-      <slot v-bind="{ color: props.color, colors }">
+      <slot v-bind="{ color: $props.color, colors }">
         <FSSpan
-          v-if="props.label"
+          v-if="$props.label"
         >
-          {{ props.label }}
+          {{ $props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color: props.color, colors }">
+      <slot name="append" v-bind="{ color: $props.color, colors }">
         <FSIcon
-          v-if="props.appendIcon"
+          v-if="$props.appendIcon"
           size="l"
         >
-          {{ props.appendIcon }}
+          {{ $props.appendIcon }}
         </FSIcon>
       </slot>
     </FSRow>
-  </v-btn>
+  </FSClickable>
   <FSRow
-    v-else-if="props.icon"
+    v-else-if="$props.icon"
     align="center-center"
     width="hug"
-    :style="style"
     :class="classes"
+    :style="style"
     v-bind="$attrs"
   >
     <FSIcon
       size="l"
     >
-      {{ props.icon }}
+      {{ $props.icon }}
     </FSIcon>
     <FSSpan
-      v-if="props.label"
+      v-if="$props.label"
       font="text-overline"
     >
-      {{ props.label }}
+      {{ $props.label }}
     </FSSpan>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, PropType } from "vue";
-import { useDefaults } from "vuetify";
+import { computed, defineComponent, PropType } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -73,6 +77,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSButton",
   components: {
+    FSClickable,
     FSSpan,
     FSIcon,
     FSRow
@@ -120,60 +125,22 @@ export default defineComponent({
     }
   },
   setup(props) {
-    props = useDefaults(props, getCurrentInstance()?.type?.name ?? "FSButton");
-
-    const { getColors, getContrasts } = useColors();
+    const { getColors } = useColors();
     const { slots } = useSlots();
 
-    const textColors = computed(() => getContrasts(props.color));
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const isEmpty = computed(() => {
-      return !slots.default && !props.label;
-    });
-
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       if (!props.editable) {
         switch (props.variant) {
-          case "standard":
-          case "full": return {
-            "--fs-button-padding"         : !isEmpty.value ? "0 16px" : "0",
-            "--fs-button-background-color": lights.base,
-            "--fs-button-border-color"    : lights.dark,
-            "--fs-button-color"           : lights.dark,
-          };
           case "icon": return {
             "--fs-button-color": lights.dark,
           };
         }
       }
       switch (props.variant) {
-        case "standard": return {
-          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
-          "--fs-button-background-color"       : colors.value.light,
-          "--fs-button-border-color"           : colors.value.base,
-          "--fs-button-color"                  : textColors.value.base,
-          "--fs-button-hover-background-color" : colors.value.base,
-          "--fs-button-hover-border-color"     : colors.value.base,
-          "--fs-button-hover-color"            : textColors.value.light,
-          "--fs-button-active-background-color": colors.value.dark,
-          "--fs-button-active-border-color"    : colors.value.dark,
-          "--fs-button-active-color"           : textColors.value.light,
-        };
-        case "full": return {
-          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
-          "--fs-button-background-color"       : colors.value.base,
-          "--fs-button-border-color"           : colors.value.base,
-          "--fs-button-color"                  : textColors.value.light,
-          "--fs-button-hover-background-color" : colors.value.base,
-          "--fs-button-hover-border-color"     : colors.value.base,
-          "--fs-button-hover-color"            : textColors.value.light,
-          "--fs-button-active-background-color": colors.value.dark,
-          "--fs-button-active-border-color"    : colors.value.dark,
-          "--fs-button-active-color"           : textColors.value.light,
-        };
         case "icon": switch (props.color) {
           case ColorEnum.Dark:
           case ColorEnum.Light: return {
@@ -190,9 +157,6 @@ export default defineComponent({
 
     const classes = computed((): string[] => {
       const classNames: string[] = [];
-      if (!props.editable) {
-        classNames.push("fs-button--disabled");
-      }
       if (props.fullWidth) {
         classNames.push("fs-button-full-width");
       }
@@ -207,11 +171,27 @@ export default defineComponent({
       return classNames;
     });
 
+    const padding = computed((): string | number => {
+      switch (props.variant) {
+        case "standard":
+        case "full":     return (!slots.default && !props.label) ? "0 7px" : "0 16px";
+        default:         return "0px";
+      }
+    });
+
+    const width = computed((): string | number => {
+      if (props.fullWidth) {
+        return "100%";
+      }
+      return "fit-content";
+    });
+
     return {
-      props,
+      classes,
+      padding,
       colors,
       style,
-      classes
+      width
     };
   }
 });

package/components/FSCard.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -46,19 +46,19 @@ export default defineComponent({
   },
   props: {
     width: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
       default: null
     },
     height: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
       default: null
     },
     gap: {
       type: [String, Number],
       required: false,
-      default: 8
+      default: "8px"
     }
   },
   setup(props) {

package/components/FSCarousel.vue

@@ -21,16 +21,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, VNode } from "vue";
+import { computed, defineComponent, PropType, VNode } from "vue";
 
 import { 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";
 
 export default defineComponent({
   name: "FSCarousel",
   props: {
     height: {
-      type: [String, Number],
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
       required: false,
       default: "100%"
     }
@@ -45,7 +46,7 @@ export default defineComponent({
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-carousel-height"          : typeof(props.height) === "string" ? props.height : `${props.height}px`,
+        "--fs-carousel-height"          : sizeToVar(props.height),
         "--fs-carousel-background-color": backgrounds.base
       };
     });

package/components/FSClickable.vue

@@ -0,0 +1,161 @@
+<template>
+  <FSCard
+    v-if="!href"
+    :border="$props.border"
+    :class="classes"
+    :style="style"
+    @click.stop="onClick"
+    v-bind="$attrs"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSCard>
+  <a
+    v-else
+    :href="href"
+  >
+    <FSCard
+      :border="$props.border"
+      :class="classes"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FSCard>
+  </a>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+import { RouteLocation, useRouter } from "vue-router";
+
+import { ColorBase, ColorEnum } 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 FSCard from "./FSCard.vue";
+
+export default defineComponent({
+  name: "FSClickable",
+  components: {
+    FSCard
+  },
+  props: {
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation>,
+      required: false,
+      default: null
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "standard"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { getColors, getContrasts } = useColors();
+    const router = useRouter();
+
+    const textColors = computed(() => getContrasts(props.color));
+    const colors = computed(() => getColors(props.color));
+    const lights = getColors(ColorEnum.Light);
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-clickable-border-size"     : props.border ? "1px" : "0",
+          "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color": lights.base,
+          "--fs-clickable-border-color"    : lights.dark,
+          "--fs-clickable-color"           : lights.dark
+        };
+      }
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : colors.value.light,
+          "--fs-clickable-border-color"           : colors.value.base,
+          "--fs-clickable-color"                  : textColors.value.base,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.base,
+          "--fs-clickable-hover-color"            : textColors.value.light,
+          "--fs-clickable-active-background-color": colors.value.dark,
+          "--fs-clickable-active-border-color"    : colors.value.dark,
+          "--fs-clickable-active-color"           : textColors.value.light
+        };
+        case "full": return {
+          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+          "--fs-clickable-background-color"       : colors.value.base,
+          "--fs-clickable-border-color"           : colors.value.base,
+          "--fs-clickable-color"                  : textColors.value.light,
+          "--fs-clickable-hover-background-color" : colors.value.base,
+          "--fs-clickable-hover-border-color"     : colors.value.base,
+          "--fs-clickable-hover-color"            : textColors.value.light,
+          "--fs-clickable-active-background-color": colors.value.dark,
+          "--fs-clickable-active-border-color"    : colors.value.dark,
+          "--fs-clickable-active-color"           : textColors.value.light
+        };
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames: string[] = ["fs-clickable"];
+      if (!props.editable) {
+        classNames.push("fs-clickable-disabled");
+      }
+      return classNames;
+    });
+
+    const href = computed((): string | null => {
+      if (!props.to) {
+        return null;
+      }
+      if (typeof props.to === "string") {
+        return props.to;
+      }
+      else {
+        return router.resolve(props.to).href;
+      }
+    });
+
+    const onClick = () => {
+      if (props.editable) {
+        emit("click");
+      }
+    };
+
+    return {
+      classes,
+      style,
+      href,
+      onClick
+    };
+  }
+});
+</script>

package/components/FSContainer.vue

@@ -12,6 +12,7 @@ import { computed, defineComponent } from "vue";
 
 import { useColors } 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";
 
 export default defineComponent({
   name: "FSContainer",
@@ -40,7 +41,7 @@ export default defineComponent({
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-container-padding"         : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
+        "--fs-container-padding"         : sizeToVar(props.padding),
         "--fs-container-background-color": backgrounds.base,
         "--fs-container-border-color"    : lights.dark
       };

package/components/FSLink.vue

@@ -1,8 +1,8 @@
 <template>
   <a
-    :href="$props.to"
     :class="classes"
     :style="style"
+    :href="href"
     v-bind="$attrs"
   >
     <slot />
@@ -11,6 +11,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
+import { RouteLocation, useRouter } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -19,7 +20,7 @@ export default defineComponent({
   name: "FSLink",
   props: {
     to: {
-        type: String,
+        type: [String, Object] as PropType<string | RouteLocation>,
         required: false,
         default: "_blank"
     },
@@ -52,6 +53,7 @@ export default defineComponent({
   setup(props) {
     const { getColors } = useColors();
     const { slots } = useSlots();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
 
@@ -86,9 +88,19 @@ export default defineComponent({
       }
     });
 
+    const href = computed((): string => {
+      if (typeof props.to === "string") {
+        return props.to;
+      }
+      else {
+        return router.resolve(props.to).href;
+      }
+    });
+
     return {
       classes,
-      style
+      style,
+      href
     };
   }
 });

package/components/FSLoader.vue

@@ -49,18 +49,7 @@ export default defineComponent({
 
     const getHeight = computed((): string | number => {
       switch (props.variant) {
-        case "standard": {
-          if (Array.isArray(props.height)) {
-            if (isExtraSmall.value) {
-              return props.height[2] ?? props.height[1] ?? props.height[0];
-            }
-            if (isMobileSized.value) {
-              return props.height[1] ?? props.height[0];
-            }
-            return props.height[0];
-          }
-          return props.height;
-        }
+        case "standard":       return sizeToVar(props.height);
         case "button": 
         case "input":          return isMobileSized.value ? "36px" : "40px";
         case "chip":           return isMobileSized.value ? "20px" : "24px";
@@ -77,25 +66,14 @@ export default defineComponent({
 
     const getWidth = computed((): string | number => {
       switch (props.variant) {
-        case "standard": {
-          if (Array.isArray(props.width)) {
-            if (isExtraSmall.value) {
-              return props.width[2] ?? props.width[1] ?? props.width[0];
-            }
-            if (isMobileSized.value) {
-              return props.width[1] ?? props.width[0];
-            }
-            return props.width[0];
-          }
-          return props.width;
-        }
-        case "button":  return isMobileSized ? "36px" : "40px";
-        case "input":   return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
-        case "chip":    return "8vw";
-        case "text-h1": return "calc(50% - 32px)";
-        case "text-h2": return "calc(60% - 32px)";
-        case "text-h3": return "calc(65% - 32px)";
-        default:        return "calc(75% - 32px)";
+        case "standard": return sizeToVar(props.width);
+        case "button":   return isMobileSized ? "36px" : "40px";
+        case "input":    return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "chip":     return "8vw";
+        case "text-h1":  return "calc(50% - 32px)";
+        case "text-h2":  return "calc(60% - 32px)";
+        case "text-h3":  return "calc(65% - 32px)";
+        default:         return "calc(75% - 32px)";
       }
     });
 

package/components/FSSlideGroup.vue

@@ -1,28 +1,62 @@
 <template>
   <v-slide-group
     class="fs-slide-group"
+    ref="slideGroupRef"
     :showArrows="true"
     :style="style"
     v-bind="$attrs"
   >
-    <v-slide-group-item
-      v-for="(component, index) in getChildren()"
-      :key="index"
-    >
-      <component :is="component" />
-    </v-slide-group-item>
+    <template #prev>
+      <FSButton
+        v-if="$props.dash"
+        icon="mdi-chevron-double-left"
+        variant="icon"
+        @click="goToStart"
+      />
+      <FSButtonPreviousIcon
+        :color="ColorEnum.Dark"
+      />
+    </template>
+    <template #default>
+      <v-slide-group-item
+        v-for="(component, index) in getChildren()"
+        :key="index"
+      >
+        <component :is="component" />
+      </v-slide-group-item>
+    </template>
+    <template #next>
+      <FSButtonNextIcon
+        :color="ColorEnum.Dark"
+      />
+      <FSButton
+        v-if="$props.dash"
+        icon="mdi-chevron-double-right"
+        variant="icon"
+        @click="goToEnd"
+      />
+    </template>
   </v-slide-group>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { 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 FSButtonPreviousIcon from "./buttons/FSButtonPreviousIcon.vue";
+import FSButtonNextIcon from "./buttons/FSButtonNextIcon.vue";
+import FSButton from "./FSButton.vue";
+
 export default defineComponent({
   name: "FSSlideGroup",
+  components: {
+    FSButtonPreviousIcon,
+    FSButtonNextIcon,
+    FSButton
+  },
   props: {
     padding: {
       type: [String, Number],
@@ -33,6 +67,11 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: "8px"
+    },
+    dash: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
@@ -41,16 +80,38 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
+    const slideGroupRef = ref(null);
+
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => ({
+      "--fs-group-arrows-width": props.dash ? "52px" : "32px",
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.light,
       "--fs-group-hover-color": darks.dark
     }));
 
+    const goToStart = () => {
+      if (slideGroupRef.value) {
+        slideGroupRef.value.scrollOffset = 0;
+      }
+    };
+
+    const goToEnd = () => {
+      if (slideGroupRef.value) {
+        const contentSize = slideGroupRef.value.$el.children[1].children[0].clientWidth;
+        const containerSize = slideGroupRef.value.$el.clientWidth;
+        const arrowsOffset = props.dash ? 104 : 64;
+        slideGroupRef.value.scrollOffset = (contentSize - containerSize + arrowsOffset);
+      }
+    };
+
     return {
+      slideGroupRef,
+      ColorEnum,
       style,
-      getChildren
+      getChildren,
+      goToStart,
+      goToEnd
     };
   }
 });