@dative-gpi/foundation-shared-components 0.0.2

package/importMap.json

@@ -0,0 +1,59 @@
+{
+    "components": {
+        "FSWindow": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSWindow.vue"
+        },
+        "FSSpan": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSSpan.vue"
+        },
+        "FSSlideGroup": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue"
+        },
+        "FSIcon": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSIcon.vue"
+        },
+        "FSRow": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSRow.vue"
+        },
+        "FSTabs": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSTabs.vue"
+        },
+        "FSWrapGroup": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSWrapGroup.vue"
+        },
+        "FSCol": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSCol.vue"
+        },
+        "FSRadio": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSRadio.vue"
+        },
+        "FSButton": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSButton.vue"
+        },
+        "FSTag": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSTag.vue"
+        },
+        "FSTab": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSTab.vue"
+        },
+        "FSFadeOut": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue"
+        },
+        "FSBreadcrumbs": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSBreadcrumbs.vue"
+        },
+        "FSTextField": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSTextField.vue"
+        },
+        "FSRadioGroup": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSRadioGroup.vue"
+        },
+        "FSCheckbox": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue"
+        },
+        "FSSwitch": {
+            "from": "@dative-gpi/foundation-shared-components/components/FSSwitch.vue"
+        }
+    },
+    "directives": []
+}

package/importsGenerator.py

@@ -0,0 +1,39 @@
+import os
+import json
+
+PROJECT = "@dative-gpi/foundation-shared-components"
+
+def find_vue_files(directory):
+    """
+    Parcourt récursivement le répertoire donné et retourne un dictionnaire de fichiers .vue
+    """
+    components_dict = {}
+
+    for root, dirs, files in os.walk(directory):
+        for file in files:
+            if file.endswith(".vue"):
+                # Récupérer le chemin relatif du fichier par rapport au répertoire racine du projet
+                full_relative_path = os.path.relpath(os.path.join(root, file), project_root)
+                
+                file_name_without_extension = os.path.splitext(file)[0]
+                components_dict[file_name_without_extension] = {
+                    "from": PROJECT + '/' + full_relative_path
+                }
+
+    return components_dict
+
+def main():
+    global project_root
+    project_root = "."  # Vous pouvez remplacer '.' par le chemin absolu ou relatif de votre projet
+    components = find_vue_files(os.path.join(project_root, "components"))
+
+    data = {
+        "components": components,
+        "directives": []
+    }
+
+    with open("importMap.json", "w", encoding="utf-8") as f:
+        json.dump(data, f, ensure_ascii=False, indent=4)
+
+if __name__ == "__main__":
+    main()

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@dative-gpi/foundation-shared-components",
+  "version": "0.0.2",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.ts",
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@dative-gpi/foundation-shared-domain": "0.0.2",
+    "@dative-gpi/foundation-shared-services": "0.0.2",
+    "color": "^4.2.3",
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@types/color": "^3.0.6",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2"
+  },
+  "gitHead": "44e9629c836e0cd06289b208b53120f07775ea5e"
+}

package/plugins/colorPlugin.ts

@@ -0,0 +1,13 @@
+import { DefineComponent, Plugin } from "vue";
+import { useTheme } from "vuetify";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+export const ColorPlugin: Plugin = {
+    install: (app) => {
+        app.config.globalProperties.$color = function(this: InstanceType<DefineComponent>, key: ColorBase): string {
+            const theme = this.$vuetify ? (this.$vuetify as any).theme.current : useTheme().current.value;
+            return theme.colors[key];
+        }
+    }
+}

package/plugins/index.ts

@@ -0,0 +1 @@
+export * from "./colorPlugin";

package/shims-plugin.d.ts

@@ -0,0 +1,9 @@
+import Vue from "vue";
+
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+declare module "vue" {
+    interface ComponentCustomProperties {
+        $color: (key: ColorBase) => string;
+    }
+}

package/styles/components/fs_breadcrumbs.scss

@@ -0,0 +1,28 @@
+.v-breadcrumbs {
+    padding: 0 !important;
+    gap: 8px !important;
+}
+
+.v-breadcrumbs-item {
+    padding: 0 !important;
+
+    &:last-child > .fs-breadcrumbs-label--disabled {
+        @extend .text-button;
+
+        color: var(--fs-breadcrumbs-light-text) !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;
+    }
+}

package/styles/components/fs_button.scss

@@ -0,0 +1,28 @@
+.fs-button {
+    padding: var(--fs-button-padding) !important;
+    border-radius: 4px !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;
+
+    &:hover {
+        background-color: var(--fs-button-base-color) !important;
+        color: var(--fs-button-base-text) !important;
+    }
+
+    &:active {
+        border-color: var(--fs-button-dark-color) !important;
+        background-color: var(--fs-button-dark-color) !important;
+    }
+
+    @include web {
+        min-width: 48px !important;
+        height: 48px !important;
+    }
+
+    @include mobile {
+        min-width: 36px !important;
+        height: 36px !important;
+    }
+}

