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

package/ui/components/organisms/vc-table/components/_internal/TableSkeletonRows.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="vc-data-table__skeleton">
-    <!-- Column-aware skeleton when columns are available -->
-    <template v-if="columns.length > 0">
-      <TableRow
-        v-for="rowIndex in rows"
-        :key="rowIndex"
-      >
-        <TableCell
-          v-if="showSelectionCell"
-          :style="{ textAlign: 'center', justifyContent: 'center', minWidth: '40px', maxWidth: '40px' }"
-          width="40px"
-          :line-clamp="0"
-        >
-          <VcSkeleton variant="circle" width="18px" height="18px" />
-        </TableCell>
-        <TableCell
-          v-for="col in columns"
-          :key="col.props.id"
-          :width="getColumnWidth(col.props)"
-          :style="getCellStyle(col.props)"
-          :line-clamp="0"
-        >
-          <VcSkeleton
-            v-bind="getSkeletonProps(col.props, rowIndex)"
-          />
-        </TableCell>
-      </TableRow>
-    </template>
-
-    <!-- Fallback: simple full-width skeleton rows when columns aren't parsed yet -->
-    <div
-      v-else
-      v-for="rowIndex in rows"
-      :key="`fallback-${rowIndex}`"
-      class="vc-data-table__skeleton-fallback-row"
-    >
-      <VcSkeleton
-        variant="block"
-        :width="ROW_WIDTHS[(rowIndex - 1) % ROW_WIDTHS.length]"
-        height="16px"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * TableSkeletonRows — renders skeleton placeholder rows matching
- * the real column layout. Each cell gets a VcSkeleton shaped by
- * column type (image → square, status → badge, text → line, etc.).
- */
-import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
-import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
-import TableRow from "@ui/components/organisms/vc-table/components/TableRow.vue";
-import TableCell from "@ui/components/organisms/vc-table/components/TableCell.vue";
-import VcSkeleton from "@ui/components/atoms/vc-skeleton/vc-skeleton.vue";
-
-defineProps<{
-  /** Visible columns to render skeleton cells for */
-  columns: ColumnInstance[];
-  /** Number of skeleton rows */
-  rows: number;
-  /** Column width resolver (same as used by real rows) */
-  getColumnWidth: (col: VcColumnProps) => string | undefined;
-  /** Cell style resolver (handles special columns: selection, expander, etc.) */
-  getCellStyle: (col: VcColumnProps) => object | undefined;
-  /** Whether to show a selection cell (checkbox/radio) before data cells */
-  showSelectionCell?: boolean;
-}>();
-
-// Pseudo-random width per row index to avoid uniform look
-const ROW_WIDTHS = ["95%", "80%", "88%", "72%", "90%"];
-
-function getSkeletonProps(
-  col: VcColumnProps,
-  rowIndex: number,
-): { variant: "block" | "circle"; width?: string; height?: string } {
-  const type = col.type || "text";
-
-  // Special columns: selection checkbox, expander, row reorder
-  if (col.selectionMode) {
-    return { variant: "circle", width: "18px", height: "18px" };
-  }
-  if (col.expander || col.rowReorder || col.rowEditor) {
-    return { variant: "block", width: "20px", height: "20px" };
-  }
-
-  // Cell handles column width via getColumnWidth — skeleton fills the cell
-  switch (type) {
-    case "image":
-      return { variant: "block", width: "36px", height: "36px" };
-    case "status":
-    case "status-icon":
-      return { variant: "block", width: "100%", height: "22px" };
-    default:
-      return { variant: "block", width: "100%", height: "16px" };
-  }
-}
-</script>
-
-<style lang="scss">
-.vc-data-table__skeleton {
-  @apply tw-flex tw-flex-col tw-flex-auto tw-overflow-hidden;
-}
-
-.vc-data-table__skeleton-fallback-row {
-  @apply tw-px-4 tw-py-[10px];
-}
-</style>

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

