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

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>

package/components/FSTextField.vue

@@ -1,14 +1,35 @@
 <template>
     <FSCol>
         <slot name="label">
-            <FSSpan
-                v-if="$props.label"
-                class="fs-text-field-label"
-                font="text-overline"
-                :style="style"
-            >
-                {{ $props.label }}{{ $props.required ? "*" : "" }}
-            </FSSpan>
+            <FSRow :wrap="false">
+                <FSSpan
+                    v-if="$props.label"
+                    class="fs-text-field-label"
+                    font="text-overline"
+                    :style="style"
+                >
+                    {{ $props.label }}
+                </FSSpan>
+                <FSSpan
+                    v-if="$props.label && $props.required"
+                    class="fs-text-field-label"
+                    style="margin-left: -8px;"
+                    font="text-overline"
+                    :ellipsis="false"
+                    :style="style"
+                >
+                    *
+                </FSSpan>
+                <v-spacer style="min-width: 40px;" />
+                <FSSpan
+                    v-if="messages.length > 0"
+                    class="fs-text-field-messages"
+                    font="text-overline"
+                    :style="style"
+                >
+                    {{ messages.join(", ") }}
+                </FSSpan>
+            </FSRow>
         </slot>
         <v-text-field
             class="fs-text-field"
@@ -16,6 +37,7 @@
             hide-details
             :style="style"
             :type="$props.type"
+            :rules="$props.rules"
             :readonly="!$props.editable"
             :modelValue="$props.value"
             @update:modelValue="(value) => $emit('update:value', value)"
@@ -46,18 +68,20 @@ import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
 
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
     name: "FSTextField",
     components: {
         FSSpan,
-        FSCol
+        FSCol,
+        FSRow
     },
     inheritAttrs: false,
     props: {
         label: {
             type: String,
-            required: false,
+            required: true,
             default: null
         },
         description: {
@@ -85,6 +109,11 @@ export default defineComponent({
             required: false,
             default: false
         },
+        rules: {
+            type: Array as PropType<Function[]>,
+            required: false,
+            default: () => []
+        },
         editable: {
             type: Boolean,
             required: false,
@@ -95,17 +124,44 @@ export default defineComponent({
     setup(props) {
         const { color, editable } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        const colors = useColors().getColors(color.value);
+
+        const errors = useColors().getColors(ColorBase.Error);
+        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-text-field-cursor"             : "default",
+                    "--fs-text-field-border-color"       : lights.base,
+                    "--fs-text-field-color"              : lights.dark,
+                    "--fs-text-field-active-border-color": lights.base
+                };
+            }
+            return {
+                "--fs-text-field-cursor"             : "text",
+                "--fs-text-field-border-color"       : colors.base,
+                "--fs-text-field-color"              : darks.base,
+                "--fs-text-field-active-border-color": colors.dark,
+                "--fs-text-field-error-color"        : errors.base,
+                "--fs-text-field-error-border-color" : errors.base
+            };
+        });
 
-        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
-        }));
+        const messages = computed(() => {
+            const messages = [];
+            for (const rule of props.rules) {
+                const message = rule(props.value);
+                if (typeof(message) === "string") {
+                    messages.push(message);
+                }
+            }
+            return messages;
+        });
 
         return {
+            messages,
             style
         };
     }

package/components/FSWrapGroup.vue

