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

package/components/FSSwitch.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">
             <v-switch
                 class="fs-switch"
                 hide-details
@@ -11,24 +11,28 @@
                 @update:modelValue="onToggle"
                 v-bind="$attrs"
             />
+            <slot name="default">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-switch-label"
+                    :style="style"
+                    :font="font"
+                    @click="onToggle"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+            </slot>
+        </FSRow>
+        <slot name="description">
             <FSSpan
-                v-if="$props.label"
-                class="fs-switch-label"
+                v-if="$props.description"
+                class="fs-switch-description"
+                font="text-underline"
                 :style="style"
-                :font="font"
-                @click="onToggle"
             >
-                {{ $props.label }}
+                {{ $props.description }}
             </FSSpan>
-        </FSRow>
-        <FSSpan
-            v-if="$props.description"
-            class="fs-switch-description"
-            font="text-overline"
-            :style="style"
-        >
-            {{ $props.description }}
-        </FSSpan>
+        </slot>
     </FSCol>
 </template>
 
@@ -80,21 +84,34 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const background = useColors().getBackground();
-        const dark = useColors().getDark();
+        const colors = useColors().getColors(color.value);
+
+        const backgrounds = useColors().getColors(ColorBase.Background);
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        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 style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-switch-translate-x": value.value ? "8px" : "-8px",
+                    "--fs-switch-cursor": "default",
+                    "--fs-switch-track-color": lights.dark,
+                    "--fs-switch-thumb-color": backgrounds.base,
+                    "--fs-switch-color": lights.dark
+                };
+            }
+            return {
+                "--fs-switch-translate-x": value.value ? "8px" : "-8px",
+                "--fs-switch-cursor": "pointer",
+                "--fs-switch-track-color": value.value ? colors.base : darks.base,
+                "--fs-switch-thumb-color": backgrounds.base,
+                "--fs-switch-color": darks.base
+            };
+        });
 
-        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/FSTab.vue

@@ -2,39 +2,58 @@
     <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 align="center-left">
+                <slot name="prepend">
+                    <FSIcon v-if="$props.prependIcon" size="m">
+                        {{ $props.prependIcon }}
+                    </FSIcon>
+                </slot>
+                <slot name="default">
+                    <FSSpan v-if="$props.label" font="text-button">
+                        {{ $props.label }}
+                    </FSSpan>
+                </slot>
+                <v-spacer v-if="$props.tag" />
+                <slot name="tag">
+                    <FSSpan v-if="$props.tag" class="fs-tab-tag">
+                        {{ $props.tag }}
+                    </FSSpan>
+                </slot>
+                <slot name="append">
+                    <FSIcon v-if="$props.appendIcon" size="m">
+                        {{ $props.appendIcon }}
+                    </FSIcon>
+                </slot>
             </FSRow>
         </slot>
     </v-tab>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, toRefs } from "vue";
