@vc-shell/framework 1.0.128 → 1.0.130

package/shared/pages/InvitePage/components/invite/Invite.vue

@@ -93,7 +93,7 @@
           style="color: #f14e4e"
         >
           <!-- TODO: stylizing-->
-          {{ t(`INVITATION.ERRORS.${+error}`) }}
+          {{ t(`INVITATION.ERRORS.${error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -163,7 +163,7 @@ const acceptInvitation = async () => {
     if (result.succeeded) {
       router.push("/");
     } else {
-      form.errors = [result.errorCode as string];
+      // form.errors = [result.errorCode as string];
     }
   } else {
     form.errors = result.errors as string[];

package/shared/pages/LoginPage/components/login/Login.vue

@@ -174,15 +174,15 @@
     </VcHint>
   </VcLoginForm>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, Ref } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
-import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
+import { RequestPasswordResult } from "./../../../../../core/types";
 import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
-import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
+import { ExternalSignInProviderInfo, SignInResult } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
 
 type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
@@ -199,17 +199,17 @@ const props = defineProps<Props>();
 const router = useRouter();
 
 useForm({ validateOnMount: false });
-const { getUiCustomizationSettings, uiSettings } = useSettings();
+const { uiSettings, loading: customizationLoading } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;
-const signInResult = ref<SignInResults>({ succeeded: true });
+const signInResult = ref({ succeeded: true }) as Ref<SignInResult & { status?: number; error?: any }>;
 const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
 const forgotPasswordRequestSent = ref(false);
 const { signIn, loading, externalSignIn, getExternalLoginProviders, isAuthenticated } = useUser();
 const isLogin = ref(true);
 const isValid = useIsFormValid();
 const isDirty = useIsFormDirty();
-const customizationLoading = ref(false);
+
 const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
 let forgotPassword: ForgotPasswordFunc;
@@ -224,13 +224,7 @@ if (props.composable && typeof props.composable === "function") {
 }
 
 onMounted(async () => {
-  try {
-    customizationLoading.value = true;
-    loginProviders.value = await getExternalLoginProviders();
-    await getUiCustomizationSettings();
-  } finally {
-    customizationLoading.value = false;
-  }
+  loginProviders.value = await getExternalLoginProviders();
 });
 
 const externalAuthIcon = (authenticationType: string) => {
@@ -259,10 +253,23 @@ const forgotPasswordForm = reactive({
 
 const login = async () => {
   if (isValid.value) {
-    signInResult.value = await signIn(form.username, form.password);
+    signInResult.value = (await signIn(form.username, form.password)) as SignInResult & {
+      status?: number;
+      error?: any;
+    };
 
     if (signInResult.value.succeeded) {
-      router.push("/");
+      await router.push("/");
+    } else {
+      if (signInResult.value.status) {
+        if (signInResult.value.status === 401) {
+          signInResult.value.error = "The login or password is incorrect.";
+        } else {
+          signInResult.value.error = "Authentication error (code: " + signInResult.value.status + ").";
+        }
+      } else {
+        signInResult.value.error = "Authentication error: " + signInResult.value.error;
+      }
     }
   }
 };

package/shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue

@@ -152,11 +152,11 @@ const resetPassword = async () => {
   if (valid) {
     const result = await resetPasswordByToken(props.userId, form.password, props.token);
     if (result.succeeded) {
-      const result = await signIn(props.userName, form.password);
-      if (result.succeeded) {
+      const loginResult = await signIn(props.userName, form.password);
+      if (loginResult.succeeded) {
         router.push("/");
       } else {
-        form.errors = [result.errorCode as string];
+        form.errors = ("error" in loginResult && [loginResult.error as string]) || [];
       }
     } else {
       form.errors = result.errors as string[];

package/shared/utilities/vueUtils.ts

@@ -12,24 +12,24 @@ type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${strin
 export type ComponentProps<T> = T extends new () => { $props: infer P }
   ? NonNullable<P>
   : T extends (props: infer P, ...args: any) => any
-  ? P
-  : {};
+    ? P
+    : {};
 
 export type ComponentSlots<T> = T extends (...args: any) => any
   ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
     ? NonNullable<Slots>
     : {}
   : T extends new () => { $slots: infer S }
-  ? NonNullable<S>
-  : {};
+    ? NonNullable<S>
+    : {};
 
 export type ComponentEmit<T> = T extends (...args: any) => any
   ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
     ? EmitsExtractor<Props>
     : {}
   : T extends new () => { $props: infer Props }
-  ? EmitsExtractor<Props>
-  : never;
+    ? EmitsExtractor<Props>
+    : never;
 
 export type ComponentPublicInstanceConstructor<
   T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
@@ -37,7 +37,7 @@ export type ComponentPublicInstanceConstructor<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
 > = {
   __isFragment?: never;
   __isTeleport?: never;

package/tailwind.config.ts

@@ -0,0 +1,50 @@
+/** @type { import('tailwindcss').Config } */
+export default {
+  prefix: "tw-",
+  content: ["./ui/components/**/*.{vue,js,ts,jsx,tsx}", "./shared/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    fontFamily: {
+      roboto: ["Roboto", "sans-serif"],
+    },
+    fontSize: {
+      xs: ["11px", "14px"],
+      sm: ["12px", "16px"],
+      base: ["13px", "18px"],
+      lg: ["14px", "19px"],
+      xl: ["16px", "22px"],
+      "2xl": ["23px", "28px"],
+    },
+    lineHeight: {
+      xs: "14px",
+      sm: "16px",
+      base: "18px",
+      lg: "19px",
+      xl: "22px",
+      "2xl": "28px",
+      header: "28px",
+    },
+    extend: {
+      keyframes: {
+        loadingMarker: {
+          "50%": { transform: "translateX(96px)" },
+        },
+        loadingMarkers: {
+          "50%": { transform: "translateX(-31px)" },
+        },
+        loadingProgress: {
+          from: {
+            "background-position": "0 0, left",
+          },
+          to: {
+            "background-position": "30px 0, left",
+          },
+        },
+      },
+      animation: {
+        loadingMarker: "loadingMarker 3s infinite",
+        loadingMarkers: "loadingMarkers 3s infinite",
+        loadingProgress: "loadingProgress 1s linear infinite",
+      },
+    },
+  },
+};

package/ui/components/atoms/vc-button/vc-button.vue

@@ -156,7 +156,7 @@ $variants: primary, warning, danger;
       }
 
       &.vc-button_raised {
-        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
+        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,1)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
 
         &.vc-button_text:not(:disabled) {
           &:hover,

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcCard } from ".";
+import { VcInput, VcCol } from "./../../";
+
+const meta: Meta<typeof VcCard> = {
+  title: "atoms/VcCard",
+  component: VcCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcCard>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcCard, VcInput, VcCol },
+    setup() {
+      return { args };
+    },
+    template: `<vc-card v-bind="args">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</vc-card>`,
+  }),
+  args: {
+    variant: "default",
+    header: "Simple Card",
+  },
+};

package/ui/components/atoms/vc-card/vc-card.vue

@@ -99,7 +99,7 @@ $variants: success, danger;
 .vc-card {
   @apply tw-bg-[color:var(--card-background)] tw-border
   tw-border-[color:#eef0f2] tw-border-solid tw-box-border
-  tw-shadow-[1px_1px_7px_rgba(126,142,157,0.15)]
+  tw-shadow-[var(--card-box-shadow)]
   tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
   tw-flex-grow tw-flex tw-flex-col;
 

package/ui/components/atoms/vc-container/vc-container.vue

@@ -192,7 +192,7 @@ defineExpose({
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
     tw-flex-1 tw-p-[var(--container-scroll-padding)]
-     tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
+    tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
 
     &::-webkit-scrollbar {
       @apply tw-w-[var(--container-scroll-width)] tw-bg-transparent;

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="`vc-icon vc-icon_${size} vc-icon_${variant} ${(icon as string).toLowerCase()}`" />
+  <i :class="[`vc-icon vc-icon_${size} ${(icon as string).toLowerCase()}`, variant ? `vc-icon_${variant}` : '']" />
 </template>
 
 <script lang="ts" setup>

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -74,7 +74,7 @@ export interface Emits {
   (event: "update:modelValue", value: string | number | Date | null | undefined): void;
 }
 
-const { getAccessToken } = useUser();
+// const { getAccessToken } = useUser();
 
 const props = defineProps<Props>();
 
@@ -108,17 +108,12 @@ const modules = {
   module: ImageUploader,
   options: {
     upload: async (file: File) => {
-      const authToken = await getAccessToken();
-
       const formData = new FormData();
       formData.append("image", file);
 
       const result = await fetch(`/api/assets?folderUrl=/catalog/${props.assetsFolder}`, {
         method: "POST",
         body: formData,
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-        },
       });
 
       const response = await result.json();
@@ -142,7 +137,7 @@ watch(
   (value) => {
     content.value = unref(value);
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 function onInput() {

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -12,7 +12,7 @@
       size="l"
       class="tw-mr-2"
     ></VcIcon>
-    <div class="tw-text-[color:var(--notification-content-color)]">
+    <div class="tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line">
       {{ content }}
     </div>
     <VcIcon
@@ -63,7 +63,7 @@ watch(
       timer.value.start();
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 onMounted(() => {

package/ui/components/molecules/vc-select/vc-select.vue

@@ -257,7 +257,7 @@
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup generic="T, P extends {results: T[]; totalCount: number }">
+<script lang="ts" setup generic="T, P extends { results?: T[] | any; totalCount?: number }">
 import { ref, computed, watch, nextTick, Ref, toRefs } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
@@ -476,7 +476,7 @@ const props = withDefaults(
     emitValue: true,
     mapOptions: true,
     options: (): T[] => [],
-  }
+  },
 );
 
 const emit = defineEmits<{
@@ -487,7 +487,7 @@ const emit = defineEmits<{
   "update:modelValue": [
     inputValue: MaybeArray<
       string | Option | (T & P["results"][number] & object)[keyof T | keyof P["results"][number]]
-    > | null
+    > | null,
   ];
   /**
    * Emitted when user wants to filter a value
@@ -533,7 +533,7 @@ useIntersectionObserver(
       onLoadMore();
     }
   },
-  { threshold: 1, root: root.value?.component }
+  { threshold: 1, root: root.value?.component },
 );
 
 const popper = useFloating(dropdownToggleRef, dropdownRef, {
@@ -568,11 +568,11 @@ watch(
           const data = await props.options(
             undefined,
             undefined,
-            Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+            Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue],
           );
 
           if (typeof data === "object" && !Array.isArray(data) && "results" in data) {
-            defaultValue.value = data.results?.filter((x) => x[props.optionValue as keyof T] === props.modelValue);
+            defaultValue.value = data.results?.filter((x: any) => x[props.optionValue as keyof T] === props.modelValue);
           } else if (Array.isArray(data)) {
             defaultValue.value = data?.filter((x) => x[props.optionValue as keyof T] === props.modelValue);
           }
@@ -582,7 +582,7 @@ watch(
       }
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(
@@ -601,7 +601,7 @@ watch(
       optionsList.value = props.options;
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 watch(
@@ -609,7 +609,7 @@ watch(
   (newVal) => {
     optionsTemp.value = newVal;
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 watch(
@@ -618,7 +618,7 @@ watch(
     if (newVal) {
       popper.update();
     }
-  }
+  },
 );
 
 async function onLoadMore() {
@@ -667,7 +667,7 @@ watch(
   (val) => {
     innerValueCache = val;
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const selectedScope = computed(
@@ -685,7 +685,7 @@ const selectedScope = computed(
       toggleOption,
       removeAtIndex,
     }));
-  }
+  },
 );
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
@@ -825,8 +825,8 @@ function toggleOption(opt: Option) {
   if (props.multiple !== true) {
     if (innerValue.value.length === 0 || _.isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
       emit("update:modelValue", props.emitValue === true ? optValue : opt);
-      isOpened.value = false;
     }
+    isOpened.value = false;
     return;
   }
 

package/ui/components/organisms/index.ts

@@ -5,5 +5,3 @@ export * from "./vc-gallery";
 export * from "./vc-login-form";
 export * from "./vc-popup";
 export * from "./vc-table";
-export * from "./vc-notification-dropdown";
-export * from "./vc-notification-template";

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-px-4"
+    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-px-4 tw-shadow-[0px_2px_5px_0px_#3654751A]"
     :class="{ '!tw-pr-0 !tw-pl-[10px]': $isMobile.value }"
   >
-    <slot name="appSwitcher"></slot>
+    <slot name="app-switcher"></slot>
 
-    <template v-if="!$isMobile.value || blades.length === 0">
+    <template v-if="!$isMobile.value || quantity === 0">
       <!-- Logo -->
       <img
         class="tw-h-1/2 tw-cursor-pointer tw-mx-3"
@@ -26,15 +26,15 @@
     <template v-if="$isMobile.value">
       <!-- Show blades name when at least one blade is opened -->
       <div
-        v-if="blades.length === 1"
+        v-if="quantity === 1"
         class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
       >
-        {{ blades[0].exposed.title }}
+        {{ viewTitle || "" }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
       <VcLink
-        v-else-if="blades.length > 1"
+        v-else-if="quantity > 1"
         class="tw-ml-3"
         @click="$emit('backlink:click')"
       >
@@ -51,39 +51,7 @@
 
     <!-- Toolbar container -->
     <div class="tw-flex tw-h-full tw-box-border">
-      <template
-        v-for="(item, index) in buttons"
-        :key="index"
-      >
-        <template v-if="item.isVisible === undefined || item.isVisible">
-          <!-- Draw custom component is it is passed -->
-          <component
-            :is="item.component"
-            v-if="item.component"
-            v-bind="item.options"
-            :is-accent="item.isAccent"
-          ></component>
-
-          <!-- Otherwise draw default toolbar button -->
-          <div
-            v-else
-            class="tw-relative tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color: var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)] tw-transition-[color] tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]"
-            :title="item.title as string"
-            @click="$emit('button:click', item)"
-          >
-            <VcIcon
-              :icon="typeof item.icon === 'function' ? item.icon() : item.icon"
-              size="xl"
-            ></VcIcon>
-            <div
-              :class="{
-                'tw-block tw-absolute tw-right-3 tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1]':
-                  item.isAccent,
-              }"
-            ></div>
-          </div>
-        </template>
-      </template>
+      <slot name="toolbar"></slot>
     </div>
 
     <!-- Show menu toggler on mobile devices -->
@@ -101,12 +69,11 @@
 import { useI18n } from "vue-i18n";
 import { VcIcon, VcLink } from "./../../../../";
 import { IBladeToolbar } from "./../../../../../../core/types";
-import { IBladeRef } from "./../../../../../../shared";
+import { useBladeNavigation } from "./../../../../../../shared";
+import { ref, watch, nextTick } from "vue";
 
 export interface Props {
   logo: string;
-  blades: IBladeRef[];
-  buttons: IBladeToolbar[];
   title?: string;
 }
 
@@ -122,6 +89,22 @@ defineProps<Props>();
 defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
+
+const { blades } = useBladeNavigation();
+
+const viewTitle = ref();
+const quantity = ref();
+
+watch(
+  () => blades,
+  async (newVal) => {
+    await nextTick(() => {
+      viewTitle.value = Object.values(newVal.value?.instances || {})[0]?.title;
+      quantity.value = Object.values(newVal.value?.components || {}).length;
+    });
+  },
+  { deep: true, immediate: true, flush: "post" },
+);
 </script>
 
 <style lang="scss">