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

package/components/FSBreadcrumbs.vue

@@ -5,6 +5,11 @@
                 {{ item.title }}
             </FSSpan>
         </template>
+        <template #divider>
+            <FSIcon class="fs-breadcrumbs-divider" size="m">
+                mdi-chevron-right
+            </FSIcon>
+        </template>
     </v-breadcrumbs>
 </template>
 
@@ -12,10 +17,10 @@
 import { defineComponent, PropType } 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
@@ -30,8 +35,7 @@ export default defineComponent({
     name: "FSBreadcrumbs",
     components: {
         FSSpan,
-        FSIcon,
-        FSRow
+        FSIcon
     },
     props: {
         items: {
@@ -40,17 +44,16 @@ export default defineComponent({
         }
     },
     setup() {
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = {
             "--fs-breadcrumbs-light-text": dark.light,
-            "--fs-breadcrumbs-base-text" : dark.base,
-            "--fs-breadcrumbs-dark-text" : dark.dark
+            "--fs-breadcrumbs-base-text" : dark.base
         };
 
         const getClass = (item: FSBreadcrumbItem): string => {
             if (item.disabled) {
-                return "fs-breadcrumbs-label--disabled";
+                return "fs-breadcrumbs-label fs-breadcrumbs-label--disabled";
             }
             return "fs-breadcrumbs-label";
         };

package/components/FSButton.vue

@@ -1,25 +1,44 @@
 <template>
     <v-btn
-        class="fs-button"
+         v-if="!['icon'].includes($props.variant)"
         :ripple="false"
         :style="style"
+        :class="classes"
         v-bind="$attrs"
     >
-        <slot>
-            <FSRow width="hug">
-                <FSIcon v-if="icon" size="m">
-                    {{ icon }}
+        <FSRow>
+            <slot name="prepend">
+                <FSIcon v-if="$props.prependIcon" size="m">
+                    {{ $props.prependIcon }}
                 </FSIcon>
-                <FSSpan v-if="label" font="text-button">
-                    {{ label }}
+            </slot>
+            <slot name="default">
+                <FSSpan v-if="$props.label" font="text-button">
+                    {{ $props.label }}
                 </FSSpan>
-            </FSRow>
-        </slot>
+            </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 }}
+        </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 +55,7 @@ export default defineComponent({
         FSRow
     },
     props: {
-        icon: {
+        prependIcon: {
             type: String,
             required: false,
             default: null
@@ -46,10 +65,20 @@ export default defineComponent({
             required: false,
             default: null
         },
-        full: {
-            type: Boolean,
+        appendIcon: {
+            type: String,
             required: false,
-            default: 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>,
@@ -58,24 +87,53 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { label, full, color } = toRefs(props);
+        const { label, variant, color } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
+        const slots = useSlots();
+
+        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
+
+                };
+                case "icon": return {
+                    "--fs-button-light-text" : colors.base,
+                    "--fs-button-base-text"  : colors.dark
+                };
+            }
+        });
 
-        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 classes = computed(() => {
+            switch (variant.value) {
+                case "icon": return "fs-button-icon";
+                default: return "fs-button";
+            }
+        });
 
         return {
-            icon: props.icon,
-            label,
-            style
+            style,
+            classes
         };
     }
 });

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>
 
@@ -81,7 +85,7 @@ export default defineComponent({
         const { value, color, editable } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = computed(() => ({
             "--fs-checkbox-cursor"    : editable.value ? "pointer" : "default",

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 = {
-                "--fs-col-gap": `${gap.value}px`
-            };
+        const classes = computed((): string => {
+            let classes = "fs-col";
             switch (width.value) {
                 case "hug":
+                    classes += " fs-col-width-hug";
                     break;
                 case "fill":
-                    style["align-self"] = "stretch";
+                    classes += " fs-col-width-fill";
                     break;
-                default:
-                    style["width"] = width.value;
+                default: 
+                    classes += " fs-col-width-fixed";
                     break;
             }
             switch (height.value) {
                 case "hug":
+                    classes += " fs-col-height-hug";
                     break;
                 case "fill":
-                    style["flex"] = "1 0 0";
+                    classes += " fs-col-height-fill";
+                    break;
+                default: 
+                    classes += " fs-col-height-fixed";
+                    break;
+            }
+            switch (align.value) {
+                case "top-left":
+                    classes += " fs-col-top-left";
+                    break;
+                case "top-center":
+                    classes += " fs-col-top-center";
+                    break;
+                case "top-right":
+                    classes += " fs-col-top-right";
+                    break;
+                case "center-left":
+                    classes += " fs-col-center-left";
+                    break;
+                case "center-center":
+                    classes += " fs-col-center-center";
+                    break;
+                case "center-right":
+                    classes += " fs-col-center-right";
+                    break;
+                case "bottom-left":
+                    classes += " fs-col-bottom-left";
+                    break;
+                case "bottom-center":
+                    classes += " fs-col-bottom-center";
                     break;
-                default:
-                    style["height"] = height.value;
-                    style["flex-shrink"] = "0";
+                case "bottom-right":
+                    classes += " fs-col-bottom-right";
                     break;
             }
-            return style;
+            return classes;
         });
 
         return {
-            style
+            style,
+            classes
         };
     }
 });

package/components/FSFadeOut.vue

@@ -6,9 +6,9 @@
         @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>
@@ -19,8 +19,13 @@ import { defineComponent, PropType, 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,

package/components/FSNumberField.vue

@@ -0,0 +1,65 @@
+<template>
+    <FSTextField
+        type="number"
+        :label="$props.label"
+        :description="$props.description"
+        :color="$props.color"
+        :required="$props.required"
+        :editable="$props.editable"
+        :value="$props.value?.toString()"
+        @update:value="(value) => $emit('update:value', isNaN(parseFloat(value)) ? 0 : parseFloat(value))"
+        v-bind="$attrs"
+    >
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </FSTextField>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSTextField from "./FSTextField.vue";
+
+export default defineComponent({
+    name: "FSNumberField",
+    components: {
+        FSTextField
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: Number,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"]
+});
+</script>

package/components/FSPasswordField.vue

@@ -0,0 +1,108 @@
+<template>
+    <FSTextField
+        :label="$props.label"
+        :description="$props.description"
+        :type="type"
+        :color="$props.color"
+        :required="$props.required"
+        :editable="$props.editable"
+        :value="$props.value"
+        @update:value="(value) => $emit('update:value', value)"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <FSIcon
+                class="fs-password-field-icon"
+                size="m"
+                :style="style"
+                @click="onToggle"
+            >
+                {{ icon }}
+            </FSIcon>
+        </template>
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </FSTextField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, toRefs } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSTextField from "./FSTextField.vue";
+import FSIcon from "./FSIcon.vue";
+
+export default defineComponent({
+    name: "FSPasswordField",
+    components: {
+        FSTextField,
+        FSIcon
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: String,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props) {
+        const { editable } = toRefs(props);
+
+        const stars = ref(true);
+
+        const type = computed(() => stars.value ? "password" : "text");
+
+        const icon = computed(() => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
+
+        const dark = useColors().getVariants(ColorBase.Dark);
+
+        const style = computed(() => ({
+            "--fs-password-field-cursor"   : editable.value ? "pointer" : "default",
+            "--fs-password-field-base-text": editable.value ? dark.base : dark.light
+        }));
+
+        const onToggle = () => {
+            if (!editable.value) {
+                return;
+            }
+            stars.value = !stars.value;
+        };
+
+        return {
+            type,
+            icon,
+            style,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSRadio.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-radio"
                 size="checkbox"
@@ -9,24 +9,28 @@
             >
                 {{ icon }}
             </FSIcon>
+            <slot name="default">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-radio-label"
+                    :style="style"
+                    :font="font"
+                    @click="onToggle"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+            </slot>
+        </FSRow>
+        <slot name="description">
             <FSSpan
-                v-if="$props.label"
-                class="fs-radio-label"
+                v-if="$props.description"
+                class="fs-radio-description"
+                font="text-underline"
                 :style="style"
-                :font="font"
-                @click="onToggle"
             >
-                {{ $props.label }}
+                {{ $props.description }}
             </FSSpan>
-        </FSRow>
-        <FSSpan
-            v-if="$props.description"
-            class="fs-radio-description"
-            font="text-overline"
-            :style="style"
-        >
-            {{ $props.description }}
-        </FSSpan>
+        </slot>
     </FSCol>
 </template>
 
@@ -85,7 +89,7 @@ export default defineComponent({
         const { value, selected, color, editable } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = computed(() => ({
             "--fs-radio-cursor": (editable.value && !selected.value) ? "pointer" : "default",

package/components/FSRadioGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <FSCol width="hug" height="hug">
+    <FSCol width="hug">
         <FSRadio
             v-for="item in $props.values"
             :key="item.value"