@vc-shell/framework 1.0.244 → 1.0.245

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

@@ -1,10 +1,6 @@
 <template>
   <div
-    class="vc-app-menu-link tw-cursor-pointer tw-group"
-    :class="{
-      'tw-px-[19px]': ($isDesktop.value && expand) || $isMobile.value,
-      'tw-pl-[19px] tw-pr-[4px]': $isDesktop.value && !expand,
-    }"
+    class="vc-app-menu-link tw-cursor-pointer tw-group tw-px-[19px]"
     @click="onMenuItemClick"
   >
     <div
@@ -14,6 +10,7 @@
           'vc-app-menu-item_active': isMenuItemActive,
           'vc-app-menu-item_no-hover': !children?.length,
           'vc-app-menu-item_child-opened': expand && isOpened,
+          'vc-app-menu-item_collapsed': !expand,
         },
       ]"
     >
@@ -59,11 +56,8 @@
         custom
       >
         <div
-          :class="{
-            'tw-px-[19px] ': ($isDesktop.value && expand) || $isMobile.value,
-            'tw-pl-[19px] tw-pr-[4px] ': $isDesktop.value && !expand,
-          }"
-          class="vc-app-menu-item__child-item-link tw-cursor-pointer tw-z-[2]"
+          class="vc-app-menu-item__child-item-link tw-cursor-pointer tw-z-[2] tw-px-[19px]"
+          :data-test-id="nested.routeId"
           @click="$emit('onClick', nested)"
         >
           <div
@@ -71,9 +65,10 @@
             :class="[
               {
                 'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
-                'tw-pl-[21px]': expand,
+                'vc-app-menu-item__child-item_collapsed': !expand,
+                'tw-pl-[21px] tw-w-full  ': expand,
               },
-              'vc-app-menu-item__child-item tw-min-w-0 tw-flex tw-w-full tw-h-[var(--app-menu-item-height)] tw-items-center',
+              'vc-app-menu-item__child-item tw-min-w-0 tw-flex  tw-h-[var(--app-menu-item-height)] tw-items-center [transition:padding_150ms_cubic-bezier(0.2,0,0,1)_0s] ',
             ]"
           >
             <div
