@vc-shell/framework 1.0.231 → 1.0.233

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -58,6 +58,8 @@
             :disabled="disabled"
             :placeholder="holder"
             @blur="handleBlur"
+            @keydown="handleKeyDown"
+            @paste="handlePaste"
           />
         </template>
         <template
@@ -242,6 +244,8 @@ const { inputRef, setOptions, numberValue, setValue } = useCurrencyInput(
     currencyDisplay: props.currencyDisplay as CurrencyDisplay,
     hideGroupingSeparatorOnFocus: false,
     precision: props.precision,
+    hideCurrencySymbolOnFocus: false,
+    hideNegligibleDecimalDigitsOnFocus: false,
   },
   false,
 );
@@ -256,6 +260,9 @@ watch(
         currency: newVal,
         currencyDisplay: props.currencyDisplay as CurrencyDisplay,
         hideGroupingSeparatorOnFocus: false,
+        precision: props.precision,
+        hideCurrencySymbolOnFocus: false,
+        hideNegligibleDecimalDigitsOnFocus: false,
       });
   },
 );
@@ -280,4 +287,17 @@ function updateModel(value: string | number | Date | null | undefined) {
 function handleBlur(event: Event) {
   emit("blur", event);
 }
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === "-" || e.key === "e") {
+    e.preventDefault();
+  }
+}
+
+function handlePaste(e: ClipboardEvent) {
+  const pasteData = e.clipboardData?.getData("text/plain");
+  if (typeof pasteData !== "undefined" && parseInt(pasteData) < 0) {
+    e.preventDefault();
+  }
+}
 </script>

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

@@ -8,7 +8,7 @@
     <template v-if="!$isMobile.value || quantity === 0">
       <!-- Logo -->
       <img
-        class="tw-h-1/2 tw-cursor-pointer tw-mx-3"
+        class="tw-h-1/2 tw-cursor-pointer tw-mx-4"
         alt="logo"
         :src="logo"
         @click="$emit('logo:click')"

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

@@ -3,9 +3,9 @@
     class="vc-app-menu-item"
     :class="[
       {
-        'vc-app-menu-item_active': isActive(url ?? '') && !children?.length,
+        'vc-app-menu-item_active': isMenuItemActive,
         'vc-app-menu-item_no-hover': !children?.length,
-        'vc-app-menu-item_child-opened': isOpened,
+        'vc-app-menu-item_child-opened': expand && isOpened,
       },
     ]"
     @click="onMenuItemClick"
@@ -28,7 +28,10 @@
         size="m"
       />
     </div>
-    <div class="vc-app-menu-item__title tw-capitalize">
+    <div
+      v-if="expand"
+      class="vc-app-menu-item__title tw-capitalize"
+    >
       {{ title }}
       <VcIcon
         v-if="!!children?.length || false"
@@ -40,7 +43,7 @@
   </div>
   <!-- Nested menu items -->
   <div
-    v-show="isOpened"
+    v-show="isOpened && expand"
     class="vc-app-menu-item__child"
   >
     <template
@@ -69,7 +72,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { MenuItem } from "../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
@@ -80,6 +83,7 @@ export interface Props {
   icon: string;
   title?: string;
   url?: string;
+  expand?: boolean;
 }
 
 export interface Emits {
@@ -96,6 +100,12 @@ 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 ?? ""))),
+);
+
 watch(
   () => route.path,
   () => {
@@ -128,7 +138,9 @@ const isActive = (url: string) => {
     }
 
     return active;
-  } else return false;
+  } else {
+    return false;
+  }
 };
 </script>
 
