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

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

@@ -1,233 +0,0 @@
-<template>
-  <Transition name="search-header">
-    <div
-      v-if="visible"
-      class="vc-table-search-header"
-    >
-      <!-- Toolbar row: actions + filters on the left, search on the right -->
-      <div class="vc-table-search-header__toolbar">
-        <div v-if="$slots.actions" class="vc-table-search-header__actions">
-          <slot name="actions" />
-        </div>
-
-        <div
-          v-if="$slots.filters || showFilterButton"
-          class="vc-table-search-header__filters"
-        >
-          <VcButton
-            variant="outline"
-            size="sm"
-            icon="fas fa-filter"
-            :disabled="disableFilter"
-            :class="{ 'vc-table-search-header__filter-button--active': isFilterOpen || activeFilterCount > 0 }"
-            @click="toggleFilter"
-          >
-            <span v-if="filterLabel">{{ filterLabel }}</span>
-            <span
-              v-if="activeFilterCount > 0"
-              class="vc-table-search-header__filter-badge"
-            >
-              {{ activeFilterCount }}
-            </span>
-          </VcButton>
-        </div>
-
-        <!-- Spacer pushes search to the right -->
-        <div class="vc-table-search-header__spacer" />
-
-        <!-- Compact search input (right-aligned, hidden when searchable is false) -->
-        <div v-if="searchable" class="vc-table-search-header__search">
-          <VcInput
-            ref="searchInputRef"
-            :model-value="modelValue"
-            :placeholder="placeholder"
-            size="small"
-            clearable
-            @update:model-value="handleInput"
-          >
-            <template #prepend-inner>
-              <VcIcon
-                icon="fas fa-search"
-                size="s"
-                class="vc-table-search-header__search-icon"
-              />
-            </template>
-          </VcInput>
-        </div>
-      </div>
-
-      <!-- Filter panel -->
-      <Transition name="filter-panel">
-        <div
-          v-if="isFilterOpen && $slots.filters"
-          class="vc-table-search-header__filter-panel"
-        >
-          <slot name="filters" :close-panel="closeFilter" />
-        </div>
-      </Transition>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { ref, useSlots } from "vue";
-import { VcIcon } from "@ui/components/atoms";
-import { VcButton } from "@ui/components/atoms";
-import { VcInput } from "@ui/components/molecules";
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * Search input value
-     */
-    modelValue?: string;
-    /**
-     * Placeholder text for search input
-     */
-    placeholder?: string;
-    /**
-     * Number of active filters
-     */
-    activeFilterCount?: number;
-    /**
-     * Whether to disable the filter button
-     */
-    disableFilter?: boolean;
-    /**
-     * Label for filter button
-     */
-    filterLabel?: string;
-    /**
-     * Whether to show the filter button (even without slots.filters)
-     */
-    showFilterButton?: boolean;
-    /**
-     * Whether the search input is shown
-     */
-    searchable?: boolean;
-    /**
-     * Whether the header is visible
-     */
-    visible?: boolean;
-  }>(),
-  {
-    modelValue: "",
-    placeholder: "Search...",
-    activeFilterCount: 0,
-    disableFilter: false,
-    showFilterButton: false,
-    searchable: true,
-    visible: true,
-  },
-);
-
-const emit = defineEmits<{
-  /** Emitted when search input value changes */
-  "update:modelValue": [value: string];
-  /** Emitted when filter panel is toggled */
-  filterToggle: [isOpen: boolean];
-}>();
-
-const slots = useSlots();
-const searchInputRef = ref<InstanceType<typeof VcInput> | null>(null);
-const isFilterOpen = ref(false);
-
-const handleInput = (value: string | number | null | undefined) => {
-  emit("update:modelValue", (value as string) ?? "");
-};
-
-const toggleFilter = () => {
-  isFilterOpen.value = !isFilterOpen.value;
-  emit("filterToggle", isFilterOpen.value);
-};
-
-const closeFilter = () => {
-  isFilterOpen.value = false;
-  emit("filterToggle", false);
-};
-
-// Expose for parent access
-defineExpose({
-  focus: () => (searchInputRef.value as any)?.focus?.(),
-  closeFilter,
-});
-</script>
-
-<style lang="scss">
-.vc-table-search-header {
-  @apply tw-flex tw-flex-col tw-border-b tw-border-solid;
-  background-color: var(--table-header-bg, var(--neutrals-50));
-  border-color: var(--table-header-border, var(--neutrals-200));
-
-  &__toolbar {
-    @apply tw-flex tw-items-center tw-gap-3 tw-px-4 tw-py-2;
-  }
-
-  &__spacer {
-    @apply tw-flex-1;
-  }
-
-  &__search {
-    @apply tw-flex-shrink-0;
-    max-width: 240px;
-    width: 100%;
-  }
-
-  &__search-icon {
-    @apply tw-flex-shrink-0;
-    color: var(--table-search-icon, var(--neutrals-400));
-  }
-
-  &__actions {
-    @apply tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0 tw-flex-grow tw-min-w-0;
-  }
-
-  &__filters {
-    @apply tw-flex-shrink-0;
-  }
-
-  &__filter-button--active {
-    background-color: var(--table-filter-active-bg, var(--primary-50)) !important;
-    border-color: var(--table-filter-active-border, var(--primary-500)) !important;
-    color: var(--table-filter-active-text, var(--primary-700)) !important;
-  }
-
-  &__filter-badge {
-    @apply tw-flex tw-items-center tw-justify-center tw-min-w-5 tw-h-5 tw-px-1.5 tw-rounded-full tw-text-xs tw-font-semibold;
-    background-color: var(--table-filter-badge-bg, var(--primary-500));
-    color: var(--table-filter-badge-text, white);
-  }
-
-  &__filter-panel {
-    @apply tw-border-t tw-border-solid tw-p-4;
-    border-color: var(--table-filter-panel-border, var(--neutrals-200));
-    background-color: var(--table-filter-panel-bg, white);
-  }
-}
-
-// Transitions
-.search-header-enter-active,
-.search-header-leave-active {
-  @apply tw-transition-all tw-duration-200 tw-ease-in-out;
-}
-
-.search-header-enter-from,
-.search-header-leave-to {
-  @apply tw-opacity-0 tw-transform tw--translate-y-2;
-}
-
-.filter-panel-enter-active,
-.filter-panel-leave-active {
-  @apply tw-transition-all tw-duration-150 tw-ease-in-out;
-}
-
-.filter-panel-enter-from,
-.filter-panel-leave-to {
-  @apply tw-opacity-0 tw-max-h-0 tw-overflow-hidden;
-}
-
-.filter-panel-enter-to,
-.filter-panel-leave-from {
-  @apply tw-opacity-100 tw-max-h-96;
-}
-</style>

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

