@dative-gpi/foundation-shared-components 0.0.13 → 0.0.15

package/styles/components/fs_timeslot_field.scss

@@ -1,75 +1,12 @@
-.fs-time-slot-field {
-  padding: 0px !important;
-  width: 100%;
-
-  & > .v-input__control > .v-field {
-      border: 1px solid var(--fs-time-slot-field-border-color) !important;
-      cursor: var(--fs-time-slot-field-cursor) !important;
-      border-radius: 4px !important;
-      padding: 0 16px !important;
-      gap: 8px;
-
-      &--error {
-          border-color: var(--fs-time-slot-field-error-border-color) !important;
-      }
-
-      &:not(.v-field--error):focus-within {
-          border-color: var(--fs-time-slot-field-active-border-color) !important;
-      }
-
-      & > .v-field__outline {
-          display: none;
-      }
-
-      & > .v-field__field > .v-field__input {
-          @extend .text-body;
-      
-          padding-inline: 0 !important;
-          color: var(--fs-time-slot-field-color);
-          cursor: var(--fs-time-slot-field-cursor) !important;
-      
-          @include web {
-              min-height: 38px !important;
-              height: 38px !important;
-          }
-      
-          @include mobile {
-              min-height: 34px !important;
-              height: 34px !important;
-          }
-
-          & > .v-select__selection {
-              height: 100%;
-          }
-      }
-
-      & > .v-field__clearable {
-          margin-inline: 0px;
-      }
-
-      & > .v-field__append-inner {
-          color: var(--fs-time-slot-field-color);
-
-          & > i {
-              margin-inline-start: 0px;
-          }
-      }
-  }
-}
-
 .fs-time-slot-field-label {
-  color: var(--fs-time-slot-field-color);
+    color: var(--fs-time-slot-field-color);
 }
 
 .fs-time-slot-field-messages {
-  align-self: stretch;
-  color: var(--fs-time-slot-field-error-color);
+    align-self: stretch;
+    color: var(--fs-time-slot-field-error-color);
 }
 
 .fs-time-slot-field-description {
-  color: var(--fs-time-slot-field-color);
-}
-
-.fs-time-slot-field-number > .fs-row {
-  padding: 0px !important;
+    color: var(--fs-time-slot-field-color);
 }

package/styles/globals/overrides.scss

@@ -17,6 +17,14 @@
     margin-inline-start: 8px !important;
 }
 
+// Clearable icon is always centered vertically
+.v-input__control > .v-field > .v-field__clearable {
+    align-items: center;
+    padding-top: 0px;
+    height: 100%;
+}
+
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -56,12 +64,6 @@ input[type=number]::-webkit-outer-spin-button {
     color: var(--fs-group-hover-color);
 }
 
-// remove arrows when disabled
-.v-slide-group__prev--disabled,
-.v-slide-group__next--disabled {
-    display: none !important;
-}
-
 // Badges are totally overriden
 .v-badge__badge {
     align-items: center !important;

package/styles/main.scss

@@ -1,5 +1,3 @@
 // Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
 @import 'globals/index.scss';
-@import 'components/index.scss';
-
-@import 'pages/index.scss';
+@import 'components/index.scss';

package/utils/icons.ts

@@ -1,3 +1,5 @@
+import { Flags } from "../icons/sets";
+
 const MdiIcons = [
     {
         "name": "ab-testing",
@@ -75408,9 +75410,93 @@ const MdiIcons = [
         "styles": [],
         "tags": []
     }
-]
+];
+
+const FlagIcons = [
+    {
+        "name": "france",
+        "aliases": [
+            "french-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "France"
+        ]
+    },
+    {
+        "name": "germany",
+        "aliases": [
+            "german-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Allemagne"
+        ] 
+    },
+    {
+        "name": "greatBritain",
+        "aliases": [
+            "great-britain-flag",
+            "united-kingdom-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Royaume-Uni"
+        ] 
+    },
+    {
+        "name": "italy",
+        "aliases": [
+            "italien-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Italie"
+        ] 
+    },
+    {
+        "name": "portugal",
+        "aliases": [
+            "portuguese-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Portugal"
+        ] 
+    },
+    {
+        "name": "spain",
+        "aliases": [
+            "spanish-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Espagne"
+        ] 
+    },
+    {
+        "name": "unitedStates",
+        "aliases": [
+            "united-states-flag"
+        ],
+        "styles": [],
+        "tags": [
+            "Flags",
+            "Etats-Unis"
+        ] 
+    }
+];
 
 export const Icons: { name: string, fullText: string }[] = MdiIcons.map((icon) => ({
     name: "mdi-" + icon.name,
     fullText: icon.name + icon.name.split("-").join(" ") + " " + icon.aliases.join(" ") + " " + icon.tags.join(" ") + " " + icon.styles.join(" ")
-}));
+})).concat(FlagIcons.map((icon) => ({
+    name: "$" + icon.name,
+    fullText: icon.name + icon.name.split("-").join(" ") + " " + icon.aliases.join(" ") + " " + icon.tags.join(" ") + " " + icon.styles.join(" ")
+})));

