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

package/components/FSNumberField.vue

@@ -0,0 +1,65 @@
+<template>
+    <FSTextField
+        type="number"
+        :label="$props.label"
+        :description="$props.description"
+        :color="$props.color"
+        :required="$props.required"
+        :editable="$props.editable"
+        :value="$props.value?.toString()"
+        @update:value="(value) => $emit('update:value', isNaN(parseFloat(value)) ? 0 : parseFloat(value))"
+        v-bind="$attrs"
+    >
+        <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 } from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSTextField from "./FSTextField.vue";
+
+export default defineComponent({
+    name: "FSNumberField",
+    components: {
+        FSTextField
+    },
+    props: {
+        label: {
+            type: String,
+            required: false,
+            default: null
+        },
+        description: {
+            type: String,
+            required: false,
+            default: null
+        },
+        value: {
+            type: Number,
+            required: false,
+            default: null
+        },
+        color: {
+            type: String as PropType<ColorBase>,
+            required: false,
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"]
+});
+</script>

package/components/FSPasswordField.vue

@@ -0,0 +1,119 @@
+<template>
+    <FSTextField
+        :label="$props.label"
+        :description="$props.description"
+        :type="type"
+        :color="$props.color"
+        :required="$props.required"
+        :editable="$props.editable"
+        :value="$props.value"
+        @update:value="(value) => $emit('update:value', value)"
+        v-bind="$attrs"
+    >
+        <template #append-inner>
+            <FSIcon
+                class="fs-password-field-icon"
+                size="m"
+                :style="style"
+                @click="onToggle"
+            >
+                {{ icon }}
+            </FSIcon>
+        </template>
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </FSTextField>
+</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 FSIcon from "./FSIcon.vue";
+
+export default defineComponent({
+    name: "FSPasswordField",
+    components: {
+        FSTextField,
+        FSIcon
+    },
+    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: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    },
+    emits: ["update:value"],
+    setup(props) {
+        const { editable } = toRefs(props);
+
+        const stars = ref(true);
+
+        const lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
+
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-password-field-cursor"   : "default",
+                    "--fs-password-field-base-text": lights.dark,
+                    "--fs-password-field-dark-text": lights.dark
+                };
+            }
+            return {
+                "--fs-password-field-cursor"   : "pointer",
+                "--fs-password-field-base-text": darks.base,
+                "--fs-password-field-dark-text": darks.dark
+            };
+        });
+
+        const type = computed((): string => stars.value ? "password" : "text");
+
+        const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
+
+        const onToggle = (): void => {
+            if (!editable.value) {
+                return;
+            }
+            stars.value = !stars.value;
+        };
+
+        return {
+            type,
+            icon,
+            style,
+            onToggle
+        };
+    }
+});
+</script>

package/components/FSRadio.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">
             <FSIcon
                 class="fs-radio"
                 size="checkbox"
@@ -9,24 +9,28 @@
             >
                 {{ icon }}
             </FSIcon>
+            <slot name="default">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-radio-label"
+                    :style="style"
+                    :font="font"
+                    @click="onToggle"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+            </slot>
+        </FSRow>
+        <slot name="description">
             <FSSpan
-                v-if="$props.label"
-                class="fs-radio-label"
+                v-if="$props.description"
+                class="fs-radio-description"
+                font="text-underline"
                 :style="style"
-                :font="font"
-                @click="onToggle"
             >
-                {{ $props.label }}
+                {{ $props.description }}
             </FSSpan>
-        </FSRow>
-        <FSSpan
-            v-if="$props.description"
-            class="fs-radio-description"
-            font="text-overline"
-            :style="style"
-        >
-            {{ $props.description }}
-        </FSSpan>
+        </slot>
     </FSCol>
 </template>
 
@@ -84,21 +88,31 @@ export default defineComponent({
     setup(props, { emit }) {
         const { value, selected, color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        const colors = useColors().getColors(color.value);
 
-        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 lights = useColors().getColors(ColorBase.Light);
+        const darks = useColors().getColors(ColorBase.Dark);
 
-        }));
+        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+            if (!editable.value) {
+                return {
+                    "--fs-radio-cursor": "default",
+                    "--fs-radio-radio-color": lights.dark,
+                    "--fs-radio-color": lights.dark
+                };
+            }
+            return {
+                "--fs-radio-cursor": selected.value ? "default" : "pointer",
+                "--fs-radio-radio-color": selected.value ? colors.base : darks.base,
+                "--fs-radio-color" : darks.base
+            };
+        });
 