package/styles/components/fs_checkbox.scss

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

package/styles/components/fs_col.scss

@@ -0,0 +1,6 @@
+.fs-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--fs-col-gap)
+}

package/styles/components/fs_fade_out.scss

@@ -0,0 +1,27 @@
+.fs-fade-out {
+    @extend .fs-hide-y-scrollbar;
+}
+
+.fs-fade-out-top {
+    pointer-events: none;
+    position: sticky;
+    z-index: 2;
+    height: var(--fs-fade-out-top-mask-height);
+    width: 100%;
+    top: 0;
+    left: 0;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
+}
+
+.fs-fade-out-bottom {
+    pointer-events: none;
+    position: sticky;
+    z-index: 2;
+    height: var(--fs-fade-out-bottom-mask-height);
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
+}

package/styles/components/fs_icon.scss

@@ -0,0 +1,17 @@
+.fs-icon-s {
+    font-size: 12px !important;
+}
+
+.fs-icon-m {
+    @include mobile {
+        font-size: 18px !important;
+    }
+
+    @include web {
+        font-size: 24px !important;
+    }
+}
+
+.fs-icon-checkbox {
+    font-size: 20px !important;
+}

package/styles/components/fs_radio.scss

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

package/styles/components/fs_row.scss

@@ -0,0 +1,6 @@
+.fs-row {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: var(--fs-row-flex-wrap);
+    gap: var(--fs-row-gap);
+}

package/styles/components/fs_span.scss

@@ -0,0 +1,8 @@
+.fs-span {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

package/styles/components/fs_switch.scss

@@ -0,0 +1,51 @@
+.fs-switch-size {
+    width: 40px !important;
+    min-height: 24px !important;
+    height: 24px !important;
+}
+
+.fs-switch * {
+    cursor: var(--fs-switch-cursor) !important;
+}
+
+.fs-switch {
+    @extend .fs-switch-size;
+
+    & .v-input__control {
+        & .v-selection-control {
+            @extend .fs-switch-size;
+
+            &__wrapper {
+                height: 24px !important;
+            }
+
+            &__input {
+                transform: translateX(var(--fs-switch-translate-x)) !important;
+                height: 24px !important;
+            }
+        }
+    }
+}
+
+.fs-switch-label {
+    cursor: var(--fs-switch-cursor) !important;
+    color: var(--fs-switch-base-text);
+    user-select: none;
+}
+
+.fs-switch-description {
+    color: var(--fs-switch-base-text);
+}
+
+.v-switch__track {
+    width: 40px !important;
+    height: 24px !important;
+    background-color: var(--fs-switch-base-color) !important;
+
+}
+
+.v-switch__thumb {
+    width: 16px !important;
+    height: 16px !important;
+    background-color: var(--fs-switch-base-background) !important;
+}

package/styles/components/fs_tabs.scss

@@ -0,0 +1,63 @@
+.fs-tabs {
+    display: flex !important;
+    width: 100% !important;
+
+    @include web {
+        height: 48px !important;
+    }
+
+    @include mobile {
+        height: 40px !important;
+    }
+}
+
+.fs-tab {
+    display: flex;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--fs-group-light-text) !important;
+    color: var(--fs-group-light-text) !important;
+
+    & .fs-tab-label {
+        @extend .text-button;
+    }
+
+    &:hover {
+        border-bottom: 1px solid var(--fs-group-dark-text) !important;
+        color: var(--fs-group-dark-text) !important;
+    }
+
+    @include web {
+        height: 48px !important;
+    }
+
+    @include mobile {
+        height: 40px !important;
+    }
+}
+
+.fs-tab-active {
+    background-color: var(--fs-group-light-color) !important;
+    color: var(--fs-group-dark-text) !important;
+    border-bottom: 0 !important;
+
+    &:hover {
+        border-bottom: 0 !important;
+    }
+}
+
+.fs-tab-tag {
+    padding: 0 8px;
+    border-radius: 4px;
+    background-color: var(--fs-group-base-color);
+    color: var(--fs-group-light-color);
+
+    @include web {
+        min-width: 28px;
+        height: 28px;
+    }
+
+    @include mobile {
+        min-width: 24px;
+        height: 24px;
+    }
+}

package/styles/components/fs_tag.scss

