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

package/components/FSRow.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="fs-row"
         :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"
         },
         wrap: {
             type: Boolean,
@@ -36,39 +41,74 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { width, height, wrap, gap } = toRefs(props);
+        const { width, height, align, wrap, gap } = toRefs(props);
         
-        const style = computed(() => {
-            const style = {
-                "--fs-row-flex-wrap": wrap.value ? "wrap" : "nowrap",
-                "--fs-row-gap": `${gap.value}px`
-            };
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => ({
+            "--fs-row-flex-wrap": wrap.value ? "wrap" : "nowrap",
+            "--fs-row-gap": `${gap.value}px`,
+            "--fs-row-width": width.value,
+            "--fs-row-height": height.value
+        }));
+
+        const classes = computed((): string => {
+            let classes = "fs-row";
             switch (width.value) {
                 case "hug":
+                    classes += " fs-row-width-hug";
                     break;
                 case "fill":
-                    style["flex"] = "1 0 0";
+                    classes += " fs-row-width-fill";
                     break;
-                default:
-                    style["width"] = width.value;
+                default: 
+                    classes += " fs-row-width-fixed";
                     break;
             }
             switch (height.value) {
                 case "hug":
+                    classes += " fs-row-height-hug";
                     break;
                 case "fill":
-                    style["align-self"] = "stretch";
+                    classes += " fs-row-height-fill";
+                    break;
+                default: 
+                    classes += " fs-row-height-fixed";
+                    break;
+            }
+            switch (align.value) {
+                case "top-left":
+                    classes += " fs-row-top-left";
+                    break;
+                case "top-center":
+                    classes += " fs-row-top-center";
+                    break;
+                case "top-right":
+                    classes += " fs-row-top-right";
+                    break;
+                case "center-left":
+                    classes += " fs-row-center-left";
+                    break;
+                case "center-center":
+                    classes += " fs-row-center-center";
+                    break;
+                case "center-right":
+                    classes += " fs-row-center-right";
+                    break;
+                case "bottom-left":
+                    classes += " fs-row-bottom-left";
+                    break;
+                case "bottom-center":
+                    classes += " fs-row-bottom-center";
                     break;
-                default:
-                    style["height"] = height.value;
-                    style["flex-shrink"] = "0";
+                case "bottom-right":
+                    classes += " fs-row-bottom-right";
                     break;
             }
-            return style;
+            return classes;
         });
 
         return {
-            style
+            style,
+            classes
         };
     }
 });

package/components/FSSlideGroup.vue

@@ -5,7 +5,7 @@
         :style="style"
         v-bind="$attrs"
     >
-        <FSRow height="hug">
+        <FSRow>
             <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
                 <component :is="component" v-bind="{ color }" />
             </v-slide-group-item>
