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

package/components/FSBreadcrumbs.vue

@@ -1,26 +1,31 @@
 <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>
+        <template #divider>
+            <FSIcon class="fs-breadcrumbs-divider" size="m">
+                mdi-chevron-right
+            </FSIcon>
+        </template>
     </v-breadcrumbs>
 </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";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
-import FSRow from "./FSRow.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
@@ -30,8 +35,7 @@ export default defineComponent({
     name: "FSBreadcrumbs",
     components: {
         FSSpan,
-        FSIcon,
-        FSRow
+        FSIcon
     },
     props: {
         items: {
@@ -40,24 +44,25 @@ export default defineComponent({
         }
     },
     setup() {
-        const dark = useColors().getDark();
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        const style = {
-            "--fs-breadcrumbs-light-text": dark.light,
-            "--fs-breadcrumbs-base-text" : dark.base,
-            "--fs-breadcrumbs-dark-text" : dark.dark
-        };
+        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--disabled";
+                classes.push("fs-breadcrumbs-label--disabled");
             }
-            return "fs-breadcrumbs-label";
+            return classes;
         };
 
         return {
             style,
-            getClass
+            classes
         };
     }
 })

package/components/FSButton.vue

@@ -1,25 +1,46 @@
 <template>
     <v-btn
-        class="fs-button"
+         v-if="!['icon'].includes($props.variant)"
         :ripple="false"
         :style="style"
+        :class="classes"
+        @click="onClick"
         v-bind="$attrs"
     >
-        <slot>
-            <FSRow width="hug">
-                <FSIcon v-if="icon" size="m">
-                    {{ icon }}
+        <FSRow :wrap="false">
+            <slot name="prepend" v-bind="{ color, colors }">
+                <FSIcon v-if="$props.prependIcon" size="m">
+                    {{ $props.prependIcon }}
                 </FSIcon>
-                <FSSpan v-if="label" font="text-button">
-                    {{ label }}
+            </slot>
+            <slot name="default" v-bind="{ color, colors }">
+                <FSSpan v-if="$props.label" font="text-body">
+                    {{ $props.label }}
                 </FSSpan>
-            </FSRow>
-        </slot>
+            </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">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType, toRefs, useSlots } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
@@ -36,7 +57,7 @@ export default defineComponent({
         FSRow
     },
     props: {
-        icon: {
+        prependIcon: {
             type: String,
             required: false,
             default: null
@@ -46,36 +67,123 @@ export default defineComponent({
             required: false,
             default: null
         },
-        full: {
-            type: Boolean,
+        appendIcon: {
+            type: String,
+            required: false,
+            default: null
+        },
+        icon: {
+            type: String,
             required: false,
-            default: 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
+            default: ColorBase.Dark
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
         }
     },
-    setup(props) {
-        const { label, full, 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 style = computed(() => ({
-            "--fs-button-padding"    : label.value ? "0 16px" : "0",
-            "--fs-button-light-color": full.value ? colors.base : colors.light,
-            "--fs-button-base-color" : colors.base,
-            "--fs-button-dark-color" : colors.dark,
-            "--fs-button-light-text" : full.value ? colors.light : colors.base,
-            "--fs-button-base-text"  : colors.light,
-            "--fs-button-dark-text"  : colors.light
-        }));
+        const lights = useColors().getColors(ColorBase.Light);
+
+        const isEmpty = computed(() => {
+            return !slots.default && !label.value;
+        });
+
+        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
+                };
+            }
+        });
+
+        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 onClick = () => {
+            if (!editable.value) {
+                return;
+            }
+            emit("click");
+        }
 
         return {
-            icon: props.icon,
-            label,
-            style
+            colors,
+            color,
+            style,
+            classes,
+            onClick
         };
     }
 });

package/components/FSCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
-    <FSCol width="hug" height="hug">
-        <FSRow width="hug" height="hug">
+    <FSCol width="hug">
+        <FSRow width="hug" align="center-left">
             <FSIcon
                 class="fs-checkbox"
                 size="checkbox"
@@ -9,24 +9,28 @@
             >
                 {{ icon }}
             </FSIcon>
+            <slot name="default">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-checkbox-label"
+                    :style="style"
+                    :font="font"
+                    @click="onToggle"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+            </slot>
+        </FSRow>
+        <slot name="description">
             <FSSpan
-                v-if="$props.label"
-                class="fs-checkbox-label"
+                v-if="$props.description"
+                class="fs-checkbox-description"
+                font="text-underline"
                 :style="style"
-                :font="font"
-                @click="onToggle"
             >
-                {{ $props.label }}
+                {{ $props.description }}
             </FSSpan>
-        </FSRow>
-        <FSSpan
-            v-if="$props.description"
-            class="fs-checkbox-description"
-            font="text-overline"
-            :style="style"
-        >
-            {{ $props.description }}
-        </FSSpan>
+        </slot>
     </FSCol>
 </template>
 
@@ -80,20 +84,31 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const colors = useColors().getColors(color.value);
+
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        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 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(() => value.value ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline");
+        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

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="fs-col"
         :style="style"
+        :class="classes"
         v-bind="$attrs"
     >
         <slot />
@@ -22,7 +22,12 @@ export default defineComponent({
         height: {
             type: String as PropType<"hug" | "fill" | string>,
             required: false,
-            default: "fill"
+            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,
@@ -31,38 +36,73 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { width, height, gap } = toRefs(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
+        }));
 
-        const style = computed(() => {
-            const style : {[code: string]: string} & Partial<CSSStyleDeclaration> = {
-                "--fs-col-gap": `${gap.value}px`
-            };
+        const classes = computed((): string[] => {
+            const classes = ["fs-col"];
             switch (width.value) {
                 case "hug":
+                    classes.push("fs-col-width-hug");
                     break;
                 case "fill":
-                    style.alignSelf = "stretch";
+                    classes.push("fs-col-width-fill");
                     break;
-                default:
-                    style.width = width.value;
+                default: 
+                    classes.push("fs-col-width-fixed");
                     break;
             }
             switch (height.value) {
                 case "hug":
+                    classes.push("fs-col-height-hug");
                     break;
                 case "fill":
-                    style.flex = "1 0 0";
+                    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;
-                default:
-                    style.heigth = height.value;
-                    style.flexShrink = "0";
+                case "bottom-right":
+                    classes.push("fs-col-bottom-right");
                     break;
             }
-            return style;
+            return classes;
         });
 
         return {
-            style
+            style,
+            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

@@ -6,21 +6,26 @@
         @scroll="onScroll"
     >
         <div class="fs-fade-out-top" />
-        <div class="fs-fade-out-inner">
+        <FSCol height="fill">
             <slot />
-        </div>
+        </FSCol>
         <div class="fs-fade-out-bottom" />
     </div>
 </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";
 
+import FSCol from "./FSCol.vue";
+
 export default defineComponent({
     name: "FSFadeOut",
+    components: {
+        FSCol
+    },
     props: {
         maskHeight: {
             type: Number,
@@ -36,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
         };
     }
 });