@dative-gpi/foundation-shared-components 0.0.2

package/components/FSSlideGroup.vue

@@ -0,0 +1,57 @@
+<template>
+    <v-slide-group
+        class="fs-slide-group"
+        show-arrows
+        :style="style"
+        v-bind="$attrs"
+    >
+        <FSRow height="hug">
+            <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
+                <component :is="component" v-bind="{ color }" />
+            </v-slide-group-item>
+        </FSRow>
+    </v-slide-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, 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: "FSSlideGroup",
+    components: {
+        FSRow
+    },
+    props: {
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        }
+    },
+    setup(props) {
+        const { color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getDark();
+
+        const style = {
+            "--fs-group-light-color"  : colors.light,
+            "--fs-group-base-color"   : colors.base,
+            "--fs-group-dark-color"   : colors.dark,
+            "--fs-group-light-text"   : dark.base,
+            "--fs-group-base-text"    : dark.base,
+            "--fs-group-dark-text"    : dark.dark
+        };
+
+        return {
+            color,
+            style
+        };
+    }
+});
+</script>

package/components/FSSpan.vue

@@ -0,0 +1,24 @@
+<template>
+    <span
+        class="fs-span"
+        :class="$props.font"
+        v-bind="$attrs"
+    >
+        <slot />
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+    name: "FSSpan",
+    props: {
+        font: {
+            type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
+            required: false,
+            default: "text-body"
+        }
+    }
+});
+</script>

package/components/FSSwitch.vue

