@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

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

@@ -133,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 import { VcInput, VcSelect } from "@ui/components/molecules";
 import { VcButton } from "@ui/components/atoms";
 import type { FilterType, FilterOption, FilterValue } from "@ui/components/organisms/vc-table/types";
@@ -257,9 +257,7 @@ const toggleOverlay = () => {
   isOpen.value = !isOpen.value;
 
   if (isOpen.value) {
-    initLocalState();
     nextTick(() => {
-      updateOverlayPosition();
       // Focus first focusable element inside the overlay (works for all filter types)
       nextTick(() => {
         const firstFocusable = overlayRef.value?.querySelector<HTMLElement>(
@@ -362,23 +360,39 @@ const handleClickOutside = (event: MouseEvent) => {
   closeOverlay();
 };
 
-// Sync active state: re-init when overlay reopens
-watch(isOpen, (opened) => {
-  if (opened) {
-    initLocalState();
-  }
-});
+let overlayListenersAttached = false;
 
-onMounted(() => {
+const attachOverlayListeners = () => {
+  if (overlayListenersAttached || typeof window === "undefined" || typeof document === "undefined") return;
   document.addEventListener("click", handleClickOutside);
   window.addEventListener("resize", updateOverlayPosition);
   window.addEventListener("scroll", updateOverlayPosition, true);
-});
+  overlayListenersAttached = true;
+};
 
-onBeforeUnmount(() => {
+const detachOverlayListeners = () => {
+  if (!overlayListenersAttached || typeof window === "undefined" || typeof document === "undefined") return;
   document.removeEventListener("click", handleClickOutside);
   window.removeEventListener("resize", updateOverlayPosition);
   window.removeEventListener("scroll", updateOverlayPosition, true);
+  overlayListenersAttached = false;
+};
+
+// Sync active state: re-init when overlay reopens and attach listeners lazily.
+watch(isOpen, (opened) => {
+  if (opened) {
+    initLocalState();
+    attachOverlayListeners();
+    nextTick(() => {
+      updateOverlayPosition();
+    });
+  } else {
+    detachOverlayListeners();
+  }
+});
+
+onBeforeUnmount(() => {
+  detachOverlayListeners();
 });
 </script>
 
@@ -389,11 +403,11 @@ onBeforeUnmount(() => {
 
   &__trigger {
     @apply tw-w-6 tw-h-6;
-    color: var(--neutrals-400, #9ca3af);
+    color: var(--neutrals-400);
 
     &--active {
-      color: var(--primary-500, #3b82f6);
-      background-color: var(--primary-100, #dbeafe);
+      color: var(--primary-500);
+      background-color: var(--primary-100);
     }
   }
 

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

@@ -7,18 +7,25 @@
     <template v-if="items.length === 0 && !loading">
       <slot name="empty">
         <TableEmpty
+          :icon="emptyIcon"
           :title="emptyTitle"
           :description="emptyDescription"
+          :action-label="emptyActionLabel"
+          :action-handler="emptyActionHandler"
         />
       </slot>
     </template>
 
-    <!-- Loading state -->
+    <!-- Loading state — skeleton rows matching column layout -->
     <template v-else-if="loading && items.length === 0">
       <slot name="loading">
-        <div class="vc-data-table__loading">
-          <span>{{ loadingText }}</span>
-        </div>
+        <TableSkeletonRows
+          :columns="columns"
+          :rows="skeletonRows"
+          :get-column-width="getColumnWidth"
+          :get-cell-style="getCellStyle"
+          :show-selection-cell="showSelectionCell"
+        />
       </slot>
     </template>
 
@@ -119,6 +126,7 @@ import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
 import type { GroupedData } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
 import DataTableRow from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
 import TableEmpty from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
+import TableSkeletonRows from "@ui/components/organisms/vc-table/components/_internal/TableSkeletonRows.vue";
 
 /**
  * Base item type — actual generic enforcement happens in VcDataTable.
@@ -136,6 +144,7 @@ export interface RowProps<T> {
   index: number;
   columns: ColumnInstance[];
   isSelected: boolean;
+  isActive: boolean;
   isSelectable: boolean;
   selectionMode?: "single" | "multiple";
   showSelectionCell: boolean;
@@ -167,8 +176,24 @@ const props = defineProps<{
   emptyTitle?: string;
   /** Empty state description */
   emptyDescription?: string;
-  /** Loading text */
+  /** Empty state icon */
+  emptyIcon?: string;
+  /** Empty state action button label */
+  emptyActionLabel?: string;
+  /** Empty state action button handler */
+  emptyActionHandler?: () => void;
+  /** Loading text (kept for custom loading slot consumers) */
   loadingText?: string;
+  /** Number of skeleton rows to show during loading */
+  skeletonRows?: number;
+  /** Visible columns (for skeleton rendering) */
+  columns: ColumnInstance[];
+  /** Column width resolver (for skeleton rendering) */
+  getColumnWidth: (col: VcColumnProps) => string | undefined;
+  /** Cell style resolver (for skeleton rendering) */
+  getCellStyle: (col: VcColumnProps) => object | undefined;
+  /** Whether selection cell (checkbox) is shown */
+  showSelectionCell?: boolean;
 
   // === Grouping ===
   /** Whether grouping is enabled */
@@ -233,6 +258,12 @@ const emit = defineEmits<{
   "row-drop": [event: DragEvent];
 }>();
 
+// ============================================================================
+// Skeleton helpers
+// ============================================================================
+
+const skeletonRows = computed(() => props.skeletonRows ?? 20);
+
 // ============================================================================
 // Grouping computed helpers
 // ============================================================================
@@ -308,9 +339,6 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
   @apply tw-flex tw-flex-col tw-overflow-y-auto tw-flex-auto tw-min-h-0;
 }
 
-.vc-data-table__loading {
-  @apply tw-p-4 tw-text-center tw-text-neutrals-500;
-}
 
 .vc-data-table__rows-container {
   @apply tw-flex tw-flex-col;

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

@@ -129,7 +129,7 @@
  * Extracted from VcDataTable.vue to reduce template complexity.
  */
 import { computed } from "vue";
-import * as _ from "lodash-es";
+import { get } from "lodash-es";
 import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
 import TableCheckbox from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
 import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
@@ -263,7 +263,7 @@ const isInlineEditing = computed(() => {
 
 // Get cell value using lodash _.get for nested fields
 const cellValue = computed(() => {
-  return _.get(props.item, fieldName.value || "");
+  return get(props.item, fieldName.value || "");
 });
 
 // Currency for money cells

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

@@ -278,7 +278,7 @@ const handleFilterClear = (col: ColumnInstance) => {
   height: 36px;
   border-radius: 16px 0 0 16px;
 
-  background: var(--neutrals-200, #e5e5e5);
+  background: var(--neutrals-200);
   box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
 
@@ -292,7 +292,7 @@ const handleFilterClear = (col: ColumnInstance) => {
   &:hover,
   &--active {
     transform: translateY(-50%) translateX(0);
-    background: var(--primary-50, #eff6ff);
+    background: var(--primary-50);
 
     .vc-col-switcher-trigger__chevron {
       opacity: 0;
@@ -307,10 +307,10 @@ const handleFilterClear = (col: ColumnInstance) => {
 
   // Active state (panel open): stronger primary accent
   &--active {
-    background: var(--primary-100, #dbeafe);
+    background: var(--primary-100);
 
     .vc-col-switcher-trigger__action {
-      color: var(--primary-700, #1d4ed8);
+      color: var(--primary-700);
     }
   }
 
@@ -323,7 +323,7 @@ const handleFilterClear = (col: ColumnInstance) => {
     align-items: center;
     justify-content: flex-start;
     padding-left: 3px;
-    color: var(--neutrals-500, #737373);
+    color: var(--neutrals-500);
     opacity: 1;
     transition: opacity 0.2s ease;
     pointer-events: none; // chevron is decorative, clicks go to container
@@ -337,8 +337,8 @@ const handleFilterClear = (col: ColumnInstance) => {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: var(--primary-100, #dbeafe);
-    color: var(--primary-600, #2563eb);
+    background: var(--primary-100);
+    color: var(--primary-600);
     opacity: 0;
     transition: opacity 0.2s ease;
     pointer-events: none; // hidden until hover

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

@@ -19,6 +19,7 @@
     <TableRow
       v-if="!groupingEnabled || !expandableRowGroups || isGroupRowExpanded"
       :selected="isSelected"
+      :active="isActive"
       :reorderable="reorderable"
       :show-drag-handle="showDragHandle"
       :index="index"
@@ -154,6 +155,8 @@ const props = defineProps<{
   // === Selection ===
   /** Whether this row is selected */
   isSelected?: boolean;
+  /** Whether this row is the active (highlighted) row */
+  isActive?: boolean;
   /** Whether this row can be selected */
   isSelectable?: boolean;
   /** Selection mode: 'single' or 'multiple' */

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

@@ -52,7 +52,7 @@ defineEmits<{
     @apply tw-inline-flex tw-items-center tw-justify-center tw-ml-1;
     @apply tw-min-w-5 tw-h-5 tw-px-1.5 tw-rounded-full;
     @apply tw-text-xs tw-font-semibold tw-text-additional-50;
-    background-color: var(--primary-500, #3b82f6);
+    background-color: var(--primary-500);
   }
 }
 </style>

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

@@ -1,5 +1,7 @@
 <template>
+  <!-- Desktop: dropdown panel anchored to the button -->
   <VcDropdownPanel
+    v-if="!isMobile"
     :show="show"
     :anchor-ref="anchorRef"
     :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.GLOBAL_FILTERS.TITLE')"
@@ -97,23 +99,128 @@
       </VcButton>
     </template>
   </VcDropdownPanel>
+
+  <!-- Mobile: bottom-sheet sidebar -->
+  <VcSidebar
+    v-else
+    :model-value="show"
+    position="bottom"
+    size="sm"
+    draggable
+    drag-handle
+    :close-button="false"
+    :inset="false"
+    :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.GLOBAL_FILTERS.TITLE')"
+    @update:model-value="emit('update:show', $event)"
+  >
+    <!-- Filters list (same content as desktop) -->
+    <div class="vc-global-filters-panel__content">
+      <div
+        v-for="filter in filters"
+        :key="filter.id"
+        class="vc-global-filters-panel__filter"
+      >
+        <label class="vc-global-filters-panel__label">{{ filter.label }}</label>
+
+        <slot
+          v-if="$slots[`filter-${filter.id}`]"
+          :name="`filter-${filter.id}`"
+          :value="localValues[filter.id]"
+          :update-value="(val: unknown) => updateFilterValue(filter.id, val)"
+        />
+
+        <VcInput
+          v-else-if="getType(filter.id) === 'text'"
+          :model-value="localValues[filter.id] as string"
+          :placeholder="filter.placeholder ?? ''"
+          size="small"
+          @update:model-value="updateFilterValue(filter.id, $event)"
+        />
+
+        <VcSelect
+          v-else-if="getType(filter.id) === 'select'"
+          :model-value="localValues[filter.id]"
+          :options="getFilterOptions(filter.filter)"
+          option-value="value"
+          option-label="label"
+          size="small"
+          :placeholder="filter.placeholder ?? ''"
+          :multiple="isMultipleSelect(filter.filter)"
+          clearable
+          emit-value
+          @update:model-value="updateFilterValue(filter.id, $event)"
+        />
+
+        <div
+          v-else-if="getType(filter.id) === 'dateRange'"
+          class="vc-global-filters-panel__range"
+        >
+          <div class="vc-global-filters-panel__range-field">
+            <span class="vc-global-filters-panel__range-label">
+              {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.FROM") }}
+            </span>
+            <VcInput
+              :model-value="getDateRangeStart(filter.id)"
+              type="date"
+              size="small"
+              @update:model-value="updateDateRangeStart(filter, $event)"
+            />
+          </div>
+          <div class="vc-global-filters-panel__range-field">
+            <span class="vc-global-filters-panel__range-label">
+              {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.TO") }}
+            </span>
+            <VcInput
+              :model-value="getDateRangeEnd(filter.id)"
+              type="date"
+              size="small"
+              @update:model-value="updateDateRangeEnd(filter, $event)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <template #footer>
+      <div class="vc-global-filters-panel__footer-actions">
+        <VcButton
+          variant="outline"
+          size="sm"
+          @click="clearAll"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.CLEAR") }}
+        </VcButton>
+        <VcButton
+          variant="primary"
+          size="sm"
+          @click="applyAll"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_FILTER.APPLY") }}
+        </VcButton>
+      </div>
+    </template>
+  </VcSidebar>
 </template>
 
 <script setup lang="ts">
 /**
- * GlobalFiltersPanel - Dropdown panel with global filters
+ * GlobalFiltersPanel - Responsive filter panel
+ *
+ * Desktop: floating VcDropdownPanel anchored to the filter button.
+ * Mobile: VcSidebar bottom sheet with drag-to-dismiss.
  *
- * Displays a list of configurable filters with Apply/Clear buttons.
  * Supports text, select (single/multi), and dateRange filter types.
  * Custom filter UI can be provided via named slots.
- * Uses VcDropdownPanel for positioning and backdrop.
  */
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, inject } from "vue";
 import { VcDropdownPanel } from "@ui/components/molecules";
 import { VcInput, VcSelect } from "@ui/components/molecules";
 import { VcButton } from "@ui/components/atoms";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 import type { GlobalFilterConfig } from "@ui/components/organisms/vc-table/types";
 import { useColumnFilter } from "@ui/components/organisms/vc-table/composables/useColumnFilter";
+import { IsMobileKey } from "@framework/injection-keys";
 
 interface Props {
   /** List of filter configurations (id, label, type, options) */
@@ -141,6 +248,8 @@ const emit = defineEmits<{
   clear: [];
 }>();
 
+const isMobile = inject(IsMobileKey, ref(false));
+
 // Use the same helpers as ColumnFilter
 const { getFilterType, getFilterOptions, isMultipleSelect, getRangeFields } = useColumnFilter();
 
@@ -324,5 +433,8 @@ const clearAll = () => {
     @apply tw-block tw-text-xs tw-text-neutrals-500;
   }
 
+  &__footer-actions {
+    @apply tw-flex tw-justify-end tw-gap-2 tw-px-4 tw-py-3;
+  }
 }
 </style>

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

@@ -102,7 +102,7 @@ const handleActionClick = (action: TableAction) => {
 
 .vc-table-composition__action-icon {
   @apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded tw-cursor-pointer tw-transition-colors;
-  color: var(--table-actions-icon-color, #333);
+  color: var(--table-actions-icon-color, var(--neutrals-900));
   font-size: 14px;
 
   &:hover:not(&--disabled) {

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

@@ -139,7 +139,7 @@ const handleReset = () => {
 
   &__checkbox {
     @apply tw-cursor-pointer;
-    accent-color: var(--primary-500, #3b82f6);
+    accent-color: var(--primary-500);
   }
 
   &__label {

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

@@ -11,28 +11,34 @@
         </div>
       </slot>
     </div>
-    <div v-if="$slots.action" class="vc-table-composition__empty-action">
-      <slot name="action" />
+    <div v-if="actionLabel || $slots.action" class="vc-table-composition__empty-action">
+      <slot name="action">
+        <VcButton
+          v-if="actionLabel"
+          variant="primary"
+          @click="actionHandler?.()"
+        >
+          {{ actionLabel }}
+        </VcButton>
+      </slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { VcIcon } from "@ui/components/atoms";
+import { VcIcon, VcButton } from "@ui/components/atoms";
 
 defineProps<{
-  /**
-   * Icon to display
-   */
+  /** Icon to display */
   icon?: string;
-  /**
-   * Title text
-   */
+  /** Title text */
   title?: string;
-  /**
-   * Description text
-   */
+  /** Description text */
   description?: string;
+  /** Action button label — renders VcButton when provided */
+  actionLabel?: string;
+  /** Action button click handler */
+  actionHandler?: () => void;
 }>();
 </script>
 

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

@@ -73,14 +73,14 @@ const handleClick = (event: MouseEvent) => {
 <style lang="scss">
 .vc-table-composition__group-header {
   @apply tw-relative tw-flex tw-items-center tw-w-full;
-  background-color: var(--vc-table-group-header-bg, #f3f4f6);
-  border-bottom: 1px solid var(--table-border-color, #e5e7eb);
+  background-color: var(--vc-table-group-header-bg, var(--neutrals-50));
+  border-bottom: 1px solid var(--table-border-color, var(--neutrals-200));
 
   &--expandable {
     @apply tw-cursor-pointer;
 
     &:hover {
-      background-color: var(--vc-table-group-header-bg-hover, #e5e7eb);
+      background-color: var(--vc-table-group-header-bg-hover, var(--neutrals-200));
     }
   }
 
@@ -94,12 +94,12 @@ const handleClick = (event: MouseEvent) => {
 
   &-key {
     @apply tw-font-semibold tw-text-sm;
-    color: var(--vc-table-group-header-text, #374151);
+    color: var(--vc-table-group-header-text, var(--neutrals-700));
   }
 
   &-count {
     @apply tw-text-sm;
-    color: var(--vc-table-group-header-count, #6b7280);
+    color: var(--vc-table-group-header-count, var(--neutrals-500));
   }
 }
 
@@ -107,16 +107,16 @@ const handleClick = (event: MouseEvent) => {
   @apply tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded tw-border-0 tw-p-0;
   @apply tw-transition-colors tw-duration-150;
   background-color: transparent;
-  color: var(--vc-table-group-toggle-color, #6b7280);
+  color: var(--vc-table-group-toggle-color, var(--neutrals-500));
 
   &:hover {
     background-color: var(--vc-table-group-toggle-bg-hover, rgba(0, 0, 0, 0.05));
-    color: var(--vc-table-group-toggle-color-hover, #374151);
+    color: var(--vc-table-group-toggle-color-hover, var(--neutrals-700));
   }
 
   &:focus {
     @apply tw-outline-none;
-    box-shadow: 0 0 0 2px var(--primary-200, #bfdbfe);
+    box-shadow: 0 0 0 2px var(--primary-200);
   }
 
   &-icon {

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

@@ -298,10 +298,10 @@ const handleDrop = (event: DragEvent) => {
   &--dragging {
     @apply tw-relative;
     z-index: 10 !important;
-    background-color: var(--primary-50, #eff6ff) !important;
+    background-color: var(--primary-50) !important;
     box-shadow:
       0 4px 12px -2px rgba(0, 0, 0, 0.12),
-      0 0 0 1px var(--primary-200, #bfdbfe) !important;
+      0 0 0 1px var(--primary-200) !important;
     border-radius: 6px !important;
     transform: scale(1.01) !important;
     cursor: grabbing !important;

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

@@ -3,7 +3,7 @@
     role="row"
     class="vc-table-composition__row"
     :class="{
-      'vc-table-composition__row--selected': selected,
+      'vc-table-composition__row--selected': selected || active,
       'vc-table-composition__row--clickable': isClickable,
       'vc-table-composition__row--header': variant === 'header',
       'vc-table-composition__row--dragging': isDragging,
@@ -30,7 +30,7 @@
         <rect x="2" y="10.5" width="12" height="1.5" rx="0.75"/>
       </svg>
     </div>
-    <TransitionGroup tag="div" name="vc-table-col-swap" class="vc-table-composition__row-transition-wrapper" :class="{ 'vc-table-composition__row-transition-wrapper--no-filler': hasFlexColumns }">
+    <TransitionGroup tag="div" :name="isColumnReordering ? 'vc-table-col-swap' : ''" class="vc-table-composition__row-transition-wrapper" :class="{ 'vc-table-composition__row-transition-wrapper--no-filler': hasFlexColumns }">
       <slot />
     </TransitionGroup>
     <!-- Row actions slot - rendered outside TransitionGroup for proper positioning -->
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { computed, inject, ref, TransitionGroup, type Ref } from "vue";
-import { TableContextKey, HasFlexColumnsKey } from "@ui/components/organisms/vc-table/keys";
+import { TableContextKey, HasFlexColumnsKey, IsColumnReorderingKey } from "@ui/components/organisms/vc-table/keys";
 
 const props = withDefaults(
   defineProps<{
@@ -48,6 +48,10 @@ const props = withDefaults(
      * Whether the row is selected
      */
     selected?: boolean;
+    /**
+     * Whether the row is the active (highlighted) row — visual only, does not affect checkbox
+     */
+    active?: boolean;
     /**
      * Row variant
      */
@@ -98,6 +102,7 @@ const emit = defineEmits<{
 
 const tableContext = inject(TableContextKey, null);
 const hasFlexColumns = inject(HasFlexColumnsKey, ref(false));
+const isColumnReordering = inject(IsColumnReorderingKey, ref(false));
 const isDragging = ref(false);
 
 const isClickable = computed(() => {
@@ -213,10 +218,10 @@ const handleDrop = (event: DragEvent) => {
   &--dragging {
     @apply tw-relative;
     z-index: 10 !important;
-    background-color: var(--primary-50, #eff6ff) !important;
+    background-color: var(--primary-50) !important;
     box-shadow:
       0 4px 12px -2px rgba(0, 0, 0, 0.12),
-      0 0 0 1px var(--primary-200, #bfdbfe) !important;
+      0 0 0 1px var(--primary-200) !important;
     border-radius: 6px !important;
     transform: scale(1.01) !important;
     cursor: grabbing !important;
@@ -231,7 +236,7 @@ const handleDrop = (event: DragEvent) => {
 
     &:hover {
       color: var(--table-drag-handle-color-hover, var(--neutrals-600));
-      background-color: var(--neutrals-100, #f5f5f5);
+      background-color: var(--neutrals-100);
     }
   }