@@ -1,135 +0,0 @@
-<template>
-  <Transition name="select-bar">
-    <div
-      v-if="visible"
-      class="vc-table-select-all-bar"
-    >
-      <span class="vc-table-select-all-bar__text">
-        <!-- State 1: Select all active (all items across all pages) -->
-        <template v-if="allSelected">
-          <strong>{{ allSelectedText }}</strong>
-        </template>
-
-        <!-- State 2: All items on current page selected, more exist -->
-        <template v-else-if="showSelectAllPrompt">
-          {{ currentPageSelectedText }}
-          <VcButton
-            variant="link"
-            size="sm"
-            class="vc-table-select-all-bar__select-all-link"
-            @click="emit('selectAll')"
-          >
-            {{ selectAllItemsText }}
-          </VcButton>
-        </template>
-
-      </span>
-
-      <VcButton
-        variant="link"
-        size="sm"
-        class="vc-table-select-all-bar__clear"
-        @click="emit('cancel')"
-      >
-        {{ cancelText }}
-      </VcButton>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { VcButton } from "@ui/components/atoms";
-
-const props = withDefaults(
-  defineProps<{
-    /** Number of selected items on the current page */
-    selectionCount: number;
-    /** Total number of items across all pages */
-    totalCount: number;
-    /** Whether "select all" mode is active (all items across all pages) */
-    allSelected?: boolean;
-    /** Whether to show the "Select all X items" prompt */
-    showSelectAllPrompt?: boolean;
-    /** Custom "Selected" label override */
-    selectedLabel?: string;
-    /** Custom "Select all X items" label override */
-    selectAllLabel?: string;
-    /** Custom "Clear selection" label override */
-    cancelLabel?: string;
-  }>(),
-  {
-    allSelected: false,
-    showSelectAllPrompt: false,
-  },
-);
-
-const emit = defineEmits<{
-  /** Emitted when "Select all items" is clicked */
-  selectAll: [];
-  /** Emitted when "Clear selection" is clicked */
-  cancel: [];
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-
-const visible = computed(() => {
-  return props.allSelected || props.showSelectAllPrompt;
-});
-
-const allSelectedText = computed(() => {
-  return t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED_COUNT", { count: props.totalCount }, `All ${props.totalCount} items selected`);
-});
-
-const currentPageSelectedText = computed(() => {
-  return t("COMPONENTS.ORGANISMS.VC_TABLE.CURRENT_PAGE_SELECTED", `All ${props.selectionCount} items on this page are selected.`);
-});
-
-const selectAllItemsText = computed(() => {
-  if (props.selectAllLabel) return props.selectAllLabel;
-  return t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL_COUNT", { count: props.totalCount }, `Select all ${props.totalCount} items`);
-});
-
-const cancelText = computed(() => {
-  return props.cancelLabel || t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL", "Clear selection");
-});
-</script>
-
-<style lang="scss">
-.vc-table-select-all-bar {
-  @apply tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2 tw-px-4 tw-py-2.5;
-  background-color: var(--table-select-bar-bg, var(--warning-50));
-  border-bottom: 1px solid var(--table-select-bar-border, var(--warning-300));
-
-  &__text {
-    @apply tw-text-sm;
-    color: var(--table-select-bar-text, var(--warning-800));
-  }
-
-  &__select-all-link {
-    @apply tw-underline;
-    color: var(--table-select-bar-link, var(--primary-700));
-  }
-
-  &__clear {
-    color: var(--table-select-bar-clear, var(--danger-600));
-  }
-}
-
-// Transition
-.select-bar-enter-active,
-.select-bar-leave-active {
-  @apply tw-transition-all tw-duration-200 tw-ease-in-out;
-}
-
-.select-bar-enter-from,
-.select-bar-leave-to {
-  @apply tw-opacity-0 tw-transform tw--translate-y-2;
-}
-
-.select-bar-enter-to,
-.select-bar-leave-from {
-  @apply tw-opacity-100 tw-transform tw-translate-y-0;
-}
-</style>

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

@@ -1,255 +0,0 @@
-<script lang="ts">
-/**
- * VcColumn - Renderless column definition component for VcDataTable
- *
- * This component does not render any DOM elements. Instead, it registers itself
- * with the parent VcDataTable via inject/provide pattern.
- *
- * Usage:
- * ```vue
- * <VcDataTable :items="data">
- *   <VcColumn id="name" field="name" title="Name" sortable />
- *   <VcColumn id="price" field="price" title="Price" type="money">
- *     <template #editor="{ data, field }">
- *       <VcInputCurrency v-model="data[field]" />
- *     </template>
- *   </VcColumn>
- * </VcDataTable>
- * ```
- */
-import { defineComponent, inject, onMounted, onUnmounted, getCurrentInstance } from "vue";
-import type { PropType } from "vue";
-import { ColumnCollectorKey } from "@ui/components/organisms/vc-table/keys";
-import type { VcColumnProps, ColumnFilterConfig } from "@ui/components/organisms/vc-table/types";
-
-// Cell type options matching existing cell formatters
-export type CellType =
-  | "text"
-  | "number"
-  | "money"
-  | "date"
-  | "date-ago"
-  | "time"
-  | "datetime"
-  | "image"
-  | "link"
-  | "html"
-  | "status"
-  | "status-icon";
-
-export default defineComponent({
-  name: "VcColumn",
-  inheritAttrs: false,
-
-  props: {
-    // === Identity ===
-    /** Unique column identifier (must be unique within the table) */
-    id: {
-      type: String,
-      required: true,
-    },
-    /** Data field path to read from each item (default: same as `id`) */
-    field: {
-      type: String,
-      default: undefined,
-    },
-
-    // === Display ===
-    /** Column header title text */
-    title: {
-      type: String,
-      default: undefined,
-    },
-    /** Cell formatter type — determines how cell value is rendered */
-    type: {
-      type: String as PropType<CellType>,
-      default: "text",
-    },
-    /** Field name to read currency code from (used with `type="money"`, default: `"currency"`) */
-    currencyField: {
-      type: String,
-      default: "currency",
-    },
-    /** Date/number format string (e.g. `"DD.MM.YYYY"`) */
-    format: {
-      type: String,
-      default: undefined,
-    },
-
-    // === Sizing ===
-    /** Column width in px or CSS string (e.g. `200`, `"150px"`) */
-    width: {
-      type: [String, Number] as PropType<string | number>,
-      default: undefined,
-    },
-    /** Minimum column width (default: `60px`) */
-    minWidth: {
-      type: [String, Number] as PropType<string | number>,
-      default: undefined,
-    },
-    /** Maximum column width */
-    maxWidth: {
-      type: [String, Number] as PropType<string | number>,
-      default: undefined,
-    },
-
-    // === Alignment ===
-    /** Cell text alignment */
-    align: {
-      type: String as PropType<"start" | "center" | "end">,
-      default: undefined,
-    },
-    /** Header text alignment (default: same as `align`) */
-    headerAlign: {
-      type: String as PropType<"start" | "center" | "end">,
-      default: undefined,
-    },
-
-    // === Sorting ===
-    /** Whether the column is sortable (shows sort icon on hover) */
-    sortable: {
-      type: Boolean,
-      default: false,
-    },
-    /** Override backend field name for sorting (default: column `id`) */
-    sortField: {
-      type: String,
-      default: undefined,
-    },
-
-    // === Filtering ===
-    /** Declarative filter config: `true` for text, `"field"` for text with custom field, or object for select/dateRange */
-    filter: {
-      type: [Boolean, String, Object] as PropType<ColumnFilterConfig>,
-      default: undefined,
-    },
-    /** Override backend field name for filtering (default: column `id`) */
-    filterField: {
-      type: String,
-      default: undefined,
-    },
-    /** Placeholder text for the filter input */
-    filterPlaceholder: {
-      type: String,
-      default: undefined,
-    },
-
-    // === Visibility ===
-    /** Whether the column is visible (default: `true`). Hidden columns can be toggled via column switcher */
-    visible: {
-      type: Boolean,
-      default: true,
-    },
-    /** If `true`, column stays visible even when `showAllColumns=false` (e.g. when blade narrows) */
-    alwaysVisible: {
-      type: Boolean,
-      default: false,
-    },
-
-    // === Editing ===
-    /** Whether the cell is editable (enables inline edit on click) */
-    editable: {
-      type: Boolean,
-      default: false,
-    },
-    /** Validation rules for the editable cell (field name → validator) */
-    rules: {
-      type: Object as PropType<Record<string, unknown>>,
-      default: undefined,
-    },
-
-    // === Styling ===
-    /** Custom CSS class applied to the entire column (header + body cells) */
-    class: {
-      type: String,
-      default: undefined,
-    },
-    /** Custom CSS class applied only to the header cell */
-    headerClass: {
-      type: String,
-      default: undefined,
-    },
-    /** Custom CSS class applied only to body cells */
-    bodyClass: {
-      type: String,
-      default: undefined,
-    },
-    /** Number of lines to clamp cell text to (`0` = no clamp, default: `2`) */
-    lineClamp: {
-      type: Number,
-      default: 2,
-    },
-
-    // === Special modes ===
-    /** Renders a selection checkbox column (`"single"` = radio, `"multiple"` = checkbox) */
-    selectionMode: {
-      type: String as PropType<"single" | "multiple">,
-      default: undefined,
-    },
-    /** Renders row edit save/cancel buttons in this column */
-    rowEditor: {
-      type: Boolean,
-      default: false,
-    },
-    /** Renders a drag handle for row reordering */
-    rowReorder: {
-      type: Boolean,
-      default: false,
-    },
-    /** Renders an expand/collapse toggle for row expansion */
-    expander: {
-      type: Boolean,
-      default: false,
-    },
-
-    // === Mobile ===
-    /**
-     * Mobile card role — determines how column is displayed on mobile.
-     * - `"title"`: Primary identifier, displayed at top (full width, bold)
-     * - `"image"`: Visual element, displayed on left side
-     * - `"field"`: Data with label, auto-distributed in 2x2 grid (max 4)
-     * - `"status"`: Status badge, displayed at bottom (multiple allowed)
-     */
-    mobileRole: {
-      type: String as PropType<"title" | "image" | "field" | "status">,
-      default: undefined,
-    },
-    /** Explicit grid position for mobile card layout */
-    mobilePosition: {
-      type: String as PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">,
-      default: undefined,
-    },
-    /** Whether column is visible on mobile (default: `true` — hidden unless `mobileRole` is specified) */
-    mobileVisible: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  setup(props, { slots }) {
-    // Inject the column collector from parent VcDataTable
-    const $columns = inject(ColumnCollectorKey, null);
-    const instance = getCurrentInstance();
-
-    onMounted(() => {
-      if ($columns && instance) {
-        // Register this column with the parent
-        $columns.add({
-          instance,
-          props: props as VcColumnProps,
-          slots,
-        });
-      }
-    });
-
-    onUnmounted(() => {
-      if ($columns && instance) {
-        $columns.delete(instance);
-      }
-    });
-
-    // Renderless component - returns null
-    return () => null;
-  },
-});
-</script>

package/ui/components/organisms/vc-table/components/_internal/SlotProxy.ts

@@ -1,20 +0,0 @@
-import { defineComponent, type PropType, type VNode } from "vue";
-
-/**
- * Stable wrapper for rendering slot functions without recreating the component tree.
- *
- * When VcColumn slots are captured at setup time, they become static function references.
- * Passing them directly as children would cause Vue to diff them as new VNodes on every
- * parent re-render, destroying and recreating the subtree. SlotProxy wraps the function
- * in a stable component instance so Vue can reuse the existing DOM.
- */
-export const SlotProxy = defineComponent({
-  name: "SlotProxy",
-  props: {
-    slotFn: { type: Function as PropType<(scope: Record<string, unknown>) => VNode | VNode[]>, required: true },
-    scope: { type: Object as PropType<Record<string, unknown>>, default: () => ({}) },
-  },
-  setup(props) {
-    return () => props.slotFn(props.scope);
-  },
-});