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

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

@@ -1,18 +0,0 @@
-<template>
-  <VcStatus class="vc-table-cell-status">{{ value }}</VcStatus>
-</template>
-
-<script setup lang="ts">
-import { VcStatus } from "@ui/components/atoms";
-
-defineProps<{
-  /** The status text to display in a status badge */
-  value?: unknown;
-}>();
-</script>
-
-<style lang="scss">
-.vc-table-cell-status {
-  @apply tw-inline-flex;
-}
-</style>

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

@@ -1,20 +0,0 @@
-<template>
-  <div class="vc-table-cell-status-icon">
-    <VcStatusIcon v-if="typeof value === 'boolean'" :status="(value as boolean)" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { VcStatusIcon } from "@ui/components/atoms";
-
-defineProps<{
-  /** Boolean value indicating status (true = success, false = error) */
-  value?: unknown;
-}>();
-</script>
-
-<style lang="scss">
-.vc-table-cell-status-icon {
-  @apply tw-flex tw-justify-center;
-}
-</style>

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

@@ -1,164 +0,0 @@
-<template>
-  <component
-    :is="cellComponent"
-    v-bind="cellProps"
-    @update="$emit('update', $event)"
-    @blur="$emit('blur', $event)"
-  />
-</template>
-
-<script setup lang="ts">
-/**
- * DynamicCellRenderer - Renders cell content based on registered cell types.
- *
- * Uses CellRegistry to lookup and render the appropriate cell component
- * based on the column type. This enables the Open/Closed Principle -
- * new cell types can be added without modifying this component.
- *
- * @example
- * ```vue
- * <DynamicCellRenderer
- *   type="money"
- *   :value="item.price"
- *   :currency="item.currency"
- *   :editable="isEditing"
- *   @update="handleUpdate"
- * />
- * ```
- */
-import { computed, type Component } from "vue";
-import { useCellRegistry } from "@ui/components/organisms/vc-table/composables/useCellRegistry";
-
-// Import cell components for fallback and default registration
-import CellDefault from "@ui/components/organisms/vc-table/components/cells/CellDefault.vue";
-import CellMoney from "@ui/components/organisms/vc-table/components/cells/CellMoney.vue";
-import CellNumber from "@ui/components/organisms/vc-table/components/cells/CellNumber.vue";
-import CellDate from "@ui/components/organisms/vc-table/components/cells/CellDate.vue";
-import CellDateAgo from "@ui/components/organisms/vc-table/components/cells/CellDateAgo.vue";
-import CellImage from "@ui/components/organisms/vc-table/components/cells/CellImage.vue";
-import CellStatus from "@ui/components/organisms/vc-table/components/cells/CellStatus.vue";
-import CellStatusIcon from "@ui/components/organisms/vc-table/components/cells/CellStatusIcon.vue";
-import CellLink from "@ui/components/organisms/vc-table/components/cells/CellLink.vue";
-import CellHtml from "@ui/components/organisms/vc-table/components/cells/CellHtml.vue";
-
-// Get composable methods
-const { register, has, get } = useCellRegistry();
-
-// Register built-in cell types if not already registered
-if (!has("text")) {
-  register({ type: "text", component: CellDefault, config: { editable: true } });
-}
-if (!has("number")) {
-  register({ type: "number", component: CellNumber, config: { editable: true } });
-}
-if (!has("money")) {
-  register({ type: "money", component: CellMoney, config: { editable: true } });
-}
-if (!has("date")) {
-  register({ type: "date", component: CellDate, config: { editable: false } });
-}
-if (!has("time")) {
-  register({ type: "time", component: CellDate, config: { editable: false } });
-}
-if (!has("datetime")) {
-  register({ type: "datetime", component: CellDate, config: { editable: false } });
-}
-if (!has("date-ago")) {
-  register({ type: "date-ago", component: CellDateAgo, config: { editable: false } });
-}
-if (!has("image")) {
-  register({ type: "image", component: CellImage, config: { editable: false } });
-}
-if (!has("status")) {
-  register({ type: "status", component: CellStatus, config: { editable: false } });
-}
-if (!has("status-icon")) {
-  register({ type: "status-icon", component: CellStatusIcon, config: { editable: false } });
-}
-if (!has("link")) {
-  register({ type: "link", component: CellLink, config: { editable: false } });
-}
-if (!has("html")) {
-  register({ type: "html", component: CellHtml, config: { editable: false } });
-}
-
-const props = defineProps<{
-  /** Cell type to render */
-  type: string;
-  /** Cell value */
-  value?: unknown;
-  /** Whether the cell is in edit mode */
-  editable?: boolean;
-  /** Label for the field (used in validation) */
-  label?: string;
-  /** Field name for VeeValidate (unique per row) */
-  fieldName?: string;
-  /** Field identifier */
-  fieldId?: string;
-  /** Validation rules */
-  rules?: Record<string, unknown>;
-  /** Row index */
-  rowIndex?: number;
-  /** Currency for money cells */
-  currency?: string;
-  /** Date format for date cells */
-  format?: string;
-  /** Date variant (date, time, date-time) */
-  variant?: "date" | "time" | "date-time";
-}>();
-
-defineEmits<{
-  /** Cell value updated during editing */
-  (e: "update", payload: { field: string; value: unknown }): void;
-  /** Cell input blurred */
-  (e: "blur", payload: { row: number | undefined; field: string }): void;
-}>();
-
-/**
- * Get the component to render based on cell type.
- * Falls back to CellDefault if type is not registered.
- */
-const cellComponent = computed<Component>(() => {
-  const registration = get(props.type);
-  return registration?.component || CellDefault;
-});
-
-/**
- * Build props to pass to the cell component.
- * Only includes props relevant to the specific cell type.
- */
-const cellProps = computed(() => {
-  const registration = get(props.type);
-  const isEditable = registration?.config?.editable ?? false;
-
-  // Base props for all cells
-  const baseProps: Record<string, unknown> = {
-    value: props.value,
-  };
-
-  // Add editable props only if the cell type supports editing
-  if (isEditable && props.editable) {
-    baseProps.editable = props.editable;
-    baseProps.label = props.label;
-    baseProps.fieldName = props.fieldName;
-    baseProps.fieldId = props.fieldId;
-    baseProps.rules = props.rules;
-    baseProps.rowIndex = props.rowIndex;
-  }
-
-  // Add type-specific props
-  if (props.type === "money" && props.currency) {
-    baseProps.currency = props.currency;
-  }
-
-  if ((props.type === "date" || props.type === "time" || props.type === "datetime") && props.variant) {
-    baseProps.variant = props.variant;
-  }
-
-  if (props.format) {
-    baseProps.format = props.format;
-  }
-
-  return baseProps;
-});
-</script>

