@dative-gpi/foundation-shared-components 0.0.70 → 0.0.72

package/components/FSCard.vue

@@ -65,12 +65,12 @@ export default defineComponent({
       default: "8px"
     },
     variant: {
-      type: String as PropType<"background" | "standard">,
+      type: String as PropType<"background" | "standard" | "gradient">,
       required: false,
       default: "background"
     },
     color: {
-      type: String as PropType<ColorBase>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
       default: ColorEnum.Background
     },
@@ -91,9 +91,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getColors } = useColors();
+    const { getColors, getGradients } = useColors();
 
-    const colors = computed(() => getColors(props.color));
+    const colors = computed(() => {
+      if(Array.isArray(props.color)) {
+        return getColors(props.color[0]);
+      }
+      return getColors(props.color);
+    });
+    const gradients = computed(() => getGradients(props.color, 135));
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -120,11 +126,29 @@ export default defineComponent({
           "--fs-card-border-color"    : lights.dark,
           "--fs-card-color"           : darks.base
         }
+        case "gradient": return {
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-background-color": gradients.value.base,
+          "--fs-card-border-color"    : colors.value.lightContrast,
+          "--fs-card-color"           : colors.value.lightContrast
+        }
       }
     });
 
     const classes = computed((): string[] => {
       const classNames = ["fs-card"];
+      switch(props.variant) {
+        case "gradient": 
+          classNames.push("fs-card-gradient"); 
+          break;
+        default: 
+          classNames.push("fs-card-background");
+          break;
+      }
       if (props.elevation) {
         classNames.push("fs-card-elevation");
       }

package/components/FSClickable.vue

@@ -3,6 +3,10 @@
     v-if="$props.href"
     :href="$props.href"
     :style="style"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -12,7 +16,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -29,6 +33,10 @@
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -38,7 +46,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -56,6 +64,10 @@
     :type="$props.type"
     :style="style"
     @click.stop="onClick"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @mousedown="active = true"
+    @mouseup="active = false"
   >
     <FSCard
       :height="$props.height"
@@ -65,7 +77,7 @@
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
       </template>
     </FSCard>
     <template v-if="$props.load">
@@ -81,7 +93,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 import { RouteLocation } from "vue-router";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -161,6 +173,9 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
+    const hover = ref(false);
+    const active = ref(false);
+
     const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
@@ -222,6 +237,20 @@ export default defineComponent({
       }
     });
 
+    const contentVariant = computed((): "base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" => {
+      if (active.value) {
+        return "darkContrast";
+      }
+      if (hover.value) {
+        return "baseContrast";
+      }
+      switch (props.variant) {
+        case "standard"  : return "lightContrast";
+        case "background": return "base";
+        case "full"      : return "baseContrast";
+      }
+    });
+
     const classes = computed((): string[] => {
       const classNames: string[] = ["fs-clickable"];
       if (!props.editable) {
@@ -247,8 +276,11 @@ export default defineComponent({
     };
 
     return {
+      contentVariant,
       loadColor,
       classes,
+      active,
+      hover,
       style,
       onClick
     };

package/components/FSIcon.vue

@@ -1,7 +1,8 @@
 <template>
   <v-icon
-    :class="classes"
+    class="fs-icon"
     :color="color"
+    :style="style"
     v-bind="$attrs"
   >
     <slot />
@@ -11,14 +12,15 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSIcon",
   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"
     },
@@ -28,28 +30,42 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "light" | "dark">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const color = computed((): string | null => {
       if (props.color) {
-        return getColors(props.color)[props.variant];
+        return getColors(props.color)[props.variant]!;
       }
       return null;
     });
 
-    const classes = computed((): string[] => {
-      return [`fs-icon-${props.size}`];
+    const style = computed((): { [key: string] : string | undefined } => {
+      switch(props.size) {
+        case "s": return {
+          "--fs-icon-font-size": isMobileSized.value ? "14px" : "16px"
+        };
+        case "m": return {
+          "--fs-icon-font-size": isMobileSized.value ? "16px" : "20px"
+        };
+        case "l": return {
+          "--fs-icon-font-size": isMobileSized.value ? "20px" : "24px"
+        };
+        default: return {
+          "--fs-icon-font-size": sizeToVar(props.size)
+        };
+      }
     });
 
     return {
-      classes,
-      color
+      color,
+      style
     };
   }
 });

package/components/FSIconCard.vue

@@ -0,0 +1,80 @@
+<template>
+  <FSCard
+    :color="$props.backgroundColor"
+    :height="$props.size"
+    :width="$props.size"
+    :variant="variant"
+    :border="border"
+  >
+    <FSRow
+      align="center-center"
+    >
+      <FSIcon 
+        variant="dark"
+        size="56"
+        :color="$props.iconColor"
+      >
+        {{ $props.icon }}
+      </FSIcon>
+    </FSRow>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCard from "./FSCard.vue";
+import FSIcon from "./FSIcon.vue";
+
+export default defineComponent({
+  name: "FSIconCard",
+  components: {
+    FSCard,
+    FSIcon
+  },
+  props: {
+    size: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    backgroundColor: {
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-shape"
+    },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    }
+  },
+  setup(props) {
+    const variant = computed((): "background" | "gradient" => {
+      switch (props.backgroundColor) {
+        case ColorEnum.Background: return "background";
+        default:                   return "gradient";
+      }
+    });
+
+    const border = computed((): boolean => {
+      switch (props.backgroundColor) {
+        case ColorEnum.Background: return true;
+        default:                   return false;
+      }
+    });
+
+    return {
+      variant,
+      border
+    };
+  }
+});
+</script>

package/components/FSText.vue

@@ -45,7 +45,7 @@ export default defineComponent({
       default: ColorEnum.Dark
     },
     variant: {
-      type: String as PropType<"base" | "light" | "dark">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }
@@ -71,20 +71,10 @@ export default defineComponent({
     });
 
     const style = computed((): { [key: string] : string | undefined } => {
-      switch (props.variant) {
-        case "base": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.base
-        };
-        case "light": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.light
-        };
-        case "dark": return {
-          "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-text-color"     : colors.value.dark
-        };
-      }
+      return {
+        "--fs-span-line-clamp": props.lineClamp.toString(),
+        "--fs-text-color"     : colors.value[props.variant]
+      };
     });
 
     return {

package/components/lists/FSDataIteratorItem.vue

@@ -3,6 +3,8 @@
     class="fs-data-iterator-item"
     padding="12px"
     width="100%"
+    :color="$props.itemColor"
+    :variant="variant"
   >
     <FSCol>
       <slot name="item.top" v-bind="{ item: $props.item }" />
@@ -38,6 +40,8 @@
     <FSCard
       v-if="$props.showSelect"
       class="fs-data-iterator-item-checkbox"
+      :color="$props.itemColor"
+      :variant="variant"
       :border="false"
     >
       <FSCheckbox
@@ -50,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
 import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
@@ -86,6 +90,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    itemColor: {
+      type: String as PropType<ColorEnum>,
+      required: false,
+      default: ColorEnum.Background
+    },
     color: {
       type: String as PropType<ColorEnum>,
       required: false,
@@ -96,6 +105,19 @@ export default defineComponent({
       required: false,
       default: true
     }
+  },
+  setup(props) {
+    const variant = computed((): "standard" | "background" => {
+      switch (props.itemColor) {
+        case ColorEnum.Background:
+        case null: return "background";
+        default:   return "standard";
+      }
+    });
+
+    return {
+      variant
+    };
   }
 });
 </script>