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

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

@@ -4,20 +4,21 @@
         :ripple="false"
         :style="style"
         :class="classes"
+        @click="onClick"
         v-bind="$attrs"
     >
-        <FSRow>
-            <slot name="prepend">
+        <FSRow :wrap="false">
+            <slot name="prepend" v-bind="{ color, colors }">
                 <FSIcon v-if="$props.prependIcon" size="m">
                     {{ $props.prependIcon }}
                 </FSIcon>
             </slot>
-            <slot name="default">
-                <FSSpan v-if="$props.label" font="text-button">
+            <slot name="default" v-bind="{ color, colors }">
+                <FSSpan v-if="$props.label" font="text-body">
                     {{ $props.label }}
                 </FSSpan>
             </slot>
-            <slot name="append">
+            <slot name="append" v-bind="{ color, colors }">
                 <FSIcon v-if="$props.appendIcon" size="m">
                     {{ $props.appendIcon }}
                 </FSIcon>
@@ -29,6 +30,7 @@
         width="hug"
         :style="style"
         :class="classes"
+        @click="onClick"
         v-bind="$attrs"
     >
         <FSIcon size="checkbox">
@@ -83,57 +85,105 @@ export default defineComponent({
         color: {
             type: String as PropType<ColorBase>,
             required: false,
-            default: ColorBase.Primary
+            default: ColorBase.Dark
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
         }
     },
-    setup(props) {
-        const { label, variant, color } = toRefs(props);
+    emts: ["click"],
+    setup(props, { emit }) {
+        const { label, variant, color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
+        const textColors = useColors().getContrasts(color.value);
+        const colors = useColors().getColors(color.value);
         const slots = useSlots();
 
+        const lights = useColors().getColors(ColorBase.Light);
+
         const isEmpty = computed(() => {
             return !slots.default && !label.value;
         });
 
-        const style = computed(() => {
+        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-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
+                    "--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-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
+                    "--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-light-text" : colors.base,
-                    "--fs-button-base-text"  : colors.dark
+                    "--fs-button-color": textColors.base,
+                    "--fs-button-hover-color" : textColors.dark
                 };
             }
         });
 
-        const classes = computed(() => {
+        const classes = computed((): string[] => {
+            const classes = [];
+            if (!editable.value) {
+                classes.push("fs-button--disabled");
+            }
             switch (variant.value) {
-                case "icon": return "fs-button-icon";
-                default: return "fs-button";
+                case "icon":
+                    classes.push("fs-button-icon");
+                    break;
+                default:
+                    classes.push("fs-button");
+                    break;
             }
+            return classes;
         });
 
+        const onClick = () => {
+            if (!editable.value) {
+                return;
+            }
+            emit("click");
+        }
+
         return {
+            colors,
+            color,
             style,
-            classes
+            classes,
+            onClick
         };
     }
 });

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";
 

package/components/FSPasswordField.vue

@@ -10,7 +10,7 @@
         @update:value="(value) => $emit('update:value', value)"
         v-bind="$attrs"
     >
-        <template #append>
+        <template #append-inner>
             <FSIcon
                 class="fs-password-field-icon"
                 size="m"
@@ -79,18 +79,29 @@ export default defineComponent({
 
         const stars = ref(true);
 
-        const type = computed(() => stars.value ? "password" : "text");
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        const icon = computed(() => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-password-field-cursor"   : "default",
+                    "--fs-password-field-base-text": lights.dark,
+                    "--fs-password-field-dark-text": lights.dark
+                };
+            }
+            return {
+                "--fs-password-field-cursor"   : "pointer",
+                "--fs-password-field-base-text": darks.base,
+                "--fs-password-field-dark-text": darks.dark
+            };
+        });
 
-        const dark = useColors().getVariants(ColorBase.Dark);
+        const type = computed((): string => stars.value ? "password" : "text");
 
-        const style = computed(() => ({
-            "--fs-password-field-cursor"   : editable.value ? "pointer" : "default",
-            "--fs-password-field-base-text": editable.value ? dark.base : dark.light
-        }));
+        const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 
-        const onToggle = () => {
+        const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }

package/components/FSRadio.vue

@@ -88,21 +88,31 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, selected, 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-radio-cursor": (editable.value && !selected.value) ? "pointer" : "default",
-            "--fs-radio-base-color": editable.value ? selected.value ? colors.base : dark.base : dark.light,
-            "--fs-radio-base-text" : editable.value ? dark.base : dark.light
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        }));
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-radio-cursor": "default",
+                    "--fs-radio-radio-color": lights.dark,
+                    "--fs-radio-color": lights.dark
+                };
+            }
+            return {
+                "--fs-radio-cursor": selected.value ? "default" : "pointer",
+                "--fs-radio-radio-color": selected.value ? colors.base : darks.base,
+                "--fs-radio-color" : darks.base
+            };
+        });
 
-        const icon = computed(() => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
+        const icon = computed((): string => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
 
-        const font = computed(() => selected.value ? "text-button" : "text-body");
+        const font = computed((): string => selected.value ? "text-button" : "text-body");
 
-        const onToggle = () => {
+        const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }

package/components/FSRadioGroup.vue

@@ -7,8 +7,8 @@
             :description="item.description"
             :value="item.value"
             :selected="isSelected(item.value)"
-            :color="color"
-            :editable="editable"
+            :color="$props.color"
+            :editable="$props.editable"
             @update:value="onToggle"
         />
     </FSCol>
@@ -52,21 +52,19 @@ export default defineComponent({
     },
     emits: ["update:value"],
     setup(props, { emit }) {
-        const { value, color, editable } = toRefs(props);
+        const { value } = toRefs(props);
 
-        const isSelected = (item: String | Boolean | Number) => {
+        const isSelected = (item: String | Boolean | Number): boolean => {
             return item == value.value;
         };
 
-        const onToggle = (item: String | Boolean | Number) => {
+        const onToggle = (item: String | Boolean | Number): void => {
             if (item != value.value) {
                 emit("update:value", item);
             }
         };
 
         return {
-            color,
-            editable,
             isSelected,
             onToggle
         };