@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.0

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

@@ -1,55 +0,0 @@
-<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 "@ui/components/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

@@ -1,79 +0,0 @@
-<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-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>

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

@@ -1,160 +0,0 @@
-<template>
-  <div
-    role="cell"
-    class="vc-table-composition__cell"
-    :class="cellClass"
-    :style="cellStyle"
-    :data-column-id="columnId"
-  >
-    <div
-      class="vc-table-composition__cell-content"
-      :class="contentClasses"
-      :style="contentStyle"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  /**
-   * Column width
-   */
-  width?: string;
-  /**
-   * Minimum cell width
-   */
-  minWidth?: string;
-  /**
-   * Maximum cell width
-   */
-  maxWidth?: string;
-  /**
-   * Text alignment
-   */
-  align?: "left" | "center" | "right";
-  /**
-   * Custom CSS class from column config
-   */
-  cellClass?: string;
-  /**
-   * Number of lines to clamp text to (0 = no clamp, undefined = default 2 line clamp)
-   */
-  lineClamp?: number;
-  /**
-   * Column ID for resize tracking
-   */
-  columnId?: string;
-}>();
-
-// Default line clamp when not specified (matches VcColumn default)
-const DEFAULT_LINE_CLAMP = 2;
-
-const effectiveLineClamp = computed(() => props.lineClamp ?? DEFAULT_LINE_CLAMP);
-
-// Truncation/clamp classes go on the INNER content wrapper (not the outer flex cell)
-// so that text-overflow: ellipsis works correctly on block-level content.
-const contentClasses = computed(() => {
-  const clamp = effectiveLineClamp.value;
-  if (clamp === 0) {
-    return {};
-  }
-  if (clamp === 1) {
-    return { "vc-table-composition__cell-content--truncate": true };
-  }
-  if (clamp > 1) {
-    return { "vc-table-composition__cell-content--line-clamp": true };
-  }
-  return {};
-});
-
-// Outer cell: handles flex sizing, alignment, padding
-const cellStyle = computed(() => {
-  return {
-    width: props.width,
-    minWidth: props.minWidth || undefined,
-    maxWidth: props.maxWidth,
-    textAlign: props.align,
-    // Columns with width: fixed basis, no grow, can shrink when crowded.
-    // The row's ::after filler absorbs any leftover space instead of flex-grow.
-    // Columns without width share remaining space equally from 0.
-    flex: props.width ? "0 1 auto" : "1 1 0",
-  } as Record<string, string | number | undefined>;
-});
-
-// Inner content: line-clamp CSS variable
-const contentStyle = computed(() => {
-  const clamp = effectiveLineClamp.value;
-  if (clamp > 1) {
-    return { "--line-clamp": clamp } as Record<string, string | number>;
-  }
-  return undefined;
-});
-</script>
-
-<style lang="scss">
-.vc-table-composition__cell {
-  @apply tw-flex tw-items-center tw-text-sm tw-px-1;
-  // Allow flex items to shrink below content width
-  min-width: 0;
-  color: var(--table-text-color);
-  // Prevent width/flex animation during container resize (blade expand/collapse)
-  transition: none;
-}
-
-// Inner content wrapper — fills cell and handles text clipping.
-// Separated from the flex cell so that text-overflow/line-clamp works on
-// all content (including custom slot content that doesn't add its own truncation).
-.vc-table-composition__cell-content {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-// Ensure inner renderers (including custom slot roots) can shrink with the cell.
-// Without this, intrinsic-width content (e.g. inline-flex badges) can overflow
-// and bypass effective ellipsis/line-clamp behavior.
-.vc-table-composition__cell-content--truncate > *,
-.vc-table-composition__cell-content--line-clamp > * {
-  min-width: 0;
-  max-width: 100%;
-}
-
-.vc-table-composition__cell-content--truncate > * *,
-.vc-table-composition__cell-content--line-clamp > * * {
-  min-width: 0;
-}
-
-.vc-table-composition__cell-content--truncate > .vc-status,
-.vc-table-composition__cell-content--line-clamp > .vc-status {
-  width: 100%;
-  max-width: 100%;
-}
-
-// Single-line truncation with ellipsis
-.vc-table-composition__cell-content--truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// Multi-line clamp (e.g. 2 or 3 lines)
-// IMPORTANT: line-clamp must be on the CHILD element (where text lives), not the parent.
-// -webkit-line-clamp on a parent with -webkit-box counts children as box items, not visual
-// text lines. A single <span> child = 1 item, so line-clamp: 2 never activates.
-.vc-table-composition__cell-content--line-clamp {
-  overflow: hidden; // Safety: clip anything that escapes the child's own clamp
-}
-
-// Apply line-clamp directly on the cell renderer element (span/div)
-.vc-table-composition__cell-content--line-clamp > * {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--line-clamp, 2);
-  overflow: hidden;
-  // Override white-space:nowrap from tw-truncate so text can wrap for multi-line clamp
-  white-space: normal;
-}
-</style>

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

