@dative-gpi/foundation-shared-components 0.0.5 → 0.0.7

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
     <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
         <template #title="{ item }">
-            <FSSpan :class="getClass(item)">
+            <FSSpan :class="classes(item)">
                 {{ item.title }}
             </FSSpan>
         </template>
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, Ref, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
@@ -23,9 +23,9 @@ import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 
 export interface FSBreadcrumbItem {
-    href: string | undefined
-    replace: boolean | undefined
-    to: string | undefined
+    href: string | undefined,
+    replace: boolean | undefined,
+    to: string | undefined,
     exact: boolean | undefined,
     title: string,
     disabled: boolean
@@ -44,23 +44,25 @@ export default defineComponent({
         }
     },
     setup() {
-        const dark = useColors().getVariants(ColorBase.Dark);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        const style = {
-            "--fs-breadcrumbs-light-text": dark.light,
-            "--fs-breadcrumbs-base-text" : dark.base
-        };
+        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+            "--fs-breadcrumbs-color": darks.dark,
+            "--fs-breadcrumbs-active-color": darks.base,
+            "--fs-breadcrumbs-disabled-color": darks.light
+        });
 
-        const getClass = (item: FSBreadcrumbItem): string => {
+        const classes = (item: FSBreadcrumbItem): string[] => {
+            const classes = ["fs-breadcrumbs-label"];
             if (item.disabled) {
-                return "fs-breadcrumbs-label fs-breadcrumbs-label--disabled";
+                classes.push("fs-breadcrumbs-label--disabled");
             }
-            return "fs-breadcrumbs-label";
+            return classes;
         };
 
         return {
             style,
-            getClass
+            classes
         };
     }
 })

package/components/FSButton.vue

@@ -1,40 +1,42 @@
 <template>
-    <v-btn
-         v-if="!['icon'].includes($props.variant)"
-        :ripple="false"
-        :style="style"
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <FSRow>
-            <slot name="prepend">
-                <FSIcon v-if="$props.prependIcon" size="m">
-                    {{ $props.prependIcon }}
-                </FSIcon>
-            </slot>
-            <slot name="default">
-                <FSSpan v-if="$props.label" font="text-button">
-                    {{ $props.label }}
-                </FSSpan>
-            </slot>
-            <slot name="append">
-                <FSIcon v-if="$props.appendIcon" size="m">
-                    {{ $props.appendIcon }}
-                </FSIcon>
-            </slot>
-        </FSRow>
-    </v-btn>
-    <FSRow
-        v-else-if="$props.icon"
-        width="hug"
-        :style="style"
-        :class="classes"
-        v-bind="$attrs"
-    >
-        <FSIcon size="checkbox">
-            {{ $props.icon }}
+  <v-btn
+    v-if="!['icon'].includes($props.variant!)"
+    :ripple="false"
+    :style="style"
+    :class="classes"
+    @click="onClick"
+    v-bind="$attrs"
+  >
+    <FSRow :wrap="false">
+      <slot name="prepend" v-bind="{ color, colors }">
+        <FSIcon v-if="$props.prependIcon" size="m">
+          {{ $props.prependIcon }}
         </FSIcon>
+      </slot>
+      <slot name="default" v-bind="{ color, colors }">
+        <FSSpan v-if="$props.label" font="text-body">
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot name="append" v-bind="{ color, colors }">
+        <FSIcon v-if="$props.appendIcon" size="m">
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
     </FSRow>
