@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -0,0 +1,328 @@
+<template>
+  <VcDropdownPanel
+    :show="show"
+    :anchor-ref="anchorRef"
+    :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.GLOBAL_FILTERS.TITLE')"
+    width="280px"
+    max-width="400px"
+    @update:show="emit('update:show', $event)"
+  >
+    <!-- Filters list -->
+    <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>
+
+        <!-- Custom filter slot -->
+        <slot
+          v-if="$slots[`filter-${filter.id}`]"
+          :name="`filter-${filter.id}`"
+          :value="localValues[filter.id]"
+          :update-value="(val: unknown) => updateFilterValue(filter.id, val)"
+        />
+
+        <!-- Text filter -->
+        <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)"
+        />
+
+        <!-- Select filter -->
+        <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)"
+        />
+
+        <!-- DateRange filter -->
+        <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>
+      <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>
+    </template>
+  </VcDropdownPanel>
+</template>
+
+<script setup lang="ts">
+/**
+ * GlobalFiltersPanel - Dropdown panel with global filters
+ *
+ * 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 { VcDropdownPanel } from "../../../molecules";
+import { VcInput, VcSelect } from "../../../molecules";
+import { VcButton } from "../../../atoms";
+import type { GlobalFilterConfig } from "../types";
+import { useColumnFilter } from "../composables/useColumnFilter";
+
+interface Props {
+  /** List of filter configurations (id, label, type, options) */
+  filters: GlobalFilterConfig[];
+  /** Current filter values as key-value pairs (controlled) */
+  modelValue: Record<string, unknown>;
+  /** Whether panel is visible */
+  show: boolean;
+  /** Anchor element for positioning the floating panel */
+  anchorRef?: HTMLElement | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  anchorRef: null,
+});
+
+const emit = defineEmits<{
+  /** Emitted when filter values change */
+  "update:modelValue": [Record<string, unknown>];
+  /** Emitted to close panel */
+  "update:show": [boolean];
+  /** Emitted when Apply is clicked */
+  apply: [Record<string, unknown>];
+  /** Emitted when Clear is clicked */
+  clear: [];
+}>();
+
+// Use the same helpers as ColumnFilter
+const { getFilterType, getFilterOptions, isMultipleSelect, getRangeFields } = useColumnFilter();
+
+// Pre-compute filter types for each filter (for debugging and reactivity)
+const filterTypes = computed(() => {
+  const types: Record<string, string> = {};
+  for (const filter of props.filters) {
+    types[filter.id] = getFilterType(filter.filter);
+  }
+  return types;
+});
+
+// Helper to get pre-computed filter type
+const getType = (filterId: string) => filterTypes.value[filterId] || "none";
+
+// Local working copy of filter values
+const localValues = ref<Record<string, unknown>>({});
+
+// Initialize local values from props
+const initLocalValues = () => {
+  const values: Record<string, unknown> = {};
+  for (const filter of props.filters) {
+    values[filter.id] = props.modelValue[filter.id] ?? null;
+  }
+  localValues.value = values;
+};
+
+// Watch for external changes when panel is closed
+watch(
+  () => props.modelValue,
+  () => {
+    if (!props.show) {
+      initLocalValues();
+    }
+  },
+  { deep: true }
+);
+
+// Initialize when panel opens
+watch(
+  () => props.show,
+  (newShow) => {
+    if (newShow) {
+      initLocalValues();
+    }
+  }
+);
+
+// Update filter value
+const updateFilterValue = (filterId: string, value: unknown) => {
+  localValues.value = {
+    ...localValues.value,
+    [filterId]: value,
+  };
+};
+
+// DateRange helpers
+const getDateRangeStart = (filterId: string): string => {
+  const val = localValues.value[filterId];
+  if (val && typeof val === "object" && "start" in val) {
+    return (val as { start?: string }).start ?? "";
+  }
+  return "";
+};
+
+const getDateRangeEnd = (filterId: string): string => {
+  const val = localValues.value[filterId];
+  if (val && typeof val === "object" && "end" in val) {
+    return (val as { end?: string }).end ?? "";
+  }
+  return "";
+};
+
+const updateDateRangeStart = (filter: GlobalFilterConfig, value: string) => {
+  const current = localValues.value[filter.id] as { start?: string; end?: string } | null;
+  localValues.value = {
+    ...localValues.value,
+    [filter.id]: {
+      start: value || undefined,
+      end: current?.end,
+    },
+  };
+};
+
+const updateDateRangeEnd = (filter: GlobalFilterConfig, value: string) => {
+  const current = localValues.value[filter.id] as { start?: string; end?: string } | null;
+  localValues.value = {
+    ...localValues.value,
+    [filter.id]: {
+      start: current?.start,
+      end: value || undefined,
+    },
+  };
+};
+
+// Build flat payload for backend
+const buildPayload = (): Record<string, unknown> => {
+  const payload: Record<string, unknown> = {};
+
+  for (const filter of props.filters) {
+    const value = localValues.value[filter.id];
+    const filterType = getFilterType(filter.filter);
+
+    if (filterType === "dateRange") {
+      // Expand dateRange to separate fields
+      const rangeFields = getRangeFields(filter.filter);
+      const rangeVal = value as { start?: string; end?: string } | null;
+      if (rangeFields && rangeVal) {
+        if (rangeVal.start) {
+          payload[rangeFields[0]] = rangeVal.start;
+        }
+        if (rangeVal.end) {
+          payload[rangeFields[1]] = rangeVal.end;
+        }
+      }
+    } else {
+      // Text and select filters
+      if (value !== null && value !== undefined && value !== "") {
+        // For multi-select, only include if array has items
+        if (Array.isArray(value) && value.length === 0) {
+          continue;
+        }
+        const field = typeof filter.filter === "string" ? filter.filter : filter.id;
+        payload[field] = value;
+      }
+    }
+  }
+
+  return payload;
+};
+
+// Actions
+const close = () => {
+  emit("update:show", false);
+};
+
+const applyAll = () => {
+  const payload = buildPayload();
+  emit("update:modelValue", { ...localValues.value });
+  emit("apply", payload);
+  close();
+};
+
+const clearAll = () => {
+  // Reset all local values
+  const cleared: Record<string, unknown> = {};
+  for (const filter of props.filters) {
+    cleared[filter.id] = null;
+  }
+  localValues.value = cleared;
+  emit("update:modelValue", cleared);
+  emit("clear");
+  close();
+};
+</script>
+
+<style lang="scss">
+.vc-global-filters-panel {
+  &__content {
+    @apply tw-px-4 tw-py-3;
+    @apply tw-space-y-4;
+  }
+
+  &__filter {
+    @apply tw-space-y-1.5;
+  }
+
+  &__label {
+    @apply tw-block tw-text-sm tw-font-medium tw-text-[color:var(--neutrals-700)];
+  }
+
+  &__range {
+    @apply tw-flex tw-gap-3;
+  }
+
+  &__range-field {
+    @apply tw-flex-1 tw-space-y-1;
+  }
+
+  &__range-label {
+    @apply tw-block tw-text-xs tw-text-[color:var(--neutrals-500)];
+  }
+
+}
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <div role="table" class="vc-table-composition" :class="variant && `vc-table-composition--${variant}`">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any> = Record<string, any>">
+import { provide, reactive, toRefs, computed, type ComputedRef } from "vue";
+
+interface TableContext<T> {
+  selectedRowIndex: ComputedRef<number | undefined>;
+  setSelectedRowIndex: (index: number | undefined) => void;
+  variant: ComputedRef<string | undefined>;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Visual variant of the table
+     */
+    variant?: "default" | "striped" | "bordered";
+  }>(),
+  {
+    variant: "default",
+  },
+);
+
+// Internal state for row actions
+const state = reactive({
+  selectedRowIndex: undefined as number | undefined,
+});
+
+const selectedRowIndex = computed(() => state.selectedRowIndex);
+
+const setSelectedRowIndex = (index: number | undefined) => {
+  state.selectedRowIndex = index;
+};
+
+// Provide context to child components
+const context: TableContext<T> = {
+  selectedRowIndex,
+  setSelectedRowIndex,
+  variant: computed(() => props.variant),
+};
+
+provide("tableContext", context);
+</script>
+
+<style lang="scss">
+.vc-table-composition {
+  // Key styles for layout:
+  // - h-full: inherit parent height constraint
+  // - flex-col: stack header, body, footer vertically
+  // - overflow: hidden: columns shrink to fit; horizontal scroll is not used
+  // - min-h-0: critical for nested flex containers to enable scrolling
+  @apply tw-relative tw-box-border tw-w-full tw-h-full tw-flex tw-flex-col tw-overflow-hidden;
+  min-height: 0;
+
+  // CSS Variables from original vc-table
+  --table-border-color: var(--neutrals-200);
+  --table-header-border-color: var(--neutrals-200);
+  --table-header-border:
+    inset 0px 1px 0px var(--table-header-border-color), inset 0px -1px 0px var(--table-header-border-color);
+  --table-resizer-color: var(--neutrals-200);
+  --table-reorder-color: var(--primary-400);
+
+  --table-header-bg: var(--primary-50);
+  --table-row-bg-odd: var(--additional-50);
+  --table-row-bg-even: var(--neutrals-50);
+  --table-row-bg-hover: var(--primary-100);
+  --table-row-bg-selected: var(--primary-100);
+
+  --table-actions-bg: var(--primary-100);
+  --table-actions-icon-color: var(--primary-500);
+  --table-actions-icon-color-hover: var(--primary-600);
+  --table-actions-color-danger: var(--danger-500);
+  --table-actions-color-success: var(--success-500);
+
+  --table-header-text-color: var(--secondary-950);
+  --table-text-color: var(--neutrals-950);
+  --table-sort-icon-color: var(--neutrals-400);
+
+  --table-footer-bg: var(--neutrals-50);
+  --table-footer-border-color: var(--neutrals-200);
+
+  --table-mobile-border-color: var(--secondary-200);
+
+  &--striped {
+    .vc-table-composition__row:nth-child(even) {
+      background-color: var(--table-row-bg-even);
+    }
+  }
+
+  &--bordered {
+    .vc-table-composition__row {
+      border-bottom: 1px solid var(--table-border-color);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div
+    v-show="isVisible && actions && actions.length"
+    class="vc-table-composition__actions"
+    @click.stop
+  >
+    <div v-for="(action, idx) in visibleActions" :key="idx" class="vc-table-composition__action">
+      <VcTooltip placement="top" :width="200">
+        <template #trigger>
+          <div
+            class="vc-table-composition__action-icon"
+            :class="{
+              'vc-table-composition__action-icon--disabled': action.disabled,
+              'vc-table-composition__action-icon--danger': action.variant === 'danger',
+            }"
+            @click="handleActionClick(action)"
+          >
+            <VcIcon :icon="action.icon" size="s" />
+          </div>
+        </template>
+        <template #content>
+          {{ action.title || action.name }}
+        </template>
+      </VcTooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, watch, ref } from "vue";
+import { VcIcon, VcTooltip } from "../../../atoms";
+import type { TableAction } from "../types";
+
+const props = defineProps<{
+  /**
+   * Actions to display
+   */
+  actions?: TableAction[];
+  /**
+   * Whether to show actions
+   */
+  visible?: boolean;
+  /**
+   * Row index (to check if this row is hovered)
+   */
+  rowIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  action: [action: TableAction];
+}>();
+
+const tableContext = inject<any>("tableContext", null);
+
+const visibleActions = computed(() => {
+  return props.actions?.filter((action) => !action.hidden) || [];
+});
+
+const isVisible = ref(false);
+
+// Watch for changes in selectedRowIndex
+if (tableContext && tableContext.selectedRowIndex) {
+  watch(
+    () => tableContext.selectedRowIndex.value,
+    (newValue) => {
+      const shouldBeVisible = props.rowIndex !== undefined && newValue === props.rowIndex;
+      isVisible.value = shouldBeVisible;
+    },
+    { immediate: true }
+  );
+}
+
+// Also check if visible prop is set
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue !== undefined) {
+      isVisible.value = newValue;
+    }
+  },
+  { immediate: true }
+);
+
+const handleActionClick = (action: TableAction) => {
+  if (!action.disabled) {
+    emit("action", action);
+    if (action.clickHandler) {
+      action.clickHandler();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.vc-table-composition__actions {
+  @apply tw-absolute tw-flex tw-right-0 tw-px-2.5 tw-h-full tw-items-center tw-gap-2;
+  background-color: var(--table-actions-bg, white);
+  z-index: 2;
+  pointer-events: auto;
+  top: 0;
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.05); // Add subtle shadow for visibility
+}
+
+.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);
+  font-size: 14px;
+
+  &:hover:not(&--disabled) {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: var(--table-actions-icon-color-hover);
+  }
+
+  &--disabled {
+    @apply tw-opacity-30 tw-cursor-not-allowed;
+  }
+
+  &--danger {
+    color: var(--table-actions-color-danger);
+
+    &:hover:not(.vc-table-composition__action-icon--disabled) {
+      background-color: rgba(255, 74, 74, 0.1);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="vc-table-add-row">
+    <VcButton
+      variant="link"
+      :icon="icon"
+      icon-size="s"
+      @click="$emit('add')"
+    >
+      {{ displayLabel }}
+    </VcButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * TableAddRowButton - Button component for adding new rows to the table
+ *
+ * Can be placed in header or footer position via VcDataTable's `addRow` prop.
+ * Emits 'add' event when clicked.
+ */
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { VcButton } from "../../../atoms";
+
+const { t } = useI18n({ useScope: "global" });
+
+const props = withDefaults(
+  defineProps<{
+    /** Button label (overrides i18n default) */
+    label?: string;
+    /** Button icon */
+    icon?: string;
+  }>(),
+  {
+    label: undefined,
+    icon: "fas fa-plus",
+  }
+);
+
+defineEmits<{
+  /** Emitted when button is clicked */
+  add: [];
+}>();
+
+const displayLabel = computed(() =>
+  props.label ?? t("COMPONENTS.ORGANISMS.VC_TABLE.ADD_ROW")
+);
+</script>
+
+<style lang="scss">
+.vc-table-add-row {
+  @apply tw-py-3 tw-px-4 tw-border-t;
+  border-color: var(--table-border-color);
+}
+</style>

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

@@ -0,0 +1,79 @@
+<template>
+  <div role="rowgroup" class="vc-table-composition__body" :data-items-count="items?.length">
+    <template v-if="!loading && hasContent">
+      <slot :items="items" />
+    </template>
+    <div v-else-if="!loading && !hasContent" key="__empty__" class="vc-table-composition__body-state">
+      <slot name="empty">
+        <div class="vc-table-composition__empty">
+          <slot name="empty-content">No data available</slot>
+        </div>
+      </slot>
+    </div>
+    <div v-else key="__loading__" class="vc-table-composition__body-state">
+      <slot name="loading">
+        <div class="vc-table-composition__loading">
+          <div class="vc-table-composition__loading-spinner">Loading...</div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const props = defineProps<{
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+  /**
+   * Items array to check if empty
+   */
+  items?: unknown[];
+}>();
+
+const slots = useSlots();
+
+const hasContent = computed(() => {
+  if (props.items !== undefined) {
+    return props.items.length > 0;
+  }
+  return !!slots.default;
+});
+</script>
+
+<style lang="scss">
+.vc-table-composition__body {
+  @apply tw-flex tw-flex-col tw-overflow-auto;
+  // flex: 1 1 0 ensures body takes remaining space and enables scrolling
+  // min-height: 0 is critical for flex children to allow shrinking below content size
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.vc-table-composition__body-state {
+  @apply tw-flex tw-flex-col tw-flex-1 tw-items-center tw-justify-center;
+}
+
+.vc-table-composition__empty,
+.vc-table-composition__loading {
+  @apply tw-flex tw-items-center tw-justify-center tw-py-8 tw-text-[color:var(--neutrals-400)];
+}
+
+.vc-table-composition__loading-spinner {
+  @apply tw-text-sm;
+}
+
+/* FLIP move animation for row reorder */
+.vc-table-row-swap-move {
+  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
+}
+
+/* Disable transitions on enter/leave so only moves animate */
+.vc-table-row-swap-enter-active,
+.vc-table-row-swap-leave-active {
+  transition: none !important;
+}
+</style>