package/aliases/FSButton.ts

@@ -1,116 +0,0 @@
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
-
-const { $tr } = useTranslationsProvider();
-
-import { computed } from "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",
-        get label() { return $tr("ui.button.search", "Search") },
-        variant: "standard",
-        color: ColorEnum.Primary
-    },
-    FSButtonSearchMini: {
-        prependIcon: "mdi-magnify",
-        label: undefined,
-        variant: "standard",
-        color: ColorEnum.Primary
-    },
-    FSButtonSearchIcon: {
-        icon: "mdi-magnify",
-        label: undefined,
-        variant: "icon",
-        color: ColorEnum.Primary
-    },
-    FSButtonRemove: {
-        prependIcon: "mdi-delete-outline",
-        get label() { return $tr("ui.button.remove", "Remove") },
-        variant: "standard",
-        color: ColorEnum.Error
-    },
-    FSButtonRemoveMini: {
-        prependIcon: "mdi-delete-outline",
-        label: undefined,
-        variant: "standard",
-        color: ColorEnum.Error
-    },
-    FSButtonRemoveIcon: {
-        icon: "mdi-delete-outline",
-        label: undefined,
-        variant: "icon",
-        color: ColorEnum.Error
-    },
-    FSButtonSave: {
-        prependIcon: "mdi-content-save-outline",
-        get label() { return $tr("ui.button.save", "Save") },
-        variant: "standard",
-        color: ColorEnum.Primary
-    },
-    FSButtonSaveMini: {
-        prependIcon: "mdi-content-save-outline",
-        label: undefined,
-        variant: "standard",
-        color: ColorEnum.Primary
-    },
-    FSButtonSaveIcon: {
-        icon: "mdi-content-save-outline",
-        label: undefined,
-        variant: "icon",
-        color: ColorEnum.Primary
-    },
-    FSButtonCancel: {
-        prependIcon: "mdi-cancel",
-        get label() { return $tr("ui.button.cancel", "Cancel") },
-        variant: "standard",
-        color: ColorEnum.Light
-    },
-    FSButtonCancelMini: {
-        prependIcon: "mdi-cancel",
-        label: undefined,
-        variant: "standard",
-        color: ColorEnum.Light
-    },
-    FSButtonCancelIcon: {
-        icon: "mdi-cancel",
-        label: undefined,
-        variant: "icon",
-        color: ColorEnum.Light
-    },
-    FSButtonDocumentation: {
-        prependIcon: "mdi-file-document-outline",
-        get label() { return $tr("ui.button.documentation", "Documentation") },
-        variant: "standard",
-        color: ColorEnum.Light
-    },
-    FSButtonDocumentationMini: {
-        prependIcon: "mdi-file-document-outline",
-        label: undefined,
-        variant: "standard",
-        color: ColorEnum.Light
-    },
-    FSButtonDocumentationIcon: {
-        icon: "mdi-file-document-outline",
-        label: undefined,
-        variant: "icon",
-        color: ColorEnum.Light
-    }
-}

package/aliases/index.ts

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

package/pages/FSExternalIdentityButton.vue