+  </v-btn>
+  <FSRow
+    v-else-if="$props.icon"
+    width="hug"
+    :style="style"
+    :class="classes"
+    @click="onClick"
+    v-bind="$attrs"
+  >
+    <FSIcon size="checkbox">
+      {{ $props.icon }}
+    </FSIcon>
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -48,93 +50,147 @@ import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSButton",
-    components: {
-        FSSpan,
-        FSIcon,
-        FSRow
+  name: "FSButton",
+  components: {
+    FSSpan,
+    FSIcon,
+    FSRow,
+  },
+  props: {
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null,
     },
-    props: {
-        prependIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        appendIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        icon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        variant: {
-            type: String as PropType<"standard" | "full" | "icon">,
-            required: false,
-            default: "standard"
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        }
+    label: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    variant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard",
     },
-    setup(props) {
-        const { label, variant, color } = toRefs(props);
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark,
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  emts: ["click"],
+  setup(props, { emit }) {
+    const { label, variant, color, editable } = toRefs(props);
+
+    const textColors = useColors().getContrasts(color.value);
+    const colors = useColors().getColors(color.value);
+    const slots = useSlots();
 
-        const colors = useColors().getVariants(color.value);
-        const slots = useSlots();
+    const lights = useColors().getColors(ColorBase.Light);
 
-        const isEmpty = computed(() => {
-            return !slots.default && !label.value;
-        });
+    const isEmpty = computed(() => {
+      return !slots.default && !label.value;
+    });
 
-        const style = computed(() => {
-            switch (variant.value) {
-                case "standard": return {
-                    "--fs-button-padding"    : !isEmpty.value ? "0 16px" : "0",
-                    "--fs-button-light-color": colors.light,
-                    "--fs-button-base-color" : colors.base,
-                    "--fs-button-dark-color" : colors.dark,
-                    "--fs-button-light-text" : colors.base,
-                    "--fs-button-base-text"  : colors.light,
-                    "--fs-button-dark-text"  : colors.light
-                };
-                case "full": return {
-                    "--fs-button-padding"    : !isEmpty.value ? "0 16px" : "0",
-                    "--fs-button-light-color": colors.base,
-                    "--fs-button-base-color" : colors.base,
-                    "--fs-button-dark-color" : colors.dark,
-                    "--fs-button-light-text" : colors.light,
-                    "--fs-button-base-text"  : colors.light,
-                    "--fs-button-dark-text"  : colors.light
+    const style = computed(
+      (): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+        if (!editable.value) {
+          switch (variant.value) {
+            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 (variant.value) {
+          case "standard":
+            return {
+              "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+              "--fs-button-background-color": colors.light,
+              "--fs-button-border-color": colors.base,
+              "--fs-button-color": textColors.base,
+              "--fs-button-hover-background-color": colors.base,
+              "--fs-button-hover-border-color": colors.base,
+              "--fs-button-hover-color": textColors.light,
+              "--fs-button-active-background-color": colors.dark,
+              "--fs-button-active-border-color": colors.dark,
+              "--fs-button-active-color": textColors.light,
+            };
+          case "full":
+            return {
+              "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+              "--fs-button-background-color": colors.base,
+              "--fs-button-border-color": colors.base,
+              "--fs-button-color": textColors.light,
+              "--fs-button-hover-background-color": colors.base,
+              "--fs-button-hover-border-color": colors.base,
+              "--fs-button-hover-color": textColors.light,
+              "--fs-button-active-background-color": colors.dark,
+              "--fs-button-active-border-color": colors.dark,
+              "--fs-button-active-color": textColors.light,
+            };
+          case "icon":
+            return {
+              "--fs-button-color": textColors.base,
+              "--fs-button-hover-color": textColors.dark,
+            };
+        }
+      }
+    );
 
-                };
-                case "icon": return {
-                    "--fs-button-light-text" : colors.base,
-                    "--fs-button-base-text"  : colors.dark
-                };
-            }
-        });
+    const classes = computed((): string[] => {
+      const classes = [];
+      if (!editable.value) {
+        classes.push("fs-button--disabled");
+      }
+      switch (variant.value) {
+        case "icon":
+          classes.push("fs-button-icon");
+          break;
+        default:
+          classes.push("fs-button");
+          break;
+      }
+      return classes;
+    });
 
-        const classes = computed(() => {
-            switch (variant.value) {
-                case "icon": return "fs-button-icon";
-                default: return "fs-button";
-            }
-        });
+    const onClick = () => {
+      if (!editable.value) {
+        return;
+      }
+      emit("click");
+    };
 
-        return {
-            style,
-            classes
-        };
-    }
+    return {
+      colors,
+      color,
+      style,
+      classes,
+      onClick,
+    };
+  },
 });
-</script>
+</script>

package/components/FSCheckbox.vue

@@ -84,20 +84,31 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        const colors = useColors().getColors(color.value);
 
-        const style = computed(() => ({
-            "--fs-checkbox-cursor"    : editable.value ? "pointer" : "default",
-            "--fs-checkbox-base-color": editable.value ? value.value ? colors.base : dark.base : dark.light,
-            "--fs-checkbox-base-text" : editable.value ? dark.base : dark.light
-        }));
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        const icon = computed(() => value.value ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline");
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-checkbox-cursor": "default",
+                    "--fs-checkbox-checkbox-color": lights.dark,
+                    "--fs-checkbox-color": lights.dark
+                };
+            }
+            return {
+                "--fs-checkbox-cursor": "pointer",
+                "--fs-checkbox-checkbox-color": value.value ? colors.base : darks.base,
+                "--fs-checkbox-color": darks.base
+            }
+        });
+
+        const icon = computed((): string => value.value ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline");
 
-        const font = computed(() => value.value ? "text-button" : "text-body");
+        const font = computed((): string => value.value ? "text-button" : "text-body");
 
-        const onToggle = () => {
+        const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }

package/components/FSCol.vue

@@ -44,57 +44,57 @@ export default defineComponent({
             "--fs-col-height": height.value
         }));
 