@@ -1,52 +0,0 @@
-<template>
-  <span v-if="value" class="vc-table-cell-date">{{ formatted }}</span>
-  <span v-else class="vc-table-cell-date vc-table-cell-date--not-set">
-    {{ t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { formatDateWithPattern } from "@core/utilities/date";
-
-const props = defineProps<{
-  /** The date value to display (Date, string, or number) */
-  value?: unknown;
-  /** Format variant: 'date', 'time', or 'date-time' */
-  variant?: "date" | "time" | "date-time";
-  /** Custom date format string (moment.js tokens auto-converted) */
-  format?: string;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const locale = window.navigator.language;
-
-const formatted = computed(() => {
-  if (!props.value) return "";
-
-  // Custom date format
-  if (props.format) {
-    return formatDateWithPattern(props.value as string | number | Date, props.format, locale);
-  }
-
-  // Native locale formatting
-  const d = props.value instanceof Date ? props.value : new Date(props.value as string | number);
-  const variant = props.variant || "date";
-
-  if (variant === "time") return d.toLocaleTimeString(locale);
-  if (variant === "date-time") return d.toLocaleString(locale);
-  return d.toLocaleDateString(locale);
-});
-</script>
-
-<style lang="scss">
-.vc-table-cell-date {
-  @apply tw-truncate;
-  color: var(--neutrals-400);
-
-  &--not-set {
-    color: var(--neutrals-400);
-  }
-}
-</style>

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

@@ -1,48 +0,0 @@
-<template>
-  <span
-    v-if="value"
-    class="vc-table-cell-date-ago"
-    :title="titleText"
-  >
-    {{ agoText }}
-  </span>
-  <span v-else class="vc-table-cell-date-ago vc-table-cell-date-ago--not-set">
-    {{ t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { formatDateRelative } from "@core/utilities/date";
-
-const props = defineProps<{
-  /** The date value to display as relative time (e.g., '2 hours ago') */
-  value?: unknown;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const locale = window.navigator.language;
-
-const titleText = computed(() => {
-  if (!props.value) return "";
-  const d = props.value instanceof Date ? props.value : new Date(props.value as string | number);
-  return d.toLocaleString(locale);
-});
-
-const agoText = computed(() => {
-  if (!props.value) return "";
-  return formatDateRelative(props.value as string | number | Date);
-});
-</script>
-
-<style lang="scss">
-.vc-table-cell-date-ago {
-  @apply tw-truncate;
-  color: var(--neutrals-400);
-
-  &--not-set {
-    color: var(--neutrals-400);
-  }
-}
-</style>

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

@@ -1,90 +0,0 @@
-<template>
-  <!-- Editable mode -->
-  <CellEditableWrapper
-    v-if="editable"
-    :label="label || ''"
-    :field-name="fieldName || ''"
-    :model-value="value"
-    :rules="rules"
-  >
-    <template #default="{ errors, errorMessage }">
-      <VcInput
-        :model-value="value"
-        class="vc-table-cell-default__input"
-        :error="errors.length > 0"
-        :error-message="isMobile ? errorMessage : undefined"
-        @update:model-value="$emit('update', { field: fieldId || '', value: $event })"
-        @blur="onBlur(errors)"
-      >
-        <template
-          v-if="isDesktop && errors.length > 0"
-          #append-inner
-        >
-          <VcIcon
-            icon="material-error"
-            class="vc-table-cell-default__error-icon"
-          />
-        </template>
-      </VcInput>
-    </template>
-  </CellEditableWrapper>
-
-  <!-- Display mode -->
-  <span v-else class="vc-table-cell-default">{{ value }}</span>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, Ref, ref } from "vue";
-import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
-import { VcIcon } from "@ui/components/atoms";
-import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
-import CellEditableWrapper from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";
-
-const props = defineProps<{
-  /** The cell value to display or edit */
-  value?: unknown;
-  /** Whether the cell is in editable mode */
-  editable?: boolean;
-  /** Label for the editable field (used for validation) */
-  label?: string;
-  /** Field name for validation */
-  fieldName?: string;
-  /** Field identifier for update/blur events */
-  fieldId?: string;
-  /** Validation rules for the editable field */
-  rules?: Record<string, unknown>;
-  /** Row index for blur event payload */
-  rowIndex?: number;
-}>();
-
-const emit = defineEmits<{
-  /** Emitted when cell value is updated */
-  (e: "update", payload: { field: string; value: unknown }): void;
-  /** Emitted when editable cell loses focus (only if no validation errors) */
-  (e: "blur", payload: { row: number | undefined; field: string }): void;
-}>();
-
-const isMobileRef = inject(IsMobileKey, ref(false));
-const isDesktopRef = inject(IsDesktopKey, ref(true));
-const isMobile = computed(() => isMobileRef.value);
-const isDesktop = computed(() => isDesktopRef.value);
-
-const onBlur = (errors: string[]) => {
-  if (errors && errors.length > 0) return;
-  emit("blur", { row: props.rowIndex, field: props.fieldId || "" });
-};
-</script>
-
-<style lang="scss">
-.vc-table-cell-default {
-  @apply tw-truncate;
-
-  &__input {
-    @apply tw-w-full;
-  }
-
-  &__error-icon {
-    @apply tw-text-danger-500;
-  }
-}
-</style>

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

@@ -1,47 +0,0 @@
-<template>
-  <Field
-    v-slot="{ errors, errorMessage }"
-    :label="label"
-    :name="fieldName"
-    :model-value="modelValue"
-    :rules="rules"
-  >
-    <VcTooltip placement="bottom">
-      <template #default>
-        <slot :errors="errors" :error-message="errorMessage" />
-      </template>
-      <template
-        v-if="errorMessage"
-        #tooltip
-      >
-        <div class="vc-table-cell-editable__error-tooltip">
-          {{ errorMessage }}
-        </div>
-      </template>
-    </VcTooltip>
-  </Field>
-</template>
-
-<script setup lang="ts">
-import { Field } from "vee-validate";
-import VcTooltip from "@ui/components/atoms/vc-tooltip/vc-tooltip.vue";
-
-defineProps<{
-  /** Label for the editable field (used for validation) */
-  label: string;
-  /** Field name for validation */
-  fieldName: string;
-  /** Current value of the field */
-  modelValue?: unknown;
-  /** Validation rules for the field */
-  rules?: Record<string, unknown>;
-}>();
-</script>
-
-<style lang="scss">
-.vc-table-cell-editable {
-  &__error-tooltip {
-    @apply tw-text-danger-500;
-  }
-}
-</style>

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

@@ -1,62 +0,0 @@
-<template>
-  <div class="vc-table-cell-html" v-html="truncatedHtml" />
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import htmlTruncate from "truncate-html";
-import * as DOMPurify from "dompurify";
-
-const props = defineProps<{
-  /** The HTML content to sanitize and display */
-  value?: unknown;
-  /** Maximum character length before truncation (default: 30) */
-  maxLength?: number;
-}>();
-
-// Cache for sanitized HTML to avoid repeated DOMPurify calls
-const sanitizedHtmlCache = new Map<string, string>();
-const MAX_CACHE_SIZE = 500;
-
-function getSanitizedHtml(html: string): string {
-  if (sanitizedHtmlCache.has(html)) {
-    return sanitizedHtmlCache.get(html)!;
-  }
-
-  const sanitized = DOMPurify.default.sanitize(html, {
-    ALLOWED_TAGS: [
-      "p", "br", "strong", "em", "u", "s", "h1", "h2", "h3", "h4", "h5", "h6",
-      "ul", "ol", "li", "blockquote", "pre", "code", "a", "img", "table",
-      "thead", "tbody", "tr", "th", "td", "hr", "div", "span",
-    ],
-    ALLOWED_ATTR: ["href", "src", "alt", "title", "class", "id", "colspan", "rowspan", "align", "valign"],
-    FORBID_TAGS: ["script", "object", "embed", "form", "input"],
-    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus", "onblur", "style"],
-  });
-
-  if (sanitizedHtmlCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = sanitizedHtmlCache.keys().next().value;
-    if (firstKey !== undefined) {
-      sanitizedHtmlCache.delete(firstKey);
-    }
-  }
-
-  sanitizedHtmlCache.set(html, sanitized);
-  return sanitized;
-}
-
-const sanitizedHtml = computed(() => {
-  if (!props.value) return "";
-  return getSanitizedHtml(String(props.value));
-});
-
-const truncatedHtml = computed(() =>
-  htmlTruncate(sanitizedHtml.value, props.maxLength || 30),
-);
-</script>
-
-<style lang="scss">
-.vc-table-cell-html {
-  @apply tw-p-1 tw-truncate;
-}
-</style>

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

@@ -1,28 +0,0 @@
-<template>
-  <VcImage
-    class="vc-table-cell-image"
-    :bordered="true"
-    size="s"
-    aspect="1x1"
-    :src="(value as string)"
-    :empty-icon="emptyIcon"
-    background="contain"
-  />
-</template>
-
-<script setup lang="ts">
-import { VcImage } from "@ui/components/atoms";
-
-defineProps<{
-  /** The image URL to display */
-  value?: unknown;
-  /** Icon to display when image is empty or missing */
-  emptyIcon?: string;
-}>();
-</script>
-
-<style lang="scss">
-.vc-table-cell-image {
-  @apply tw-flex-shrink-0;
-}
-</style>

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

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

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

@@ -1,120 +0,0 @@
-<template>
-  <!-- Editable mode -->
-  <CellEditableWrapper
-    v-if="editable"
-    :label="label || ''"
-    :field-name="fieldName || ''"
-    :model-value="value"
-    :rules="rules"
-  >
-    <template #default="{ errors, errorMessage }">
-      <VcInputCurrency
-        :model-value="(value as number | null | undefined)"
-        :options="[]"
-        :option="currency || 'USD'"
-        currency-display="symbol"
-        class="vc-table-cell-money__input"
-        :error="errors.length > 0"
-        :error-message="isMobile ? errorMessage : undefined"
-        @update:model-value="$emit('update', { field: fieldId || '', value: $event })"
-        @blur="onBlur(errors)"
-      >
-        <template
-          v-if="isDesktop && errors.length > 0"
-          #append-inner
-        >
-          <VcIcon
-            icon="material-error"
-            class="vc-table-cell-money__error-icon"
-          />
-        </template>
-      </VcInputCurrency>
-    </template>
-  </CellEditableWrapper>
-
-  <!-- Display mode -->
-  <span v-else-if="!isEmpty" class="vc-table-cell-money">{{ formatted }}</span>
-  <span v-else class="vc-table-cell-money vc-table-cell-money--not-set">
-    {{ t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, Ref, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import VcInputCurrency from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";
-import { VcIcon } from "@ui/components/atoms";
-import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
-import CellEditableWrapper from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";
-
-const props = defineProps<{
-  /** The monetary value to display or edit */
-  value?: unknown;
-  /** Currency code (e.g., 'USD', 'EUR') for formatting */
-  currency?: string;
-  /** Whether the cell is in editable mode */
-  editable?: boolean;
-  /** Label for the editable field (used for validation) */
-  label?: string;
-  /** Field name for validation */
-  fieldName?: string;
-  /** Field identifier for update/blur events */
-  fieldId?: string;
-  /** Validation rules for the editable field */
-  rules?: Record<string, unknown>;
-  /** Row index for blur event payload */
-  rowIndex?: number;
-}>();
-
-const emit = defineEmits<{
-  /** Emitted when cell value is updated */
-  (e: "update", payload: { field: string; value: unknown }): void;
-  /** Emitted when editable cell loses focus (only if no validation errors) */
-  (e: "blur", payload: { row: number | undefined; field: string }): void;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const locale = window.navigator.language;
-
-const isMobileRef = inject(IsMobileKey, ref(false));
-const isDesktopRef = inject(IsDesktopKey, ref(true));
-const isMobile = computed(() => isMobileRef.value);
-const isDesktop = computed(() => isDesktopRef.value);
-
-const isEmpty = computed(
-  () => typeof props.value === "undefined" || props.value === null || Number(props.value) === 0,
-);
-
-const formatted = computed(() => {
-  const num = Number(props.value);
-  if (isNaN(num)) return String(props.value);
-  return new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: props.currency || "USD",
-  }).format(num);
-});
-
-const onBlur = (errors: string[]) => {
-  if (errors && errors.length > 0) return;
-  emit("blur", { row: props.rowIndex, field: props.fieldId || "" });
-};
-</script>
-
-<style lang="scss">
-.vc-table-cell-money {
-  @apply tw-truncate tw-font-medium tw-tabular-nums;
-
-  &--not-set {
-    @apply tw-font-normal;
-    color: var(--neutrals-400);
-  }
-
-  &__input {
-    @apply tw-w-full;
-  }
-
-  &__error-icon {
-    @apply tw-text-danger-500;
-  }
-}
-</style>

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

@@ -1,113 +0,0 @@
-<template>
-  <!-- Editable mode -->
-  <CellEditableWrapper
-    v-if="editable"
-    :label="label || ''"
-    :field-name="fieldName || ''"
-    :model-value="value"
-    :rules="rules"
-  >
-    <template #default="{ errors, errorMessage }">
-      <VcInput
-        :model-value="value"
-        class="vc-table-cell-number__input"
-        type="number"
-        :error="errors.length > 0"
-        :error-message="isMobile ? errorMessage : undefined"
-        @update:model-value="$emit('update', { field: fieldId || '', value: $event })"
-        @blur="onBlur(errors)"
-      >
-        <template
-          v-if="isDesktop && errors.length > 0"
-          #append-inner
-        >
-          <VcIcon
-            icon="material-error"
-            class="vc-table-cell-number__error-icon"
-          />
-        </template>
-      </VcInput>
-    </template>
-  </CellEditableWrapper>
-
-  <!-- Display mode -->
-  <span v-else-if="!isEmpty" class="vc-table-cell-number">{{ formatted }}</span>
-  <span v-else class="vc-table-cell-number vc-table-cell-number--not-set">
-    {{ t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, Ref, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
-import { VcIcon } from "@ui/components/atoms";
-import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
-import CellEditableWrapper from "@ui/components/organisms/vc-table/components/cells/CellEditableWrapper.vue";
-
-const props = defineProps<{
-  /** The numeric value to display or edit */
-  value?: unknown;
-  /** Whether the cell is in editable mode */
-  editable?: boolean;
-  /** Label for the editable field (used for validation) */
-  label?: string;
-  /** Field name for validation */
-  fieldName?: string;
-  /** Field identifier for update/blur events */
-  fieldId?: string;
-  /** Validation rules for the editable field */
-  rules?: Record<string, unknown>;
-  /** Row index for blur event payload */
-  rowIndex?: number;
-}>();
-
-const emit = defineEmits<{
-  /** Emitted when cell value is updated */
-  (e: "update", payload: { field: string; value: unknown }): void;
-  /** Emitted when editable cell loses focus (only if no validation errors) */
-  (e: "blur", payload: { row: number | undefined; field: string }): void;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-
-const isMobileRef = inject(IsMobileKey, ref(false));
-const isDesktopRef = inject(IsDesktopKey, ref(true));
-const isMobile = computed(() => isMobileRef.value);
-const isDesktop = computed(() => isDesktopRef.value);
-
-const isEmpty = computed(() => {
-  if (props.value === null || props.value === undefined) return true;
-  const num = Number(props.value);
-  return isNaN(num) || num < 0;
-});
-
-const formatted = computed(() => {
-  const num = Number(props.value);
-  return isNaN(num) ? String(props.value) : num.toFixed(0);
-});
-
-const onBlur = (errors: string[]) => {
-  if (errors && errors.length > 0) return;
-  emit("blur", { row: props.rowIndex, field: props.fieldId || "" });
-};
-</script>
-
-<style lang="scss">
-.vc-table-cell-number {
-  @apply tw-truncate tw-tabular-nums;
-
-  &--not-set {
-    @apply tw-font-normal;
-    color: var(--neutrals-400);
-  }
-
-  &__input {
-    @apply tw-w-full;
-  }
-
-  &__error-icon {
-    @apply tw-text-danger-500;
-  }
-}
-</style>