@@ -182,10 +194,9 @@ const isActive = (url: string) => {
   }
 
   &__icon {
-    @apply tw-w-[var(--app-menu-item-icon-width)]
-    tw-text-[color:var(--app-menu-item-icon-color)]
+    @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-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200 tw-pr-[7px];
   }
 
   &_active &__icon {
@@ -196,7 +207,7 @@ const isActive = (url: string) => {
     @apply tw-truncate
     tw-text-lg
     tw-font-medium
-    tw-px-2
+    tw-pr-2
     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;

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

@@ -11,6 +11,7 @@
           :icon="icon ?? ''"
           :title="title ?? ''"
           :url="url"
+          :expand="expand"
           @on-click="$emit('click')"
         />
       </router-link>
@@ -22,6 +23,7 @@
         :sticky="sticky"
         :icon="icon ?? ''"
         :title="title ?? ''"
+        :expand="expand"
         @on-click="$emit('click', $event)"
       />
     </template>
@@ -39,6 +41,7 @@ export interface Props {
   icon?: string;
   title?: string;
   children?: MenuItem[];
+  expand?: boolean;
 }
 
 export interface Emits {

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

@@ -1,12 +1,16 @@
 <template>
   <div
     v-if="isMenuVisible"
-    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-[22px]"
+    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_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,
     }"
+    @mouseenter="!isExpanded && expandOverHandler(true)"
+    @mouseover="!isExpanded && expandOverHandler(true)"
+    @mouseleave="expandOverHandler(false)"
   >
     <!-- Show backdrop overlay on mobile devices -->
     <div
@@ -14,17 +18,40 @@
       class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[#808c99] tw-opacity-60"
       @click="isMobileVisible = false"
     ></div>
-    <div class="vc-app-menu__inner tw-flex tw-flex-col tw-h-full">
+    <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-left-0 tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)] tw-pt-[22px] tw-shadow-[inset_0px_2px_5px_0px_#3654751A]"
+      :class="{
+        '!tw-w-[63px] !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,
+      }"
+    >
       <!-- Show menu close handler on mobile devices -->
       <div
         v-if="$isMobile.value"
         class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
       >
-        <VcIcon
-          icon="fas fa-times"
-          size="xl"
-          @click="isMobileVisible = false"
-        ></VcIcon>
+        <button @click="isMobileVisible = false">
+          <VcIcon
+            icon="fas fa-times"
+            size="xl"
+          ></VcIcon>
+        </button>
+      </div>
+
+      <div
+        v-if="$isDesktop.value"
+        class="tw-pl-[21px] 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)]"
+          @click="toggleMenu"
+        >
+          <VcIcon
+            icon="fas fa-bars"
+            size="xl"
+          ></VcIcon>
+        </button>
       </div>
 
       <!-- Show scrollable area with menu items -->
@@ -32,7 +59,13 @@
         :no-padding="true"
         class="tw-grow tw-basis-0"
       >
-        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-6 tw-h-full">
+        <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,
+          }"
+        >
           <slot
             v-if="!$isDesktop.value"
             name="mobile"
@@ -48,6 +81,7 @@
             :icon="item.icon"
             :title="item.title as string"
             :children="item.children"
+            :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
             @click="
               (event) => {
                 $emit('item:click', event ? event : item);
@@ -58,7 +92,7 @@
         </div>
       </VcContainer>
       <div
-        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
+        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-4"
         @click="$emit('version:click')"
       >
         {{ version }}
@@ -73,6 +107,7 @@ import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
 import { VcContainer, VcIcon } from "./../../../../";
 import { useMenuService } from "../../../../../../core/composables";
 import { MenuItem } from "../../../../../../core/types";
+import { useLocalStorage } from "@vueuse/core";
 
 export interface Props {
   version: string;
@@ -91,6 +126,8 @@ withDefaults(defineProps<Props>(), {
 
 defineEmits<Emits>();
 const { menuItems } = useMenuService();
+const isExpanded = useLocalStorage("VC_APP_MENU_EXPANDED", true);
+const isExpandedOver = ref(false);
 
 const isMobileVisible = ref(false);
 
@@ -98,6 +135,16 @@ const isMenuVisible = computed(() => {
   return !!menuItems.value.length;
 });
 
+function toggleMenu() {
+  isExpanded.value = !isExpanded.value;
+}
+
+function expandOverHandler(state: boolean) {
+  if (isExpandedOver.value !== state) {
+    isExpandedOver.value = state;
+  }
+}
+
 defineExpose({
   isMobileVisible,
 });
@@ -108,6 +155,9 @@ defineExpose({
   --app-menu-width: 230px;
   --app-menu-background-color: #ffffff;
   --app-menu-version-color: #838d9a;
+
+  --app-menu-burger-background-color: rgba(255, 255, 255, 0.5);
+  --app-menu-burger-color: #319ed4;
 }
 
 .vc-app-menu {

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

@@ -10,7 +10,6 @@
     :class="[
       {
         'vc-app_touch': $isTouch,
-        'vc-app_phone': $isPhone.value,
         'vc-app_mobile': $isMobile.value,
       },
     ]"

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

@@ -70,12 +70,64 @@
       class="tw-shrink-0"
       :items="toolbarItems"
     ></VcBladeToolbar>
-    <slot></slot>
+
+    <div class="tw-flex-1 tw-overflow-auto">
+      <div
+        class="tw-flex tw-flex-row tw-h-full"
+        :class="{
+          'tw-flex-col': $isMobile.value,
+        }"
+      >
+        <slot></slot>
+
+        <div
+          v-show="$slots['widgets'] && !isWidgetContainerEmpty"
+          ref="widgetsRef"
+          class="vc-blade__widgets tw-flex"
+          :class="{
+            '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,
+          }"
+        >
+          <div
+            ref="widgetsContainerRef"
+            class="vc-blade__widget-container tw-flex tw-overflow-auto"
+            :class="{
+              'tw-flex-col': $isDesktop.value,
+              'tw-flex-row': $isMobile.value,
+            }"
+          >
+            <slot
+              name="widgets"
+              :is-expanded="isExpanded"
+            ></slot>
+          </div>
+
+          <div
+            class="tw-flex tw-flex-auto"
+            :class="{
+              'tw-flex-col tw-justify-end': $isDesktop.value,
+              'tw-w-12 tw-max-w-12 tw-bg-white tw-items-center tw-justify-center tw-px-4 tw-ml-auto': $isMobile.value,
+            }"
+          >
+            <VcIcon
+              class="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer hover:tw-text-[#7ea8c4]"
+              :class="{
+                'tw-mb-4': $isDesktop.value,
+              }"
+              :icon="`fas fa-chevron-${$isDesktop.value ? (isExpanded ? 'right' : 'left') : isExpanded ? 'up' : 'down'}`"
+              @click="toggleWidgets"
+            ></VcIcon>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs, toValue } from "vue";
+import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
@@ -83,6 +135,7 @@ 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 } from "./../../";
 import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
