@vc-shell/framework 1.0.69 → 1.0.70

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

@@ -10,13 +10,13 @@
       ]"
       :space-between="spaceBetweenSlides"
       :navigation="buttonsList as any"
-      :slidesPerView="slidesPerView as any"
-      :resizeObserver="true"
+      :slides-per-view="slidesPerView as any"
+      :resize-observer="true"
     >
       <swiper-slide
-        :swiper-ref="SwiperCore"
         v-for="(slide, i) in slides"
         :key="i"
+        :swiper-ref="SwiperCore"
       >
         <slot :slide="slide"></slot>
       </swiper-slide>

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

@@ -15,7 +15,7 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
       >
         <span v-html="tooltip"></span>
       </template>
@@ -28,8 +28,8 @@
         :placeholder="placeholder"
         :value="modelValue"
         :disabled="disabled"
-        @input="onInput"
         :maxlength="maxchars"
+        @input="onInput"
       ></textarea>
     </div>
 

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

@@ -15,8 +15,8 @@
 
       <!-- Title -->
       <div
-        class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium"
         v-if="title"
+        class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium"
       >
         {{ title }}
       </div>
@@ -33,8 +33,8 @@
 
       <!-- Show back link when more than one blade is opened -->
       <VcLink
-        class="tw-ml-3"
         v-else-if="blades.length > 1"
+        class="tw-ml-3"
         @click="$emit('backlink:click')"
       >
         <VcIcon
@@ -57,17 +57,16 @@
         <template v-if="item.isVisible === undefined || item.isVisible">
           <!-- Draw custom component is it is passed -->
           <component
-            v-if="item.component"
             :is="item.component"
-            v-bind="item.bladeOptions"
-            :isAccent="item.isAccent"
+            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)]"
-            :class="{ 'vc-app-bar__button_accent': item.isAccent }"
             :title="item.title as string"
             @click="$emit('button:click', item)"
           >
@@ -75,6 +74,12 @@
               :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>
@@ -103,9 +108,17 @@ export interface Props {
   title?: string;
 }
 
+export interface Emits {
+  (event: "logo:click"): void;
+  (event: "backlink:click"): void;
+  (event: "toolbarbutton:click"): void;
+  (event: "menubutton:click"): void;
+  (event: "button:click", item: IBladeToolbar): void;
+}
+
 defineProps<Props>();
 
-defineEmits(["logo:click", "backlink:click", "toolbarbutton:click", "menubutton:click"]);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">
@@ -121,12 +134,4 @@ defineEmits(["logo:click", "backlink:click", "toolbarbutton:click", "menubutton:
   --app-bar-product-name-color: #34414f;
   --app-bar-product-name-size: 20px;
 }
-
-.vc-app-bar {
-  &__button {
-    &_accent:before {
-      @apply tw-content-[""] 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];
-    }
-  }
-}
 </style>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -2,8 +2,8 @@
   <div
     class="vc-app-menu-item"
     :class="[
-      { 'vc-app-menu-item_active': isActive && !Object.keys(children).length },
-      { 'vc-app-menu-item_no-hover': Object.keys(children).length },
+      { 'vc-app-menu-item_active': isActive && !children.length },
+      { 'vc-app-menu-item_no-hover': children.length },
     ]"
     @click="$emit('onClick')"
   >
@@ -28,21 +28,21 @@
     <div class="vc-app-menu-item__title">
       {{ title }}
       <VcIcon
+        v-if="children.length"
         class="vc-app-menu-item__title-icon"
         icon="fas fa-chevron-down"
         size="xs"
-        v-if="Object.keys(children).length"
       ></VcIcon>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ExtendedComponent } from "./../../../../../../../../../shared";