@@ -0,0 +1,112 @@
+<template>
+    <FSCol width="hug" height="hug">
+        <FSRow width="hug" height="hug">
+            <v-switch
+                class="fs-switch"
+                hide-details
+                inset
+                :style="style"
+                :ripple="false"
+                :modelValue="$props.value"
+                @update:modelValue="onToggle"
+                v-bind="$attrs"
+            />
+            <FSSpan
+                v-if="$props.label"
+                class="fs-switch-label"
+                :style="style"
+                :font="font"
+                @click="onToggle"
+            >
+                {{ $props.label }}
+            </FSSpan>
+        </FSRow>
+        <FSSpan
+            v-if="$props.description"
+            class="fs-switch-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 FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+    name: "FSSwitch",
+    components: {
+        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 background = useColors().getBackground();
+        const dark = useColors().getDark();
+
+        const style = computed(() => ({
+            "--fs-switch-cursor"         : editable.value ? "pointer" : "default",
+            "--fs-switch-translate-x"    : value.value ? "8px" : "-8px",
+            "--fs-switch-base-color"     : value.value ? colors.base : editable.value ? dark.base : dark.light,
+            "--fs-switch-base-text"      : editable.value ? dark.base : dark.light,
+            "--fs-switch-base-background": background.base
+        }));
+
+        const font = computed(() => value.value ? "text-button" : "text-body");
+
+        const onToggle = () => {
+            if (!editable.value) {
+                return;
+            }
+            emit("update:value", !value.value);
+        }
+
+        return {
+            editable,
+            style,
+            font,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSTab.vue

@@ -0,0 +1,65 @@
+<template>
+    <v-tab
+        class="fs-tab"
+        :ripple="false"
+        :slider-color="sliderColor"
+        v-bind="$attrs"
+    >
+        <slot>
+            <FSRow>
+                <FSSpan v-if="label" class="fs-tab-label" font="text-button">
+                    {{ label }}
+                </FSSpan>
+                <v-spacer />
+                <FSSpan v-if="tag" class="fs-tab-tag">
+                    {{ tag }}
+                </FSSpan>
+            </FSRow>
+        </slot>
+    </v-tab>
+</template>
+
+<script lang="ts">
+import { 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 FSRow from "./FSRow.vue";
+
+export default defineComponent({
+    name: "FSTab",
+    components: {
+        FSSpan,
+        FSRow
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        tag: {
+            type: String,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        }
+    },
+    setup(props) {
+        const { label, color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+
+        return {
+            label,
+            sliderColor: colors.base
+        };
+    }
+});
+</script>

package/components/FSTabs.vue

@@ -0,0 +1,60 @@
+<template>
+    <v-tabs
+        class="fs-tabs"
+        selected-class="fs-tab-active"
+        show-arrows
+        grow
+        :style="style"
+        :modelValue="tab"
+        @update:modelValue="(v) => emit('update:tab', v)"
+        v-bind="$attrs"
+    >
+        <slot v-bind="{ color }" />
+    </v-tabs>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, 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: "FSTabs",
+    props: {
+        tab: {
+            type: Number,
+            required: false,
+            default: 0
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        }
+    },
+    emits: ["update:tab"],
+    setup(props, { emit }) {
+        const { tab, color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getDark();
+
+        const style = {
+            "--fs-group-light-color"  : colors.light,
+            "--fs-group-base-color"   : colors.base,
+            "--fs-group-dark-color"   : colors.dark,
+            "--fs-group-light-text"   : dark.base,
+            "--fs-group-base-text"    : dark.base,
+            "--fs-group-dark-text"    : dark.dark
+        };
+
+        return {
+            tab,
+            color,
+            style,
+            emit
+        };
+    }
+});
+</script>

package/components/FSTag.vue

@@ -0,0 +1,85 @@
+<template>
+    <FSRow
+        class="fs-tag"
+        width="hug"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <FSSpan>
+            {{ label }}
+        </FSSpan>
+        <v-btn
+            v-if="editable"
+            class="fs-tag-button"
+            :ripple="false"
+            @click="emit('remove')"
+        >
+            <FSIcon size="s">
+                mdi-close
+            </FSIcon>
+        </v-btn>
+    </FSRow>
+</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";
+
+export default defineComponent({
+    name: "FSTag",
+    components: {
+        FSIcon,
+        FSSpan,
+        FSRow
+    },
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        full: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["remove"],
+    setup(props, { emit }) {
+        const { label, full, color, editable } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+
+        const style = computed(() => ({
+            "--fs-tag-light-color": full.value ? colors.base : colors.light,
+            "--fs-tag-base-color" : colors.base,
+            "--fs-tag-dark-color" : colors.dark,
+            "--fs-tag-light-text" : full.value ? colors.light : colors.base,
+            "--fs-tag-base-text"  : colors.light,
+            "--fs-tag-dark-text"  : colors.light
+        }));
+
+        return {
+            label,
+            editable,
+            style,
+            emit
+        };
+    }
+});
+</script>

package/components/FSTextField.vue

@@ -0,0 +1,60 @@
+<template>
+    <v-text-field
+        class="fs-text-field"
+        variant="outlined"
+        hide-details
+        v-bind="$attrs"
+    >
+    </v-text-field>
+</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 FSRow from "./FSRow.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+    name: "FSTextField",
+    components: {
+        FSSpan,
+        FSRow,
+        FSCol
+    },
+    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: null
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    setup(props, { emit }) {
+        return {
+        };
+    }
+});
+</script>

package/components/FSWindow.vue

@@ -0,0 +1,26 @@
+<template>
+    <v-window
+        class="fs-window"
+        :modelValue="$props.tab"
+        v-bind="$attrs"
+    >
+        <v-window-item v-for="(component, index) in $slots.default()" :key="index">
+            <component :is="component" />
+        </v-window-item>
+    </v-window>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "FSWindow",
+    props: {
+        tab: {
+            type: Number,
+            required: false,
+            default: 0
+        }
+    }
+});
+</script>

package/components/FSWrapGroup.vue

@@ -0,0 +1,56 @@
+<template>
+    <v-slide-group
+        class="fs-wrap-group"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <FSRow height="hug">
+            <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
+                <component :is="component" v-bind="{ color }" />
+            </v-slide-group-item>
+        </FSRow>
+    </v-slide-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, 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: "FSWrapGroup",
+    components: {
+        FSRow
+    },
+    props: {
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        }
+    },
+    setup(props) {
+        const { color } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getDark();
+
+        const style = {
+            "--fs-group-light-color"  : colors.light,
+            "--fs-group-base-color"   : colors.base,
+            "--fs-group-dark-color"   : colors.dark,
+            "--fs-group-light-text"   : dark.base,
+            "--fs-group-base-text"    : dark.base,
+            "--fs-group-dark-text"    : dark.dark
+        };
+
+        return {
+            color,
+            style
+        };
+    }
+});
+</script>

