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

package/components/FSTextField.vue

@@ -1,11 +1,63 @@
 <template>
-    <v-text-field
-        class="fs-text-field"
-        variant="outlined"
-        hide-details
-        v-bind="$attrs"
-    >
-    </v-text-field>
+    <FSCol>
+        <slot name="label">
+            <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"
+            variant="outlined"
+            hide-details
+            :style="style"
+            :type="$props.type"
+            :rules="$props.rules"
+            :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,20 +67,21 @@ 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";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
     name: "FSTextField",
     components: {
         FSSpan,
-        FSRow,
-        FSCol
+        FSCol,
+        FSRow
     },
+    inheritAttrs: false,
     props: {
         label: {
             type: String,
-            required: false,
+            required: true,
             default: null
         },
         description: {
@@ -36,6 +89,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 +102,17 @@ export default defineComponent({
         color: {
             type: String as PropType<ColorBase>,
             required: false,
-            default: null
+            default: ColorBase.Dark
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        rules: {
+            type: Array as PropType<Function[]>,
+            required: false,
+            default: () => []
         },
         editable: {
             type: Boolean,
@@ -52,8 +120,49 @@ export default defineComponent({
             default: true
         }
     },
-    setup(props, { emit }) {
+    emits: ["update:value"],
+    setup(props) {
+        const { color, editable } = toRefs(props);
+
+        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 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

@@ -4,16 +4,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";
@@ -35,20 +35,23 @@ export default defineComponent({
     setup(props) {
         const { color } = toRefs(props);
 
-        const colors = useColors().getVariants(color.value);
-        const dark = useColors().getDark();
+        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,45 +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 = () => {
-        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 lighten = (color: ColorBase, base: Color): Color => {
+        switch (color) {
+            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 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 darken = (base: Color): Color => {
+        return base.value(Math.max(base.value() - 15, 0));
     };
 
-    const getVariants = (color: ColorBase) => {
-        const base = new Color(theme.colors[color]);
-        const light = lighten(base);
+    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 {
@@ -55,10 +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,
-        getLight,
-        getDark,
-        getVariants
+        getColors,
+        getContrasts
     };
 }

package/models/FSButtons.ts

@@ -0,0 +1,111 @@
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+
+export const FSButtonsAliases = {
+    FSButtonSearch: FSButton,
+    FSButtonSearchMini: FSButton,
+    FSButtonSearchIcon: FSButton,
+    FSButtonRemove: FSButton,
+    FSButtonRemoveMini: FSButton,
+    FSButtonRemoveIcon: FSButton,
+    FSButtonSave: FSButton,
+    FSButtonSaveMini: FSButton,
+    FSButtonSaveIcon: FSButton,
+    FSButtonCancel: FSButton,
+    FSButtonCancelMini: FSButton,
+    FSButtonCancelIcon: FSButton
+}
+
+export const FSButtonsProps = {
+    FSButtonSearch: {
+        prependIcon: "mdi-magnify",
+        label: "Search",
+        variant: "standard",
+        color: ColorBase.Primary
+    },
+    FSButtonSearchMini: {
+        prependIcon: "mdi-magnify",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Primary
+    },
+    FSButtonSearchIcon: {
+        icon: "mdi-magnify",
+        label: undefined,
+        variant: "icon",
+        color: ColorBase.Primary
+    },
+    FSButtonRemove: {
+        prependIcon: "mdi-delete-outline",
+        label: "Remove",
+        variant: "standard",
+        color: ColorBase.Error
+    },
+    FSButtonRemoveMini: {
+        prependIcon: "mdi-delete-outline",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Error
+    },
+    FSButtonRemoveIcon: {
+        icon: "mdi-delete-outline",
+        label: undefined,
+        variant: "icon",
+        color: ColorBase.Error
+    },
+    FSButtonSave: {
+        prependIcon: "mdi-content-save-outline",
+        label: "Save",
+        variant: "standard",
+        color: ColorBase.Primary
+    },
+    FSButtonSaveMini: {
+        prependIcon: "mdi-content-save-outline",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Primary
+    },
+    FSButtonSaveIcon: {
+        icon: "mdi-content-save-outline",
+        label: undefined,
+        variant: "icon",
+        color: ColorBase.Primary
+    },
+    FSButtonCancel: {
+        prependIcon: "mdi-cancel",
+        label: "Cancel",
+        variant: "standard",
+        color: ColorBase.Light
+    },
+    FSButtonCancelMini: {
+        prependIcon: "mdi-cancel",
+        label: undefined,
+        variant: "standard",
+        color: ColorBase.Light
+    },
+    FSButtonCancelIcon: {
+        icon: "mdi-cancel",
+        label: undefined,
+        variant: "icon",
+        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.4",
+  "version": "0.0.6",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,8 +9,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.4",
-    "@dative-gpi/foundation-shared-services": "0.0.4",
+    "@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": "71c09afc7831594e6cc4529c01f1ed761f856929"
+  "gitHead": "01028b7e6c5cf14c8092999ccacfd68d08c5d2a9"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,3 +1,25 @@
+.fs-breadcrumbs-label {
+    cursor: pointer;
+    user-select: none;
+    color: var(--fs-breadcrumbs-color);
+
+    &--disabled {
+        color: var(--fs-breadcrumbs-disabled-color) !important;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: var(--fs-breadcrumbs-active-color) !important;
+    }
+}
+
+.fs-breadcrumbs-divider {
+    margin-bottom: 2px !important;
+}
+
 .v-breadcrumbs {
     padding: 0 !important;
     gap: 8px !important;
@@ -6,23 +28,19 @@
 .v-breadcrumbs-item {
     padding: 0 !important;
 
+    &--disabled {
+        opacity: 1 !important;
+        color: var(--fs-breadcrumbs-disabled-color) !important;
+    }
+
     &:last-child > .fs-breadcrumbs-label--disabled {
         @extend .text-button;
 
-        color: var(--fs-breadcrumbs-light-text) !important;
+        color: var(--fs-breadcrumbs-active-color) !important;
     }
 }
 
 .v-breadcrumbs-divider {
     padding: 0 !important;
-    color: var(--fs-breadcrumbs-base-text) !important;
-}
-
-.fs-breadcrumbs-label {
-    cursor: pointer;
-    color: var(--fs-breadcrumbs-base-text) !important;
-
-    &:hover {
-        color: var(--fs-breadcrumbs-dark-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 {
@@ -25,4 +32,24 @@
         min-width: 36px !important;
         height: 36px !important;
     }
+}
+
+.fs-button-icon {
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    color: var(--fs-button-color) !important;
+
+    &:not(.fs-button--disabled):hover {
+        color: var(--fs-button-hover-color) !important;
+        cursor: pointer !important;
+    }
+
+    @include web {
+        width: 24px !important;
+        height: 24px !important;
+    }
+
+    @include mobile {
+        width: 18px !important;
+        height: 18px !important;
+    }
 }

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;
 }