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

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -1,134 +0,0 @@
-<template>
-  <div
-    class="vc-table-base-header"
-    :class="{
-      'vc-table-base-header--mobile': $isMobile.value,
-      'vc-table-base-header--desktop': $isDesktop.value,
-    }"
-  >
-    <!-- <div
-      v-if="$isMobile.value && $slots['filters']"
-      class="vc-table-base-header__filter-mobile"
-    >
-      <VcTableFilter
-        :counter="activeFilterCount"
-        :disabled="disableFilter"
-      >
-        <template #default="{ closePanel }">
-          <slot
-            name="filters"
-            :close-panel="closePanel"
-          ></slot>
-        </template>
-      </VcTableFilter>
-    </div> -->
-
-    <VcInput
-      ref="searchInput"
-      class="vc-table-base-header__search-input"
-      :placeholder="searchPlaceholder || $t('COMPONENTS.ORGANISMS.VC_TABLE.SEARCH')"
-      clearable
-      name="table_search"
-      :model-value="searchValue"
-      @update:model-value="$emit('search:change', $event as string)"
-    >
-      <template #prepend-inner="{ focus }">
-        <VcIcon
-          icon="material-search"
-          class="vc-table-base-header__search-icon"
-          @click="focus?.()"
-        ></VcIcon>
-      </template>
-    </VcInput>
-
-    <div
-      v-if="$slots['filters']"
-      class="vc-table-base-header__filter-desktop"
-    >
-      <VcTableFilter
-        :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_FILTERS')"
-        :counter="activeFilterCount"
-        :parent-expanded="expanded"
-        :disabled="disableFilter"
-      >
-        <template #default="{ closePanel }">
-          <slot
-            name="filters"
-            :close-panel="closePanel"
-          ></slot>
-        </template>
-      </VcTableFilter>
-    </div>
-
-    <!-- Column Switcher slot -->
-    <div
-      v-if="$slots['column-switcher']"
-      class="vc-table-base-header__column-switcher"
-    >
-      <slot name="column-switcher"></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import VcTableFilter from "@ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue";
-import { VcInput } from "@ui/components/molecules";
-
-export interface Props {
-  searchValue?: string;
-  searchPlaceholder?: string;
-  activeFilterCount?: number;
-  expanded?: boolean;
-  disableFilter?: boolean;
-}
-
-export interface Emits {
-  (event: "search:change", value: string): void;
-}
-
-defineProps<Props>();
-defineEmits<Emits>();
-</script>
-
-<style lang="scss">
-:root {
-  --table-base-header-border-color: var(--neutrals-200);
-  --table-base-header-input-icon-color: var(--neutrals-400);
-  --table-base-header-padding-horizontal: 18px;
-  --table-base-header-padding-vertical: 9px;
-  --table-base-header-mobile-padding: 28px;
-}
-
-.vc-table-base-header {
-  @apply tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border;
-
-  &--mobile {
-    @apply tw-px-[var(--table-base-header-mobile-padding)] tw-border-b tw-border-solid tw-py-2;
-    border-color: var(--table-base-header-border-color);
-  }
-
-  &--desktop {
-    @apply tw-px-[var(--table-base-header-padding-horizontal)] tw-py-[var(--table-base-header-padding-vertical)];
-  }
-
-  &__filter-mobile {
-    @apply tw-mr-3;
-  }
-
-  &__filter-desktop {
-    @apply tw-ml-3;
-  }
-
-  &__column-switcher {
-    @apply tw-ml-3;
-  }
-
-  &__search-input {
-    @apply tw-grow tw-basis-0;
-  }
-
-  &__search-icon {
-    @apply tw-text-[color:var(--table-base-header-input-icon-color)];
-  }
-}
-</style>

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