package/composables/index.ts

@@ -0,0 +1,2 @@
+export * from "./useColors";
+export * from "./useTouch";

package/composables/useColors.ts

@@ -0,0 +1,64 @@
+import { useTheme } from "vuetify";
+
+import Color from "color";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+export const useColors = () => {
+    const theme = useTheme().current.value;
+
+    const lighten = (color: Color): Color => color.saturationv(10).value(100);
+
+    const darken = (color: Color): Color => color.value(Math.max(color.value() - 30, 0));
+
+    const getBackground = () => {
+        const base = new Color(theme.colors[ColorBase.Background]);
+
+        return {
+            base: base.hex()
+        };
+    }
+
+    const getLight = () => {
+        const base = new Color(theme.colors[ColorBase.Light]);
+        const light = base.value(Math.max(base.value() - 20, 0));
+        const dark = darken(base);
+
+        return {
+            light: light.hex(),
+            base: base.hex(),
+            dark: dark.hex()
+        };
+    };
+
+    const getDark = () => {
+        const base = new Color(theme.colors[ColorBase.Dark]);
+        const light = base.saturationv(Math.max(base.saturationv() - 80, 0)).value(Math.min(base.value() + 40, 100));
+        const dark = darken(base);
+
+        return {
+            light: light.hex(),
+            base: base.hex(),
+            dark: dark.hex()
+        };
+    };
+
+    const getVariants = (color: ColorBase) => {
+        const base = new Color(theme.colors[color]);
+        const light = lighten(base);
+        const dark = darken(base);
+
+        return {
+            light: light.hex(),
+            base: base.hex(),
+            dark: dark.hex()
+        };
+    };
+
+    return {
+        getBackground,
+        getLight,
+        getDark,
+        getVariants
+    };
+}

package/composables/useTouch.ts

@@ -0,0 +1,9 @@
+export const useTouch = () => {
+    const isEnabled = (): boolean => {
+        return navigator.maxTouchPoints > 0;
+    };
+
+    return {
+        isEnabled
+    };
+}

package/defaults/FSButtons.ts

@@ -0,0 +1,63 @@
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+
+export const FSButtonsAliases = {
+    FSButtonSearch: FSButton,
+    FSButtonSearchMini: FSButton,
+    FSButtonRemove: FSButton,
+    FSButtonRemoveMini: FSButton,
+    FSButtonSave: FSButton,
+    FSButtonSaveMini: FSButton
+}
+
+export const FSButtonsProps = {
+    FSButtonSearch: {
+        icon: "mdi-magnify",
+        label: "Search",
+        full: false,
+        color: ColorBase.Primary
+    },
+    FSButtonSearchMini: {
+        icon: "mdi-magnify",
+        label: undefined,
+        full: false,
+        color: ColorBase.Primary
+    },
+    FSButtonRemove: {
+        icon: "mdi-delete-outline",
+        label: "Remove",
+        full: false,
+        color: ColorBase.Error
+    },
+    FSButtonRemoveMini: {
+        icon: "mdi-delete-outline",
+        label: undefined,
+        full: false,
+        color: ColorBase.Error
+    },
+    FSButtonSave: {
+        icon: "mdi-content-save-outline",
+        label: "Save",
+        full: false,
+        color: ColorBase.Success
+    },
+    FSButtonSaveMini: {
+        icon: "mdi-content-save-outline",
+        label: undefined,
+        full: false,
+        color: ColorBase.Success
+    },
+    FSButtonCancel: {
+        icon: "mdi-cancel",
+        label: "Cancel",
+        full: false,
+        color: ColorBase.Light
+    },
+    FSButtonCancelMini: {
+        icon: "mdi-cancel",
+        label: undefined,
+        full: false,
+        color: ColorBase.Light
+    }
+}