@vc-shell/framework 1.0.223 → 1.0.224

package/ui/components/atoms/vc-container/vc-container.vue

@@ -7,38 +7,41 @@
         'vc-container_nopadding': noPadding,
       },
     ]"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-    @touchend="touchEnd"
+    @touchstart="onTouchstart"
+    @touchmove="onTouchmove"
+    @touchend="onTouchend"
   >
     <div
-      ref="component"
-      class="vc-container__inner"
+      :class="['vc-container__overscroll', { 'vc-container__overscroll_touching': touching }]"
       :style="{
-        transform: dist ? `translate3d(0, ${dist}px, 0)` : '',
+        top: -1 * pullDist + topOffset + 'px',
+        height: pullDist + 'px',
       }"
     >
-      <div
-        v-if="usePtr && dist > 0"
-        class="vc-container__overscroll"
-        :class="{ 'vc-container__overscroll_passed': status === 'loosing' }"
-        :style="{ height: dist ? `${dist}px` : '0px' }"
-      >
+      <div class="vc-container__status">
         <VcIcon
-          :icon="status === 'pulling' ? 'fas fa-arrow-down' : 'fas fa-sync'"
-          :class="[iconClass]"
-          :style="{ transform: status === 'pulling' ? `rotate(${dist * 3}deg)` : '' }"
+          :icon="canRefresh || goingUp ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"
+          class="vc-container__overscroll-icon"
         ></VcIcon>
