@vc-shell/framework 1.0.234 → 1.0.236

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

@@ -1,7 +1,12 @@
 <template>
   <div
     class="vc-checkbox"
-    :class="{ 'vc-checkbox_disabled': disabled }"
+    :class="{
+      'vc-checkbox_disabled': disabled,
+      'vc-checkbox_size-small': size === 's',
+      'vc-checkbox_size-medium': size === 'm',
+      'vc-checkbox_size-large': size === 'l',
+    }"
   >
     <!-- Input label -->
     <VcLabel
@@ -66,13 +71,15 @@ export interface Props {
   falseValue?: boolean;
   label?: string;
   tooltip?: string;
+  size?: "s" | "m" | "l";
+  outline?: boolean;
 }
 
 export interface Emits {
   (event: "update:modelValue", value: boolean): void;
 }
 
-const props = withDefaults(defineProps<Props>(), { name: "Field", trueValue: true, falseValue: false });
+const props = withDefaults(defineProps<Props>(), { name: "Field", trueValue: true, falseValue: false, size: "s" });
 const emit = defineEmits<Emits>();
 
 defineSlots<{
@@ -92,7 +99,9 @@ const value = computed({
 
 <style lang="scss">
 :root {
-  --checkbox-size: 14px;
+  --checkbox-size-small: 14px;
+  --checkbox-size-medium: 18px;
+  --checkbox-size-large: 24px;
   --checkbox-border-radius: 2px;
   --checkbox-background-color: #ffffff;
   --checkbox-color-error: #f14e4e;
@@ -109,6 +118,14 @@ const value = computed({
   --checkbox-error: #f14e4e;
 }
 
+$sizes: small, medium, large;
+
+@each $size in $sizes {
+  .vc-checkbox_size-#{$size} {
+    --checkbox-size: var(--checkbox-size-#{$size});
+  }
+}
+
 .vc-checkbox {
   input[type="checkbox"] {
     border-radius: 2px;
@@ -165,14 +182,14 @@ const value = computed({
       content: "";
       display: block;
       position: absolute;
-      width: 5px;
-      height: 9px;
-      border: 2px solid var(--checkbox-background);
+      width: calc(var(--checkbox-size) * 0.35);
+      height: calc(var(--checkbox-size) * 0.6);
+      border: calc(var(--checkbox-size) * 0.1) solid var(--checkbox-background);
       border-top: 0;
       border-left: 0;
-      left: 4px;
-      top: 1px;
-      transform: rotate(var(--r, 20deg));
+      left: calc(var(--checkbox-size) * 0.25);
+      top: calc(var(--checkbox-size) * 0.1);
+      transform: rotate(var(--r, 43deg));
       opacity: var(--checkbox-after-opacity, 0);
       transition:
         transform var(--checkbox-after-transform-duration, 0.3s) var(--checkbox-after-transform-ease, ease),

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

@@ -183,9 +183,6 @@ function onTextChange() {
   --editor-border-color: #d3dbe9;
   --editor-border-color-error: #f14e4e;
   --editor-placeholder-color: #a5a5a5;
-
-  --editor-scroll-width: 8px;
-  --editor-scroll-color-hover: #cce4f5;
 }
 
 .vc-editor {
@@ -194,21 +191,6 @@ function onTextChange() {
   }
 
   .quill-editor .ql-editor {
-    &::-webkit-scrollbar {
-      @apply tw-w-[var(--editor-scroll-width)] tw-bg-transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      @apply tw-bg-transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      @apply tw-bg-[color:var(--editor-scroll-color)]
-      tw-rounded-[calc(var(--editor-scroll-width)/2)]
-      tw-overflow-x-hidden
-      hover:tw-bg-[color:var(--editor-scroll-color-hover)];
-    }
-
     &.ql-blank:before {
       color: var(--textarea-placeholder-color);
       content: attr(data-placeholder);

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -24,10 +24,12 @@
       ></VcIcon>
 
       <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
-        <span>{{ t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.DRAG_HERE") }}</span
+        <span>{{ customText?.dragHere || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.DRAG_HERE") }}</span
         >&nbsp;
         <br />
-        <VcLink @click="toggleUploader">{{ t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.BROWSE") }}</VcLink>
+        <VcLink @click="toggleUploader">{{
+          customText?.browse || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.BROWSE")
+        }}</VcLink>
       </div>
 
       <input
@@ -66,6 +68,10 @@ export interface Props {
   rules?: keyof IValidationRules | IValidationRules;
   name?: string;
   icon?: string;
+  customText?: {
+    dragHere: string;
+    browse: string;
+  };
 }
 
 export interface Emits {

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-app-menu-item"
+    class="vc-app-menu-item tw-flex"
     :class="[
       {
         'vc-app-menu-item_active': isMenuItemActive,
@@ -10,20 +10,12 @@
     ]"
     @click="onMenuItemClick"
   >
-    <div
-      class="vc-app-menu-item__handler"
-      :class="{ 'vc-app-menu-item__handler_enabled': !sticky }"
-    >
-      <VcIcon
-        icon="fas fa-ellipsis-v"
-        size="m"
-      />
-    </div>
     <div
       v-if="icon"
-      class="vc-app-menu-item__icon"
+      class="vc-app-menu-item__icon tw-w-[var(--app-menu-item-icon-width)]"
     >
       <VcIcon
+        class="tw-text-center"
         :icon="icon"
         size="m"
       />
@@ -43,8 +35,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 +55,31 @@
           :class="[
             {
               'vc-app-menu-item__child-item_active': isActive(nested.url ?? ''),
+              'tw-pl-[21px]': 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 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>
       </router-link>
     </template>
@@ -100,11 +114,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 +157,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;
@@ -165,7 +175,7 @@ const isActive = (url: string) => {
 .vc-app-menu-item {
   @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
   tw-border-none
-  tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase tw-select-none;
+  tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase tw-select-none tw-py-[4px] tw-px-[8px];
 
   &_active {
     @apply tw-bg-[color:var(--app-menu-item-background-color-active)]
@@ -196,7 +206,7 @@ const isActive = (url: string) => {
   &__icon {
     @apply tw-text-[color:var(--app-menu-item-icon-color)]
     tw-overflow-hidden tw-flex
-    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200 tw-pr-[7px];
+    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200;
   }
 
   &_active &__icon {
@@ -207,7 +217,7 @@ const isActive = (url: string) => {
     @apply tw-truncate
     tw-text-lg
     tw-font-medium
-    tw-pr-2
+    tw-pl-[7px]
     tw-text-[color:var(--app-menu-item-title-color)]
     [transition:color_0.2s_ease]
     tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
@@ -227,11 +237,11 @@ 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]
+    @apply tw-cursor-pointer tw-w-fit tw-py-[4px] tw-px-[8px] 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)];
 
@@ -240,6 +250,10 @@ const isActive = (url: string) => {
       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

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="isMenuVisible"
-    class="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]"
     :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,
       '!tw-block': isMobileVisible,
-      '!tw-w-[63px]': $isDesktop.value && !isExpanded,
+      '!tw-w-[var(--app-menu-width-collapse)]': $isDesktop.value && !isExpanded,
     }"
     @mouseenter="!isExpanded && expandOverHandler(true)"
     @mouseover="!isExpanded && expandOverHandler(true)"
@@ -22,7 +22,8 @@
       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-left-0 tw-pt-[22px]': $isDesktop.value,
-        '!tw-w-[63px] !tw-shadow-[inset_4px_2px_5px_0px_#3654751A]': $isDesktop.value && !isExpanded && !isExpandedOver,
+        '!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)]': $isDesktop.value && (isExpanded || isExpandedOver),
         'tw-shadow-none': $isDesktop.value && isExpanded,
       }"
@@ -42,7 +43,7 @@
 
       <div
         v-if="$isDesktop.value"
-        class="tw-pl-[21px] tw-pb-2"
+        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)]"
@@ -63,8 +64,8 @@
         <div
           class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full"
           :class="{
-            'tw-px-[21px]': ($isDesktop.value && (isExpanded || isExpandedOver)) || $isMobile.value,
-            'tw-pl-[21px] tw-pr-[2px]': $isDesktop.value && !isExpanded && !isExpandedOver,
+            'tw-px-[19px]': ($isDesktop.value && (isExpanded || isExpandedOver)) || $isMobile.value,
+            'tw-pl-[19px] tw-pr-[4px]': $isDesktop.value && !isExpanded && !isExpandedOver,
           }"
         >
           <slot
@@ -79,7 +80,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 +94,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 }}
@@ -154,6 +155,7 @@ defineExpose({
 <style lang="scss">
 :root {
   --app-menu-width: 230px;
+  --app-menu-width-collapse: 63px;
   --app-menu-background-color: #ffffff;
   --app-menu-version-color: #838d9a;
 
@@ -162,6 +164,9 @@ defineExpose({
 }
 
 .vc-app-menu {
+  ::-webkit-scrollbar {
+    display: none;
+  }
   &_mobile &__inner {
     @apply tw-absolute tw-z-[9999] tw-right-0 tw-top-0 tw-bottom-0 tw-w-[300px] tw-max-w-[60%] tw-bg-[color:var(--app-menu-background-color)];
   }

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] tw-shrink-0"
                 >
                   <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) => {