@@ -114,6 +109,7 @@ export interface Props {
   title?: string;
   url?: string;
   expand?: boolean;
+  isExpanding?: boolean;
 }
 
 export interface Emits {
@@ -188,7 +184,7 @@ const isActive = (url: string) => {
   --app-menu-item-active-icon: #2e3d4e;
 }
 
-.vc-app-menu-link:hover .vc-app-menu-item {
+.vc-app-menu-link:hover .vc-app-menu-item:not(.vc-app-menu-item_active) {
   @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
     tw-rounded-[var(--app-menu-item-hover-radius)];
 
@@ -209,7 +205,7 @@ const isActive = (url: string) => {
   }
 }
 
-.vc-app-menu-item__child-item-link:hover .vc-app-menu-item__child-item {
+.vc-app-menu-item__child-item-link:hover .vc-app-menu-item__child-item:not(.vc-app-menu-item__child-item_active) {
   @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
     tw-rounded-[var(--app-menu-item-hover-radius)];
 
@@ -223,6 +219,10 @@ const isActive = (url: string) => {
   tw-border-none
   tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase tw-select-none tw-py-[4px] tw-px-[8px];
 
+  &_collapsed {
+    @apply tw-w-[40px];
+  }
+
   &_active {
     @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
     tw-rounded-[var(--app-menu-item-hover-radius)]
@@ -301,6 +301,10 @@ const isActive = (url: string) => {
         @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
       }
     }
+
+    &_collapsed {
+      @apply tw-w-[40px];
+    }
   }
 
   &:hover:not(.vc-app-menu-item_active) {

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

@@ -12,6 +12,7 @@
           :title="title ?? ''"
           :url="url"
           :expand="expand"
+          :is-expanding="isExpanding"
           @on-click="$emit('click')"
         />
       </router-link>
@@ -24,6 +25,7 @@
         :icon="icon ?? ''"
         :title="title ?? ''"
         :expand="expand"
+        :is-expanding="isExpanding"
         @on-click="$emit('click', $event)"
       />
     </template>
@@ -42,6 +44,7 @@ export interface Props {
   title?: string;
   children?: MenuItem[];
   expand?: boolean;
+  isExpanding?: boolean;
 }
 
 export interface Emits {

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isMenuVisible"
-    class="vc-app-menu tw-relative tw-w-[var(--app-menu-width)] [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-pt-[22px]"
+    class="vc-app-menu tw-relative tw-w-[var(--app-menu-width)] [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-pt-[22px] -tw-mr-[8px]"
     :class="{
       'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
         $isMobile.value,
@@ -19,13 +19,11 @@
       @click="isMobileVisible = false"
     ></div>
     <div
-      class="!tw-absolute vc-app-menu__inner tw-flex tw-flex-col tw-h-full [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-z-[1001] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)]"
+      class="!tw-absolute vc-app-menu__inner tw-flex tw-flex-col tw-h-full [transition:width_150ms_cubic-bezier(0.2,0,0,1)_0s] tw-z-[1001] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)]"
       :class="{
         'tw-left-0 tw-pt-[22px]': $isDesktop.value,
         '!tw-w-[var(--app-menu-width-collapse)]': $isDesktop.value && !isExpanded && !isExpandedOver,
         'tw-w-[var(--app-menu-width)]': $isDesktop.value && (isExpanded || isExpandedOver),
-        'tw-shadow-none': $isDesktop.value && isExpanded,
-        'tw-shadow-[6px_0_5px_-2px_#3654751A]': $isDesktop.value && isExpandedOver,
       }"
     >
       <!-- Show menu close handler on mobile devices -->
@@ -62,14 +60,20 @@
         class="tw-grow tw-basis-0"
       >
         <div class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full">
-          <slot
-            v-if="!$isDesktop.value"
-            name="mobile"
-          ></slot>
+          <div
+            v-if="$slots['mobile']"
+            class="tw-px-[19px]"
+          >
+            <slot
+              v-if="!$isDesktop.value"
+              name="mobile"
+            ></slot>
+          </div>
 
           <VcAppMenuItem
             v-for="item in menuItems"
             :key="item?.id"
+            :data-test-id="item?.routeId"
             :is-visible="
               $hasAccess(item.permissions!) && (item.children?.some((child) => $hasAccess(child.permissions!)) ?? true)
             "
@@ -78,6 +82,7 @@
             :title="item.title as string"
             :children="item.children"
             :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
+            :is-expanding="isExpandingOver"
             @click="
               (event) => {
                 $emit('item:click', event ? event : item);
@@ -124,6 +129,7 @@ defineEmits<Emits>();
 const { menuItems } = useMenuService();
 const isExpanded = useLocalStorage("VC_APP_MENU_EXPANDED", true);
 const isExpandedOver = ref(false);
+const isExpandingOver = ref(false);
 
 const isMobileVisible = ref(false);
 
@@ -147,10 +153,16 @@ function expandOverHandler(state: boolean) {
       if (isExpandedOver.value !== state) {
         isExpandedOver.value = state;
       }
-    }, 200);
+    }, 50);
   } else {
     isExpandedOver.value = state;
   }
+
+  // Set isExpandingOver to true during expansion animation
+  isExpandingOver.value = true;
+  setTimeout(() => {
+    isExpandingOver.value = false;
+  }, 100);
 }
 
 defineExpose({
@@ -161,7 +173,7 @@ defineExpose({
 <style lang="scss">
 :root {
   --app-menu-width: 230px;
-  --app-menu-width-collapse: 63px;
+  --app-menu-width-collapse: 70px;
   --app-menu-background-color: #ffffff;
   --app-menu-version-color: #838d9a;
 

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

@@ -6,11 +6,13 @@
       'tw-border-l tw-border-solid tw-border-[color:#eef0f2]': separator === 'left',
     }"
     :title="title"
+    :data-test-id="id ?? 'vc-blade-toolbar-button'"
     @click="onClick"
   >
     <div ref="dropButtonRef">
       <div
         ref="bladeDropToggle"
+        type="button"
         class="vc-blade-toolbar-button__wrap"
       >
         <VcIcon
@@ -64,6 +66,7 @@ export interface Props {
   dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
   separator?: "left" | "right" | "both";
+  id?: string;
 }
 
 export interface Emits {

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

@@ -11,6 +11,7 @@
       >
         <VcBladeToolbarButton
           v-if="$hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible)"
+          :id="item.id"
           :is-expanded="isExpanded"
           :icon="item.icon"
           :title="unref(item.title)"

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

@@ -645,7 +645,7 @@ const draggedColumn = ref();
 const draggedElement = ref<HTMLElement>();
 const dropPosition = ref();
 const columnsInit = ref(true);
-const isHovered = ref(false);
+const isHovered = ref(undefined) as Ref<{ item: T; state: boolean } | undefined>;
 
 // row reordering variables
 const draggedRow = ref<T>();
@@ -686,8 +686,8 @@ const renderCellSlot = ({ item, cell, index }: { item: T; cell: ITableColumns; i
       size: "m",
       modelValue: selection.value.includes(item),
       onClick: (e: Event) => e.stopPropagation(),
-      onMouseover: () => (isHovered.value = true),
-      onMouseout: () => (isHovered.value = false),
+      onMouseover: () => (isHovered.value = { state: true, item: item }),
+      onMouseout: () => (isHovered.value = { state: false, item: item }),
       "onUpdate:modelValue": () => {
         rowCheckbox(item);
       },
@@ -705,7 +705,13 @@ const renderCellSlot = ({ item, cell, index }: { item: T; cell: ITableColumns; i
     checkboxVisibilityHandler ? checkboxComponent : undefined,
     h(
       "div",
-      { class: checkboxVisibilityHandler ? (isHovered.value ? "tw-opacity-5" : "tw-opacity-15") : "" },
+      {
+        class: checkboxVisibilityHandler
+          ? isHovered.value?.item === item && isHovered.value.state
+            ? "tw-opacity-5"
+            : "tw-opacity-15"
+          : "",
+      },
       !isSlotExist
         ? h(VcTableCell, {
             cell,

package/dist/ui/components/molecules/vc-editor/vc-editor.vue.d.ts

@@ -1,42 +0,0 @@
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
-export interface Props {
-    placeholder?: string;
-    modelValue?: string;
-    required?: boolean;
-    disabled?: boolean;
-    label?: string;
-    tooltip?: string;
-    errorMessage?: string;
-    assetsFolder: string;
-    multilanguage?: boolean;
-    currentLanguage?: string;
-    maxlength?: number;
-}
-export interface Emits {
-    (event: "update:modelValue", value: string | number | Date | null | undefined): void;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | Date | null | undefined) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
-    "onUpdate:modelValue"?: ((value: string | number | Date | null | undefined) => any) | undefined;
-}, {}, {}>, Readonly<{
-    error?: ((props: any) => any) | undefined;
-}> & {
-    error?: ((props: any) => any) | undefined;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=vc-editor.vue.d.ts.map

package/dist/ui/components/molecules/vc-editor/vc-editor.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-editor.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/molecules/vc-editor/vc-editor.vue.ts"],"names":[],"mappings":"AAGA,OAAO,0CAA0C,CAAC;AAKlD,MAAM,WAAW,KAAK;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;CACtF;;;;;;;;;;AA+PD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}