@@ -0,0 +1,45 @@
+.fs-tag {
+    padding: 0 8px !important;
+    border-radius: 2px !important;
+    background-color: var(--fs-tag-light-color) !important;
+    color: var(--fs-tag-light-text) !important;
+
+    @include web {
+        height: 28px !important;
+    }
+
+    @include mobile {
+        height: 24px !important;
+    }
+}
+
+.fs-tag-button {
+    padding: 0 !important;
+    margin: 4px 0 !important;
+    border-radius: 2px !important;
+    box-shadow: none !important;
+    background-color: var(--fs-tag-light-color) !important;
+    color: var(--fs-tag-light-text) !important;
+
+    &:hover {
+        background-color: var(--fs-tag-base-color) !important;
+        color: var(--fs-tag-base-text) !important;
+    }
+
+    &:active {
+        background-color: var(--fs-tag-dark-color) !important;
+        color: var(--fs-tag-dark-text) !important;
+    }
+
+    @include web {
+        min-width: 20px !important;
+        width: 20px !important;
+        height: 20px !important;
+    }
+
+    @include mobile {
+        min-width: 20px !important;
+        width: 20px !important;
+        height: 16px !important;
+    }
+}

package/styles/components/fs_text_field.scss

@@ -0,0 +1,24 @@
+.fs-text-field > .v-input__control > .v-field {
+    border: 1.3px solid #000000 !important;
+    border-radius: 4px !important;
+
+    & > .v-field__outline {
+        display: none;
+    }
+}
+
+.fs-text-field > .v-input__control > .v-field > .v-field__field > input {
+    @extend .text-body;
+
+    padding: 12px 16px !important;
+
+    @include web {
+        min-height: 44px !important;
+        height: 44px !important;
+    }
+
+    @include mobile {
+        min-height: 40px !important;
+        height: 40px !important;
+    }
+}

package/styles/components/fs_wrap_group.scss

@@ -0,0 +1,12 @@
+
+@include clickscreen {
+    .fs-wrap-group {
+        & .v-slide-group__container .v-slide-group__content {
+            flex: 0 1 auto !important;
+
+            & .fs-row {
+                flex-wrap: wrap !important;
+            }
+        }
+    }
+}

package/styles/components/index.scss

@@ -0,0 +1,14 @@
+@import 'fs_breadcrumbs.scss';
+@import 'fs_button.scss';
+@import 'fs_checkbox.scss';
+@import 'fs_col.scss';
+@import 'fs_fade_out.scss';
+@import 'fs_icon.scss';
+@import 'fs_radio.scss';
+@import 'fs_row.scss';
+@import 'fs_span.scss';
+@import 'fs_switch.scss';
+@import 'fs_tag.scss';
+@import 'fs_tabs.scss';
+@import 'fs_text_field.scss';
+@import 'fs_wrap_group.scss';

package/styles/globals/breakpoints.scss

@@ -0,0 +1,13 @@
+$mobile-breakpoint: 1264px;
+
+@mixin mobile {
+    @media only screen and (max-width: $mobile-breakpoint) {
+        @content;
+    }
+}
+
+@mixin web {
+    @media screen and (min-width: ($mobile-breakpoint - 1)) {
+        @content;
+    }
+}

package/styles/globals/index.scss

@@ -0,0 +1,6 @@
+// Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
+@import 'breakpoints.scss';
+@import 'text_fonts.scss';
+@import 'touchscreen.scss';
+@import 'scrollbars.scss';
+@import 'overrides.scss';

package/styles/globals/overrides.scss

@@ -0,0 +1,41 @@
+// No default hover effect on buttons
+.v-btn__overlay {
+    display: none;
+}
+
+// No default hover effect on switches and others
+.v-selection-control__input::before {
+    display: none;
+}
+
+/***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
+
+// On touchscreen, hide arrows
+// Otherwise show small ones with base text color
+.v-slide-group__prev,
+.v-slide-group__next {
+    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    min-width: 24px !important;
+    width: 24px !important;
+    flex: 1 1 0 !important;
+    color: var(--fs-group-base-text);
+
+    @include touchscreen {
+        display: none !important;
+    }
+}
+
+// Light background color & dark text color on arrows when hovered
+.v-slide-group__prev:hover,
+.v-slide-group__next:hover {
+    background-color: var(--fs-group-light-color);
+    color: var(--fs-group-dark-text);
+}
+
+// Light text color on arrows when disabled
+.v-slide-group__prev--disabled,
+.v-slide-group__next--disabled {
+    color: var(--fs-group-light-text) !important;
+}
+
+/***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -0,0 +1,45 @@
+@property --scrollbar-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #00000000;
+}
+
+@include clickscreen {    
+    .fs-hide-scrollbar {
+        transition: --scrollbar-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-color);
+            border-radius: 4px;
+        }
+    
+        &:hover {
+            --scrollbar-color: #00000022;
+        }
+    }
+    
+    .fs-hide-y-scrollbar {
+        overflow-y: scroll;
+    
+        @extend .fs-hide-scrollbar;
+    }
+    
+    .fs-hide-x-scrollbar {
+        overflow-x: scroll;
+    
+        @extend .fs-hide-scrollbar;
+    }
+}
+
+@include touchscreen {
+    .fs-hide-y-scrollbar {
+        overflow-y: scroll;
+    }
+    
+    .fs-hide-x-scrollbar {
+        overflow-x: scroll;
+    }
+}