@vc-shell/framework 1.0.70 → 1.0.71

package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
     reorderableColumns?: boolean;
     reorderableRows?: boolean;
     stateKey: string;
-    bulkDelete?: boolean;
+    selectAll?: boolean;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
     props: {
         columns: ITableColumns[];
@@ -61,7 +61,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
         reorderableColumns?: boolean;
         reorderableRows?: boolean;
         stateKey: string;
-        bulkDelete?: boolean;
+        selectAll?: boolean;
     };
     expose(exposed: {}): void;
     attrs: any;
@@ -94,7 +94,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
             dropIndex: number;
             value: T[];
         }): void;
-        (event: "bulk:delete"): void;
+        (event: "select:all", values: boolean): void;
     };
 }, "slots" | "attrs" | "emit">, __VLS_setup?: {
     props: {
@@ -122,7 +122,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
         reorderableColumns?: boolean;
         reorderableRows?: boolean;
         stateKey: string;
-        bulkDelete?: boolean;
+        selectAll?: boolean;
     };
     expose(exposed: {}): void;
     attrs: any;
@@ -155,7 +155,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
             dropIndex: number;
             value: T[];
         }): void;
-        (event: "bulk:delete"): void;
+        (event: "select:all", values: boolean): void;
     };
 }) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -186,7 +186,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
             reorderableColumns?: boolean;
             reorderableRows?: boolean;
             stateKey: string;
-            bulkDelete?: boolean;
+            selectAll?: boolean;
         };
         expose(exposed: {}): void;
         attrs: any;
@@ -219,7 +219,7 @@ declare const _default: <T extends string | TableItem>(__VLS_props: {
                 dropIndex: number;
                 value: T[];
             }): void;
-            (event: "bulk:delete"): void;
+            (event: "select:all", values: boolean): void;
         };
     };
 };

package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "main": "./dist/framework.mjs",
   "module": "./dist/framework.mjs",
   "types": "./dist/index.d.ts",
@@ -38,6 +38,7 @@
     "@vueuse/integrations": "^10.1.2",
     "buffer-esm": "^1.2.0",
     "client-oauth2": "^4.3.3",
+    "fetch-intercept": "^2.4.0",
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "querystring-es3": "^0.2.1",
@@ -45,20 +46,21 @@
     "quill-image-uploader": "^1.3.0",
     "swiper": "^6.8.4",
     "vee-validate": "^4.9.3",
-    "vue": "^3.3.3",
+    "vue": "^3.3.4",
     "vue-currency-input": "~2.5.1",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.1",
     "vue3-ace-editor": "^2.2.2",
-    "vue3-touch-events": "^4.1.2"
+    "vue3-touch-events": "^4.1.2",
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@vc-shell/api-client-generator": "^1.0.70",
-    "@vc-shell/config-generator": "^1.0.70",
+    "@vc-shell/api-client-generator": "^1.0.71",
+    "@vc-shell/config-generator": "^1.0.71",
     "@vitejs/plugin-vue": "^4.2.3",
     "sass": "^1.62.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.7",
+    "vite": "^4.3.9",
     "vue-tsc": "^1.6.5"
   },
   "publishConfig": {

package/shared/components/app-switcher/composables/useAppSwitcher/index.ts

@@ -5,7 +5,7 @@ import { notification } from "./../../../notifications";
 
 interface IUseAppSwitcher {
   readonly appsList: Ref<AppDescriptor[]>;
-  getApps: () => void;
+  getApps: () => Promise<void>;
   switchApp: (app: AppDescriptor) => void;
 }
 

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -4,7 +4,7 @@
     capture
   >
     <router-view
-      v-slot="{ Component }: { Component: any }"
+      v-slot="{ Component }"
       :key="route.path"
       @vue:before-unmount="reset"
     >
@@ -19,14 +19,10 @@
         :maximized="findStateById(0)"
         :blades="blades"
         :param="resolveParam"
+        :error="error"
         @expand:blade="handleMaximizeBlade(0, true)"
         @collapse:blade="handleMaximizeBlade(0, false)"
       >
-        <template
-          v-if="error"
-          #error
-          >{{ error }}</template
-        >
       </component>
     </router-view>
   </ErrorInterceptor>
@@ -48,17 +44,14 @@
         :expanded="i === blades.length - 1"
         :maximized="findStateById(blade.idx)"
         :options="blade.options"
+        :error="error"
+        :blades="blades"
         @close:blade="onBladeClose(i)"
         @close:children="$emit('onClose', i + 1)"
         @parent:call="$emit('onParentCall', { id: i, args: $event })"
         @expand:blade="handleMaximizeBlade(blade.idx, true)"
         @collapse:blade="handleMaximizeBlade(blade.idx, false)"
       >
-        <template
-          v-if="error"
-          #error
-          >{{ error }}</template
-        >
       </component>
     </ErrorInterceptor>
   </template>

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -37,7 +37,7 @@ interface IUseBladeNavigation {
     onOpen,
     onClose,
   }: IBladeEvent<Blade>) => void;
