@vc-shell/framework 1.0.237 → 1.0.239

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

@@ -1,36 +1,44 @@
 <template>
   <div
-    class="vc-app-menu-item tw-flex"
-    :class="[
-      {
-        'vc-app-menu-item_active': isMenuItemActive,
-        'vc-app-menu-item_no-hover': !children?.length,
-        'vc-app-menu-item_child-opened': expand && isOpened,
-      },
-    ]"
+    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,
+    }"
     @click="onMenuItemClick"
   >
     <div
-      v-if="icon"
-      class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
+      class="vc-app-menu-item tw-flex"
+      :class="[
+        {
+          'vc-app-menu-item_active': isMenuItemActive,
+          'vc-app-menu-item_no-hover': !children?.length,
+          'vc-app-menu-item_child-opened': expand && isOpened,
+        },
+      ]"
     >
-      <VcIcon
-        class="tw-text-center"
-        :icon="icon"
-        size="m"
-      />
-    </div>
-    <div
-      v-if="expand"
-      class="vc-app-menu-item__title tw-capitalize"
-    >
-      {{ title }}
-      <VcIcon
-        v-if="!!children?.length || false"
-        class="vc-app-menu-item__title-icon"
-        :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
-        size="xs"
-      ></VcIcon>
+      <div
+        v-if="icon"
+        class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
+      >
+        <VcIcon
+          class="tw-text-center"
+          :icon="icon"
+          size="m"
+        />
+      </div>
+      <div
+        v-if="expand"
+        class="vc-app-menu-item__title tw-capitalize"
+      >
+        {{ title }}
+        <VcIcon
+          v-if="!!children?.length || false"
+          class="vc-app-menu-item__title-icon"
+          :icon="`fas fa-chevron-${isOpened ? 'up' : 'down'}`"
+          size="xs"
+        ></VcIcon>
+      </div>
     </div>
   </div>
   <!-- Nested menu items -->
@@ -51,35 +59,43 @@
         custom
       >
         <div
-          :key="i"
-          :class="[
-            {
-              'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
-              'tw-pl-[21px]': 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',
-          ]"
+          :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]"
           @click="$emit('onClick', nested)"
         >
           <div
-            v-if="nested.icon"
-            class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
-            :class="{
-              'tw-p-0': !expand,
-            }"
+            :key="i"
+            :class="[
+              {
+                'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
+                'tw-pl-[21px]': 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',
+            ]"
           >
-            <VcIcon
-              class="tw-text-center"
-              :icon="nested.icon"
-              size="m"
-            />
+            <div
+              v-if="nested.icon"
+              class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
+              :class="{
+                'tw-p-0': !expand,
+              }"
+            >
+              <VcIcon
+                class="tw-text-center"
+                :icon="nested.icon"
+                size="m"
+              />
+            </div>
+            <p
+              v-if="expand"
+              class="tw-truncate tw-pl-[7px]"
+            >
+              {{ nested.title }}
+            </p>
           </div>
-          <p
-            v-if="expand"
-            class="tw-truncate tw-pl-[7px]"
-          >
-            {{ nested.title }}
-          </p>
         </div>
       </router-link>
     </template>
@@ -172,6 +188,36 @@ const isActive = (url: string) => {
   --app-menu-item-active-icon: #2e3d4e;
 }
 
+.vc-app-menu-link:hover .vc-app-menu-item {
+  @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
+    tw-rounded-[var(--app-menu-item-hover-radius)];
+
+  .vc-app-menu-item__title {
+    @apply tw-text-[color:var(--app-menu-item-title-color-active)];
+  }
+
+  .vc-app-menu-item__icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  .vc-app-menu-item__title-icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+
+  .vc-app-menu-item__handler_enabled {
+    @apply tw-visible #{!important};
+  }
+}
+
+.vc-app-menu-item__child-item-link:hover .vc-app-menu-item__child-item {
+  @apply tw-bg-[color:var(--app-menu-item-background-color-hover)] tw-bg-opacity-50
+    tw-rounded-[var(--app-menu-item-hover-radius)];
+
+  .vc-app-menu-item__icon {
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
+  }
+}
+
 .vc-app-menu-item {
   @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
   tw-border-none

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

@@ -19,13 +19,13 @@
       @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-[9999] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)] tw-shadow-[inset_0px_2px_5px_0px_#3654751A]"
+      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-left-0 tw-pt-[22px]': $isDesktop.value,
-        '!tw-w-[var(--app-menu-width-collapse)] !tw-shadow-[inset_4px_2px_5px_0px_#3654751A]':
-          $isDesktop.value && !isExpanded && !isExpandedOver,
+        '!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 -->
@@ -46,7 +46,7 @@
         class="tw-pl-[19px] tw-pb-2"
       >
         <button
-          class="tw-p-[10px] tw-h-[var(--app-menu-item-height)] tw-rounded tw-text-[color:var(--app-menu-burger-color)] hover:tw-bg-[color:var(--app-menu-burger-background-color)]"
+          class="tw-flex tw-items-center tw-p-[10px] tw-rounded tw-text-[color:var(--app-menu-burger-color)] hover:tw-bg-[color:var(--app-menu-burger-background-color)]"
           @click="toggleMenu"
         >
           <VcIcon
@@ -61,13 +61,7 @@
         :no-padding="true"
         class="tw-grow tw-basis-0"
       >
-        <div
-          class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full"
-          :class="{
-            'tw-px-[19px]': ($isDesktop.value && (isExpanded || isExpandedOver)) || $isMobile.value,
-            'tw-pl-[19px] tw-pr-[4px]': $isDesktop.value && !isExpanded && !isExpandedOver,
-          }"
-        >
+        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full">
           <slot
             v-if="!$isDesktop.value"
             name="mobile"

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