-        <span v-if="status === 'pulling'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
-        <span v-else-if="status === 'loosing'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
+        <span v-if="!(canRefresh || goingUp)">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
+        <span v-else>{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
       </div>
+    </div>
+    <div
+      ref="component"
+      class="vc-container__inner"
+      :class="{
+        'vc-container__inner_touching': touching,
+      }"
+      :style="{ top: topOffset + 'px' }"
+    >
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, nextTick } from "vue";
+import { ref, onMounted, computed, shallowRef, watch } from "vue";
 import { VcIcon } from "./../vc-icon";
 
 export interface Props {
@@ -51,39 +54,21 @@ export interface Emits {
   (event: "scroll:ptr"): void;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
-const startY = ref(0);
-const ceiling = ref();
 const pullDist = ref(60);
-const dist = ref(0);
-const status = ref("normal");
-const delta = ref(0);
+const touchDiff = shallowRef(0);
+let touchstartY = 0;
+const refreshing = shallowRef(false);
+const goingUp = shallowRef(false);
+const touching = shallowRef(false);
 
-onMounted(() => {
-  const observer = new ResizeObserver(() => {
-    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
-  });
-
-  if (component.value) {
-    observer.observe(component.value);
-  }
-});
-
-const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
-
-const iconClass = computed(() => {
-  if (status.value === "loosing") {
-    return "vc-container__overscroll-icon_refresh";
-  } else if (status.value === "pulling") {
-    return "vc-container__overscroll-icon_pulling";
-  }
-  return "vc-container__overscroll-icon";
-});
+const topOffset = computed(() => Math.max(0, Math.min(pullDist.value, touchDiff.value)));
+const canRefresh = computed(() => touchDiff.value >= pullDist.value && !refreshing.value);
 
 const scrollTop = () => {
   if (component.value) {
@@ -91,81 +76,48 @@ const scrollTop = () => {
   }
 };
 
-function touchStart(e: TouchEvent): void {
-  if (!touchable.value) {
-    return;
-  }
-  checkPullStart(e);
+function onTouchstart(e: TouchEvent | MouseEvent) {
+  if (refreshing.value) return;
+  touching.value = true;
+  touchstartY = "clientY" in e ? e.clientY : e.touches[0].clientY;
 }
 
-function touchMove(e: TouchEvent): void {
-  if (props.usePtr) {
-    const touch = e.touches[0];
-    if (!touchable.value) {
-      return;
-    }
+function onTouchmove(e: TouchEvent | MouseEvent) {
+  if (refreshing.value || !touching.value) return;
 
-    if (!ceiling.value) {
-      checkPullStart(e);
-    }
+  const touchY = "clientY" in e ? e.clientY : e.touches[0].clientY;
 
-    delta.value = touch.clientY - startY.value;
-
-    if (ceiling.value && delta.value >= 0 && delta.value < 80) {
-      e.preventDefault();
-
-      setStatus(ease(delta.value));
-    }
-  }
-}
-
-function touchEnd(): void {
-  if (delta.value && touchable.value) {
-    if (status.value === "loosing") {
-      nextTick(() => emit("scroll:ptr"));
-    }
-    setStatus(0);
+  if (scroll.value) {
+    touchDiff.value = touchY - touchstartY;
   }
 }
 
-function getScrollTop(el: HTMLElement) {
-  const top = el.scrollTop;
+function onTouchend() {
+  if (refreshing.value) return;
+  touching.value = false;
 
-  return Math.max(top, 0);
-}
-
-function checkPullStart(e: TouchEvent) {
-  ceiling.value = getScrollTop(component.value as HTMLElement) === 0;
-
-  if (ceiling.value) {
-    startY.value = e.touches[0].clientY;
-  }
-}
-
-function setStatus(distance: number) {
-  let stat;
-  if (distance === 0) {
-    stat = "normal";
+  if (canRefresh.value) {
+    touchDiff.value = 0;
+    refreshing.value = false;
+    emit("scroll:ptr");
   } else {
-    stat = distance < pullDist.value ? "pulling" : "loosing";
-  }
-  dist.value = distance;
-  if (stat !== status.value) {
-    status.value = stat;
+    touchDiff.value = 0;
   }
 }
 
-function ease(distance: number) {
-  const pullDistance = +pullDist.value;
-  if (distance > pullDistance) {
-    if (distance < pullDistance * 2) {
-      distance = pullDistance + (distance - pullDistance) / 2;
-    } else {
-      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
-    }
+onMounted(() => {
+  const observer = new ResizeObserver(() => {
+    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
+  });
+
+  if (component.value) {
+    observer.observe(component.value);
   }
-  return Math.round(distance);
-}
+});
+
+watch(topOffset, (newVal, oldVal) => {
+  goingUp.value = newVal < oldVal;
+});
 
 defineExpose({
   scrollTop,
@@ -190,33 +142,29 @@ defineExpose({
   }
 
   &__overscroll {
-    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden tw-gap-2;
+    @apply tw-absolute tw-w-full [transition:top_0.3s_ease-out];
 
-    &_passed {
-      @apply tw-text-[#43b0e6];
+    &_touching {
+      @apply tw-transition-none;
     }
   }
 
+  &__status {
+    @apply tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center tw-pb-[10px];
+  }
+
   &__overscroll-icon {
     @apply tw-text-[color:#a1c0d4];
-
-    &_pulling {
-      @apply tw-text-[color:#a1c0d4];
-    }
-
-    &_refresh {
-      animation: tw-spin 2s linear infinite;
-    }
   }
 
   &__overscroll span {
-    @apply tw-mb-2 tw-text-sm tw-text-gray-500;
+    @apply tw-ml-2 tw-text-sm tw-text-gray-500;
   }
 
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
     tw-flex-1 tw-p-[var(--container-scroll-padding)]
-    tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
+    [transition:top_0.3s_ease-out] [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
 
     &::-webkit-scrollbar {
       @apply tw-w-[var(--container-scroll-width)] tw-bg-transparent;
@@ -232,19 +180,14 @@ defineExpose({
       tw-overflow-x-hidden
       hover:tw-bg-[color:var(--container-scroll-color-hover)];
     }
+
+    &_touching {
+      transition: none;
+    }
   }
 
   &_nopadding &__inner {
     @apply tw-p-0;
   }
 }
-
-@keyframes tw-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>

package/ui/components/atoms/vc-progress/vc-progress.stories.ts

@@ -14,7 +14,7 @@ export default {
       options: ["default", "striped"],
       table: {
         type: {
-          summary: ["default", "striped"],
+          summary: '["default", "striped"]',
         },
       },
     },

package/ui/components/atoms/vc-status/vc-status.stories.ts

@@ -18,7 +18,7 @@ export default {
       options: VARIANT,
       table: {
         type: {
-          summary: VARIANT,
+          summary: VARIANT.join(", "),
         },
       },
     },

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

@@ -104,6 +104,9 @@ const toolbar = {
     "blockquote",
     { list: "ordered" },
     { list: "bullet" },
+    { color: [] },
+    { background: [] },
+    "clean",
   ],
   handlers: {},
 };

package/ui/components/molecules/vc-field/vc-field.stories.ts

@@ -36,7 +36,7 @@ export default {
       },
     },
     aspectRatio: {
-      control: "array",
+      control: "object",
       table: {
         type: {
           summary: "number[]",
@@ -44,7 +44,7 @@ export default {
       },
     },
   },
-} as Meta;
+} satisfies Meta;
 
 const Template: StoryFn = (args) => ({
   components: { VcField },

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -18,7 +18,7 @@ export default {
           summary: "number",
         },
         defaultValue: {
-          summary: 1024,
+          summary: "1024",
         },
       },
     },

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(