@vc-shell/framework 1.0.234 → 1.0.235

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

@@ -129,11 +129,6 @@ function onMouseLeave() {
   --notification-error: #ef796f;
   --notification-success: #87b563;
   --notification-info: #bdd1df;
-
-  --notification-scroll-color: #e1eff9;
-  --notification-scroll-color-hover: #cce4f5;
-  --notification-scroll-width: 8px;
-  --notification-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset, 0 -3px 2px rgba(0, 0, 0, 0.1) inset;
 }
 
 .vc-notification {
@@ -142,22 +137,5 @@ function onMouseLeave() {
   .vc-app_mobile {
     @apply tw-max-w-[80%];
   }
-
-  &__content {
-    &::-webkit-scrollbar {
-      @apply tw-w-[var(--notification-scroll-width)] tw-bg-transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      @apply tw-bg-transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      @apply tw-bg-[color:var(--notification-scroll-color)]
-      tw-rounded-[calc(var(--notification-scroll-width)/2)]
-      tw-overflow-x-hidden
-      hover:tw-bg-[color:var(--notification-scroll-color-hover)];
-    }
-  }
 }
 </style>

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

@@ -24,6 +24,7 @@
       class="vc-app-menu-item__icon"
     >
       <VcIcon
+        class="tw-w-[var(--app-menu-item-icon-width)] tw-text-center"
         :icon="icon"
         size="m"
       />
@@ -43,8 +44,11 @@
   </div>
   <!-- Nested menu items -->
   <div
-    v-show="isOpened && expand"
+    v-show="isOpened"
     class="vc-app-menu-item__child"
+    :class="{
+      '!tw-ml-0': !expand,
+    }"
   >
     <template
       v-for="(nested, i) in children"
@@ -60,12 +64,31 @@
           :class="[
             {
               'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
+              'tw-px-[10px] tw-flex tw-justify-center tw-items-center': !expand,
             },
-            'vc-app-menu-item__child-item',
+            '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',
           ]"
           @click="$emit('onClick', nested)"
         >
-          {{ nested.title }}
+          <div
+            v-if="nested.icon"
+            class="vc-app-menu-item__icon"
+            :class="{
+              'tw-p-0': !expand,
+            }"
+          >
+            <VcIcon
+              class="tw-w-[var(--app-menu-item-icon-width)] tw-text-center"
+              :icon="nested.icon"
+              size="m"
+            />
+          </div>
+          <p
+            v-if="expand"
+            class="tw-truncate"
+          >
+            {{ nested.title }}
+          </p>
         </div>
       </router-link>
     </template>
@@ -100,11 +123,7 @@ const isOpened = ref(false);
 const route = useRoute();
 const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
 
-const isMenuItemActive = computed(
-  () =>
-    (isActive(props.url ?? "") && !props.children?.length) ||
-    (!props.expand && isOpened.value && props.children?.some((x) => isActive(x.url ?? ""))),
-);
+const isMenuItemActive = computed(() => isActive(props.url ?? "") && !props.children?.length);
 
 watch(
   () => route.path,
@@ -147,7 +166,7 @@ const isActive = (url: string) => {
 <style lang="scss">
 :root {
   --app-menu-item-height: 36px;
-  --app-menu-item-icon-width: 20px;
+  --app-menu-item-icon-width: 22px;
   --app-menu-item-icon-color: #82a6bd;
   --app-menu-item-icon-color-active: #ffffff;
   --app-menu-item-handler-width: 10px;
@@ -227,19 +246,23 @@ const isActive = (url: string) => {
   }
 
   &__child {
-    @apply tw-ml-[32px] tw-gap-[4px] tw-mt-[4px] tw-flex tw-flex-col;
+    @apply tw-gap-[4px] tw-mt-[4px] tw-flex tw-flex-col;
   }
 
   &__child-item {
     @apply tw-cursor-pointer tw-w-fit tw-py-[4px] tw-px-[6px] tw-rounded-[4px]
     hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
-    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
+    hover:tw-text-[color:var(--app-menu-item-title-color-active)] tw-pl-[25px];
 
     &_active {
       @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
       tw-text-[color:var(--app-menu-item-title-color-active)] tw-font-bold
       hover:tw-bg-[color:var(--app-menu-item-background-color-active)]
       hover: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)];
+      }
     }
   }
 

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

@@ -79,7 +79,7 @@
               $hasAccess(item.permissions!) && (item.children?.some((child) => $hasAccess(child.permissions!)) ?? true)
             "
             :url="item.url"
-            :icon="item.icon"
+            :icon="item.groupIcon || item.icon"
             :title="item.title as string"
             :children="item.children"
             :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
@@ -93,7 +93,7 @@
         </div>
       </VcContainer>
       <div
-        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-4"
+        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-[22px]"
         @click="$emit('version:click')"
       >
         {{ version }}

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

@@ -92,9 +92,9 @@
         >
           <div
             ref="widgetsContainerRef"
-            class="vc-blade__widget-container tw-flex tw-overflow-auto"
+            class="vc-blade__widget-container tw-flex tw-overflow-y-auto"
             :class="{