@@ -85,6 +85,7 @@
           ref="widgetsRef"
           class="vc-blade__widgets tw-flex"
           :class="{
+            'tw-border-l tw-border-solid tw-border-l-[#eaedf3]': $isDesktop.value,
             'tw-w-[var(--blade-widgets-width)] tw-flex-col': $isDesktop.value && !isExpanded,
             'tw-w-[var(--blade-widgets-width-expanded)] tw-flex-col': $isDesktop.value && isExpanded,
             'tw-w-auto tw-border-t tw-border-solid tw-border-t-[#eaedf3] tw-flex-row': $isMobile.value,

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

@@ -56,7 +56,7 @@
     </template>
     <div
       v-else
-      class="tw-flex tw-justify-center tw-p-5"
+      class="tw-flex tw-justify-center tw-p-5 tw-h-full tw-items-center"
     >
       <VcHint>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY") }}</VcHint>
     </div>

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -17,7 +17,10 @@
         v-if="anySelected"
         class="tw-pl-4 tw-flex tw-items-center tw-justify-center tw-border-b tw-border-solid tw-border-b-[#e3e7ec]"
       >
-        <VcCheckbox :model-value="unref(isSelected ?? false)"></VcCheckbox>
+        <VcCheckbox
+          :model-value="unref(isSelected ?? false)"
+          size="m"
+        ></VcCheckbox>
       </div>
       <div class="tw-flex-1 tw-w-0">
         <div class="tw-flex tw-flex-col tw-h-full tw-border-b tw-border-solid tw-border-b-[#e3e7ec]">

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

@@ -1,10 +1,10 @@
 <template>
   <div
