@dative-gpi/foundation-shared-components 0.0.8 → 0.0.10

package/components/FSCol.vue

@@ -1,109 +1,115 @@
 <template>
-    <div
-        :style="style"
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <slot />
-    </div>
+  <div
+    :style="style"
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType } from "vue";
+
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
-    name: "FSCol",
-    props: {
-        width: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "fill"
-        },
-        height: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "hug"
-        },
-        align: {
-            type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
-            required: false,
-            default: "top-left"
-        },
-        gap: {
-            type: Number,
-            required: false,
-            default: 8
-        }
+  name: "FSCol",
+  props: {
+    width: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "fill"
     },
-    setup(props) {
-        const { width, height, align, gap } = toRefs(props);
-
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
-            "--fs-col-gap": `${gap.value}px`,
-            "--fs-col-width": width.value,
-            "--fs-col-height": height.value
-        }));
+    height: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "hug"
+    },
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "top-left"
+    },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    }
+  },
+  setup(props) {
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+      "--fs-col-padding": sizeToVar(props.padding),
+      "--fs-col-gap"    : sizeToVar(props.gap),
+      "--fs-col-width"  : sizeToVar(props.width),
+      "--fs-col-height" : sizeToVar(props.height)
+    }));
 
-        const classes = computed((): string[] => {
-            const classes = ["fs-col"];
-            switch (width.value) {
-                case "hug":
-                    classes.push("fs-col-width-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-col-width-fill");
-                    break;
-                default: 
-                    classes.push("fs-col-width-fixed");
-                    break;
-            }
-            switch (height.value) {
-                case "hug":
-                    classes.push("fs-col-height-hug");
-                    break;
-                case "fill":
-                    classes.push("fs-col-height-fill");
-                    break;
-                default: 
-                    classes.push("fs-col-height-fixed");
-                    break;
-            }
-            switch (align.value) {
-                case "top-left":
-                    classes.push("fs-col-top-left");
-                    break;
-                case "top-center":
-                    classes.push("fs-col-top-center");
-                    break;
-                case "top-right":
-                    classes.push("fs-col-top-right");
-                    break;
-                case "center-left":
-                    classes.push("fs-col-center-left");
-                    break;
-                case "center-center":
-                    classes.push("fs-col-center-center");
-                    break;
-                case "center-right":
-                    classes.push("fs-col-center-right");
-                    break;
-                case "bottom-left":
-                    classes.push("fs-col-bottom-left");
-                    break;
-                case "bottom-center":
-                    classes.push("fs-col-bottom-center");
-                    break;
-                case "bottom-right":
-                    classes.push("fs-col-bottom-right");
-                    break;
-            }
-            return classes;
-        });
+    const classes = computed((): string[] => {
+      const classNames = ["fs-col"];
+      switch (props.width) {
+        case "hug":
+          classNames.push("fs-col-width-hug");
+          break;
+        case "fill":
+          classNames.push("fs-col-width-fill");
+          break;
+        default: 
+          classNames.push("fs-col-width-fixed");
+          break;
+      }
+      switch (props.height) {
+        case "hug":
+          classNames.push("fs-col-height-hug");
+          break;
+        case "fill":
+          classNames.push("fs-col-height-fill");
+          break;
+        default: 
+          classNames.push("fs-col-height-fixed");
+          break;
+      }
+      switch (props.align) {
+        case "top-left":
+          classNames.push("fs-col-top-left");
+          break;
+        case "top-center":
+          classNames.push("fs-col-top-center");
+          break;
+        case "top-right":
+          classNames.push("fs-col-top-right");
+          break;
+        case "center-left":
+          classNames.push("fs-col-center-left");
+          break;
+        case "center-center":
+          classNames.push("fs-col-center-center");
+          break;
+        case "center-right":
+          classNames.push("fs-col-center-right");
+          break;
+        case "bottom-left":
+          classNames.push("fs-col-bottom-left");
+          break;
+        case "bottom-center":
+          classNames.push("fs-col-bottom-center");
+          break;
+        case "bottom-right":
+          classNames.push("fs-col-bottom-right");
+          break;
+      }
+      return classNames;
+    });
 
-        return {
-            style,
-            classes
-        };
-    }
+    return {
+      style,
+      classes
+    };
+  }
 });
 </script>

package/components/FSColor.vue