+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 default defineComponent({
     name: "FSTab",
     components: {
         FSSpan,
+        FSIcon,
         FSRow
     },
     props: {
+        prependIcon: {
+            type: String,
+            required: false,
+            default: null
+        },
         label: {
             type: String,
             required: false,
@@ -45,21 +64,16 @@ export default defineComponent({
             required: false,
             default: null
         },
+        appendIcon: {
+            type: String,
+            required: false,
+            default: null
+        },
         color: {
             type: String as PropType<ColorBase>,
             required: false,
-            default: ColorBase.Primary
+            default: ColorBase.Dark
         }
-    },
-    setup(props) {
-        const { label, color } = toRefs(props);
-
-        const colors = useColors().getVariants(color.value);
-
-        return {
-            label,
-            sliderColor: colors.base
-        };
     }
 });
 </script>

package/components/FSTabs.vue

@@ -6,15 +6,18 @@
         grow
         :style="style"
         :modelValue="tab"
+        :slider-color="colors.base"
         @update:modelValue="(v) => emit('update:tab', v)"
         v-bind="$attrs"
     >
-        <slot v-bind="{ color }" />
+        <template v-for="(component, index) in $slots.default()" :key="index">
+            <component :is="component" v-bind="{ color, colors, style }" />
+        </template>
     </v-tabs>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, 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";
@@ -37,21 +40,27 @@ export default defineComponent({
     setup(props, { emit }) {
         const { tab, color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const textColors = useColors().getContrasts(color.value);
+        const colors = useColors().getColors(color.value);
 
-        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
-        };
+        const darks = useColors().getColors(ColorBase.Dark);
+
+        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+            "--fs-group-color": darks.base,
+            "--fs-group-hover-background-color": colors.light,
+            "--fs-group-hover-color": darks.dark,
+            "--fs-group-disabled-color": darks.light,
+            "--fs-group-light": colors.light,
+            "--fs-group-base": colors.base,
+            "--fs-group-dark": colors.dark,
+            "--fs-tab-tag-background-color": colors.base,
+            "--fs-tab-tag-color": textColors.light
+        });
 
         return {
             tab,
             color,
+            colors,
             style,
             emit
         };

package/components/FSTag.vue

@@ -2,22 +2,27 @@
     <FSRow
         class="fs-tag"
         width="hug"
+        align="center-left"
         :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>
+        <slot name="default" v-bind="{ color, colors }">
+            <FSSpan class="fs-tag-label">
+                {{ $props.label }}
+            </FSSpan>
+        </slot>
+        <slot name="button" v-bind="{ color, colors }">
+            <v-btn
+                v-if="$props.editable"
+                class="fs-tag-button"
+                :ripple="false"
+                @click="$emit('remove')"
+            >
+                <FSIcon size="s">
+                    mdi-close
+                </FSIcon>
+            </v-btn>
+        </slot>
     </FSRow>
 </template>
 
@@ -43,10 +48,10 @@ export default defineComponent({
             type: String,
             required: true
         },
-        full: {
-            type: Boolean,
+        variant: {
+            type: String as PropType<"standard" | "full">,
             required: false,
-            default: true
+            default: "full"
         },
         color: {
             type: String as PropType<ColorBase>,
@@ -60,25 +65,37 @@ export default defineComponent({
         }
     },
     emits: ["remove"],
-    setup(props, { emit }) {
-        const { label, full, color, editable } = toRefs(props);
+    setup(props) {
+        const { variant, color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
+        const textColors = useColors().getContrasts(color.value);
+        const colors = useColors().getColors(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
-        }));
+        const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+            switch (variant.value) {
+                case "standard": return {
+                    "--fs-tag-background-color": colors.light,
+                    "--fs-tag-color": textColors.base,
+                    "--fs-tag-hover-background-color": colors.base,
+                    "--fs-tag-hover-color": textColors.light,
+                    "--fs-tag-active-background-color": colors.dark,
+                    "--fs-tag-active-color": textColors.light
+                };
+                case "full": return {
+                    "--fs-tag-background-color": colors.base,
+                    "--fs-tag-color": textColors.light,
+                    "--fs-tag-hover-background-color": colors.base,
+                    "--fs-tag-hover-color": textColors.light,
+                    "--fs-tag-active-background-color": colors.dark,
+                    "--fs-tag-active-color": textColors.light
+                };
+            }
+        });
 
         return {
-            label,
-            editable,
-            style,
-            emit
+            colors,
+            color,
+            style
         };
     }
 });

package/components/FSTagField.vue

@@ -0,0 +1,152 @@
+<template>
+    <FSCol>
+        <FSTextField
+            :label="$props.label"
+            :description="$props.description"
+            :type="type"
+            :color="$props.color"
+            :required="$props.required"
+            :editable="$props.editable"
+            :value="innerValue"
+            @update:value="(value) => innerValue = value"
+            @keydown.enter="onAdd"
+            v-bind="$attrs"
+        >
+            <template #append-inner>
+                <FSIcon
+                    class="fs-tag-field-icon"
+                    size="m"
+                    :style="style"
+                    @click="onAdd"
+                >
+                    mdi-tag-outline
+                </FSIcon>
+            </template>
+            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+                <slot :name="name" v-bind="slotData" />
+            </template>
+        </FSTextField>
+        <FSTagGroup
+            :tags="$props.value"
+            :variant="$props.variant"
+            :color="$props.tagColor"
+            :editable="$props.editable"
+            @remove="onRemove"
+        />
+    </FSCol>
+</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 FSTagGroup from "./FSTagGroup.vue";
+import FSCol from "./FSCol.vue"
+
+export default defineComponent({
+    name: "FSTagField",
+    components: {
+        FSTextField,
+        FSTagGroup,
+        FSCol
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: Array as PropType<string[]>,
+            required: false,
+            default: () => []
+        },
+        variant: {
+            type: String as PropType<"standard" | "full">,
+            required: false,
+            default: "full"
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        tagColor: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props, { emit }) {
+        const { value, editable } = toRefs(props);
+
+        const innerValue = ref("");
+
+        const darks = useColors().getColors(ColorBase.Dark);
+
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-tag-field-cursor"   : "default",
+                    "--fs-tag-field-base-text": darks.light,
+                    "--fs-tag-field-dark-text": darks.light
+                };
+            }
+            return {
+                "--fs-tag-field-cursor"   : "pointer",
+                "--fs-tag-field-base-text": darks.base,
+                "--fs-tag-field-dark-text": darks.dark
+            };
+        });
+
+        const onAdd = (): void => {
+            if (!editable.value) {
+                return;
+            }
+            const tags = value.value ?? [];
+            if (!innerValue.value.length || tags.includes(innerValue.value)) {
+                return;
+            }
+            emit("update:value", tags.concat(innerValue.value));
+            innerValue.value = "";
+        }
+
+        const onRemove = (label: string): void => {
+            if (!editable.value) {
+                return;
+            }
+            const tags = value.value ?? [];
+            if (!tags.length || !tags.includes(label)) {
+                return;
+            }
+            emit("update:value", tags.filter(t => t !== label));
+        }
+
+        return {
+            innerValue,
+            style,
+            onAdd,
+            onRemove
+        };
+    }
+});
+</script>