-        const icon = computed(() => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
+        const icon = computed((): string => selected.value ? "mdi-radiobox-marked" : "mdi-radiobox-blank");
 
-        const font = computed(() => selected.value ? "text-button" : "text-body");
+        const font = computed((): string => selected.value ? "text-button" : "text-body");
 
-        const onToggle = () => {
+        const onToggle = (): void => {
             if (!editable.value) {
                 return;
             }

package/components/FSRadioGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <FSCol width="hug" height="hug">
+    <FSCol width="hug">
         <FSRadio
             v-for="item in $props.values"
             :key="item.value"
@@ -7,8 +7,8 @@
             :description="item.description"
             :value="item.value"
             :selected="isSelected(item.value)"
-            :color="color"
-            :editable="editable"
+            :color="$props.color"
+            :editable="$props.editable"
             @update:value="onToggle"
         />
     </FSCol>
@@ -52,21 +52,19 @@ export default defineComponent({
     },
     emits: ["update:value"],
     setup(props, { emit }) {
-        const { value, color, editable } = toRefs(props);
+        const { value } = toRefs(props);
 
-        const isSelected = (item: String | Boolean | Number) => {
+        const isSelected = (item: String | Boolean | Number): boolean => {
             return item == value.value;
         };
 
-        const onToggle = (item: String | Boolean | Number) => {
+        const onToggle = (item: String | Boolean | Number): void => {
             if (item != value.value) {
                 emit("update:value", item);
             }
         };
 
         return {
-            color,
-            editable,
             isSelected,
             onToggle
         };

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 : {[code: string]: string} & Partial<CSSStyleDeclaration> = {
-                "--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[] => {
+            const classes = ["fs-row"];
             switch (width.value) {
                 case "hug":
+                    classes.push("fs-row-width-hug");
                     break;
                 case "fill":
-                    style.flex = "1 0 0";
+                    classes.push("fs-row-width-fill");
                     break;
-                default:
-                    style.width = width.value;
+                default: 
+                    classes.push("fs-row-width-fixed");
                     break;
             }
             switch (height.value) {
                 case "hug":
+                    classes.push("fs-row-height-hug");
                     break;
                 case "fill":
-                    style.alignSelf = "stretch";
+                    classes.push("fs-row-height-fill");
+                    break;
+                default: 
+                    classes.push("fs-row-height-fixed");
+                    break;
+            }
+            switch (align.value) {
+                case "top-left":
+                    classes.push("fs-row-top-left");
+                    break;
+                case "top-center":
+                    classes.push("fs-row-top-center");
+                    break;
+                case "top-right":
+                    classes.push("fs-row-top-right");
+                    break;
+                case "center-left":
+                    classes.push("fs-row-center-left");
+                    break;
+                case "center-center":
+                    classes.push("fs-row-center-center");
+                    break;
+                case "center-right":
+                    classes.push("fs-row-center-right");
+                    break;
+                case "bottom-left":
+                    classes.push("fs-row-bottom-left");
+                    break;
+                case "bottom-center":
+                    classes.push("fs-row-bottom-center");
                     break;
-                default:
-                    style.height = height.value;
-                    style.flexShrink = "0";
+                case "bottom-right":
+                    classes.push("fs-row-bottom-right");
                     break;
             }
-            return style;
+            return classes;
         });
 
         return {
-            style
+            style,
+            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

@@ -5,16 +5,16 @@
         :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 }" />
+                <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().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
+        });
 
         return {
             color,
+            colors,
             style
         };
     }

package/components/FSSpan.vue

@@ -1,7 +1,6 @@
 <template>
     <span
-        class="fs-span"
-        :class="$props.font"
+        :class="classes"
         v-bind="$attrs"
     >
         <slot />
@@ -9,16 +8,41 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, toRefs, useSlots } 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">,
+            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>