package/ui/components/organisms/vc-table/components/cells/index.ts

@@ -1,11 +0,0 @@
-export { default as CellMoney } from "@ui/components/organisms/vc-table/components/cells/CellMoney.vue";
-export { default as CellDateAgo } from "@ui/components/organisms/vc-table/components/cells/CellDateAgo.vue";
-export { default as CellDate } from "@ui/components/organisms/vc-table/components/cells/CellDate.vue";
-export { default as CellImage } from "@ui/components/organisms/vc-table/components/cells/CellImage.vue";
-export { default as CellStatus } from "@ui/components/organisms/vc-table/components/cells/CellStatus.vue";
-export { default as CellStatusIcon } from "@ui/components/organisms/vc-table/components/cells/CellStatusIcon.vue";
-export { default as CellLink } from "@ui/components/organisms/vc-table/components/cells/CellLink.vue";
-export { default as CellHtml } from "@ui/components/organisms/vc-table/components/cells/CellHtml.vue";
-export { default as CellNumber } from "@ui/components/organisms/vc-table/components/cells/CellNumber.vue";
-export { default as CellDefault } from "@ui/components/organisms/vc-table/components/cells/CellDefault.vue";
-export { default as CellEditableWrapper } from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";

package/ui/components/organisms/vc-table/components/index.ts

@@ -1,39 +0,0 @@
-// Export all compositional components
-export { default as Table } from "@ui/components/organisms/vc-table/components/Table.vue";
-export { default as TableHeader } from "@ui/components/organisms/vc-table/components/TableHeader.vue";
-export { default as TableBody } from "@ui/components/organisms/vc-table/components/TableBody.vue";
-export { default as TableRow } from "@ui/components/organisms/vc-table/components/TableRow.vue";
-export { default as TableHead } from "@ui/components/organisms/vc-table/components/TableHead.vue";
-export { default as TableCell } from "@ui/components/organisms/vc-table/components/TableCell.vue";
-export { default as TableFooter } from "@ui/components/organisms/vc-table/components/TableFooter.vue";
-export { default as TableEmpty } from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
-export { default as TableColumnSwitcher } from "@ui/components/organisms/vc-table/components/TableColumnSwitcher.vue";
-export { default as TableRowActions } from "@ui/components/organisms/vc-table/components/TableRowActions.vue";
-export { default as TableCheckbox } from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
-// TableResizeHandle — not used (resize is handled inline in TableHead.vue)
-// TableActions — deprecated (use TableRowActions instead)
-export { default as TableSelectAllBar } from "@ui/components/organisms/vc-table/components/TableSelectAllBar.vue";
-export { default as TableSearchHeader } from "@ui/components/organisms/vc-table/components/TableSearchHeader.vue";
-export { default as TableGroupRow } from "@ui/components/organisms/vc-table/components/TableGroupRow.vue";
-export { default as ColumnFilter } from "@ui/components/organisms/vc-table/components/ColumnFilter.vue";
-export { default as GlobalFiltersButton } from "@ui/components/organisms/vc-table/components/GlobalFiltersButton.vue";
-export { default as GlobalFiltersPanel } from "@ui/components/organisms/vc-table/components/GlobalFiltersPanel.vue";
-export { default as ColumnSwitcherButton } from "@ui/components/organisms/vc-table/components/ColumnSwitcherButton.vue";
-export { default as TableAddRowButton } from "@ui/components/organisms/vc-table/components/TableAddRowButton.vue";
-
-// Declarative Column Component (renderless)
-export { default as VcColumn } from "@ui/components/organisms/vc-table/components/VcColumn.vue";
-
-// Cell renderer for VcDataTable
-export { default as DataTableCellRenderer } from "@ui/components/organisms/vc-table/components/DataTableCellRenderer.vue";
-
-// High-level DataTable components (used by VcDataTable)
-export { default as DataTableRow } from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
-export { default as DataTableBody } from "@ui/components/organisms/vc-table/components/DataTableBody.vue";
-export { default as DataTableHeader } from "@ui/components/organisms/vc-table/components/DataTableHeader.vue";
-
-// Cell formatter components
-export * from "@ui/components/organisms/vc-table/components/cells";
-
-// Mobile components
-export * from "@ui/components/organisms/vc-table/components/mobile";