@dative-gpi/foundation-shared-components 0.0.2

package/components/FSBreadcrumbs.vue

@@ -0,0 +1,64 @@
+<template>
+    <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
+        <template #title="{ item }">
+            <FSSpan :class="getClass(item)">
+                {{ item.title }}
+            </FSSpan>
+        </template>
+    </v-breadcrumbs>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+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
+    exact: boolean | undefined,
+    title: string,
+    disabled: boolean
+}
+
+export default defineComponent({
+    name: "FSBreadcrumbs",
+    components: {
+        FSSpan,
+        FSIcon,
+        FSRow
+    },
+    props: {
+        items: {
+            type: Array as PropType<Array<FSBreadcrumbItem>>,
+            required: true,
+        }
+    },
+    setup() {
+        const dark = useColors().getDark();
+
+        const style = {
+            "--fs-breadcrumbs-light-text": dark.light,
+            "--fs-breadcrumbs-base-text" : dark.base,
+            "--fs-breadcrumbs-dark-text" : dark.dark
+        };
+
+        const getClass = (item: FSBreadcrumbItem): string => {
+            if (item.disabled) {
+                return "fs-breadcrumbs-label--disabled";
+            }
+            return "fs-breadcrumbs-label";
+        };
+
+        return {
+            style,
+            getClass
+        };
+    }
+})
+</script>

package/components/FSButton.vue

@@ -0,0 +1,82 @@
+<template>
+    <v-btn
+        class="fs-button"
+        :ripple="false"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <slot>
+            <FSRow width="hug">
+                <FSIcon v-if="icon" size="m">
+                    {{ icon }}
+                </FSIcon>
+                <FSSpan v-if="label" font="text-button">
+                    {{ label }}
+                </FSSpan>
+            </FSRow>
+        </slot>
+    </v-btn>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } 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 default defineComponent({
+    name: "FSButton",
+    components: {
+        FSSpan,
+        FSIcon,
+        FSRow
+    },
+    props: {
+        icon: {
+            type: String,
+            required: false,
+            default: null
+        },
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        full: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        }
+    },
+    setup(props) {
+        const { label, full, color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+
+        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
+        }));
+
+        return {
+            icon: props.icon,
+            label,
+            style
+        };
+    }
+});
+</script>

package/components/FSCheckbox.vue

@@ -0,0 +1,111 @@
+<template>
+    <FSCol width="hug" height="hug">
+        <FSRow width="hug" height="hug">
+            <FSIcon
+                class="fs-checkbox"
+                size="checkbox"
+                :style="style"
+                @click="onToggle"
+            >
+                {{ icon }}
+            </FSIcon>
+            <FSSpan
+                v-if="$props.label"
+                class="fs-checkbox-label"
+                :style="style"
+                :font="font"
+                @click="onToggle"
+            >
+                {{ $props.label }}
+            </FSSpan>
+        </FSRow>
+        <FSSpan
+            v-if="$props.description"
+            class="fs-checkbox-description"
+            font="text-overline"
+            :style="style"
+        >
+            {{ $props.description }}
+        </FSSpan>
+    </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+    name: "FSCheckbox",
+    components: {
+        FSIcon,
+        FSSpan,
+        FSRow,
+        FSCol
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props, { emit }) {
+        const { value, color, editable } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getDark();
+
+        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 icon = computed(() => value.value ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline");
+
+        const font = computed(() => value.value ? "text-button" : "text-body");
+
+        const onToggle = () => {
+            if (!editable.value) {
+                return;
+            }
+            emit("update:value", !value.value);
+        };
+
+        return {
+            style,
+            icon,
+            font,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSCol.vue

@@ -0,0 +1,69 @@
+<template>
+    <div
+        class="fs-col"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+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: "fill"
+        },
+        gap: {
+            type: Number,
+            required: false,
+            default: 8
+        }
+    },
+    setup(props) {
+        const { width, height, gap } = toRefs(props);
+
+        const style = computed(() => {
+            const style = {
+                "--fs-col-gap": `${gap.value}px`
+            };
+            switch (width.value) {
+                case "hug":
+                    break;
+                case "fill":
+                    style["align-self"] = "stretch";
+                    break;
+                default:
+                    style["width"] = width.value;
+                    break;
+            }
+            switch (height.value) {
+                case "hug":
+                    break;
+                case "fill":
+                    style["flex"] = "1 0 0";
+                    break;
+                default:
+                    style["height"] = height.value;
+                    style["flex-shrink"] = "0";
+                    break;
+            }
+            return style;
+        });
+
+        return {
+            style
+        };
+    }
+});
+</script>

package/components/FSFadeOut.vue