@@ -6,14 +6,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";
@@ -35,20 +35,23 @@ export default defineComponent({
     setup(props) {
         const { color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getVariants(ColorBase.Dark);
+        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/composables/useColors.ts

@@ -7,29 +7,23 @@ 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 = (color: ColorBase, base: Color): Color => {
+    const lighten = (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);
+            case ColorBase.Light:
+            case ColorBase.Dark: return base.value(Math.min(base.value() + 10, 100));
+            default: return base.saturationv(10).value(Math.min(base.value() + 10, 100));
         }
     };
 
-    const getVariants = (color: ColorBase) => {
-        const base = new Color(theme.colors[color]);
-        const light = getLight(color, base);
+    const darken = (base: Color): Color => {
+        return base.value(Math.max(base.value() - 15, 0));
+    };
+
+    const getColors = (color: ColorBase | String) => {
+        const themed = (Object as any).values(ColorBase).includes(color);
+
+        const base = themed ? new Color(theme.colors[color as ColorBase]) : new Color(color);
+        const light = lighten(color as ColorBase, base);
         const dark = darken(base);
 
         return {
@@ -39,8 +33,24 @@ export const useColors = () => {
         };
     };
 
+    const getContrasts = (color: ColorBase | string) => {
+        switch (color) {
+            case ColorBase.Light: {
+                const base = new Color(theme.colors[ColorBase.Dark]);
+                return {
+                    light: base.hex(),
+                    base: base.hex(),
+                    dark: base.hex()
+                };
+            }
+            default: {
+                return getColors(color);
+            }
+        }
+    }
+
     return {
-        getBackground,
-        getVariants
+        getColors,
+        getContrasts
     };
 }

package/{defaults → models}/FSButtons.ts

@@ -58,36 +58,54 @@ export const FSButtonsProps = {
         prependIcon: "mdi-content-save-outline",
         label: "Save",
         variant: "standard",
-        color: ColorBase.Success
+        color: ColorBase.Primary
     },
     FSButtonSaveMini: {
         prependIcon: "mdi-content-save-outline",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Success
+        color: ColorBase.Primary
     },
     FSButtonSaveIcon: {
         icon: "mdi-content-save-outline",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Success
+        color: ColorBase.Primary
     },
     FSButtonCancel: {
         prependIcon: "mdi-cancel",
         label: "Cancel",
         variant: "standard",
-        color: ColorBase.Dark
+        color: ColorBase.Light
     },
     FSButtonCancelMini: {
         prependIcon: "mdi-cancel",
         label: undefined,
         variant: "standard",
-        color: ColorBase.Dark
+        color: ColorBase.Light
     },
     FSButtonCancelIcon: {
         icon: "mdi-cancel",
         label: undefined,
         variant: "icon",
-        color: ColorBase.Dark
+        color: ColorBase.Light
+    },
+    FSButtonDocumentation: {
+        prependIcon: "mdi-file-document-outline",
+        label: "Documentation",
+        variant: "standard",
+        color: ColorBase.Light
+    },
+    FSButtonDocumentationMini: {
+        prependIcon: "mdi-file-document-outline",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Light
+    },
+    FSButtonDocumentationIcon: {
+        icon: "mdi-file-document-outline",
+        label: undefined,
+        variant: "icon",
+        color: ColorBase.Light
     }
 }

package/models/FSTags.ts

@@ -0,0 +1,8 @@
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+export interface FSTagItem {
+    label: string,
+    variant: "standard" | "full",
+    color: ColorBase,
+    editable: boolean
+}

package/models/FSTextFields.ts

@@ -0,0 +1,17 @@
+export const TextRules = {
+    required: (message: string) => (value: string) => !!value || (message ?? "Required"),
+    minLength: (length: number, message: string) => (value: string) => value.length >= length || (message ?? `Must be at least ${length} characters`),
+    maxLength: (length: number, message: string) => (value: string) => value.length <= length || (message ?? `Must be at most ${length} characters`),
+    email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? "Must be a valid email"),
+    digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? "Must contain a digit"),
+    uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? "Must contain an uppercase letter"),
+    lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? "Must contain a lowercase letter"),
+    special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? "Must contain a special character")
+};
+
+export const NumberRules = {
+    required: (message: string) => (value: number) => !!value || (message ?? "Required"),
+    min: (min: number, message: string) => (value: number) => value >= min || (message ?? `Must be at least ${min}`),
+    max: (max: number, message: string) => (value: number) => value <= max || (message ?? `Must be at most ${max}`),
+    integer: (message: string) => (value: number) => Number.isInteger(value) || (message ?? "Must be an integer")
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,8 +9,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.5",
-    "@dative-gpi/foundation-shared-services": "0.0.5",
+    "@dative-gpi/foundation-shared-domain": "0.0.6",
+    "@dative-gpi/foundation-shared-services": "0.0.6",
+    "@fontsource/montserrat": "^5.0.16",
     "color": "^4.2.3",
     "vue": "^3.2.0"
   },