@@ -1,64 +0,0 @@
-<template>
-  <FSButton
-    style="flex: 1"
-    :href="loginUrl"
-    :prependIcon="icon"
-  />
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
-
-import { LOGIN_EXTERNAL_URL, SIGNUP_EXTERNAL_URL } from "@dative-gpi/foundation-shared-services/config";
-import { buildURL } from "@dative-gpi/bones-ui";
-
-import FSButton from "../components/FSButton.vue";
-import FSIcon from "../components/FSIcon.vue";
-
-export default defineComponent({
-  name: "FSExternalIdentityButton",
-  components: {
-    FSButton,
-    FSIcon
-  },
-  props: {
-    scheme: {
-      type: String as PropType<"OpenIdConnect" | "Google" | "Facebook">,
-      required: false,
-      default: null
-    },
-    invitation: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    token: {
-      type: String,
-      required: false,
-      default: null
-    }
-  },
-  setup(props) {
-    const loginUrl = computed((): string => {
-      if (props.invitation) {
-        return buildURL(SIGNUP_EXTERNAL_URL(), { scheme: props.scheme, token: props.token });
-      }
-      return buildURL(LOGIN_EXTERNAL_URL(), { scheme: props.scheme });
-    });
-
-    const icon = computed((): string => {
-      switch (props.scheme) {
-        case "OpenIdConnect": return "mdi-microsoft";
-        case "Google":        return "mdi-google";
-        case "Facebook":      return "mdi-facebook";
-        default:              return "mdi-login";
-      }
-    });
-
-    return {
-      loginUrl,
-      icon
-    };
-  }
-})
-</script>

package/pages/FSLanguageSetter.vue

@@ -1,140 +0,0 @@
-<template>
-  <v-skeleton-loader
-    v-if="fetching"
-    type="image"
-    :class="loadClasses"
-  />
-  <FSSelectField
-    v-else
-    itemValue="code"
-    :class="classes"
-    :items="entities"
-    :modelValue="languageCode"
-    :hideHeader="$props.hideHeader"
-    @update:modelValue="setLanguageCode($event)"
-    v-bind="$attrs"
-  >
-    <template #selection>
-      <FSRow
-        align="center-center"
-      >
-        <FSIcon size="l">
-          {{ languageIcon }}
-        </FSIcon>
-        <FSSpan
-          v-if="$props.withLabel"
-        >
-          {{ languageLabel }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template #item="{ item, props }">
-      <v-list-item v-bind="{ ...props, title: '' }">
-        <FSRow
-          align="center-left"
-          width="hug"
-        >
-          <FSIcon size="l">
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan
-            v-if="$props.withLabel"
-          >
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
-    </template>
-  </FSSelectField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
-
-import { useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import { useLanguages } from "@dative-gpi/foundation-core-services/composables";
-
-import FSSelectField from "../components/fields/FSSelectField.vue";
-import FSIcon from "../components/FSIcon.vue";
-import FSSpan from "../components/FSSpan.vue";
-import FSRow from "../components/FSRow.vue";
-
-export default defineComponent({
-  name: "FSLanguageSet",
-  components: {
-    FSSelectField,
-    FSIcon,
-    FSSpan,
-    FSRow
-  },
-  props: {
-    withLabel: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    modelValue: {
-      type: String,
-      required: false,
-      default: null
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { getMany, fetching, entities } = useLanguages();
-    const { setLanguageCode, languageCode } = useLanguageCode();
-
-    onMounted(() => {
-      getMany();
-    });
-
-    const classes = computed((): string[] => {
-      const innerClasses = ["fs-language-setter"];
-      if (!props.withLabel) {
-        innerClasses.push("fs-language-setter-icon");
-      }
-      return innerClasses;
-    });
-
-    const loadClasses = computed((): string[] => {
-      const innerClasses = ["fs-load-language-setter"];
-      if (!props.withLabel) {
-        innerClasses.push("fs-load-language-setter-icon");
-      }
-      return innerClasses;
-    });
-
-    const languageIcon = computed((): string => {
-      const language = entities.value.find((entity) => entity.code === languageCode.value);
-      if (language) {
-        return language.icon;
-      }
-      return "";
-    });
-
-    const languageLabel = computed((): string => {
-      const language = entities.value.find((entity) => entity.code === languageCode.value);
-      if (language) {
-        return language.label;
-      }
-      return "";
-    });
-
-    return {
-      classes,
-      fetching,
-      entities,
-      loadClasses,
-      languageCode,
-      languageIcon,
-      languageLabel,
-      setLanguageCode
-    };
-  }
-});
-</script>