-  closeBlade: (index: number) => void;
+  closeBlade: (index: number) => Promise<boolean>;
   onParentCall: (index: number, args: IParentCallArgs) => void;
 }
 
@@ -55,7 +55,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
   const navigationInstance =
     (instance && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
 
-  const lastBladeUrl = ref();
   watch(
     navigationInstance.blades,
     (newVal) => {
@@ -104,16 +103,15 @@ export function useBladeNavigation(): IUseBladeNavigation {
         await router.push(bladeComponent.url);
       }
     } else {
-      let isPrevented;
       if (existingChild === undefined) {
         bladeComponent.idx = index ? index + 1 : 1;
       } else if (existingChild) {
-        isPrevented = await closeBlade(
+        await closeBlade(
           navigationInstance.blades.value.findIndex((x: IBladeContainer) => x.idx === existingChild.idx)
         );
         bladeComponent.idx = existingChild.idx;
       }
-      if (!isPrevented) {
+      if (!isPrevented.value) {
         await addBlade(bladeComponent, param, options, onOpen, onClose, index);
       }
     }
@@ -133,7 +131,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (result === false) {
             isPrevented.value = true;
             console.debug(`[@vc-shell/framework#useBladeNavigation] - Navigation is prevented`);
-            return isPrevented;
+            return isPrevented.value;
           }
         }
       }
@@ -202,7 +200,6 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
   function addEntryToLocation(params: string) {
     history.pushState({}, null, "#" + params);
-    lastBladeUrl.value = params;
   }
 
   async function clearParentData() {

package/shared/components/change-password/change-password.vue

@@ -0,0 +1,167 @@
+<template>
+  <VcPopup
+    variant="small"
+    :title="$t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
+    @close="$emit('close')"
+  >
+    <div class="tw-p-3">
+      <VcForm>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+          name="current"
+          rules="required|min:6"
+          :model-value="form.currentPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="passwordField"
+            v-model="form.currentPassword"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+          name="new_pass"
+          rules="required|min:6"
+          :model-value="form.password"
+        >
+          <VcInput
+            v-bind="field"
+            ref="newPasswordField"
+            v-model="form.password"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+          name="confirm_pass"
+          rules="required|min:6"
+          :model-value="form.confirmPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="confirmPasswordField"
+            v-model="form.confirmPassword"
+            class="tw-mb-4"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+          <span
+            v-if="$isDesktop.value"
+            class="tw-grow tw-basis-0"
+          ></span>
+          <VcButton
+            :outline="true"
+            class="tw-mr-3"
+            @click="$emit('close')"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.CANCEL") }}
+          </VcButton>
+          <VcButton
+            :disabled="loading || !form.isValid || isDisabled"
+            @click="changePassword"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.SAVE") }}
+          </VcButton>
+        </div>
+
+        <VcHint
+          v-for="(err, i) in form.errors"
+          :key="i"
+          class="tw-mt-3 !tw-text-[#f14e4e]"
+        >
+          <!-- TODO: stylizing-->
+          {{
+            (err as IIdentityError).code ? $t(`COMPONENTS.CHANGE_PASSWORD.ERRORS.${(err as IIdentityError).code}`) : err
+          }}
+        </VcHint>
+      </VcForm>
+    </div>
+  </VcPopup>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, reactive, computed } from "vue";
+import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
+import { VcInput, VcHint, VcButton, VcPopup, VcForm } from "./../../../ui/components";
+import { IIdentityError } from "./../../../core/api";
+import { useUser } from "./../../../core/composables/useUser";
+
+interface IChangePassForm {
+  isValid: boolean;
+  errors: IIdentityError[] | string[];
+  currentPassword: string;
+  password: string;
+  confirmPassword: string;
+}
+
+interface Emits {
+  (event: "close"): void;
+}
+
+const emit = defineEmits<Emits>();
+const { changeUserPassword, loading, validatePassword } = useUser();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const form = reactive<IChangePassForm>({
+  isValid: false,
+  errors: [],
+  currentPassword: "",
+  password: "",
+  confirmPassword: "",
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+async function changePassword() {
+  const result = await changeUserPassword(form.currentPassword, form.password);
+  if (result.succeeded) {
+    emit("close");
+  } else {
+    form.errors = result.errors;
+    form.isValid = form.errors.length == 0;
+  }
+}
+
+function validate() {
+  nextTick(async () => {
+    if (form.password || form.confirmPassword) {
+      form.errors = (await validatePassword(form.password)).errors;
+      if (form.confirmPassword !== form.password) {
+        (form.errors as IIdentityError[]).push({ code: "Repeat-password" });
+      }
+      if (form.confirmPassword === form.currentPassword && form.password === form.currentPassword) {
+        (form.errors as IIdentityError[]).push({ code: "Equal-passwords" });
+      }
+      form.isValid = form.errors.length == 0;
+    }
+  });
+}
+</script>

package/shared/components/change-password/index.ts

@@ -0,0 +1,10 @@
+import _ChangePassword from "./change-password.vue";
+
+export const ChangePassword = _ChangePassword as typeof _ChangePassword;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    ChangePassword: typeof ChangePassword;
+  }
+}

package/shared/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./app-switcher";
+export * from "./blade-navigation";
+export * from "./notifications";
+export * from "./error-interceptor";
+export * from "./popup-handler";
+export * from "./change-password";
+export * from "./language-selector";
+export * from "./user-dropdown-button";

package/shared/components/language-selector/index.ts

@@ -0,0 +1,10 @@
+import _LanguageSelector from "./language-selector.vue";
+
+export const LanguageSelector = _LanguageSelector as typeof _LanguageSelector;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    LanguageSelector: typeof LanguageSelector;
+  }
+}