package/components/FSTagGroup.vue

@@ -0,0 +1,60 @@
+<template>
+    <FSWrapGroup v-bind="$attrs">
+        <FSTag
+            v-for="(tag, index) in $props.tags"
+            :key="index"
+            :label="tag"
+            :variant="$props.variant"
+            :color="$props.color"
+            :editable="$props.editable"
+            @remove="() => $emit('remove', tag)"
+        />
+        <slot name="default" />
+    </FSWrapGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSWrapGroup from "./FSWrapGroup.vue";
+import FSTag from "./FSTag.vue";
+
+export interface FSTagItem {
+    label: string,
+    variant: "standard" | "full",
+    color: ColorBase,
+    editable: boolean
+}
+
+export default defineComponent({
+    name: "FSTagGroup",
+    components: {
+        FSWrapGroup,
+        FSTag
+    },
+    props: {
+        tags: {
+            type: Array as PropType<Array<String>>,
+            required: false,
+            default: () => []
+        },
+        variant: {
+            type: String as PropType<"standard" | "full">,
+            required: false,
+            default: "full"
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Primary
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    }
+});
+</script>

package/components/FSText.vue

@@ -0,0 +1,78 @@
+<template>
+    <span
+        :class="classes"
+        :style="style"
+        v-bind="$attrs"
+    >
+        <slot />
+    </span>
+</template>
+
+<script lang="ts">
+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";
+
+export default defineComponent({
+    name: "FSText",
+    props: {
+        font: {
+            type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+            required: false,
+            default: "text-body"
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        variant: {
+            type: String as PropType<"base" | "light" | "dark">,
+            required: false,
+            default: "dark"
+        },
+        ellipsis: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    setup(props) {
+        const { color, font, variant } = toRefs(props);
+
+        const colors = useColors().getColors(color.value);
+        const slots = useSlots();
+
+        const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+            switch (variant.value) {
+                case "base": return {
+                    "--fs-text-color": colors.base
+                };
+                case "light": return {
+                    "--fs-text-color": colors.light
+                };
+                case "dark": return {
+                    "--fs-text-color": colors.dark
+                };
+            }
+        });
+
+        const classes = computed((): string[] => {
+            const classes = ["fs-text", font.value];
+            if (props.ellipsis) {
+                classes.push("fs-span-ellipsis");
+            }
+            if (!slots.default) {
+                classes.push("fs-span-pre-wrap");
+            }
+            return classes;
+        });
+
+        return {
+            classes,
+            style
+        };
+    }
+});
+</script>