@@ -1,80 +1,77 @@
 <template>
-    <FSRow
-        class="fs-color"
-        :width="$props.width"
-        :height="$props.height"
-        :align="$props.align"
-        :wrap="$props.wrap"
-        :gap="$props.gap"
-        :style="style"
-    >
-        <slot name="default" v-bind="{ color, colors }" />
-    </FSRow>
+  <FSRow
+    class="fs-color"
+    :width="$props.width"
+    :height="$props.height"
+    :align="$props.align"
+    :wrap="$props.wrap"
+    :gap="$props.gap"
+    :style="style"
+  >
+    <slot v-bind="{ color: $props.color, colors }" />
+  </FSRow>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, toRefs } from "vue";
+import { computed, defineComponent, PropType, ref, Ref } from "vue";
 
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSColor",
-    components: {
-        FSRow
+  name: "FSColor",
+  components: {
+    FSRow
+  },
+  props: {
+    width: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "hug"
     },
-    props: {
-        width: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "hug"
-        },
-        height: {
-            type: String as PropType<"hug" | "fill" | string>,
-            required: false,
-            default: "hug"
-        },
-        align: {
-            type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
-            required: false,
-            default: "center-left"
-        },
-        wrap: {
-            type: Boolean,
-            required: false,
-            default: true
-        },
-        gap: {
-            type: Number,
-            required: false,
-            default: 8
-        },
-        color: {
-            type: String as PropType<ColorBase | String>,
-            required: false,
-            default: ColorBase.Primary
-        }
+    height: {
+      type: String as PropType<"hug" | "fill" | string>,
+      required: false,
+      default: "hug"
     },
-    setup(props) {
-        const { color } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
+    align: {
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
+      required: false,
+      default: "center-left"
+    },
+    wrap: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    gap: {
+      type: [String, Number],
+      required: false,
+      default: "8px"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    }
+  },
+  setup(props) {
+    const colors = computed(() => useColors().getColors(props.color));
 
-        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-            "--fs-color-background-color": colors.light,
-            "--fs-color-color": colors.base,
-            "--fs-color-light": colors.light,
-            "--fs-color-base": colors.base,
-            "--fs-color-dark": colors.dark
-        });
+    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+      "--fs-color-background-color": colors.value.light,
+      "--fs-color-color"           : colors.value.base,
+      "--fs-color-light"           : colors.value.light,
+      "--fs-color-base"            : colors.value.base,
+      "--fs-color-dark"            : colors.value.dark
+    });
 
-        return {
-            colors,
-            color,
-            style
-        };
-    }
+    return {
+      colors,
+      style
+    };
+  }
 });
 </script>

package/components/FSColorIcon.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-icon
+    :color="$props.color"
+    :class="classes"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <slot />
+  </v-icon>
+</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";
+
+export default defineComponent({
+  name: "FSColorIcon",
+  props: {
+    size: {
+      type: String as PropType<"s" | "m" | "l">,
+      required: false,
+      default: "m"
+    },
+    variant: {
+      type: String as PropType<"standard" | "fill">,
+      required: false,
+      default: "standard"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    }
+  },
+  setup(props) {
+    const colors = computed(() => useColors().getColors(props.color));
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      switch (props.variant) {
+        case "fill": return {
+          "--fs-icon-background-color": colors.value.light
+        };
+        default: return {
+          "--fs-icon-background-color": "transparent"
+        };
+      }
+    });
+
+    const classes = computed((): string[] => {
+      const classNames = [`fs-icon-${props.size}`];
+      switch (props.variant) {
+        case "fill":
+          classNames.push("fs-color-icon");
+          break;
+      }
+      return classNames;
+    });
+
+    return {
+      style,
+      classes
+    };
+  }
+});
+</script>

package/components/FSContainer.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    :class="classes"
+    :style="style"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSContainer",
+  props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: 8
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    elevation: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const lights = useColors().getColors(ColorEnum.Light);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-container-padding"         : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
+        "--fs-container-background-color": backgrounds.base,
+        "--fs-container-border-color"    : lights.dark
+      };
+    });
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-container"];
+      if (props.border) {
+        classNames.push("fs-container-border");
+      }
+      if (props.elevation) {
+        classNames.push("fs-container-elevation");
+      }
+      return classNames;
+    });
+
+    return {
+      style,
+      classes
+    };
+  }
+})
+</script>