@vc-shell/framework 1.0.147 → 1.0.149

package/shared/components/blade-navigation/plugin.ts

@@ -1,5 +1,5 @@
 import { Router } from "vue-router";
-import { App, inject } from "vue";
+import { App, inject, ref } from "vue";
 import * as components from "./components";
 import { BladeNavigationPlugin, BladeRoutesRecord } from "./types";
 
@@ -25,6 +25,7 @@ export const VcBladeNavigationComponent = {
     const bladeNavigationPlugin: BladeNavigationPlugin = {
       router: args.router,
       internalRoutes,
+      blades: ref([]),
     };
 
     app.config.globalProperties.$bladeNavigationPlugin = bladeNavigationPlugin;

package/shared/components/blade-navigation/types/index.ts

@@ -8,7 +8,7 @@ import {
   VNode,
   ComponentInternalInstance,
   VNodeTypes,
-  ComponentPublicInstance,
+  Ref,
 } from "vue";
 import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
 import { MenuItemConfig } from "../../../../core/types";
@@ -27,6 +27,7 @@ export type CoreDynamicBladeComponentProps = {
 
 export type CoreBladeAdditionalSettings = {
   url?: `/${string}`;
+  routable?: boolean;
   permissions?: string | string[];
   isWorkspace?: boolean;
   name?: string;
@@ -75,6 +76,7 @@ export interface IBladeEvent<T extends Component = Component> {
 export interface BladeNavigationPlugin {
   router: Router;
   internalRoutes: BladeRoutesRecord[];
+  blades: Ref<BladeVNode[]>;
 }
 
 export interface BladeRoutesRecord {
@@ -90,10 +92,10 @@ export interface BladeVNode extends VNode {
     navigation: {
       onOpen?: () => void;
       onClose?: () => void;
+      onBeforeClose?: () => Promise<boolean | undefined>;
+      instance: Ref<CoreBladeExposed | undefined | null>;
       fullPath: string;
-      bladePath?: string;
       idx: number;
-      uniqueRouteKey: string;
     };
     onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
     onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
@@ -101,11 +103,3 @@ export interface BladeVNode extends VNode {
     CoreBladeComponentProps;
   type: VNodeTypes & BladeInstanceConstructor;
 }
-
-export interface BladeRouteRecordLocationNormalized extends RouteRecordNormalized {
-  components: Record<string, BladeVNode>;
-  instances: Record<
-    string,
-    ComponentPublicInstance<CoreBladeExposed, any, CoreBladeExposed, any, CoreBladeExposed, any, any, any, any, any>
-  >;
-}

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

@@ -44,17 +44,19 @@ import { VcIcon } from "./../../../ui/components";
 import { ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { useI18n } from "vue-i18n";
+import { useLanguages } from "../../../core/composables";
 
-const { locale: currentLocale, availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
-
+const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
+const { setLocale } = useLanguages();
 const isDropActive = ref(false);
 
-const languageItems = availableLocales.map((locale: string) => ({
-  lang: locale,
-  title: (getLocaleMessage(locale) as { language_name: string }).language_name,
-  clickHandler(lang: string) {
-    currentLocale.value = lang;
-    localStorage.setItem("VC_LANGUAGE_SETTINGS", lang);
-  },
-}));
+const languageItems = availableLocales
+  .map((locale: string) => ({
+    lang: locale,
+    title: (getLocaleMessage(locale) as { language_name: string }).language_name,
+    clickHandler(lang: string) {
+      setLocale(lang);
+    },
+  }))
+  .filter((item) => item.title);
 </script>

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -45,7 +45,7 @@
     >
       <div
         v-if="$isMobile.value"
-        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4"
+        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
       >
         <VcIcon
           icon="fas fa-times"

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

@@ -4,40 +4,42 @@
     class="user-dropdown-button"
     :class="{
       'user-dropdown-button_active': accountMenuVisible,
-      'user-dropdown-button_no-pointer': $isMobile.value,
     }"
     @click.stop="toggleAccountMenuVisible"
   >
-    <div
-      v-if="avatarUrl"
-      class="user-dropdown-button__avatar"
-      :style="imageHandler"
-    ></div>
-    <VcIcon
-      v-else
-      icon="fas fa-user-circle"
-      size="xxl"
-      class="tw-text-[color:var(--app-bar-button-color)]"
-    />
-    <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
-      <div class="user-dropdown-button__name tw-truncate">
-        {{ name || user?.userName }}
+    <div class="user-dropdown-button__wrap tw-flex tw-justify-between tw-items-center tw-flex-auto">
+      <div
+        v-if="avatarUrl"
+        class="user-dropdown-button__avatar"
+        :style="imageHandler"
+      ></div>
+      <VcIcon
+        v-else
+        icon="fas fa-user-circle"
+        size="xxl"
+        class="tw-text-[color:var(--app-bar-button-color)]"
+      />
+      <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
+        <div class="user-dropdown-button__name tw-truncate">
+          {{ name || user?.userName }}
+        </div>
+        <div class="user-dropdown-button__role">
+          {{
+            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
+            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+          }}
+        </div>
       </div>
-      <div class="user-dropdown-button__role">
-        {{
-          (role && $t(`SHELL.USER.ROLE.${role}`)) || (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-        }}
+      <div
+        v-if="menu && menu.length"
+        class="user-dropdown-button__chevron"
+      >
+        <VcIcon
+          icon="fas fa-chevron-down"
+          size="xl"
+        ></VcIcon>
       </div>
     </div>
-    <div
-      v-if="menu && menu.length && !$isMobile.value"
-      class="user-dropdown-button__chevron"
-    >
-      <VcIcon
-        icon="fas fa-chevron-down"
-        size="xl"
-      ></VcIcon>
-    </div>
     <div
       v-if="menu && accountMenuVisible"
       class="user-dropdown-button__menu"
@@ -56,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, inject, ref } from "vue";
+import { computed, ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { useUser } from "../../../core/composables";
 import { useRouter } from "vue-router";
@@ -65,6 +67,7 @@ import { VcIcon } from "../../../ui/components";
 import { BladeMenu } from "../../../core/types";
 import { usePopup } from "../popup-handler/composables/usePopup";
 import { ChangePassword } from "../change-password";
+import { useBladeNavigation } from "..";
 
 export interface Props {
   avatarUrl?: string | undefined;
@@ -76,8 +79,6 @@ const props = withDefaults(defineProps<Props>(), {
   menuItems: () => [],
 });
 
-const isMobile = inject("isMobile") as Ref<boolean>;
-
 const { user, signOut } = useUser();
 const router = useRouter();
 const { t } = useI18n({ useScope: "global" });
@@ -85,7 +86,7 @@ const { t } = useI18n({ useScope: "global" });
 const { open } = usePopup({
   component: ChangePassword,
 });
-
+const { closeBlade } = useBladeNavigation();
 const accountMenuVisible = ref(false);
 const menu = computed(() => [
   ...props.menuItems,
@@ -98,14 +99,18 @@ const menu = computed(() => [
   {
     title: t("SHELL.ACCOUNT.LOGOUT"),
     async clickHandler() {
-      await signOut();
-      router.push({ name: "Login" });
+      const isPrevented = await closeBlade(0);
+
+      if (!isPrevented) {
+        await signOut();
+        router.push({ name: "Login" });
+      }
     },
   },
 ]);
 
 const toggleAccountMenuVisible = () => {
-  if (menu.value && menu.value.length && !isMobile.value) {
+  if (menu.value && menu.value.length) {
     accountMenuVisible.value = !accountMenuVisible.value;
   }
 };
@@ -125,11 +130,7 @@ const imageHandler = computed(() => {
 <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;
-  }
+    tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
 
   &:hover,
   &_active {
@@ -168,5 +169,19 @@ const imageHandler = computed(() => {
       @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];
     }
   }
+
+  .vc-app_mobile & {
+    &__wrap {
+      height: var(--app-bar-height);
+    }
+
+    &__menu {
+      @apply tw-static tw-shadow-none #{!important};
+    }
+
+    &__menu-item {
+      @apply tw-border-none #{!important};
+    }
+  }
 }
 </style>

package/shared/modules/dynamic/factories/types/index.ts

@@ -79,7 +79,7 @@ export interface DetailsBaseBladeScope extends BaseBladeScope {
     currentLocale: Ref<string>;
     languages: Ref<string[]>;
     setLocale: (locale: string) => void;
-    localesOptions: Ref<{ label: string; value: string }[]>;
+    localesOptions: Ref<{ label: string | undefined; value: string }[]>;
     getLanguages: AsyncAction<void, void>;
   };
   dynamicProperties?: {

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -7,6 +7,7 @@ import { setModel } from "./setters";
 import { unwrapInterpolation } from "./unwrapInterpolation";
 import { DetailsBladeContext } from "../factories";
 import { safeIn } from "./safeIn";
+import { i18n } from "./../../../../core/plugins/i18n";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -41,6 +42,8 @@ function nodeBuilder<
 }): VNode {
   if (!controlSchema) throw new Error("There is no controlSchema provided");
 
+  const { t } = i18n.global;
+
   const name = controlSchema.id;
   const rules = (safeIn("rules", controlSchema) && controlSchema.rules) || undefined;
   const placeholder = (safeIn("placeholder", controlSchema) && controlSchema.placeholder) || undefined;
@@ -99,15 +102,15 @@ function nodeBuilder<
 
   const baseProps: IControlBaseProps = reactive({
     key: `${parentId}`,
-    label,
+    label: unref(computed(() => (label ? t(label) : undefined))),
     disabled,
     name,
     rules,
-    placeholder,
+    placeholder: unref(computed(() => (placeholder ? t(placeholder) : undefined))),
     required,
     modelValue,
     "onUpdate:modelValue": onUpdateModelValue,
-    tooltip,
+    tooltip: unref(computed(() => (tooltip ? t(tooltip) : undefined))),
     multilanguage,
   });
 

package/shared/modules/dynamic/helpers/override.ts

@@ -1,5 +1,5 @@
 import * as _ from "lodash-es";
-import { DynamicSchema, OverridesSchema } from "../types";
+import { DynamicSchema, OverridesRemove, OverridesSchema } from "../types";
 import "core-js/actual/array/to-spliced";
 
 export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
@@ -43,22 +43,40 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
   );
 };
 
-const removeHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
+const removeHelper = (overrides: OverridesSchema, schemaCopy: Record<string, DynamicSchema>) => {
   return Object.entries(schemaCopy).reduce(
     (obj, [name, schema]) => {
       const clonedSchema = _.cloneDeep(schema);
-      overrides.remove
-        ?.filter((x) => clonedSchema.settings.id === x.id)
-        .forEach(({ path }) => {
-          if (path) {
-            const parentPath = path.slice(0, path.lastIndexOf("["));
-            _.unset(clonedSchema, path);
-            _.update(clonedSchema, parentPath, _.compact);
-          }
-        }, {});
+      sortByMaxIndexPath(overrides.remove?.filter((x) => schema.settings.id === x.id)).forEach(({ path }) => {
+        if (path) {
+          removePath(clonedSchema, path);
+        }
+      });
       obj[name] = clonedSchema;
       return obj;
     },
     {} as Record<string, DynamicSchema>,
   );
 };
+
+function removePath(obj: DynamicSchema, path: string) {
+  const parentPath = path.slice(0, path.lastIndexOf("["));
+  _.unset(obj, path);
+  _.update(obj, parentPath, _.compact);
+}
+
+// this part sorts paths with indexes in descending order to avoid deleting items with already changed indexes
+function sortByMaxIndexPath(items: { path: string }[] | undefined) {
+  return (items || []).sort((a, b) => getMaxIndexFromPath(b.path) - getMaxIndexFromPath(a.path));
+}
+
+function getMaxIndexFromPath(path: string): number {
+  const matches = path.match(/\[(\d+)\]/g);
+
+  if (matches) {
+    const indexes = matches.map((match) => parseInt(match.slice(1, -1), 10));
+    return Math.max(...indexes);
+  }
+
+  return Infinity;
+}

package/shared/modules/dynamic/index.ts

@@ -72,6 +72,7 @@ const register = (
     name: bladeName,
     isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
     menuItem: ("menuItem" in json.settings && json.settings.menuItem) ?? undefined,
+    routable: json.settings.routable ?? true,
     setup: (props: ComponentProps<typeof bladeComponent>, ctx) =>
       (bladeComponent?.setup &&
         bladeComponent.setup(

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -50,7 +50,9 @@
           >
             <component
               :is="item"
+              :ref="(el: HTMLElement) => widgetsRefs.set({ component: item, el })"
               v-model="bladeContext"
+              @click="setActiveWidget(item)"
             ></component>
           </div>
         </div>
@@ -75,9 +77,10 @@ import {
   onBeforeMount,
   ComputedRef,
   type Component,
+  ConcreteComponent,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
-import { reactiveComputed, useMounted } from "@vueuse/core";
+import { reactiveComputed, useMounted, useTemplateRefsList } from "@vueuse/core";
 import {
   DetailsBladeContext,
   DetailsBaseBladeScope,
@@ -85,11 +88,11 @@ import {
   UseDetails,
   usePopup,
   useBladeNavigation,
+  CoreBladeExposed,
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
 import { VcSelect } from "../../../../ui/components";
 import { toolbarReducer } from "../helpers/toolbarReducer";
-import { onBeforeRouteLeave } from "vue-router";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
 import * as _ from "lodash-es";
 import { IBladeToolbar } from "../../../../core/types";
@@ -123,7 +126,9 @@ const { t } = useI18n({ useScope: "global" });
 
 const { showConfirmation } = usePopup();
 
-const { currentBladeNavigationData } = useBladeNavigation();
+const { onBeforeClose } = useBladeNavigation();
+
+const widgetsRefs = useTemplateRefsList<{ el: HTMLDivElement; component: ConcreteComponent }>();
 
 const { loading, item, validationState, scope, load, remove, saveChanges, bladeTitle } = props.composables
   ? (props.composables?.[props.model?.settings?.composable ?? ""]({ emit, props, mounted: useMounted() }) as UseDetails<
@@ -143,6 +148,7 @@ const { loading, item, validationState, scope, load, remove, saveChanges, bladeT
 
 const title = ref();
 const isReady = ref(false);
+const activeWidgetExposed = ref<CoreBladeExposed>();
 
 watch(
   () => bladeTitle?.value,
@@ -245,6 +251,11 @@ const toolbarComputed =
             emit("parent:call", {
               method: "reload",
             });
+
+            emit("parent:call", {
+              method: "updateActiveWidgetCount",
+            });
+
             if (!props.param) {
               emit("close:blade");
             }
@@ -264,6 +275,10 @@ const toolbarComputed =
               emit("parent:call", {
                 method: "reload",
               });
+              emit("parent:call", {
+                method: "updateActiveWidgetCount",
+              });
+
               emit("close:blade");
             }
           }
@@ -275,24 +290,24 @@ const toolbarComputed =
     context: bladeContext.value,
   });
 
-onBeforeMount(async () => {
-  if (props.composables) await init();
-});
+async function setActiveWidget(widget: string | ConcreteComponent) {
+  const component = typeof widget === "string" ? resolveComponent(widget) : widget;
+
+  if (typeof component !== "string") {
+    await nextTick(
+      () => (activeWidgetExposed.value = widgetsRefs.value.find((x) => _.isEqual(x.component, component))?.el),
+    );
+  }
+}
 
-onBeforeRouteLeave(async (to) => {
+async function updateActiveWidgetCount() {
   if (
-    (settings.value?.url
-      ? currentBladeNavigationData.value?.fullPath && !to.path.includes(currentBladeNavigationData.value?.fullPath)
-      : true) &&
-    unref(validated)
+    activeWidgetExposed.value?.updateActiveWidgetCount &&
+    typeof activeWidgetExposed.value?.updateActiveWidgetCount === "function"
   ) {
-    return await showConfirmation(
-      unref(
-        computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.CLOSE_CONFIRMATION`)),
-      ),
-    );
+    await activeWidgetExposed.value.updateActiveWidgetCount();
   }
-});
+}
 
 async function init() {
   if (props.param) {
@@ -304,8 +319,23 @@ async function init() {
   });
 }
 
+onBeforeMount(async () => {
+  if (props.composables) await init();
+});
+
+onBeforeClose(async () => {
+  if (unref(validated)) {
+    return await showConfirmation(
+      unref(
+        computed(() => t(`${settings.value?.localizationPrefix.trim().toUpperCase()}.PAGES.ALERTS.CLOSE_CONFIRMATION`)),
+      ),
+    );
+  }
+});
+
 defineExpose({
   title: bladeTitle ?? "",
+  updateActiveWidgetCount,
   ...scope?.value,
 });
 </script>

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -345,7 +345,7 @@ const toolbarComputed =
       },
       removeItems: {
         async clickHandler() {
-          removeItems();
+          await removeItems();
         },
         disabled: computed(() => !selectedIds.value?.length),
         isVisible: isDesktop.value,
@@ -472,6 +472,9 @@ async function removeItems() {
         }
       }
     }
+    emit("parent:call", {
+      method: "updateActiveWidgetCount",
+    });
     await reload();
   }
 }
@@ -590,9 +593,16 @@ function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] })
   }
 }
 
+function updateActiveWidgetCount() {
+  emit("parent:call", {
+    method: "updateActiveWidgetCount",
+  });
+}
+
 defineExpose({
   reload,
   title,
+  updateActiveWidgetCount,
   ...scope?.value,
 });
 </script>

package/shared/modules/dynamic/types/index.ts

@@ -42,6 +42,10 @@ export type SettingsSchema = SettingsGrid | SettingsDetails;
 
 export interface SettingsGrid extends SettingsBase {
   component: "DynamicBladeList";
+  /**
+   * Blade default header title
+   */
+  titleTemplate: string;
 }
 
 export interface SettingsDetails extends SettingsBase {
@@ -58,6 +62,15 @@ export interface SettingsBase {
    * Blade url
    */
   url?: string;
+  /**
+   * Determines whether you can navigate to the blade directly
+   * without parameters or options.
+   *
+   * @example Blade is not workspace and use context (passed `options` or `params` in openBlade method) to load data - then set `routable` to `false`
+   *
+   * @default true
+   */
+  routable?: boolean;
   /**
    * Locale key for VueI18n locale files
    */
@@ -66,10 +79,6 @@ export interface SettingsBase {
    * Required component id
    */
   id: string;
-  /**
-   * Blade default header title
-   */
-  titleTemplate: string;
   /**
    * Composable to use at {@link SettingsBase.model } blade component view
    */

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="tw-flex tw-flex-row tw-justify-between tw-items-center">
-    <div class="tw-flex-nowrap tw-font-bold tw-relative tw-truncate">
+  <div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative">
+    <div class="tw-flex-nowrap tw-font-bold tw-truncate">
       <span class="tw-truncate">
         <slot></slot>
       </span>
@@ -9,26 +9,25 @@
         class="tw-text-[color:var(--label-required-color)] tw-ml-1"
         >*</span
       >
-
+    </div>
+    <span
+      v-if="$slots['tooltip']"
+      class="tw-grow tw-basis-0 tw-ml-1"
+    >
+      <VcIcon
+        class="tw-text-[color:var(--label-tooltip-color)]"
+        :icon="tooltipIcon"
+        size="s"
+        @mouseenter="tooltipVisible = true"
+        @mouseleave="tooltipVisible = false"
+      ></VcIcon>
       <span
-        v-if="$slots['tooltip']"
-        class="tw-grow tw-basis-0 tw-ml-1"
+        v-if="tooltipVisible"
+        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
       >
-        <VcIcon
-          class="tw-text-[color:var(--label-tooltip-color)]"
-          :icon="tooltipIcon"
-          size="s"
-          @mouseenter="tooltipVisible = true"
-          @mouseleave="tooltipVisible = false"
-        ></VcIcon>
-        <span
-          v-if="tooltipVisible"
-          class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
-        >
-          <slot name="tooltip"></slot>
-        </span>
+        <slot name="tooltip"></slot>
       </span>
-    </div>
+    </span>
     <div
       v-if="multilanguage"
       class="tw-text-[color:var(--app-menu-item-icon-color)] tw-shrink-0"

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

@@ -59,6 +59,7 @@
         <div class="vc-multivalue__field vc-multivalue__field_dictionary tw-grow tw-basis-0 tw-p-2">
           <VcButton
             small
+            :disabled="disabled"
             @click.stop="toggleDropdown"
             >Add +</VcButton
           >