-        const classes = computed((): string => {
-            let classes = "fs-col";
+        const classes = computed((): string[] => {
+            const classes = ["fs-col"];
             switch (width.value) {
                 case "hug":
-                    classes += " fs-col-width-hug";
+                    classes.push("fs-col-width-hug");
                     break;
                 case "fill":
-                    classes += " fs-col-width-fill";
+                    classes.push("fs-col-width-fill");
                     break;
                 default: 
-                    classes += " fs-col-width-fixed";
+                    classes.push("fs-col-width-fixed");
                     break;
             }
             switch (height.value) {
                 case "hug":
-                    classes += " fs-col-height-hug";
+                    classes.push("fs-col-height-hug");
                     break;
                 case "fill":
-                    classes += " fs-col-height-fill";
+                    classes.push("fs-col-height-fill");
                     break;
                 default: 
-                    classes += " fs-col-height-fixed";
+                    classes.push("fs-col-height-fixed");
                     break;
             }
             switch (align.value) {
                 case "top-left":
-                    classes += " fs-col-top-left";
+                    classes.push("fs-col-top-left");
                     break;
                 case "top-center":
-                    classes += " fs-col-top-center";
+                    classes.push("fs-col-top-center");
                     break;
                 case "top-right":
-                    classes += " fs-col-top-right";
+                    classes.push("fs-col-top-right");
                     break;
                 case "center-left":
-                    classes += " fs-col-center-left";
+                    classes.push("fs-col-center-left");
                     break;
                 case "center-center":
-                    classes += " fs-col-center-center";
+                    classes.push("fs-col-center-center");
                     break;
                 case "center-right":
-                    classes += " fs-col-center-right";
+                    classes.push("fs-col-center-right");
                     break;
                 case "bottom-left":
-                    classes += " fs-col-bottom-left";
+                    classes.push("fs-col-bottom-left");
                     break;
                 case "bottom-center":
-                    classes += " fs-col-bottom-center";
+                    classes.push("fs-col-bottom-center");
                     break;
                 case "bottom-right":
-                    classes += " fs-col-bottom-right";
+                    classes.push("fs-col-bottom-right");
                     break;
             }
             return classes;

package/components/FSColor.vue

@@ -0,0 +1,80 @@
+<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>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, Ref, toRefs } from "vue";
+
+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
+    },
+    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
+        }
+    },
+    setup(props) {
+        const { color } = toRefs(props);
+
+        const colors = useColors().getColors(color.value);
+
+        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
+        });
+
+        return {
+            colors,
+            color,
+            style
+        };
+    }
+});
+</script>

package/components/FSFadeOut.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, toRefs } from "vue";
+import { defineComponent, PropType, Ref, ref, toRefs } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
@@ -41,15 +41,15 @@ export default defineComponent({
     setup(props) {
         const { maskHeight, color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
+        const colors = useColors().getColors(color.value);
 
-        const style = ref({
+        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
             "--fs-fade-out-mask-color": colors.base,
             "--fs-fade-out-top-mask-height": "0px",
             "--fs-fade-out-bottom-mask-height": `${maskHeight.value}px`
         });
 
-        const onScroll = ({ target }) => {
+        const onScroll = ({ target }): void => {
             if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
                 style.value["--fs-fade-out-bottom-mask-height"] = "0px";
             } else {

package/components/FSIcon.vue

@@ -1,6 +1,6 @@
 <template>
     <v-icon
-        :class="size"
+        :class="classes"
         v-bind="$attrs"
     >
         <slot />
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType, toRefs } from "vue";
 
 export default defineComponent({
     name: "FSIcon",
@@ -22,8 +22,10 @@ export default defineComponent({
     setup(props) {
         const { size } = toRefs(props);
 
+        const classes = computed((): string[] => ["fs-icon", `fs-icon-${size.value}`]);
+
         return {
-            size: `fs-icon-${size.value}`
+            classes
         };
     }
 });

package/components/FSNumberField.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs } from "vue";
+import { defineComponent, PropType } from "vue";
 
 import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";