@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="vc-table-composition__checkbox"
-    :class="{ 'vc-table-composition__checkbox--disabled': disabled }"
-    @click.stop
-  >
-    <input
-      type="checkbox"
-      :checked="isChecked"
-      :disabled="disabled"
-      :indeterminate.prop="indeterminate"
-      @change="handleChange"
-      class="vc-table-composition__checkbox-input"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  /**
-   * Whether the checkbox is checked (v-model support)
-   */
-  modelValue?: boolean;
-  /**
-   * Whether the checkbox is checked (alternative prop for non-v-model usage)
-   */
-  checked?: boolean;
-  /**
-   * Whether the checkbox is disabled
-   */
-  disabled?: boolean;
-  /**
-   * Indeterminate state (for "Select All" with partial selection)
-   */
-  indeterminate?: boolean;
-}>();
-
-const emit = defineEmits<{
-  /** Emitted for v-model support when checkbox state changes */
-  "update:modelValue": [value: boolean];
-  /** Emitted when checkbox state changes */
-  "change": [value: boolean];
-}>();
-
-// Support both modelValue and checked props
-const isChecked = computed(() => props.modelValue ?? props.checked ?? false);
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit("update:modelValue", target.checked);
-  emit("change", target.checked);
-};
-</script>
-
-<style lang="scss">
-.vc-table-composition__checkbox {
-  @apply tw-flex tw-items-center tw-justify-center;
-
-  &--disabled {
-    @apply tw-opacity-50 tw-cursor-not-allowed;
-  }
-
-  &-input {
-    @apply tw-w-4 tw-h-4 tw-cursor-pointer;
-    @apply tw-rounded tw-border-2 tw-border-neutrals-300;
-    @apply tw-text-primary-500;
-    @apply focus:tw-ring-2 focus:tw-ring-primary-500 focus:tw-ring-offset-1;
-    @apply checked:tw-bg-primary-500 checked:tw-border-primary-500;
-    @apply disabled:tw-cursor-not-allowed;
-
-    &:indeterminate {
-      @apply tw-bg-primary-500 tw-border-primary-500;
-    }
-  }
-}
-</style>

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