+import { BladeMenu } from "./../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 
 export interface Props {
   isActive?: boolean;
-  children?: ExtendedComponent;
+  children?: BladeMenu[];
   sticky?: boolean;
   icon: string;
   title: string;
@@ -53,11 +53,7 @@ export interface Emits {
 }
 
 withDefaults(defineProps<Props>(), {
-  isActive: false,
-  children: () => ({}),
   sticky: true,
-  icon: "",
-  title: "",
 });
 
 defineEmits<Emits>();

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -2,17 +2,17 @@
   <div>
     <template v-if="component && component.url">
       <router-link
+        v-slot="{ isExactActive }"
         :to="component.url"
         custom
-        v-slot="{ isExactActive, navigate }"
       >
         <vc-app-menu-link
-          :isActive="isExactActive"
+          :is-active="isExactActive"
           :children="children"
           :sticky="sticky"
           :icon="icon as string"
           :title="title"
-          @onClick="onMenuItemClick(() => navigate($event))"
+          @on-click="onMenuItemClick"
         />
       </router-link>
     </template>
@@ -22,33 +22,33 @@
         :sticky="sticky"
         :icon="icon as string"
         :title="title"
-        @onClick="onMenuItemClick"
+        @on-click="onMenuItemClick"
       />
 
       <!-- Nested menu items -->
       <div
-        class="vc-app-menu-item__child"
         v-if="isOpened"
+        class="vc-app-menu-item__child"
       >
         <template
           v-for="(nested, i) in children"
           :key="i"
         >
           <router-link
+            v-slot="{ isActive }"
             :to="nested.component.url"
             custom
-            v-slot="{ isActive, navigate }"
           >
             <div
+              v-if="nested.isVisible === undefined || nested.isVisible"
+              :key="i"
               :class="[
                 {
                   'vc-app-menu-item__child-item_active': isActive,
                 },
                 'vc-app-menu-item__child-item',
               ]"
-              v-if="nested.isVisible === undefined || nested.isVisible"
-              :key="i"
-              @click="$emit('child:click', { item: nested, navigationCb: navigate })"
+              @click="$emit('child:click', { item: nested })"
             >
               {{ nested.title }}
             </div>
@@ -61,45 +61,36 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import { IBladeToolbar, IMenuItems } from "./../../../../../../../../core/types";
+import { BladeMenu } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
-import { NavigationFailure, useRoute } from "vue-router";
-import { ExtendedComponent } from "./../../../../../../../../shared";
+import { useRoute } from "vue-router";
+import { BladeConstructor } from "./../../../../../../../../shared";
 
 export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
-  component?: ExtendedComponent;
-  bladeOptions?: Record<string, unknown>;
-  clickHandler?: () => void;
+  component?: BladeConstructor;
   icon?: string | (() => string);
   title?: string;
-  children?: IBladeToolbar[];
-  isCollapsed?: boolean;
+  children?: BladeMenu[];
 }
 
 export interface Emits {
-  (event: "click", navigationCb: () => Promise<void | NavigationFailure>): void;
+  (event: "click"): void;
   (
     event: "child:click",
     {
       item,
-      navigationCb,
     }: {
-      item: IMenuItems;
-      navigationCb: () => Promise<void | NavigationFailure>;
+      item: BladeMenu;
     }
   ): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   sticky: true,
-  isVisible: false,
   component: undefined,
-  bladeOptions: () => ({}),
-  clickHandler: undefined,
   children: () => [],
-  isCollapsed: true,
 });
 
 const route = useRoute();
@@ -114,9 +105,9 @@ onMounted(() => {
   }
 });
 
