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

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/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>

package/pages/FSLoginPage.vue

@@ -1,253 +0,0 @@
-<template>
-  <FSRow
-    width="100vw"
-    gap="0px"
-  >
-    <FSCol
-      align="top-center"
-      :width="formWidth"
-    >
-      <FSCol
-        width="min(464px, 100%)"
-        padding="56px 0 0 0"
-        align="top-center"
-        gap="32px"
-      >
-        <FSCol
-          align="top-center"
-          gap="24px"
-        >
-          <FSImage
-            borderRadius="0px"
-            :imageId="landingPage?.bannerImageId"
-            :height="bannerSize.height"
-            :width="bannerSize.width"
-          />
-          <FSPagination
-            class="fs-login-page-pagination"
-            width="calc(100% - 64px)"
-            :modelValue="0"
-            :pages="3"
-          />
-          <FSCol
-            gap="24px"
-          >
-            <FSCol
-              gap="12px"
-            >
-              <FSLanguageSetter />
-              <FSCol
-                gap="4px"
-              >
-                <FSLabel
-                  font="text-h1"
-                  :label="landingPage?.title"
-                />
-                <FSLabel
-                  :label="landingPage?.subTitle"
-                />
-              </FSCol>
-            </FSCol>
-            <FSCol
-              v-if="securitySettings?.useLocalAccounts"
-              gap="16px"
-            >
-              <FSTextField
-                :label="$tr('ui.login-page.email', 'Email')"
-                :required="true"
-                v-model="innerEmail"
-              />
-              <FSPasswordField
-                :label="$tr('ui.login-page.password', 'Password')"
-                :required="true"
-                v-model="innerPassword"
-              />
-              <FSRow
-                align="center-left"
-              >
-                <FSCheckbox
-                  :label="$tr('ui.login-page.remember-me', 'Remember me')"
-                  v-model="innerRememberMe"
-                />
-                <v-spacer />
-                <FSLink
-                  to="https://www.google.com"
-                >
-                  {{ $tr("ui.login-page.forgot-password", "Forgot password?") }}
-                </FSLink>
-              </FSRow>
-            </FSCol>
-            <FSButton
-              v-if="securitySettings?.useLocalAccounts"
-              :label="$tr('ui.login-page.login', 'Login')"
-              :color="ColorEnum.Primary"
-              :fullWidth="true"
-            />
-          </FSCol>
-        </FSCol>
-        <FSDivider
-          v-if="securitySettings && showDivider"
-          :label="$tr('ui.login-page.or', 'Or')"
-        />
-        <FSRow
-          align="center-center"
-          width="fill"
-          :wrap="false"
-        >
-          <FSExternalIdentityButton
-            v-if="securitySettings && securitySettings.useGoogle"
-            scheme="Google"
-          />
-          <FSExternalIdentityButton
-            v-if="securitySettings && securitySettings.useFacebook"
-            scheme="Facebook"
-          />
-          <FSExternalIdentityButton
-            v-if="securitySettings && securitySettings.useMicrosoft"
-            scheme="OpenIdConnect"
-          />
-        </FSRow>
-        <FSLink
-          v-if="landingPage && landingPage.faqLink"
-          :to="landingPage.faqLink"
-        >
-          {{ $tr("ui.login-page.frequently-asked-questions", "Frequently asked questions") }}
-        </FSLink>
-      </FSCol>
-    </FSCol>
-    <FSImage
-      borderRadius="0px"
-      :imageId="landingPage?.bannerImageId"
-      :height="backgroundSize.height"
-      :width="backgroundSize.width"
-    />
-  </FSRow>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref } from "vue";
-
-import { useCurrentLandingPage, useCurrentSecuritySettings } from "@dative-gpi/foundation-shared-services/composables";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSExternalIdentityButton from "./FSExternalIdentityButton.vue";
-import FSLanguageSetter from "./FSLanguageSetter.vue";
-
-import FSPasswordField from "../components/fields/FSPasswordField.vue";
-import FSTextField from "../components/fields/FSTextField.vue";
-import FSPagination from "../components/FSPagination.vue";
-import FSCheckbox from "../components/FSCheckbox.vue"
-import FSDivider from "../components/FSDivider.vue";
-import FSImage from "../components/FSImage.vue";
-import FSLabel from "../components/FSLabel.vue";
-import FSLink from "../components/FSLink.vue";
-import FSRow from "../components/FSRow.vue";
-import FSCol from "../components/FSCol.vue";
-
-export default defineComponent({
-  name: "FSLoginPage",
-  components: {
-    FSExternalIdentityButton,
-    FSLanguageSetter,
-    FSPasswordField,
-    FSPagination,
-    FSTextField,
-    FSCheckbox,
-    FSDivider,
-    FSImage,
-    FSLabel,
-    FSLink,
-    FSRow,
-    FSCol
-  },
-  props: {
-    backgroundImageId: {
-      type: String,
-      required: false,
-      default: null
-    },
-    bannerImageId: {
-      type: String,
-      required: false,
-      default: null
-    }
-  },
-  setup(props) {
-    const { getting: gettingLandingPage, get: getLandingPage, entity: landingPage } = useCurrentLandingPage();
-    const { get: getSecuritySettings, entity: securitySettings } = useCurrentSecuritySettings();
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
-
-    const innerEmail = ref("");
-    const innerPassword = ref("");
-    const innerRememberMe = ref(false);
-
-    const backgroundSize = computed((): { width: number | string, height: number | string } => {
-      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.bannerImageId)) {
-        return { width: 0, height: 0 };
-      }
-      if (isExtraSmall.value) {
-        return { width: 0, height: 0 };
-      }
-      if (isMobileSized.value) {
-        return { width: "50%", height: "100vh" };
-      }
-      return { width: "60%", height: "100vh" };
-    });
-
-    const bannerSize = computed((): { width: number | string, height: number | string } => {
-      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.bannerImageId)) {
-        return { width: 0, height: 0 };
-      }
-      if (isExtraSmall.value) {
-        return { width: 240, height: 45 };
-      }
-      return { width: 360, height: 60 };
-    });
-
-    const formWidth = computed((): string => {
-      if (!gettingLandingPage && (!landingPage.value || !landingPage.value.backgroundImageId)) {
-        return "100%";
-      }
-      if (isExtraSmall.value) {
-        return "100%";
-      }
-      if (isMobileSized.value) {
-        return "50%";
-      }
-      return "40%";
-    });
-
-    const showDivider = computed((): boolean => {
-      if (!securitySettings.value) {
-        return true;
-      }
-      if (!securitySettings.value.useLocalAccounts) {
-        return false;
-      }
-      if (!securitySettings.value.useGoogle && !securitySettings.value.useFacebook && !securitySettings.value.useMicrosoft) {
-        return false;
-      }
-      return true;
-    });
-
-    onMounted(() => {
-      getSecuritySettings();
-      getLandingPage();
-    });
-
-    return {
-      ColorEnum,
-      securitySettings,
-      landingPage,
-      innerEmail,
-      innerPassword,
-      innerRememberMe,
-      backgroundSize,
-      bannerSize,
-      formWidth,
-      showDivider
-    };
-  }
-});
-</script>