@@ -0,0 +1,67 @@
+<template>
+    <div
+        class="fs-fade-out"
+        :style="style"
+        fluid
+        @scroll="onScroll"
+    >
+        <div class="fs-fade-out-top" />
+        <div class="fs-fade-out-inner">
+            <slot />
+        </div>
+        <div class="fs-fade-out-bottom" />
+    </div>
+</template>
+
+<script lang="ts">
+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";
+
+export default defineComponent({
+    name: "FSFadeOut",
+    props: {
+        maskHeight: {
+            type: Number,
+            required: false,
+            default: 64
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Background
+        }
+    },
+    setup(props) {
+        const { maskHeight, color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+
+        const style = 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 }) => {
+            if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
+                style.value["--fs-fade-out-bottom-mask-height"] = "0px";
+            } else {
+                style.value["--fs-fade-out-bottom-mask-height"] = `${maskHeight.value}px`;
+            }
+            if (target.scrollTop === 0) {
+                style.value["--fs-fade-out-top-mask-height"] = "0px";
+            }
+            else {
+                style.value["--fs-fade-out-top-mask-height"] = `${maskHeight.value}px`;
+            }
+        }
+
+        return {
+            style,
+            onScroll
+        };
+    }
+});
+</script>

package/components/FSIcon.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-icon
+        :class="size"
+        v-bind="$attrs"
+    >
+        <slot />
+    </v-icon>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from "vue";
+
+export default defineComponent({
+    name: "FSIcon",
+    props: {
+        size: {
+            type: String as PropType<"s" | "m" | "checkbox">,
+            required: false,
+            default: "m"
+        }
+    },
+    setup(props) {
+        const { size } = toRefs(props);
+
+        return {
+            size: `fs-icon-${size.value}`
+        };
+    }
+});
+</script>

package/components/FSRadio.vue

@@ -0,0 +1,118 @@
+<template>
+    <FSCol width="hug" height="hug">
+        <FSRow width="hug" height="hug">
+            <FSIcon
+                class="fs-radio"
+                size="checkbox"
+                :style="style"
+                @click="onToggle"
+            >
+                {{ icon }}
+            </FSIcon>
+            <FSSpan
+                v-if="$props.label"
+                class="fs-radio-label"
+                :style="style"
+                :font="font"
+                @click="onToggle"
+            >
+                {{ $props.label }}
+            </FSSpan>
+        </FSRow>
+        <FSSpan
+            v-if="$props.description"
+            class="fs-radio-description"
+            font="text-overline"
+            :style="style"
+        >
+            {{ $props.description }}
+        </FSSpan>
+    </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+    name: "FSRadio",
+    components: {
+        FSIcon,
+        FSSpan,
+        FSRow,
+        FSCol
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: [String, Boolean, Number],
+            required: true
+        },
+        selected: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props, { emit }) {
+        const { value, selected, color, editable } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getDark();
+
+        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 icon = computed(() => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
+
+        const font = computed(() => selected.value ? "text-button" : "text-body");
+
+        const onToggle = () => {
+            if (!editable.value) {
+                return;
+            }
+            if (!selected.value) {
+                emit("update:value", value.value);
+            }
+        };
+
+        return {
+            style,
+            icon,
+            font,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSRadioGroup.vue

@@ -0,0 +1,75 @@
+<template>
+    <FSCol width="hug" height="hug">
+        <FSRadio
+            v-for="item in $props.values"
+            :key="item.value"
+            :label="item.label"
+            :description="item.description"
+            :value="item.value"
+            :selected="isSelected(item.value)"
+            :color="color"
+            :editable="editable"
+            @update:value="onToggle"
+        />
+    </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSRadio from "./FSRadio.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+    name: "FSRadioGroup",
+    components: {
+        FSRadio,
+        FSCol
+    },
+    props: {
+        values: {
+            type: Array as PropType<Array<{ value: String | Boolean | Number, label?: String, description?: string }>>,
+            required: true,
+            default: false
+        },
+        value: {
+            type: [String, Boolean, Number],
+            required: false,
+            default: 0
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props, { emit }) {
+        const { value, color, editable } = toRefs(props);
+
+        const isSelected = (item: String | Boolean | Number) => {
+            return item == value.value;
+        };
+
+        const onToggle = (item: String | Boolean | Number) => {
+            if (item != value.value) {
+                emit("update:value", item);
+            }
+        };
+
+        return {
+            color,
+            editable,
+            isSelected,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSRow.vue

@@ -0,0 +1,75 @@
+<template>
+    <div
+        class="fs-row"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRefs } from "vue";
+
+export default defineComponent({
+    name: "FSRow",
+    props: {
+        width: {
+            type: String as PropType<"hug" | "fill" | string>,
+            required: false,
+            default: "fill"
+        },
+        height: {
+            type: String as PropType<"hug" | "fill" | string>,
+            required: false,
+            default: "fill"
+        },
+        wrap: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+        gap: {
+            type: Number,
+            required: false,
+            default: 8
+        }
+    },
+    setup(props) {
+        const { width, height, wrap, gap } = toRefs(props);
+        
+        const style = computed(() => {
+            const style = {
+                "--fs-row-flex-wrap": wrap.value ? "wrap" : "nowrap",
+                "--fs-row-gap": `${gap.value}px`
+            };
+            switch (width.value) {
+                case "hug":
+                    break;
+                case "fill":
+                    style["flex"] = "1 0 0";
+                    break;
+                default:
+                    style["width"] = width.value;
+                    break;
+            }
+            switch (height.value) {
+                case "hug":
+                    break;
+                case "fill":
+                    style["align-self"] = "stretch";
+                    break;
+                default:
+                    style["height"] = height.value;
+                    style["flex-shrink"] = "0";
+                    break;
+            }
+            return style;
+        });
+
+        return {
+            style
+        };
+    }
+});
+</script>