@@ -19,5 +20,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "609abe1b97549b28ff83dffe858030604df27a2e"
+  "gitHead": "01028b7e6c5cf14c8092999ccacfd68d08c5d2a9"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,14 +1,19 @@
 .fs-breadcrumbs-label {
     cursor: pointer;
-    color: var(--fs-breadcrumbs-base-text) !important;
+    user-select: none;
+    color: var(--fs-breadcrumbs-color);
 
     &--disabled {
-        color: var(--fs-breadcrumbs-light-text) !important;
+        color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
     &:hover {
         text-decoration: underline;
     }
+
+    &:active {
+        color: var(--fs-breadcrumbs-active-color) !important;
+    }
 }
 
 .fs-breadcrumbs-divider {
@@ -25,17 +30,17 @@
 
     &--disabled {
         opacity: 1 !important;
-        color: var(--fs-breadcrumbs-light-text) !important;
+        color: var(--fs-breadcrumbs-disabled-color) !important;
     }
 
     &:last-child > .fs-breadcrumbs-label--disabled {
         @extend .text-button;
 
-        color: var(--fs-breadcrumbs-base-text) !important;
+        color: var(--fs-breadcrumbs-active-color) !important;
     }
 }
 
 .v-breadcrumbs-divider {
     padding: 0 !important;
-    color: var(--fs-breadcrumbs-base-text) !important;
+    color: var(--fs-breadcrumbs-color) !important;
 }

package/styles/components/fs_button.scss

@@ -1,19 +1,26 @@
 .fs-button {
     padding: var(--fs-button-padding) !important;
     border-radius: 4px !important;
+    border: 1px solid !important;
     box-shadow: none !important;
-    border: 1px solid var(--fs-button-base-color) !important;
-    background-color: var(--fs-button-light-color) !important;
-    color: var(--fs-button-light-text) !important;
+    
+    background-color: var(--fs-button-background-color) !important;
+    border-color: var(--fs-button-border-color) !important;
+    color: var(--fs-button-color) !important;
 
-    &:hover {
-        background-color: var(--fs-button-base-color) !important;
-        color: var(--fs-button-base-text) !important;
+    &.fs-button--disabled {
+        cursor: default !important;
     }
 
-    &:active {
-        border-color: var(--fs-button-dark-color) !important;
-        background-color: var(--fs-button-dark-color) !important;
+    &:not(.fs-button--disabled):hover {
+        background-color: var(--fs-button-hover-background-color) !important;
+        color: var(--fs-button-hover-color) !important;
+    }
+
+    &:not(.fs-button--disabled):active {
+        background-color: var(--fs-button-active-background-color) !important;
+        border-color: var(--fs-button-active-border-color) !important;
+        color: var(--fs-button-active-color) !important;
     }
 
     @include web {
@@ -28,18 +35,12 @@
 }
 
 .fs-button-icon {
-    & .v-icon {
-        transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        color: var(--fs-button-light-text) !important;
-        cursor: pointer !important;
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    color: var(--fs-button-color) !important;
 
-        &:hover {
-            color: var(--fs-button-base-text) !important;
-        }
-
-        &:active {
-            color: var(--fs-button-light-text) !important;
-        }
+    &:not(.fs-button--disabled):hover {
+        color: var(--fs-button-hover-color) !important;
+        cursor: pointer !important;
     }
 
     @include web {

package/styles/components/fs_checkbox.scss

@@ -1,15 +1,14 @@
 .fs-checkbox {
     cursor: var(--fs-checkbox-cursor) !important;
-    color: var(--fs-checkbox-base-color);
+    color: var(--fs-checkbox-checkbox-color) !important;
 }
 
 .fs-checkbox-label {
     cursor: var(--fs-checkbox-cursor) !important;
-    color: var(--fs-checkbox-base-text);
-    height: 20px !important;
+    color: var(--fs-checkbox-color) !important;
     user-select: none;
 }
 
 .fs-checkbox-description {
-    color: var(--fs-checkbox-base-text);
+    color: var(--fs-checkbox-color) !important;
 }

package/styles/components/fs_color.scss

@@ -0,0 +1,5 @@
+.fs-color {
+    background-color: var(--fs-color-background-color);
+    color: var(--fs-color-color);
+    border-radius: 4px;
+}

package/styles/components/fs_password_field.scss

@@ -1,5 +1,10 @@
 .fs-password-field-icon {
+    opacity: 1 !important;
     cursor: var(--fs-password-field-cursor) !important;
     color: var(--fs-password-field-base-text) !important;
-    opacity: 1 !important;
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        color: var(--fs-password-field-dark-text) !important;
+    }
 }