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

package/components/FSRow.vue

@@ -50,57 +50,57 @@ export default defineComponent({
             "--fs-row-height": height.value
         }));
 
-        const classes = computed((): string => {
-            let classes = "fs-row";
+        const classes = computed((): string[] => {
+            const classes = ["fs-row"];
             switch (width.value) {
                 case "hug":
-                    classes += " fs-row-width-hug";
+                    classes.push("fs-row-width-hug");
                     break;
                 case "fill":
-                    classes += " fs-row-width-fill";
+                    classes.push("fs-row-width-fill");
                     break;
                 default: 
-                    classes += " fs-row-width-fixed";
+                    classes.push("fs-row-width-fixed");
                     break;
             }
             switch (height.value) {
                 case "hug":
-                    classes += " fs-row-height-hug";
+                    classes.push("fs-row-height-hug");
                     break;
                 case "fill":
-                    classes += " fs-row-height-fill";
+                    classes.push("fs-row-height-fill");
                     break;
                 default: 
-                    classes += " fs-row-height-fixed";
+                    classes.push("fs-row-height-fixed");
                     break;
             }
             switch (align.value) {
                 case "top-left":
-                    classes += " fs-row-top-left";
+                    classes.push("fs-row-top-left");
                     break;
                 case "top-center":
-                    classes += " fs-row-top-center";
+                    classes.push("fs-row-top-center");
                     break;
                 case "top-right":
-                    classes += " fs-row-top-right";
+                    classes.push("fs-row-top-right");
                     break;
                 case "center-left":
-                    classes += " fs-row-center-left";
+                    classes.push("fs-row-center-left");
                     break;
                 case "center-center":
-                    classes += " fs-row-center-center";
+                    classes.push("fs-row-center-center");
                     break;
                 case "center-right":
-                    classes += " fs-row-center-right";
+                    classes.push("fs-row-center-right");
                     break;
                 case "bottom-left":
-                    classes += " fs-row-bottom-left";
+                    classes.push("fs-row-bottom-left");
                     break;
                 case "bottom-center":
-                    classes += " fs-row-bottom-center";
+                    classes.push("fs-row-bottom-center");
                     break;
                 case "bottom-right":
-                    classes += " fs-row-bottom-right";
+                    classes.push("fs-row-bottom-right");
                     break;
             }
             return classes;

package/components/FSSearchField.vue

@@ -0,0 +1,122 @@
+<template>
+    <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"
+        v-bind="$attrs"
+    >
+        <template #append>
+            <FSButton
+                :prependIcon="$props.buttonPrependIcon"
+                :label="$props.buttonLabel"
+                :appendIcon="$props.buttonAppendIcon"
+                :variant="$props.buttonVariant"
+                :color="$props.buttonColor"
+                :editable="$props.editable"
+                @click="onUpdate"
+            />
+        </template>
+        <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, Ref, ref, toRefs } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSTextField from "./FSTextField.vue";
+import FSButton from "./FSButton.vue";
+import FSIcon from "./FSIcon.vue";
+
+export default defineComponent({
+    name: "FSSearchField",
+    components: {
+        FSTextField,
+        FSButton,
+        FSIcon
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        buttonPrependIcon: {
+            type: String,
+            required: false,
+            default: "mdi-magnify"
+        },
+        buttonLabel: {
+            type: String,
+            required: false,
+            default: null
+        },
+        buttonAppendIcon: {
+            type: String,
+            required: false,
+            default: null
+        },
+        buttonVariant: {
+            type: String as PropType<"standard" | "full" | "icon">,
+            required: false,
+            default: "standard"
+        },
+        value: {
+            type: String,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        buttonColor: {
+            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 { editable } = toRefs(props);
+
+        const innerValue: Ref<String> = ref(props.value);
+
+        const onUpdate = (): void => {
+            if (!editable.value) {
+                return;
+            }
+            emit("update:value", innerValue.value);
+        };
+
+        return {
+            innerValue,
+            onUpdate
+        };
+    }
+});
+</script>

package/components/FSSlideGroup.vue

@@ -7,14 +7,14 @@
     >
         <FSRow>
             <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
-                <component :is="component" v-bind="{ color }" />
+                <component :is="component" v-bind="{ color, colors, style }" />
             </v-slide-group-item>
         </FSRow>
     </v-slide-group>
 </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";
@@ -36,20 +36,24 @@ export default defineComponent({
     setup(props) {
         const { color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        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
+        });
 
         return {
             color,
+            colors,
             style
         };
     }

package/components/FSSpan.vue

@@ -1,6 +1,6 @@
 <template>
     <span
-        :class="'fs-span ' + $props.font"
+        :class="classes"
         v-bind="$attrs"
     >
         <slot />
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, toRefs, useSlots } from "vue";
 
 export default defineComponent({
     name: "FSSpan",
@@ -17,7 +17,32 @@ export default defineComponent({
             type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
             required: false,
             default: "text-body"
+        },
+        ellipsis: {
+            type: Boolean,
+            required: false,
+            default: true
         }
+    },
+    setup(props) {
+        const { font } = toRefs(props);
+        
+        const slots = useSlots();
+
+        const classes = computed((): string[] => {
+            const classes = ["fs-span", font.value];
+            if (props.ellipsis) {
+                classes.push("fs-span-ellipsis");
+            }
+            if (!slots.default) {
+                classes.push("fs-span-pre-wrap");
+            }
+            return classes;
+        });
+
+        return {
+            classes
+        };
     }
 });
 </script>

package/components/FSSwitch.vue

@@ -84,21 +84,34 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, color, editable } = toRefs(props);
 
-        const background = useColors().getBackground();
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        const colors = useColors().getColors(color.value);
 
-        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 backgrounds = useColors().getColors(ColorBase.Background);
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        const font = computed(() => value.value ? "text-button" : "text-body");
+        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((): string => value.value ? "text-button" : "text-body");
 
-        const onToggle = () => {
+        const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }

package/components/FSTab.vue

@@ -16,7 +16,7 @@
                         {{ $props.label }}
                     </FSSpan>
                 </slot>
-                <v-spacer />
+                <v-spacer v-if="$props.tag" />
                 <slot name="tag">
                     <FSSpan v-if="$props.tag" class="fs-tab-tag">
                         {{ $props.tag }}
@@ -33,7 +33,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -66,6 +68,11 @@ export default defineComponent({
             type: String,
             required: false,
             default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
         }
     }
 });

package/components/FSTabs.vue

@@ -11,13 +11,13 @@
         v-bind="$attrs"
     >
         <template v-for="(component, index) in $slots.default()" :key="index">
-            <component :is="component" />
+            <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";
@@ -40,18 +40,26 @@ export default defineComponent({
     setup(props, { emit }) {
         const { tab, color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        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-light-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

@@ -6,14 +6,14 @@
         :style="style"
         v-bind="$attrs"
     >
-        <slot name="default">
+        <slot name="default" v-bind="{ color, colors }">
             <FSSpan class="fs-tag-label">
                 {{ $props.label }}
             </FSSpan>
         </slot>
-        <slot name="button">
+        <slot name="button" v-bind="{ color, colors }">
             <v-btn
-                v-if="editable"
+                v-if="$props.editable"
                 class="fs-tag-button"
                 :ripple="false"
                 @click="$emit('remove')"
@@ -48,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>,
@@ -66,21 +66,35 @@ export default defineComponent({
     },
     emits: ["remove"],
     setup(props) {
-        const { full, color, editable } = toRefs(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 {
-            editable,
+            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>