@@ -1,150 +0,0 @@
-<template>
-  <VcDropdownPanel
-    :show="show"
-    :anchor-ref="anchorRef"
-    :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_SWITCHER.TITLE')"
-    width="240px"
-    max-width="320px"
-    @update:show="emit('update:show', $event)"
-  >
-    <!-- Columns list -->
-    <div class="vc-column-switcher-panel__content">
-      <label
-        v-for="column in columns"
-        :key="column.id"
-        class="vc-column-switcher-panel__item"
-      >
-        <input
-          type="checkbox"
-          :checked="isColumnVisible(column.id)"
-          class="vc-column-switcher-panel__checkbox"
-          @change="toggleColumn(column.id)"
-        />
-        <span class="vc-column-switcher-panel__label">
-          {{ column.label || column.id }}
-        </span>
-      </label>
-    </div>
-
-    <!-- Actions -->
-    <template #footer>
-      <VcButton
-        variant="outline"
-        size="sm"
-        @click="handleShowAll"
-      >
-        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_SWITCHER.SHOW_ALL") }}
-      </VcButton>
-      <VcButton
-        variant="primary"
-        size="sm"
-        @click="handleReset"
-      >
-        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_SWITCHER.RESET") }}
-      </VcButton>
-    </template>
-  </VcDropdownPanel>
-</template>
-
-<script setup lang="ts">
-/**
- * TableColumnSwitcher - Panel for toggling column visibility
- *
- * Displays a list of columns with checkboxes to show/hide them.
- * Uses VcDropdownPanel for positioning and backdrop.
- */
-import { VcDropdownPanel } from "@ui/components/molecules";
-import { VcButton } from "@ui/components/atoms";
-
-interface Column {
-  id: string;
-  label?: string;
-  visible?: boolean;
-  /** Initial/default visibility (used by Reset button) */
-  defaultVisible?: boolean;
-}
-
-interface Props {
-  /** Array of columns with id, label, and visibility state */
-  columns: Column[];
-  /** Array of visible column IDs (controlled mode) */
-  visibleColumns?: string[];
-  /** Whether panel is visible */
-  show: boolean;
-  /** Anchor element for positioning the floating panel */
-  anchorRef?: HTMLElement | null;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  anchorRef: null,
-  visibleColumns: undefined,
-});
-
-const emit = defineEmits<{
-  /** Emitted when visible columns change */
-  "update:visibleColumns": [columnIds: string[]];
-  /** Emitted to close panel */
-  "update:show": [boolean];
-}>();
-
-const isColumnVisible = (columnId: string): boolean => {
-  if (props.visibleColumns) {
-    return props.visibleColumns.includes(columnId);
-  }
-  const column = props.columns.find((c) => c.id === columnId);
-  return column?.visible !== false;
-};
-
-const toggleColumn = (columnId: string) => {
-  const currentVisible =
-    props.visibleColumns ||
-    props.columns.filter((c) => c.visible !== false).map((c) => c.id);
-
-  const newVisible = isColumnVisible(columnId)
-    ? currentVisible.filter((id) => id !== columnId)
-    : [...currentVisible, columnId];
-
-  emit("update:visibleColumns", newVisible);
-};
-
-const handleShowAll = () => {
-  emit(
-    "update:visibleColumns",
-    props.columns.map((c) => c.id),
-  );
-};
-
-const handleReset = () => {
-  const defaultVisible = props.columns
-    .filter((c) => (c.defaultVisible ?? c.visible) !== false)
-    .map((c) => c.id);
-  emit("update:visibleColumns", defaultVisible);
-};
-</script>
-
-<style lang="scss">
-.vc-column-switcher-panel {
-  &__content {
-    @apply tw-p-2;
-  }
-
-  &__item {
-    @apply tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2 tw-rounded tw-cursor-pointer;
-    @apply tw-transition-colors tw-duration-150;
-
-    &:hover {
-      @apply tw-bg-neutrals-50;
-    }
-  }
-
-  &__checkbox {
-    @apply tw-cursor-pointer;
-    accent-color: var(--primary-500);
-  }
-
-  &__label {
-    @apply tw-flex-1 tw-text-sm tw-text-neutrals-900;
-  }
-
-}
-</style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="vc-table-composition__empty-state">
-    <VcIcon v-if="icon" :icon="icon" size="xxl" class="vc-table-composition__empty-icon" />
-    <div class="vc-table-composition__empty-content">
-      <slot>
-        <div class="vc-table-composition__empty-title">
-          {{ title || "No data" }}
-        </div>
-        <div v-if="description" class="vc-table-composition__empty-description">
-          {{ description }}
-        </div>
-      </slot>
-    </div>
-    <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, VcButton } from "@ui/components/atoms";
-
-defineProps<{
-  /** Icon to display */
-  icon?: string;
-  /** Title text */
-  title?: string;
-  /** Description text */
-  description?: string;
-  /** Action button label — renders VcButton when provided */
-  actionLabel?: string;
-  /** Action button click handler */
-  actionHandler?: () => void;
-}>();
-</script>
-
-<style lang="scss">
-.vc-table-composition__empty-state {
-  @apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-4 tw-py-12 tw-px-4 tw-flex-1;
-}
-
-.vc-table-composition__empty-icon {
-  @apply tw-text-neutrals-300;
-}
-
-.vc-table-composition__empty-content {
-  @apply tw-flex tw-flex-col tw-items-center tw-gap-2 tw-text-center;
-}
-
-.vc-table-composition__empty-title {
-  @apply tw-text-base tw-font-medium tw-text-neutrals-700;
-}
-
-.vc-table-composition__empty-description {
-  @apply tw-text-sm tw-text-neutrals-500 tw-max-w-md;
-}
-
-.vc-table-composition__empty-action {
-  @apply tw-mt-2;
-}
-</style>

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

@@ -1,13 +0,0 @@
-<template>
-  <div class="vc-table-composition__footer">
-    <slot />
-  </div>
-</template>
-
-<style lang="scss">
-.vc-table-composition__footer {
-  @apply tw-flex tw-items-center tw-justify-between tw-gap-4 tw-py-4 tw-px-4 tw-flex-shrink-0;
-  background-color: var(--table-footer-bg);
-  border-top: 1px solid var(--table-footer-border-color);
-}
-</style>