@vc-shell/framework 1.1.0-alpha.6 → 1.1.0-alpha.7

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -6,7 +6,7 @@
       'vc-table-base-header--desktop': $isDesktop.value,
     }"
   >
-    <div
+    <!-- <div
       v-if="$isMobile.value && $slots['filters']"
       class="vc-table-base-header__filter-mobile"
     >
@@ -21,7 +21,7 @@
           ></slot>
         </template>
       </VcTableFilter>
-    </div>
+    </div> -->
 
     <VcInput
       ref="searchInput"
@@ -42,7 +42,7 @@
     </VcInput>
 
     <div
-      v-if="$isDesktop.value && $slots['filters']"
+      v-if="$slots['filters']"
       class="vc-table-base-header__filter-desktop"
     >
       <VcTableFilter
@@ -86,9 +86,9 @@ defineEmits<Emits>();
 :root {
   --table-base-header-border-color: var(--base-border-color, var(--neutrals-200));
   --table-base-header-input-icon-color: var(--neutrals-300);
-  --table-base-header-padding-horizontal: 12px;
+  --table-base-header-padding-horizontal: 18px;
   --table-base-header-padding-vertical: 9px;
-  --table-base-header-mobile-padding: 30px;
+  --table-base-header-mobile-padding: 28px;
 }
 
 .vc-table-base-header {

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-columns-header/vc-table-columns-header.vue

@@ -73,6 +73,7 @@
           </div>
         </div>
         <div
+          v-if="resizableColumns"
           class="vc-table-columns-header__cell-resizer"
           :class="{
             'vc-table-columns-header__cell-resizer--cursor': resizableColumns,

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

@@ -6,6 +6,7 @@
   >
     <VcButton
       text
+      class="vc-table-filter__button"
       @click="openPanel"
     >
       <VcBadge
@@ -31,36 +32,40 @@
     render="mobile"
     @close="closePanel"
   >
+    <template #header>
+      <span />
+    </template>
     <template #content>
       <div class="vc-table-filter">
         <!-- Filter panel -->
-        <teleport to="body">
+        <div
+          v-if="isPanelVisible"
+          ref="filterPanel"
+          :class="panelClass"
+          :style="filterStyle"
+          @click.self="closePanel"
+        >
           <div
-            v-if="isPanelVisible"
-            ref="filterPanel"
-            :class="panelClass"
-            :style="filterStyle"
-            @click.self="closePanel"
+            class="vc-table-filter__panel-inner"
+            :class="{
+              'vc-table-filter__panel-inner--desktop': $isDesktop.value,
+            }"
+            @click.stop
           >
-            <div
-              class="vc-table-filter__panel-inner"
-              @click.stop
-            >
-              <div class="vc-table-filter__panel-header">
-                <div class="vc-table-filter__panel-header-title">
-                  {{ title }}
-                </div>
-                <VcIcon
-                  class="vc-table-filter__panel-close"
-                  :icon="CrossSignIcon"
-                  size="xs"
-                  @click="closePanel"
-                />
+            <div class="vc-table-filter__panel-header">
+              <div class="vc-table-filter__panel-header-title">
+                {{ title }}
               </div>
-              <slot :close-panel="closePanel"></slot>
+              <VcIcon
+                class="vc-table-filter__panel-close"
+                :icon="CrossSignIcon"
+                size="xs"
+                @click="closePanel"
+              />
             </div>
+            <slot :close-panel="closePanel"></slot>
           </div>
-        </teleport>
+        </div>
       </div>
     </template>
   </Sidebar>
@@ -146,6 +151,10 @@ function closePanel() {
 .vc-table-filter {
   @apply tw-relative tw-overflow-visible;
 
+  &__button {
+    @apply tw-p-0 #{!important};
+  }
+
   &__icon-container {
     @apply tw-flex tw-flex-col tw-items-center tw-justify-center;
   }
@@ -176,15 +185,15 @@ function closePanel() {
       &-inner {
         @apply tw-w-full tw-h-full;
       }
-
-      &-close {
-        @apply tw-self-start;
-      }
     }
 
     .vc-row {
       @apply tw-block;
     }
+
+    .vc-table-filter__panel-inner {
+      @apply tw-bg-transparent;
+    }
   }
 
   &__panel {
@@ -193,7 +202,10 @@ function closePanel() {
 
   &__panel-inner {
     @apply tw-bg-[--table-filter-panel-bg] tw-box-border tw-flex tw-flex-col;
-    box-shadow: var(--table-filter-desktop-shadow);
+
+    &--desktop {
+      box-shadow: var(--table-filter-desktop-shadow);
+    }
   }
 
   &__panel-header {
@@ -205,7 +217,7 @@ function closePanel() {
   }
 
   &__panel-close {
-    @apply tw-text-[var(--table-filter-close-icon-color)] tw-cursor-pointer tw-self-end tw-shrink-0;
+    @apply tw-text-[var(--table-filter-close-icon-color)] tw-cursor-pointer tw-shrink-0;
   }
 }
 </style>

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

@@ -61,7 +61,7 @@ const isMobile = inject("isMobile") as Ref<boolean>;
 const slots = useSlots();
 
 const currentBladeId = computed(() => {
-  return blade?.value.navigation?.idx || 0;
+  return blade?.value?.id || 0;
 });
 
 const shouldShowSearch = computed(() => {

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

@@ -1,3 +1,4 @@
+
 <template>
   <div
     v-loading:1000="unref(loading) || columnsInit"
@@ -447,13 +448,13 @@ function handleHeaderClick(item: TableColPartial) {
   --table-resizer-color: var(--base-border-color, var(--neutrals-200));
   --table-reorder-color: var(--primary-400);
   --table-select-all-bg: var(--primary-100);
-  --table-row-bg-hover: var(--primary-50);
+  --table-row-bg-hover: var(--primary-100);
   --table-row-bg-odd: var(--additional-50);
   --table-row-bg-even: var(--neutrals-50);
-  --table-row-hover: var(--primary-50);
+  --table-row-hover: var(--primary-100);
   --table-row-bg-selected: var(--primary-100);
-  --table-actions-bg: var(--neutrals-100);
-  --table-actions-bg-hover: var(--primary-50);
+  --table-actions-bg: var(--primary-100);
+  --table-actions-bg-hover: var(--primary-100);
   --table-actions-bg-hover-selected-item: var(--primary-100);
   --table-actions-text-color: var(--neutrals-600);
   --table-actions-tooltip-text: var(--neutrals-600);

package/ui/composables/useVisibleElements.ts

@@ -41,6 +41,8 @@ export function useVisibleElements<T>({
       const element = elementRefs.get(getItemId(item));
       if (!element) continue;
 
+      if (!(element instanceof Element)) continue;
+
       const styles = getComputedStyle(element);
       const itemWidth = element.offsetWidth + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);