package/shared/components/language-selector/language-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-on-click-outside="
+      () => {
+        isDropActive = false;
+      }
+    "
+    class="tw-relative"
+    :title="title"
+    @click.stop="isDropActive = !isDropActive"
+  >
+    <div
+      :class="[
+        {
+          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10000]':
+            isDropActive,
+        },
+        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[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)]',
+      ]"
+    >
+      <VcIcon
+        icon="fas fa-globe"
+        size="xl"
+      ></VcIcon>
+    </div>
+    <div
+      v-if="isDropActive"
+      class="tw-absolute tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] tw-w-min tw-z-[10000]"
+    >
+      <div
+        v-for="(lang, i) in languageItems"
+        :key="i"
+        class="tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-white tw-cursor-pointer hover:tw-bg-[#eff7fc]"
+        @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+      >
+        {{ lang.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "./../../../ui/components";
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+export interface Props {
+  title: string;
+  value: string;
+  languageItems: { lang: string; title: string; clickHandler: (lang: string) => void }[];
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  value: "",
+  languageItems: () => [],
+});
+
+const isDropActive = ref(false);
+</script>

package/shared/components/notifications/core/notification.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from "vue";
-import { NotificationOptions } from "../types";
+import { InternalNotificationOptions, NotificationOptions } from "../types";
 import { useContainer } from "../composables";
 
 const {
@@ -18,7 +18,7 @@ function checkPending(limit?: number) {
   return limitCount > 0 && visibleCount + pending.items.length >= limitCount;
 }
 
-function resolvePending(options: NotificationOptions) {
+function resolvePending(options: InternalNotificationOptions) {
   if (checkPending(options.limit)) {
     pending.items.push({
       notificationId: options.notificationId,
@@ -27,7 +27,7 @@ function resolvePending(options: NotificationOptions) {
   }
 }
 
-function showNotification(content: string, options: NotificationOptions) {
+function showNotification(content: string, options: InternalNotificationOptions) {
   options = mergeProps(defaultOptions as Record<string, unknown>, options as Record<string, unknown>);
 
   if (

package/shared/components/notifications/types/index.ts

@@ -7,10 +7,13 @@ export interface NotificationOptions {
   content?: string;
   notificationId?: number | string;
   type?: NotificationType;
-  closeNotification?(): void;
   onOpen?: <T>(payload: T) => void;
   onClose?: <T>(payload: T) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload?: string | Record<string, any>;
   updateId?: string | number;
 }
+
+export interface InternalNotificationOptions extends NotificationOptions {
+  closeNotification?(): void;
+}

package/shared/components/user-dropdown-button/index.ts

@@ -0,0 +1,10 @@
+import _UserDropdownButton from "./user-dropdown-button.vue";
+
+export const UserDropdownButton = _UserDropdownButton as typeof _UserDropdownButton;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    UserDropdownButton: typeof UserDropdownButton;
+  }
+}

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-on-click-outside="onClose"
+    class="user-dropdown-button"
+    :class="{
+      'user-dropdown-button_active': accountMenuVisible,
+      'user-dropdown-button_no-pointer': $isMobile.value,
+    }"
+    @click.stop="toggleAccountMenuVisible"
+  >
+    <div
+      class="user-dropdown-button__avatar"
+      :style="{ 'background-image': `url(${avatar})` }"
+    ></div>
+    <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
+      <div class="user-dropdown-button__name tw-truncate">
+        {{ name }}
+      </div>
+      <div class="user-dropdown-button__role">
+        {{ role }}
+      </div>
+    </div>
+    <div
+      v-if="menuItems && menuItems.length"
+      class="user-dropdown-button__chevron"
+    >
+      <VcIcon
+        icon="fas fa-chevron-down"
+        size="xl"
+      ></VcIcon>
+    </div>
+    <div
+      v-if="menuItems && accountMenuVisible"
+      class="user-dropdown-button__menu"
+      @click.stop="accountMenuVisible = false"
+    >
+      <div
+        v-for="(item, i) in menuItems"
+        :key="`menu_item_${i}`"
+        class="user-dropdown-button__menu-item"
+        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler() : null"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { BladeMenu } from "./../../../core/types";
+
+export interface Props {
+  avatar: string;
+  name: string;
+  role: string;
+  menuItems?: BladeMenu[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  menuItems: () => [],
+});
+
+const accountMenuVisible = ref(false);
+
+const toggleAccountMenuVisible = () => {
+  if (props.menuItems && props.menuItems.length) {
+    accountMenuVisible.value = !accountMenuVisible.value;
+  }
+};
+
+const onClose = () => {
+  accountMenuVisible.value = false;
+};
+</script>
+
+<style lang="scss">
+.user-dropdown-button {
+  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-divider-color)] tw-px-4 tw-cursor-pointer
+    tw-relative tw-flex tw-justify-between tw-items-center tw-h-full;
+
+  &_no-pointer {
+    @apply tw-cursor-default;
+  }
+
+  &:hover,
+  &_active {
+    @apply tw-bg-[color:var(--app-bar-toolbar-icon-background-hover)];
+  }
+
+  &__avatar {
+    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--app-bar-account-info-role-color)]
+      tw-bg-cover tw-bg-center tw-shrink-0;
+  }
+
+  &__name {
+    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-name-color)];
+  }
+
+  &__role {
+    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-role-color)];
+  }
+
+  &__chevron {
+    @apply tw-text-[#7e8e9d] [transition:transform_0.2s_ease] [transition:color_0.2s_ease];
+  }
+
+  &:hover &__chevron {
+    @apply tw-text-[color:#34414f];
+  }
+
+  &_active &__chevron {
+    @apply -tw-scale-y-100;
+  }
+
+  &__menu {
+    @apply tw-absolute -tw-left-px tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-z-[10000] tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)];
+
+    &-item {
+      @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-bg-white hover:tw-bg-[#eff7fc];
+    }
+  }
+}
+</style>