+import { useLocalStorage } from "@vueuse/core";
 
 export interface Props {
   icon?: string;
@@ -117,12 +170,39 @@ withDefaults(defineProps<Props>(), {
 defineSlots<{
   actions: void;
   default: void;
+  widgets: void;
 }>();
 
 defineEmits<Emits>();
 const attrs = useAttrs();
 const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
 const { t } = useI18n({ useScope: "global" });
+const widgetsRef = ref();
+const widgetsContainerRef = ref();
+
+const isExpanded = useLocalStorage("VC_BLADE_WIDGETS_IS_EXPANDED", true);
+
+const toggleWidgets = () => {
+  isExpanded.value = !isExpanded.value;
+};
+const isWidgetContainerEmpty = ref(false);
+
+const checkEmpty = (el: HTMLElement) => {
+  const isEmpty = !el.innerText.trim() && Array.from(el.children).every((node) => node.nodeType === Node.COMMENT_NODE);
+  isWidgetContainerEmpty.value = isEmpty;
+};
+
+onMounted(() => {
+  if (widgetsRef.value) {
+    checkEmpty(widgetsContainerRef.value);
+  }
+});
+
+onUpdated(() => {
+  if (widgetsRef.value) {
+    checkEmpty(widgetsContainerRef.value);
+  }
+});
 
 const { open } = usePopup({
   component: vcPopupError,
@@ -142,9 +222,16 @@ const { open } = usePopup({
   --blade-color-error: #f14e4e;
   --blade-color-unsaved-changes: #82a6bd;
   --blade-color-unsaved-changes: #82a6bd;
+
+  --blade-widgets-width: 36px;
+  --blade-widgets-width-expanded: 80px;
 }
 
 .vc-app_mobile .vc-blade {
   @apply tw-m-0 tw-rounded-none;
 }
+
+.vc-app_mobile .vc-blade__widgets {
+  @apply tw-flex tw-flex-row;
+}
 </style>

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

@@ -23,29 +23,34 @@
             :model-value="value"
             :rules="cell.rules"
           >
-            <VcInputCurrency
-              :model-value="value"
-              :options="[]"
-              :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
-              currency-display="symbol"
-              class="tw-w-full"
-              :error="errors.length > 0"
-              :error-message="$isMobile.value ? errorMessage : undefined"
-              @update:model-value="$emit('update', { field: cell.id, value: $event })"
-              @blur="onBlur({ row: index, field: cell.id, errors })"
-            >
+            <VcTooltip placement="bottom">
+              <template #default>
+                <VcInputCurrency
+                  :model-value="value"
+                  :options="[]"
+                  :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
+                  currency-display="symbol"
+                  class="tw-w-full"
+                  :error="errors.length > 0"
+                  :error-message="$isMobile.value ? errorMessage : undefined"
+                  @update:model-value="$emit('update', { field: cell.id, value: $event })"
+                  @blur="onBlur({ row: index, field: cell.id, errors })"
+                >
+                  <template
+                    v-if="$isDesktop.value && errors.length > 0"
+                    #append-inner
+                  >
+                    <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                  </template>
+                </VcInputCurrency>
+              </template>
               <template
-                v-if="$isDesktop.value && errors.length > 0"
-                #append-inner
+                v-if="errors.length > 0"
+                #tooltip
               >
-                <VcTooltip placement="bottom-end">
-                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
-                  <template #tooltip>
-                    <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
-                  </template>
-                </VcTooltip>
+                <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
               </template>
-            </VcInputCurrency>
+            </VcTooltip>
           </Field>
         </template>
         <template v-else>
@@ -124,6 +129,7 @@
         size="s"
         aspect="1x1"
         :src="value as string"
+        :empty-icon="('emptyIcon' in cell && cell.emptyIcon) || undefined"
         background="contain"
       />
     </template>
@@ -156,27 +162,32 @@
           :model-value="value"
           :rules="cell.rules"
         >
-          <VcInput
-            :model-value="value"
-            class="tw-w-full"
-            type="number"
-            :error="errors.length > 0"
-            :error-message="$isMobile.value ? errorMessage : undefined"
-            @update:model-value="$emit('update', { field: cell.id, value: $event })"
-            @blur="onBlur({ row: index, field: cell.id, errors })"
-          >
+          <VcTooltip placement="bottom">
+            <template #default>
+              <VcInput
+                :model-value="value"
+                class="tw-w-full"
+                type="number"
+                :error="errors.length > 0"
+                :error-message="$isMobile.value ? errorMessage : undefined"
+                @update:model-value="$emit('update', { field: cell.id, value: $event })"
+                @blur="onBlur({ row: index, field: cell.id, errors })"
+              >
+                <template
+                  v-if="$isDesktop.value && errors.length > 0"
+                  #append-inner
+                >
+                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                </template>
+              </VcInput>
+            </template>
             <template
-              v-if="$isDesktop.value && errors.length > 0"
-              #append-inner
+              v-if="errors.length > 0"
+              #tooltip
             >
-              <VcTooltip placement="bottom-end">
-                <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
-                <template #tooltip>
-                  <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
-                </template>
-              </VcTooltip>
+              <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
             </template>
-          </VcInput>
+          </VcTooltip>
         </Field>
       </template>
       <template v-else>
@@ -220,26 +231,30 @@
           :model-value="value"
           :rules="cell.rules"
         >
-          <VcInput
-            :model-value="value"
-            class="tw-w-full"
-            :error="errors.length > 0"
-            :error-message="$isMobile.value ? errorMessage : undefined"
-            @update:model-value="$emit('update', { field: cell.id, value: $event })"
-            @blur="onBlur({ row: index, field: cell.id, errors })"
-          >
+          <VcTooltip placement="bottom">
+            <template #default>
+              <VcInput
+                :model-value="value"
+                class="tw-w-full"
+                :error="errors.length > 0"
+                :error-message="$isMobile.value ? errorMessage : undefined"
+                @update:model-value="$emit('update', { field: cell.id, value: $event })"
+                @blur="onBlur({ row: index, field: cell.id, errors })"
+              >
+                <template
+                  v-if="$isDesktop.value && errors.length > 0"
+                  #append-inner
+                >
+                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon> </template
+              ></VcInput>
+            </template>
             <template
-              v-if="$isDesktop.value && errors.length > 0"
-              #append-inner
+              v-if="errors.length > 0"
+              #tooltip
             >
-              <VcTooltip placement="bottom-end">
-                <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
-                <template #tooltip>
-                  <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
-                </template>
-              </VcTooltip>
-            </template></VcInput
-          >
+              <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+            </template>
+          </VcTooltip>
         </Field>
       </template>
       <template v-else>
@@ -259,6 +274,7 @@ import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
 import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
+import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
 
 export interface Props {