-function onMenuItemClick(navigationCb?: () => Promise<void | NavigationFailure>) {
+function onMenuItemClick() {
   if (!props.children?.length) {
-    emit("click", navigationCb);
+    emit("click");
   } else {
     isOpened.value = !isOpened.value;
   }

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="isMenuVisible"
     class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-4"
     :class="{
       'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
@@ -28,7 +29,7 @@
 
       <!-- Show scrollable area with menu items -->
       <VcContainer
-        :noPadding="true"
+        :no-padding="true"
         class="tw-grow tw-basis-0"
       >
         <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4 tw-h-full">
@@ -38,9 +39,9 @@
           >
             <template v-if="item.isVisible === undefined || item.isVisible">
               <component
-                v-if="item.component"
                 :is="item.component"
-                v-bind="item.bladeOptions"
+                v-if="item.component"
+                v-bind="item.options"
                 class="tw-p-0 tw-mb-2 tw-w-full tw-h-auto"
               ></component>
             </template>
@@ -51,18 +52,20 @@
           >
             <VcAppMenuItem
               v-if="item.isVisible === undefined || item.isVisible"
-              v-bind="item"
-              :isVisible="item.isVisible as boolean"
+              :component="item.component"
+              :icon="item.icon"
+              :children="item.children"
+              :is-visible="item.isVisible as boolean"
               :title="item.title as string"
               @click="
-                (navigationCb) => {
-                  $emit('item:click', { item, navigationCb });
+                () => {
+                  $emit('item:click', { item });
                   isMobileVisible = false;
                 }
               "
               @child:click="
-                ({ item: blade, navigationCb }) => {
-                  $emit('item:click', { item: blade, navigationCb });
+                ({ item: blade }) => {
+                  $emit('item:click', { item: blade });
                   isMobileVisible = false;
                 }
               "
@@ -81,24 +84,23 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
 import { VcContainer, VcIcon } from "./../../../../";
-import { IMenuItems } from "./../../../../../../core/types";
-import { IMenuClickEvent } from "./../../../../../../shared";
+import { BladeMenu, IBladeToolbar } from "./../../../../../../core/types";
 
 export interface Props {
-  items?: IMenuItems[];
-  mobileMenuItems?: IMenuItems[];
+  items?: BladeMenu[];
+  mobileMenuItems?: IBladeToolbar[];
   version: string;
 }
 
 export interface Emits {
-  (event: "item:click", { item, navigationCb }: IMenuClickEvent): void;
+  (event: "item:click", { item }: { item: BladeMenu }): void;
   (event: "version:click"): void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   mobileMenuItems: () => [],
   version: "",
@@ -108,6 +110,10 @@ defineEmits<Emits>();
 
 const isMobileVisible = ref(false);
 
+const isMenuVisible = computed(() => {
+  return props.items.some((item) => item.isVisible);
+});
+
 defineExpose({
   isMobileVisible,
 });

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

@@ -16,15 +16,15 @@
       :logo="logo"
       :blades="bladesRefs"
       :buttons="toolbarItems"
+      :title="title"
       @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
       @logo:click="$emit('logo:click')"
-      :title="title"
     >
       <template
-        v-slot:appSwitcher
         v-if="$slots['appSwitcher']"
+        #appSwitcher
       >
         <slot name="appSwitcher"></slot>
       </template>
@@ -37,28 +37,28 @@
         class="tw-shrink-0"
         :items="menuItems"
         :version="version"
-        :mobileMenuItems="mobileMenuItems"
+        :mobile-menu-items="mobileMenuItems"
         @item:click="onMenuItemClick"
       ></VcAppMenu>
 
       <!-- Workspace blades -->
       <div
-        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative"
         v-if="$slots['bladeNavigation']"
+        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative"
       >
         <slot name="bladeNavigation"></slot>
       </div>
 
-      <div v-if="$slots['passwordChange']">
-        <slot name="passwordChange"></slot>
+      <div v-if="$slots['modals']">
+        <slot name="modals"></slot>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance } from "vue";
-import { IMenuItems, IBladeToolbar } from "../../../../core/types";
+import { defineComponent, getCurrentInstance, markRaw } from "vue";
+import { BladeMenu, IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -68,12 +68,12 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { ExtendedComponent, IBladeRef, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
+import { BladePageComponent, IBladeRef, useBladeNavigation } from "./../../../../shared";
 
 export interface Props {
-  pages?: ExtendedComponent[];
-  menuItems?: IMenuItems[];
-  mobileMenuItems?: IMenuItems[];
+  pages?: BladePageComponent[];
+  menuItems?: BladeMenu[];
+  mobileMenuItems?: IBladeToolbar[];
   toolbarItems?: IBladeToolbar[];
   isReady?: boolean;
   isAuthorized?: boolean;
@@ -85,7 +85,6 @@ export interface Props {
 }
 
 export interface Emits {
-  (event: "open", args: IOpenBlade): void;
   (event: "close", index: number): void;
   (event: "backlink:click", index: number): void;
   (event: "logo:click"): void;
@@ -100,18 +99,22 @@ withDefaults(defineProps<Props>(), {
   bladesRefs: () => [],
 });
 
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 
 console.debug("vc-app: Init vc-app");
 
+const { openBlade } = useBladeNavigation();
+
 const instance = getCurrentInstance();
 
-const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
+const onMenuItemClick = function ({ item }: { item: BladeMenu }) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler(instance?.exposed as Record<string, unknown>);
+    item.clickHandler(instance?.exposed);
   } else {
-    emit("open", { parentBlade: item.component, id: 0, navigationCb });
+    openBlade({
+      blade: markRaw(item.component),
+    });
   }
 };
 

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -2,13 +2,13 @@
   <div
     class="vc-blade-toolbar-button"
     :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
-    @click="onClick"
     :title="title as string"
+    @click="onClick"
   >
     <div ref="dropButtonRef">
       <div
-        class="vc-blade-toolbar-button__wrap"
         ref="bladeDropToggle"
+        class="vc-blade-toolbar-button__wrap"
       >
         <VcIcon
           class="vc-blade-toolbar-button__icon"
@@ -24,15 +24,15 @@
       </div>
       <teleport to="#app">
         <div
-          class="vc-blade-toolbar-button__dropdown"
           v-if="isDropActive"
           ref="bladeDropRef"
+          class="vc-blade-toolbar-button__dropdown"
           :style="dropStyle"
         >
           <div
-            class="vc-blade-toolbar-button__dropdown-item"
             v-for="(item, i) in dropdownItems"
             :key="i"
+            class="vc-blade-toolbar-button__dropdown-item"
             @click="handleDropItemClick(item)"
           >
             <VcIcon
@@ -64,7 +64,7 @@ export interface Props {
   isExpanded: boolean;
   icon?: string | (() => string);
   title?: string | unknown;
-  bladeOptions?: Record<string, unknown>;
+  options?: Record<string, unknown>;
   disabled?: boolean;
   dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -11,13 +11,13 @@
       >
         <VcBladeToolbarButton
           v-if="item.isVisible === undefined || item.isVisible"
-          :isExpanded="isExpanded"
+          :is-expanded="isExpanded"
           :icon="item.icon"
           :title="item.title"
-          :bladeOptions="item.bladeOptions"
+          :options="item.options"
           :disabled="item.disabled as boolean"
-          :dropdownItems="item.dropdownItems"
-          :clickHandler="item.clickHandler"
+          :dropdown-items="item.dropdownItems"
+          :click-handler="item.clickHandler"
         />
       </template>
     </div>

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -14,8 +14,8 @@
   >
     <!-- Init blade header -->
     <VcBladeHeader
-      class="tw-shrink-0"
       v-if="!$isMobile.value || closable"
+      class="tw-shrink-0"
       :maximized="maximized"
       :expandable="isExpandable"
       :closable="closable"
@@ -27,8 +27,8 @@
       @collapse="$emit('collapse')"
     >
       <template
-        v-slot:actions
         v-if="$slots['actions']"
+        #actions
       >
         <slot name="actions"></slot>
       </template>
@@ -42,9 +42,9 @@
         />
         <div class="tw-line-clamp-1 tw-w-full tw-mx-2"><slot name="error"></slot></div>
         <VcButton
-          @click="toggleErrorPopup"
           variant="onlytext"
           class="tw-shrink-0 tw-opacity-80 tw-text-white hover:!tw-opacity-100 hover:!tw-text-white"
+          @click="open()"
           >{{ $t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
         >
       </div>
@@ -55,33 +55,15 @@
       class="tw-shrink-0"
       :items="toolbarItems"
     ></VcBladeToolbar>
-
-    <VcPopup
-      variant="medium"
-      :title="$t('COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE')"
-      @close="toggleErrorPopup"
-      v-if="isErrorPopupActive"
-    >
-      <div class="tw-p-5 tw-flex tw-flex-row tw-items-center tw-h-full">
-        <VcIcon
-          icon="fas fa-exclamation-circle"
-          size="xxl"
-          class="tw-text-[color:var(--blade-color-error)] tw-mr-3"
-        ></VcIcon>
-        <VcContainer no-padding>
-          <slot name="error"></slot>
-        </VcContainer>
-      </div>
-    </VcPopup>
-
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref } from "vue";
+import { defineComponent, computed, useSlots, h } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
-import { IBladeContainer } from "./../../../../shared";
+import { IBladeContainer, usePopup } from "./../../../../shared";
+import { useI18n } from "vue-i18n";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -91,7 +73,7 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon, VcPopup, VcContainer } from "./../../";
+import { VcButton, VcIcon, VcPopup } from "./../../";
 
 export interface Props {
   icon?: string;
@@ -105,7 +87,6 @@ export interface Props {
   toolbarItems?: IBladeToolbar[];
   onClose?: () => void;
   blades?: IBladeContainer[];
-  // error?: string;
 }
 
 export interface Emits {
@@ -122,8 +103,24 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 defineEmits<Emits>();
-
-const isErrorPopupActive = ref(false);
+const { t } = useI18n({ useScope: "global" });
+const slots = useSlots();
+const errorSlot = computed(() => slots.error && slots.error());
+
+const { open } = usePopup({
+  component: VcPopup,
+  props: {
+    type: "error",
+    variant: "small",
+    title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
+  },
+  slots: {
+    default: h(
+      "div",
+      h(() => errorSlot.value)
+    ),
+  },
+});
 
 const isExpandable = computed(() => {
   if (!props.expandable) {
@@ -131,10 +128,6 @@ const isExpandable = computed(() => {
   }
   return props.blades?.length !== 0;
 });
-
-function toggleErrorPopup() {
-  isErrorPopupActive.value = !isErrorPopupActive.value;
-}
 </script>
 
 <style lang="scss">