@vc-shell/framework 1.0.222 → 1.0.224

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

@@ -164,11 +164,11 @@
                     <!-- Select chevron-->
                     <div
                       v-if="!disabled"
-                      class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
+                      class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3 tw-cursor-pointer"
+                      @click.stop="toggleDropdown"
                     >
                       <div
-                        class="vc-select__chevron tw-cursor-pointer tw-flex-nowrap tw-text-[color:var(--select-chevron-color)] hover:tw-text-[color:var(--select-chevron-color-hover)]"
-                        @click.stop="toggleDropdown"
+                        class="vc-select__chevron tw-flex-nowrap tw-text-[color:var(--select-chevron-color)] hover:tw-text-[color:var(--select-chevron-color-hover)]"
                       >
                         <VcIcon
                           size="s"

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

@@ -173,7 +173,7 @@ const onMenuItemClick = function (item: MenuItem) {
     if (typeof menuRoute === "undefined") {
       openRoot();
     } else {
-      router.replace({ name: menuRoute?.name, params: route.params });
+      router.push({ name: menuRoute?.name, params: route.params });
     }
   }
 };
@@ -185,7 +185,7 @@ const openRoot = async () => {
     const mainRoute = routes.find((route) => route.meta?.root);
     const mainRouteAlias = routes.find((route) => route.aliasOf?.path === mainRoute?.path) ?? mainRoute;
 
-    router.replace({ name: mainRouteAlias?.name, params: route.params });
+    router.push({ name: mainRouteAlias?.name, params: route.params });
   }
 };
 

package/ui/components/organisms/vc-table/_internal/vc-table-add-new/vc-table-add-new.vue

@@ -1,25 +1,23 @@
 o
 <template>
-  <tr v-if="editing && addNewRowButton">
-    <td>
-      <div class="tw-p-3">
-        <VcButton
-          v-if="addNewRowButton.show"
-          text
-          @click="$emit('onAddNewRow')"
-        >
-          <div class="tw-flex tw-flex-row tw-gap-2 tw-items-center">
-            <VcIcon
-              icon="fas fa-plus"
-              size="m"
-              class="tw-text-[#41afe6]"
-            />
-            {{ unref(addNewRowButton.title) }}
-          </div>
-        </VcButton>
-      </div>
-    </td>
-  </tr>
+  <div v-if="editing && addNewRowButton">
+    <div class="tw-p-3">
+      <VcButton
+        v-if="addNewRowButton.show"
+        text
+        @click="$emit('onAddNewRow')"
+      >
+        <div class="tw-flex tw-flex-row tw-gap-2 tw-items-center">
+          <VcIcon
+            icon="fas fa-plus"
+            size="m"
+            class="tw-text-[#41afe6]"
+          />
+          {{ unref(addNewRowButton.title) }}
+        </div>
+      </VcButton>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

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

@@ -2,8 +2,16 @@
   <div>
     <!-- Money cell -->
     <template v-if="cell.type === 'money'">
+      <template v-if="!isEditable && (typeof value === 'undefined' || Number(value) === 0)">
+        <div
+          class="tw-truncate"
+          :class="cell.class"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
+        </div>
+      </template>
       <div
-        v-if="typeof Number(value) === 'number'"
+        v-else-if="typeof Number(value) === 'number'"
         class="tw-truncate"
         :class="cell.class"
       >
@@ -22,11 +30,12 @@
               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="errors.length > 0"
+                v-if="$isDesktop.value && errors.length > 0"
                 #append-inner
               >
                 <VcTooltip placement="bottom-end">
@@ -43,14 +52,6 @@
           <span class="tw-truncate">{{ intlMoney(Number(value)) }}</span>
         </template>
       </div>
-      <template v-else-if="!isEditable">
-        <div
-          class="tw-truncate"
-          :class="cell.class"
-        >
-          N/A
-        </div>
-      </template>
     </template>
 
     <!-- Date ago cell -->
@@ -70,7 +71,7 @@
         v-else
         class="tw-truncate"
       >
-        N/A
+        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
       </div>
     </span>
 
@@ -112,7 +113,7 @@
         v-else
         class="tw-truncate"
       >
-        N/A
+        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
       </div>
     </div>
 
@@ -144,7 +145,7 @@
     <!-- Number cell -->
     <div
       v-else-if="cell.type === 'number'"