@@ -37,7 +37,7 @@ export default defineComponent({
         const { color } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = {
             "--fs-group-light-color"  : colors.light,

package/components/FSSpan.vue

@@ -1,7 +1,6 @@
 <template>
     <span
-        class="fs-span"
-        :class="$props.font"
+        :class="'fs-span ' + $props.font"
         v-bind="$attrs"
     >
         <slot />
@@ -15,7 +14,7 @@ export default defineComponent({
     name: "FSSpan",
     props: {
         font: {
-            type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline">,
+            type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-body" | "text-button" | "text-overline" | "text-underline">,
             required: false,
             default: "text-body"
         }

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,9 +84,9 @@ 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().getVariants(color.value);
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = computed(() => ({
             "--fs-switch-cursor"         : editable.value ? "pointer" : "default",

package/components/FSTab.vue

@@ -2,39 +2,56 @@
     <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>
+            <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 />
-                <FSSpan v-if="tag" class="fs-tab-tag">
-                    {{ tag }}
-                </FSSpan>
+                <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 { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { defineComponent } from "vue";
 
 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 +62,11 @@ export default defineComponent({
             required: false,
             default: null
         },
-        color: {
-            type: String as PropType<ColorBase>,
+        appendIcon: {
+            type: String,
             required: false,
-            default: ColorBase.Primary
+            default: null
         }
-    },
-    setup(props) {
-        const { label, color } = toRefs(props);
-
-        const colors = useColors().getVariants(color.value);
-
-        return {
-            label,
-            sliderColor: colors.base
-        };
     }
 });
 </script>

package/components/FSTabs.vue

@@ -6,10 +6,13 @@
         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" />
+        </template>
     </v-tabs>
 </template>
 
@@ -38,20 +41,18 @@ export default defineComponent({
         const { tab, color } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         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,
+            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">
+            <FSSpan class="fs-tag-label">
+                {{ $props.label }}
+            </FSSpan>
+        </slot>
+        <slot name="button">
+            <v-btn
+                v-if="editable"
+                class="fs-tag-button"
+                :ripple="false"
+                @click="$emit('remove')"
+            >
+                <FSIcon size="s">
+                    mdi-close
+                </FSIcon>
+            </v-btn>
+        </slot>
     </FSRow>
 </template>
 
@@ -60,8 +65,8 @@ export default defineComponent({
         }
     },
     emits: ["remove"],
-    setup(props, { emit }) {
-        const { label, full, color, editable } = toRefs(props);
+    setup(props) {
+        const { full, color, editable } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
 
@@ -75,10 +80,8 @@ export default defineComponent({
         }));
 
         return {
-            label,
             editable,
-            style,
-            emit
+            style
         };
     }
 });

package/components/FSTextField.vue

@@ -1,11 +1,41 @@
 <template>
-    <v-text-field
-        class="fs-text-field"
-        variant="outlined"
-        hide-details
-        v-bind="$attrs"
-    >
-    </v-text-field>
+    <FSCol>
+        <slot name="label">
+            <FSSpan
+                v-if="$props.label"
+                class="fs-text-field-label"
+                font="text-overline"
+                :style="style"
+            >
+                {{ $props.label }}{{ $props.required ? "*" : "" }}
+            </FSSpan>
+        </slot>
+        <v-text-field
+            class="fs-text-field"
+            variant="outlined"
+            hide-details
+            :style="style"
+            :type="$props.type"
+            :readonly="!$props.editable"
+            :modelValue="$props.value"
+            @update:modelValue="(value) => $emit('update:value', value)"
+            v-bind="$attrs"
+        >
+            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+                <slot :name="name" v-bind="slotData" />
+            </template>
+        </v-text-field>
+        <slot name="description">
+            <FSSpan
+                v-if="$props.description"
+                class="fs-text-field-description"
+                font="text-underline"
+                :style="style"
+            >
+                {{ $props.description }}
+            </FSSpan>
+        </slot>
+    </FSCol>
 </template>
 
 <script lang="ts">
@@ -15,16 +45,15 @@ 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
     },
+    inheritAttrs: false,
     props: {
         label: {
             type: String,
@@ -36,6 +65,11 @@ export default defineComponent({
             required: false,
             default: null
         },
+        type: {
+            type: String as PropType<"text" | "password" | "number">,
+            required: false,
+            default: "text"
+        },
         value: {
             type: String,
             required: false,
@@ -44,7 +78,12 @@ export default defineComponent({
         color: {
             type: String as PropType<ColorBase>,
             required: false,
-            default: null
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
         },
         editable: {
             type: Boolean,
@@ -52,8 +91,22 @@ export default defineComponent({
             default: true
         }
     },
-    setup(props, { emit }) {
+    emits: ["update:value"],
+    setup(props) {
+        const { color, editable } = toRefs(props);
+
+        const colors = useColors().getVariants(color.value);
+        const dark = useColors().getVariants(ColorBase.Dark);
+
+        const style = computed(() => ({
+            "--fs-text-field-cursor"    : editable.value ? "text" : "default",
+            "--fs-text-field-base-color": editable.value ? dark.base : dark.light,
+            "--fs-text-field-dark-color": editable.value ? colors.dark: dark.light,
+            "--fs-text-field-base-text" : editable.value ? dark.base : dark.light
+        }));
+
         return {
+            style
         };
     }
 });

package/components/FSWrapGroup.vue

@@ -4,7 +4,7 @@
         :style="style"
         v-bind="$attrs"
     >
-        <FSRow height="hug">
+        <FSRow>
             <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
                 <component :is="component" v-bind="{ color }" />
             </v-slide-group-item>
@@ -36,7 +36,7 @@ export default defineComponent({
         const { color } = toRefs(props);
 
         const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const dark = useColors().getVariants(ColorBase.Dark);
 
         const style = {
             "--fs-group-light-color"  : colors.light,

package/composables/useColors.ts

@@ -19,33 +19,17 @@ export const useColors = () => {
         };
     }
 
-    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 getLight = (color: ColorBase, base: Color): Color => {
+        switch (color) {
+            case ColorBase.Light: return base.value(Math.max(base.value() - 20, 0));
+            case ColorBase.Dark: return base.saturationv(Math.max(base.saturationv() - 80, 0)).value(Math.min(base.value() + 40, 100));
+            default: return lighten(base);
+        }
     };
 
     const getVariants = (color: ColorBase) => {
         const base = new Color(theme.colors[color]);
-        const light = lighten(base);
+        const light = getLight(color, base);
         const dark = darken(base);
 
         return {
@@ -57,8 +41,6 @@ export const useColors = () => {
 
     return {
         getBackground,
-        getLight,
-        getDark,
         getVariants
     };
 }