-    v-loading="unref(loading) || columnsInit"
+    v-loading:1000="unref(loading) || columnsInit"
     class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0 tw-border-[color:#eef0f2] tw-border-solid tw-border-t-0"
   >
     <div
-      v-if="$isMobile.value && (selection.length > 0 || allSelected)"
+      v-if="multiselect && $isMobile.value && (selection.length > 0 || allSelected)"
       class="tw-flex tw-flex-col"
     >
       <div
@@ -15,6 +15,7 @@
             <VcCheckbox
               v-model="headerCheckbox"
               class="tw-font-normal tw-self-center tw-flex"
+              size="m"
               @click.stop
               >{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL_TRUNCATED") }}</VcCheckbox
             >
@@ -88,6 +89,7 @@
 
         <!-- Table search input -->
         <VcInput
+          ref="searchInput"
           class="tw-grow tw-basis-0"
           :placeholder="searchPlaceholder || $t('COMPONENTS.ORGANISMS.VC_TABLE.SEARCH')"
           clearable
@@ -95,10 +97,11 @@
           :model-value="searchValue"
           @update:model-value="$emit('search:change', $event)"
         >
-          <template #prepend-inner>
+          <template #prepend-inner="{ focus }">
             <VcIcon
               icon="fas fa-search"
-              class="tw-text-[color:#a5a5a5]"
+              class="tw-text-[color:#d2d4d7]"
+              @click="focus?.()"
             ></VcIcon>
           </template>
         </VcInput>
@@ -147,7 +150,7 @@
               :is-selected="isSelected(item)"
               @click="$emit('itemClick', item)"
               @swipe-start="handleSwipe"
-              @select="rowCheckbox(item)"
+              @select="multiselect ? rowCheckbox(item) : undefined"
             >
               <slot
                 name="mobile-item"
@@ -200,6 +203,20 @@
             @mouseleave="handleHeaderMouseOver(false)"
           >
             <div class="vc-table__header-row tw-flex tw-flex-row">
+              <div
+                v-if="editing && multiselect && items && items.length"
+                class="tw-flex-1 tw-flex tw-items-center tw-justify-center tw-w-[28px] tw-max-w-[28px] tw-min-w-[28px] tw-bg-[#f9f9f9] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1]"
+              >
+                <div class="tw-flex tw-justify-center tw-items-center">
+                  <VcCheckbox
+                    v-model="headerCheckbox"
+                    @click.stop
+                  ></VcCheckbox>
+                </div>
+                <div class="tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
+                  <div class="tw-w-px tw-bg-[#e5e7eb] tw-h-full"></div>
+                </div>
+              </div>
               <div
                 v-for="(item, index) in filteredCols"
                 :id="item.id"
@@ -221,7 +238,7 @@
                 @click="handleHeaderClick(item)"
               >
                 <div
-                  v-if="multiselect && index === 0"
+                  v-if="!editing && multiselect && index === 0 && items && items.length"
                   class="tw-flex tw-pl-5 tw-items-center tw-justify-center tw-w-auto tw-bg-[#f9f9f9] tw-box-border tw-select-none tw-overflow-hidden tw-z-[1] tw-shrink-0"
                 >
                   <div class="tw-flex tw-justify-center tw-items-center">
@@ -343,6 +360,19 @@
               @drop="onRowDrop"
               @mouseover="showActions(itemIndex)"
             >
+              <div
+                v-if="editing && multiselect && typeof item === 'object'"
+                class="tw-w-[28px] tw-max-w-[28px] tw-min-w-[28px] tw-relative tw-flex-1 tw-flex tw-items-center tw-justify-center"
+                @click.stop
+              >
+                <div class="tw-flex tw-justify-center tw-items-center">
+                  <VcCheckbox
+                    :model-value="isSelected(item)"
+                    @update:model-value="rowCheckbox(item)"
+                  ></VcCheckbox>
+                </div>
+                <div class="tw-w-px tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-bg-[#e5e7eb]"></div>
+              </div>
               <div
                 v-for="cell in filteredCols"
                 :id="`${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`"
@@ -583,6 +613,7 @@ const slots = useSlots();
 // template refs
 const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
+const searchInput = ref<HTMLElement | null>();
 
 // event listeners
 let columnResizeListener: ((...args: any[]) => any) | null = null;
@@ -614,6 +645,7 @@ const draggedColumn = ref();
 const draggedElement = ref<HTMLElement>();
 const dropPosition = ref();
 const columnsInit = ref(true);
+const isHovered = ref(false);
 
 // row reordering variables
 const draggedRow = ref<T>();
@@ -647,26 +679,33 @@ const renderCellSlot = ({ item, cell, index }: { item: T; cell: ITableColumns; i
   const checkboxComponent = h(
     "div",
     {
-      onClick: (e) => e.stopPropagation(),
       class: "tw-absolute tw-z-10 tw-top-0 tw-bottom-0 tw-left-[20px] tw-right-0 tw-flex tw-items-center",
     },
     h(VcCheckbox, {
       class: "",
       size: "m",
       modelValue: selection.value.includes(item),
-      "onUpdate:modelValue": (value: boolean) => {
+      onClick: (e: Event) => e.stopPropagation(),
+      onMouseover: () => (isHovered.value = true),
+      onMouseout: () => (isHovered.value = false),
+      "onUpdate:modelValue": () => {
         rowCheckbox(item);
       },
     }),
   );
 
-  const checkboxVisibilityHandler = (isFirstCell && selectedRowIndex.value === index) || (isRowSelected && isFirstCell);
+  const checkboxVisibilityHandler =
+    !props.editing &&
+    props.multiselect &&
+    props.items &&
+    props.items.length &&
+    ((isFirstCell && selectedRowIndex.value === index) || (isRowSelected && isFirstCell));
 
   return h("div", { class: "" }, [
     checkboxVisibilityHandler ? checkboxComponent : undefined,
     h(
       "div",
-      { class: checkboxVisibilityHandler ? "tw-opacity-15" : "" },
+      { class: checkboxVisibilityHandler ? (isHovered.value ? "tw-opacity-5" : "tw-opacity-15") : "" },
       !isSlotExist
         ? h(VcTableCell, {
             cell,