@@ -1,451 +0,0 @@
-<template>
-  <div class="vc-table-cell">
-    <!-- Money Cell -->
-    <template v-if="cell.type === 'money'">
-      <template v-if="!isEditable && (typeof value === 'undefined' || Number(value) === 0)">
-        <div class="vc-table-cell__not-set">
-          {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-        </div>
-      </template>
-      <div
-        v-else-if="typeof Number(value) === 'number'"
-        :class="['vc-table-cell__money', cell.class]"
-      >
-        <template v-if="isEditable">
-          <Field
-            v-slot="{ errors, errorMessage }"
-            :label="cell.title as string"
-            :name="`${cell.id}_${index}`"
-            :model-value="value"
-            :rules="cell.rules"
-          >
-            <VcTooltip placement="bottom">
-              <template #default>
-                <VcInputCurrency
-                  :model-value="value"
-                  :options="[]"
-                  :option="(item as TableItem)[cell.currencyField || 'currency'] || 'USD'"
-                  currency-display="symbol"
-                  class="vc-table-cell__input-currency"
-                  :error="errors.length > 0"
-                  :error-message="$isMobile.value ? errorMessage : undefined"
-                  @update:model-value="$emit('update', { field: cell.id, value: $event })"
-                  @blur="onBlur({ row: index, field: cell.id, errors })"
-                >
-                  <template
-                    v-if="$isDesktop.value && errors.length > 0"
-                    #append-inner
-                  >
-                    <VcIcon
-                      icon="material-error"
-                      class="vc-table-cell__error-icon"
-                    ></VcIcon>
-                  </template>
-                </VcInputCurrency>
-              </template>
-              <template
-                v-if="errorMessage"
-                #tooltip
-              >
-                <div class="vc-table-cell__error-tooltip">
-                  {{ errorMessage }}
-                </div>
-              </template>
-            </VcTooltip>
-          </Field>
-        </template>
-        <template v-else>
-          <span class="vc-table-cell__money-display">{{ intlMoney(Number(value)) }}</span>
-        </template>
-      </div>
-    </template>
-
-    <!-- Date Ago Cell -->
-    <span
-      v-else-if="cell.type === 'date-ago'"
-      :class="['vc-table-cell__date-ago', cell.class]"
-      :title="(value instanceof Date && value.toLocaleString(locale)) || ''"
-    >
-      <div
-        v-if="value"
-        class="vc-table-cell__date-ago-content"
-      >
-        {{ formatDateRelative(value) }}
-      </div>
-      <div
-        v-else
-        class="vc-table-cell__not-set"
-      >
-        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-      </div>
-    </span>
-
-    <!-- Exact Date/Time Cell -->
-    <div
-      v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
-      :class="['vc-table-cell__date', cell.class]"
-    >
-      <template v-if="value">
-        <div
-          v-if="cell.format"
-          class="vc-table-cell__date-content"
-        >
-          {{ formatDateWithPattern(value, cell.format, locale) }}
-        </div>
-        <template v-else>
-          <div
-            v-if="cell.type === 'date'"
-            class="vc-table-cell__date-content"
-          >
-            {{ value instanceof Date && value.toLocaleDateString(locale) }}
-          </div>
-          <div
-            v-if="cell.type === 'time'"
-            class="vc-table-cell__date-content"
-          >
-            {{ value instanceof Date && value.toLocaleTimeString(locale) }}
-          </div>
-          <p
-            v-if="cell.type === 'date-time'"
-            class="vc-table-cell__date-content"
-          >
-            {{ value instanceof Date && value.toLocaleString(locale) }}
-          </p>
-        </template>
-      </template>
-      <div
-        v-else
-        class="vc-table-cell__not-set"
-      >
-        {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
-      </div>
-    </div>
-
-    <!-- Image Cell -->
-    <template v-else-if="cell.type === 'image'">
-      <VcImage
-        class="vc-table-cell__image"
-        :bordered="true"
-        size="s"
-        aspect="1x1"
-        :src="value as string"
-        :empty-icon="('emptyIcon' in cell && cell.emptyIcon) || undefined"
-        background="contain"
-      />
-    </template>
-
-    <!-- Status Cell -->
-    <template v-else-if="cell.type === 'status'">
-      <VcStatus class="vc-table-cell__status">{{ value }}</VcStatus>
-    </template>
-
-    <!-- Status Icon Cell -->
-    <div
-      v-else-if="cell.type === 'status-icon'"
-      class="vc-table-cell__status-icon"
-      :class="cell.class"
-    >
-      <VcStatusIcon
-        v-if="typeof value === 'boolean'"
-        :status="value as boolean"
-      ></VcStatusIcon>
-    </div>
-
-    <!-- Number Cell -->
-    <div
-      v-else-if="cell.type === 'number'"
-      :class="['vc-table-cell__number', cell.class]"
-    >
-      <template v-if="isEditable">
-        <Field
-          v-slot="{ errors, errorMessage }"
-          :label="cell.title as string"
-          :name="`${cell.id}_${index}`"
-          :model-value="value"
-          :rules="cell.rules"
-        >
-          <VcTooltip placement="bottom">
-            <template #default>
-              <VcInput
-                :model-value="value"
-                class="vc-table-cell__input-number"
-                type="number"
-                :error="errors.length > 0"
-                :error-message="$isMobile.value ? errorMessage : undefined"
-                @update:model-value="$emit('update', { field: cell.id, value: $event })"
-                @blur="onBlur({ row: index, field: cell.id, errors })"
-              >
-                <template
-                  v-if="$isDesktop.value && errors.length > 0"
-                  #append-inner
-                >
-                  <VcIcon
-                    icon="material-error"
-                    class="vc-table-cell__error-icon"
-                  ></VcIcon>
-                </template>
-              </VcInput>
-            </template>
-            <template
-              v-if="errorMessage"
-              #tooltip
-            >
-              <div class="vc-table-cell__error-tooltip">
-                {{ errorMessage }}
-              </div>
-            </template>
-          </VcTooltip>
-        </Field>
-      </template>
-      <template v-else>
-        {{
-          typeof Number(value) === "number" && Number(value) >= 0
-            ? Number(value).toFixed(0)
-            : $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET")
-        }}
-      </template>
-    </div>
-
-    <!-- Link Cell -->
-    <template v-else-if="cell.type === 'link'">
-      <VcLink
-        class="vc-table-cell__link"
-        :class="cell.class"
-        >{{ value }}</VcLink
-      >
-    </template>
-
-    <!-- HTML Cell -->
-    <template v-else-if="cell.type === 'html'">
-      <div
-        class="vc-table-cell__html"
-        :class="cell.class"
-        v-html="truncatedHtml"
-      />
-    </template>
-
-    <!-- Default Cell -->
-    <div
-      v-else
-      :class="['vc-table-cell__default', cell.class]"
-    >
-      <template v-if="isEditable">
-        <Field
-          v-slot="{ errors, errorMessage }"
-          :label="cell.title as string"
-          :name="`${cell.id}_${index}`"
-          :model-value="value"
-          :rules="cell.rules"
-        >
-          <VcTooltip placement="bottom">
-            <template #default>
-              <VcInput
-                :model-value="value"
-                class="vc-table-cell__input-default"
-                :error="errors.length > 0"
-                :error-message="$isMobile.value ? errorMessage : undefined"
-                @update:model-value="$emit('update', { field: cell.id, value: $event })"
-                @blur="onBlur({ row: index, field: cell.id, errors })"
-              >
-                <template
-                  v-if="$isDesktop.value && errors.length > 0"
-                  #append-inner
-                >
-                  <VcIcon
-                    icon="material-error"
-                    class="vc-table-cell__error-icon"
-                  ></VcIcon>
-                </template>
-              </VcInput>
-            </template>
-            <template
-              v-if="errorMessage"
-              #tooltip
-            >
-              <div class="vc-table-cell__error-tooltip">
-                {{ errorMessage }}
-              </div>
-            </template>
-          </VcTooltip>
-        </Field>
-      </template>
-      <template v-else>
-        {{ value }}
-      </template>
-    </div>
-  </div>
-</template>
-
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { computed } from "vue";
-import { formatDateRelative, formatDateWithPattern } from "@core/utilities/date";
-import * as _ from "lodash-es";
-import htmlTruncate from "truncate-html";
-import * as DOMPurify from "dompurify";
-import VcInputCurrency from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";
-import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
-import VcTooltip from "@ui/components/atoms/vc-tooltip/vc-tooltip.vue";
-import { Field } from "vee-validate";
-import type { TableItem } from "@ui/components/organisms/vc-table/types";
-import { ITableColumns } from "@core/types";
-
-// Cache for sanitized HTML to avoid repeated DOMPurify calls across table cells
-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"],
-  });
-
-  // Limit cache size to prevent memory leaks
-  if (sanitizedHtmlCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = sanitizedHtmlCache.keys().next().value;
-    if (firstKey !== undefined) {
-      sanitizedHtmlCache.delete(firstKey);
-    }
-  }
-
-  sanitizedHtmlCache.set(html, sanitized);
-  return sanitized;
-}
-
-export interface Props {
-  cell: ITableColumns;
-  item: string | TableItem;
-  width?: number;
-  editing?: boolean;
-  index?: number;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  (event: "update", payload: { field: string; value: any }): void;
-  (event: "blur", payload: { row: number | undefined; field: string }): void;
-}>();
-
-const locale = window.navigator.language;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const value = computed((): any => _.get(props.item, props.cell.field || props.cell.id));
-
-const isEditable = computed(() => props.cell.editable && props.editing);
-
-const sanitizedHtml = computed(() => {
-  if (props.cell.type === "html" && value.value) {
-    return getSanitizedHtml(String(value.value));
-  }
-  return "";
-});
-
-const truncatedHtml = computed(() =>
-  htmlTruncate(sanitizedHtml.value, +(typeof props.width !== "undefined" ? Math.floor(props.width / 5) : 30)),
-);
-
-function intlMoney(value: number) {
-  if (props.cell.type !== "money") {
-    return value;
-  }
-  const currencyProp = props.cell.currencyField || "currency";
-  return new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: (props.item as TableItem)[currencyProp] || "USD",
-  }).format(value);
-}
-
-function onBlur(args: { row: number | undefined; field: string; errors?: string[] }) {
-  if (args.errors && args.errors.length > 0) {
-    return;
-  }
-  emit("blur", { row: args.row, field: args.field });
-}
-</script>
-
-<style lang="scss">
-:root {
-  --table-cell-error-color: var(--danger-500);
-  --table-cell-text-color: var(--neutrals-400);
-  --table-cell-text-base-color: var(--additional-950);
-}
-
-.vc-table-cell {
-  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)] tw-leading-normal;
-
-  &__not-set {
-    @apply tw-truncate;
-  }
-
-  &__money {
-    @apply tw-truncate;
-  }
-
-  &__input-currency {
-    @apply tw-w-full;
-  }
-
-  &__error-icon {
-    @apply tw-text-[color:var(--table-cell-error-color)];
-  }
-
-  &__error-tooltip {
-    @apply tw-text-[color:var(--table-cell-error-color)];
-  }
-
-  &__date-ago {
-    @apply tw-text-[color:var(--table-cell-text-color)];
-  }
-
-  &__date-ago-content {
-    @apply tw-truncate;
-  }
-
-  &__date {
-    @apply tw-truncate tw-text-[color:var(--table-cell-text-color)];
-  }
-
-  &__date-content {
-    @apply tw-truncate;
-  }
-
-  &__status-icon {
-    @apply tw-flex tw-justify-center;
-  }
-
-  &__number {
-    @apply tw-truncate;
-  }
-
-  &__input-number {
-    @apply tw-w-full;
-  }
-
-  &__link {
-    @apply tw-truncate;
-  }
-
-  &__html {
-    @apply tw-p-1 tw-truncate;
-  }
-
-  &__default {
-    @apply tw-truncate;
-  }
-
-  &__input-default {
-    @apply tw-w-full;
-  }
-}
-</style>

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="vc-table-column-switcher">
-    <VcDropdown
-      :model-value="isActive"
-      :items="internalItems"
-      placement="bottom-end"
-      floating
-      max-height="40%"
-      @item-click="selectItem"
-      @update:model-value="(state) => emit('onActive', state)"
-    >
-      <template #trigger>
-        <VcButton
-          size="xs"
-          icon-size="l"
-          icon="material-view_column"
-          class="vc-table-column-switcher__toggle-button"
-          @click="isActive = !isActive"
-        ></VcButton>
-      </template>
-
-      <template #item="{ item }">
-        <div class="vc-table-column-switcher__item">
-          <VcIcon
-            :icon="item.visible ? 'material-check' : ''"
-            size="s"
-            class="vc-table-column-switcher__item-icon"
-          />
-          <p class="vc-table-column-switcher__item-title">
-            {{
-              $te(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
-                ? $t(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
-                : item.title
-            }}
-          </p>
-        </div>
-      </template>
-    </VcDropdown>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-import { ITableColumns } from "@core/types";
-import { TableColPartial } from "@ui/components/organisms/vc-table/types";
-import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
-
-export interface Props {
-  items: TableColPartial[];
-  stateKey: string;
-}
-
-export interface Emits {
-  (event: "change", value: ITableColumns): void;
-  (event: "onActive", value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {});
-const emit = defineEmits<Emits>();
-const isActive = ref(false);
-const internalItems = ref<ITableColumns[]>([]);
-
-watch(
-  () => props.items,
-  (newVal) => {
-    internalItems.value = newVal as ITableColumns[];
-  },
-  { immediate: true, deep: true },
-);
-watch(
-  () => isActive.value,
-  (newVal) => {
-    emit("onActive", newVal);
-  },
-);
-
-function selectItem(item: ITableColumns) {
-  const numberVisible = internalItems.value?.filter((i: ITableColumns) => i.visible).length || 0;
-
-  if (numberVisible > 1 || !item.visible) {
-    emit("change", toggleVisibility(item));
-  }
-}
-
-function toggleVisibility(item: ITableColumns) {
-  item.visible = !item.visible;
-
-  return item;
-}
-
-function close() {
-  if (isActive.value) {
-    isActive.value = false;
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --table-column-switcher-dropdown-bg: var(--additional-50);
-  --table-column-switcher-dropdown-border: var(--neutrals-200);
-  --table-column-switcher-dropdown-item-hover: var(--primary-50);
-  --table-column-switcher-text-color: var(--neutrals-950);
-}
-
-.vc-table-column-switcher {
-  @apply tw-relative tw-w-min tw-float-right tw-mr-4 tw-h-full;
-
-  &__item {
-    @apply tw-flex tw-text-sm tw-items-center tw-box-border tw-cursor-pointer;
-    @apply tw-w-full tw-px-3 tw-py-2;
-    color: var(--table-column-switcher-text-color);
-  }
-
-  &__item-icon {
-    @apply tw-w-4;
-  }
-
-  &__item-title {
-    @apply tw-ml-2;
-  }
-}
-</style>