-              'tw-flex-col': $isDesktop.value,
+              'tw-flex-col tw-overflow-x-clip': $isDesktop.value,
               'tw-flex-row': $isMobile.value,
             }"
           >

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

@@ -44,6 +44,7 @@
             :rules="rules"
             :name="name"
             :loading="loading"
+            :custom-text="customText"
             @upload="onUpload"
           ></VcFileUpload>
         </div>
@@ -89,6 +90,10 @@ export interface Props {
   rules?: keyof IValidationRules | IValidationRules;
   name?: string;
   loading?: boolean;
+  customText?: {
+    dragHere: string;
+    browse: string;
+  };
 }
 
 export interface Emits {

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -3,7 +3,7 @@
     <div ref="referenceButton">
       <VcButton
         small
-        icon="fas fa-bars"
+        icon="fas fa-th"
         @click.stop="isActive = !isActive"
       ></VcButton>
     </div>

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

@@ -19,7 +19,7 @@
       >
         <VcCheckbox :model-value="unref(isSelected ?? false)"></VcCheckbox>
       </div>
-      <div class="tw-flex-1 tw-w-full">
+      <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]">
           <slot></slot>
         </div>

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

@@ -4,7 +4,7 @@
     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"
+      v-if="$isMobile.value && (selection.length > 0 || allSelected)"
       class="tw-flex tw-flex-col"
     >
       <div
@@ -18,12 +18,17 @@
               @click.stop
               >{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL_TRUNCATED") }}</VcCheckbox
             >
-            {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECTED") }}: {{ selection.length }}
+            {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECTED") }}: {{ allSelected ? totalCount : selection.length }}
           </div>
 
           <VcButton
             text
-            @click="() => (selection = [])"
+            @click="
+              () => {
+                selection = [];
+                allSelected = false;
+              }
+            "
             >{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") }}</VcButton
           >
         </div>
@@ -216,12 +221,13 @@
                 @click="handleHeaderClick(item)"
               >
                 <div
-                  v-if="multiselect && index === 0 && isHeaderHover"
-                  class="tw-flex tw-pl-3 tw-items-center tw-justify-center tw-w-auto tw-bg-[#f9f9f9] tw-box-border tw-select-none tw-overflow-hidden tw-z-[1]"
+                  v-if="multiselect && index === 0"
+                  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]"
                 >
                   <div class="tw-flex tw-justify-center tw-items-center">
                     <VcCheckbox
                       v-model="headerCheckbox"
+                      size="m"
                       @click.stop
                     ></VcCheckbox>
                   </div>
@@ -341,7 +347,7 @@
                 v-for="cell in filteredCols"
                 :id="`${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`"
                 :key="`${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`"
-                class="tw-box-border tw-overflow-hidden tw-px-3 tw-flex-1 tw-flex tw-items-center"
+                class="tw-box-border tw-overflow-hidden tw-px-3 tw-flex-1 tw-flex tw-items-center tw-relative"
                 :class="[cell.class]"
                 :style="{ maxWidth: cell.width, width: cell.width }"
               >
@@ -638,32 +644,44 @@ const renderCellSlot = ({ item, cell, index }: { item: T; cell: ITableColumns; i
 
   const isRowSelected = selection.value.includes(item);
 
-  if ((isFirstCell && selectedRowIndex.value === index) || (isRowSelected && isFirstCell)) {
-    return h(
-      "div",
-      { onClick: (e) => e.stopPropagation() },
-      h(VcCheckbox, {
-        modelValue: selection.value.includes(item),
-        "onUpdate:modelValue": (value: boolean) => {
-          rowCheckbox(item);
-        },
-      }),
-    );
-  }
-
-  if (!isSlotExist) {
-    return h(VcTableCell, {
-      cell,
-      item: item as TableItem,
-      index,
-      editing: props.editing,
-      onUpdate: (event) => {
-        emit("onEditComplete", { event, index });
+  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) => {
+        rowCheckbox(item);
       },
-      onBlur: (event) => emit("onCellBlur", event),
-    });
-  }
-  return slots[`item_${cell.id}`]?.({ item, cell, index });
+    }),
+  );
+
+  const checkboxVisibilityHandler = (isFirstCell && selectedRowIndex.value === index) || (isRowSelected && isFirstCell);
+
+  return h("div", { class: "" }, [
+    checkboxVisibilityHandler ? checkboxComponent : undefined,
+    h(
+      "div",
+      { class: checkboxVisibilityHandler ? "tw-opacity-15" : "" },
+      !isSlotExist
+        ? h(VcTableCell, {
+            cell,
+
+            item: item as TableItem,
+            index,
+            editing: props.editing,
+            onUpdate: (event) => {
+              emit("onEditComplete", { event, index });
+            },
+            onBlur: (event) => emit("onCellBlur", event),
+          })
+        : slots[`item_${cell.id}`]?.({ item, cell, index }),
+    ),
+  ]);
 };
 
 const calculateElWidth = (id: string) => {