-      class="tw-text-right tw-truncate"
+      class="tw-truncate"
       :class="cell.class"
     >
       <template v-if="isEditable">
@@ -160,11 +161,12 @@
             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="errors.length > 0"
+              v-if="$isDesktop.value && errors.length > 0"
               #append-inner
             >
               <VcTooltip placement="bottom-end">
@@ -178,7 +180,11 @@
         </Field>
       </template>
       <template v-else>
-        {{ typeof Number(value) === "number" && Number(value) >= 0 ? Number(value).toFixed(0) : "N/A" }}
+        {{
+          typeof Number(value) === "number" && Number(value) >= 0
+            ? Number(value).toFixed(0)
+            : $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET")
+        }}
       </template>
     </div>
 
@@ -218,11 +224,12 @@
             :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="errors.length > 0"
+              v-if="$isDesktop.value && errors.length > 0"
               #append-inner
             >
               <VcTooltip placement="bottom-end">

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

@@ -31,7 +31,13 @@
                 size="s"
                 class="tw-w-4"
               />
-              <p class="tw-ml-2">{{ item.title }}</p>
+              <p class="tw-ml-2">
+                {{
+                  $te(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
+                    ? $t(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
+                    : item.title
+                }}
+              </p>
             </div>
           </div>
         </VcContainer>
@@ -48,6 +54,7 @@ import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
 
 export interface Props {
   items: ITableColumns[];
+  stateKey: string;
 }
 
 export interface Emits {

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

@@ -0,0 +1,76 @@
+<template>
+  <!-- Empty table view -->
+  <template v-if="!(items && items.length && !columnsInit)">
+    <slot
+      v-if="searchValue || searchValue === '' || activeFilterCount"
+      name="notfound"
+    >
+      <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+        <img
+          v-if="notfound?.image"
+          :src="notfound.image"
+        />
+        <div class="tw-m-4 vc-table__empty-text">
+          {{ notfound?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_FOUND") }}
+        </div>
+        <VcButton
+          v-if="notfound?.action"
+          @click="notfound?.clickHandler"
+        >
+          {{ notfound.action }}
+        </VcButton>
+      </div>
+    </slot>
+    <slot
+      v-else
+      name="empty"
+    >
+      <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+        <img
+          v-if="empty?.image"
+          :src="empty.image"
+        />
+        <div class="tw-m-4 tw-text-xl tw-font-medium">
+          {{ empty?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY") }}
+        </div>
+        <VcButton
+          v-if="empty?.action"
+          @click="empty?.clickHandler"
+        >
+          {{ empty.action }}
+        </VcButton>
+      </div>
+    </slot>
+  </template>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { Ref } from "vue";
+
+export interface Props {
+  items: any[];
+  columnsInit: boolean;
+  searchValue?: string;
+  activeFilterCount: number;
+  notfound?: {
+    image?: string;
+    text: string | Ref<string>;
+    action?: string;
+    clickHandler?: () => void;
+  };
+  empty?: {
+    image?: string;
+    text: string | Ref<string>;
+    action?: string;
+    clickHandler?: () => void;
+  };
+}
+
+defineProps<Props>();
+defineSlots<{
+  notfound: void;
+  empty: void;
+}>();
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -28,7 +28,7 @@
         <div
           class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
           :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].type}`]"
-          @click.stop="leftSwipeActions[0].clickHandler(item as T)"
+          @click.stop="leftSwipeActions?.[0].clickHandler(item as T)"
         >
           <VcIcon :icon="leftSwipeActions[0].icon" />
           <div class="tw-mt-1 tw-text-lg tw-text-center">
@@ -191,15 +191,17 @@ const { isSwiping, lengthX } = useSwipe(target, {
 
 const rightSwipeActions = computed(
   () =>
-    itemActions.value &&
-    itemActions.value.length &&
-    itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right"),
+    (itemActions.value &&
+      itemActions.value.length &&
+      itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right")) ||
+    undefined,
 );
 const leftSwipeActions = computed(
   () =>
-    itemActions.value &&
-    itemActions.value.length &&
-    itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left"),
+    (itemActions.value &&
+      itemActions.value.length &&
+      itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left")) ||
+    undefined,
 );
 
 watch(