@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/ui/components/organisms/vc-login-form/index.ts

@@ -1 +1 @@
-export { default as VcLoginForm } from "./vc-login-form.vue";
+export { default as VcLoginForm } from "./vc-login-form.vue";

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

@@ -1,3 +1,3 @@
-import VcPopup from "./vc-popup.vue";
-
-export { VcPopup };
+import VcPopup from "./vc-popup.vue";
+
+export { VcPopup };

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -197,10 +197,10 @@ function closeModal() {
   --popup-header-color: var(--primary-700);
   --popup-content-text-color: var(--primary-700);
   --popup-warning-icon-color: var(--warning-500);
-  --popup-error-icon-color: var(--base-error-color, var(--danger-500));
+  --popup-error-icon-color: var(--danger-500);
   --popup-success-icon-color: var(--success-500);
   --popup-info-icon-color: var(--info-500);
-  --popup-footer-separator: var(--base-border-color, var(--neutrals-200));
+  --popup-footer-separator: var(--neutrals-200);
   --popup-overlay-color: var(--additional-50);
   --popup-overlay: rgb(from var(--popup-overlay-color) r g b / 75%);
   --popup-bg: var(--additional-50);
@@ -264,7 +264,7 @@ function closeModal() {
   }
 
   &__content-wrapper {
-    @apply tw-flex tw-flex-auto tw-self-center tw-min-h-0 tw-max-h-[-webkit-fill-available];
+    @apply tw-flex tw-flex-auto tw-self-center tw-min-h-0 tw-max-h-[-webkit-fill-available] tw-max-h-[-moz-available];
 
     &--full {
       @apply tw-h-full;

package/ui/components/organisms/vc-table/_internal/vc-table-add-new/vc-table-add-new.vue

@@ -1,63 +1,63 @@
-<template>
-  <div
-    v-if="editing && addNewRowButton"
-    class="vc-table-add-new-row"
-  >
-    <div class="vc-table-add-new-row__container">
-      <VcButton
-        v-if="addNewRowButton.show"
-        text
-        class="vc-table-add-new-row__button"
-        @click="$emit('onAddNewRow')"
-      >
-        <div class="vc-table-add-new-row__content">
-          <VcIcon
-            icon="fas fa-plus"
-            size="m"
-            class="vc-table-add-new-row__icon"
-          />
-          {{ unref(addNewRowButton.title) }}
-        </div>
-      </VcButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { unref } from "vue";
-export interface Props {
-  editing: boolean | undefined;
-  addNewRowButton:
-    | {
-        show: boolean;
-        title: string;
-      }
-    | undefined;
-}
-
-export interface Emits {
-  (event: "onAddNewRow"): void;
-}
-
-defineProps<Props>();
-
-defineEmits<Emits>();
-</script>
-
-<style lang="scss">
-:root {
-  --table-add-new-icon-color: var(--primary-400);
-}
-
-.vc-table-add-new-row {
-  @apply tw-p-3;
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-gap-2 tw-items-center;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--table-add-new-icon-color)];
-  }
-}
-</style>
+<template>
+  <div
+    v-if="editing && addNewRowButton"
+    class="vc-table-add-new-row"
+  >
+    <div class="vc-table-add-new-row__container">
+      <VcButton
+        v-if="addNewRowButton.show"
+        text
+        class="vc-table-add-new-row__button"
+        @click="$emit('onAddNewRow')"
+      >
+        <div class="vc-table-add-new-row__content">
+          <VcIcon
+            icon="fas fa-plus"
+            size="m"
+            class="vc-table-add-new-row__icon"
+          />
+          {{ unref(addNewRowButton.title) }}
+        </div>
+      </VcButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { unref } from "vue";
+export interface Props {
+  editing: boolean | undefined;
+  addNewRowButton:
+    | {
+        show: boolean;
+        title: string;
+      }
+    | undefined;
+}
+
+export interface Emits {
+  (event: "onAddNewRow"): void;
+}
+
+defineProps<Props>();
+
+defineEmits<Emits>();
+</script>
+
+<style lang="scss">
+:root {
+  --table-add-new-icon-color: var(--primary-400);
+}
+
+.vc-table-add-new-row {
+  @apply tw-p-3;
+
+  &__content {
+    @apply tw-flex tw-flex-row tw-gap-2 tw-items-center;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--table-add-new-icon-color)];
+  }
+}
+</style>

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

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="vc-table-header"
+    class="vc-table-base-header"
     :class="{
-      'vc-table-header--mobile': $isMobile.value,
-      'vc-table-header--desktop': $isDesktop.value,
+      'vc-table-base-header--mobile': $isMobile.value,
+      'vc-table-base-header--desktop': $isDesktop.value,
     }"
   >
-    <div
+    <!-- <div
       v-if="$isMobile.value && $slots['filters']"
-      class="vc-table-header__filter-mobile"
+      class="vc-table-base-header__filter-mobile"
     >
       <VcTableFilter
         :counter="activeFilterCount"
@@ -21,11 +21,11 @@
           ></slot>
         </template>
       </VcTableFilter>
-    </div>
+    </div> -->
 
     <VcInput
       ref="searchInput"
-      class="vc-table-header__search-input"
+      class="vc-table-base-header__search-input"
       :placeholder="searchPlaceholder || $t('COMPONENTS.ORGANISMS.VC_TABLE.SEARCH')"
       clearable
       name="table_search"
@@ -35,15 +35,15 @@
       <template #prepend-inner="{ focus }">
         <VcIcon
           icon="fas fa-search"
-          class="vc-table-header__search-icon"
+          class="vc-table-base-header__search-icon"
           @click="focus?.()"
         ></VcIcon>
       </template>
     </VcInput>
 
     <div
-      v-if="$isDesktop.value && $slots['filters']"
-      class="vc-table-header__filter-desktop"
+      v-if="$slots['filters']"
+      class="vc-table-base-header__filter-desktop"
     >
       <VcTableFilter
         :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_FILTERS')"
@@ -65,6 +65,7 @@
 <script lang="ts" setup>
 import VcTableFilter from "./../vc-table-filter/vc-table-filter.vue";
 import { VcInput } from "./../../../../molecules";
+
 export interface Props {
   searchValue?: string;
   searchPlaceholder?: string;
@@ -83,20 +84,23 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --table-header-border-color: var(--base-border-color, var(--neutrals-200));
-  --table-header-input-icon-color: var(--neutrals-300);
+  --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-header {
+.vc-table-base-header {
   @apply tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border;
 
   &--mobile {
-    @apply tw-px-4 tw-py-2 tw-border-b tw-border-solid;
-    border-color: var(--table-header-border-color);
+    @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-p-4;
+    @apply tw-px-[var(--table-base-header-padding-horizontal)] tw-py-[var(--table-base-header-padding-vertical)];
   }
 
   &__filter-mobile {
@@ -112,7 +116,7 @@ defineEmits<Emits>();
   }
 
   &__search-icon {
-    @apply tw-text-[color:var(--table-header-input-icon-color)];
+    @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

@@ -24,7 +24,7 @@
                 <VcInputCurrency
                   :model-value="value"
                   :options="[]"
-                  :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
+                  :option="(item as TableItem)[cell.currencyField || 'currency'] || 'USD'"
                   currency-display="symbol"
                   class="vc-table-cell__input-currency"
                   :error="errors.length > 0"
@@ -280,7 +280,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import moment from "moment";
-import { ITableColumns } from "./../../../../../../core/types";
 import * as _ from "lodash-es";
 import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
@@ -288,10 +287,12 @@ import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-cu
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
 import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
+import type { TableItem } from "../../vc-table.vue";
+import { ITableColumns } from "../../../../../../core/types";
 
 export interface Props {
   cell: ITableColumns;
-  item: Record<string, unknown>;
+  item: string | TableItem;
   width?: number;
   editing?: boolean;
   index?: number;
@@ -329,7 +330,7 @@ function intlMoney(value: number) {
   const currencyProp = props.cell.currencyField || "currency";
   return new Intl.NumberFormat(locale, {
     style: "currency",
-    currency: (props.item[currencyProp] as string) || "USD",
+    currency: (props.item as TableItem)[currencyProp] || "USD",
   }).format(value);
 }
 
@@ -343,13 +344,13 @@ function onBlur(args: { row: number | undefined; field: string; errors?: string[
 
 <style lang="scss">
 :root {
-  --table-cell-error-color: var(--base-error-color, var(--danger-500));
+  --table-cell-error-color: var(--danger-500);
   --table-cell-text-color: var(--neutrals-400);
-  --table-cell-text-base-color: var(--base-text-color, var(--additional-950));
+  --table-cell-text-base-color: var(--additional-950);
 }
 
 .vc-table-cell {
-  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)];
+  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)] tw-leading-normal;
 
   &__not-set {
     @apply tw-truncate;

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

@@ -56,9 +56,10 @@ import { ref, computed, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
+import { TableColPartial } from "../../vc-table.vue";
 
 export interface Props {
-  items: ITableColumns[];
+  items: TableColPartial[];
   stateKey: string;
 }
 
@@ -126,9 +127,9 @@ function close() {
 <style lang="scss">
 :root {
   --table-column-switcher-dropdown-bg: var(--additional-50);
-  --table-column-switcher-dropdown-border: var(--base-border-color, var(--neutrals-200));
+  --table-column-switcher-dropdown-border: var(--neutrals-200);
   --table-column-switcher-dropdown-item-hover: var(--primary-50);
-  --table-column-switcher-text-color: var(--base-text-color, var(--neutrals-950));
+  --table-column-switcher-text-color: var(--neutrals-950);
 }
 
 .vc-table-column-switcher {

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

@@ -19,12 +19,13 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss">
 :root {
-  --table-counter-label-color: var(--base-text-color, var(--secondary-950));
-  --table-counter-value-color: var(--info-500);
+  --table-counter-label-color: var(--secondary-950);
+  --table-counter-value-color: var(--primary-500);
+  --table-counter-value-border-color: var(--neutrals-500);
 }
 
 .vc-table-counter {
-  @apply tw-font-medium tw-text-sm;
+  @apply tw-font-medium tw-text-sm tw-border tw-border-solid tw-border-[var(--table-counter-value-border-color)] tw-rounded-full tw-px-3 tw-py-[6px];
 
   &__label {
     @apply tw-text-[color:var(--table-counter-label-color)];

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-body/vc-table-body.vue

@@ -0,0 +1,133 @@
+<template>
+  <div
+    v-if="items && items.length && !columnsInit"
+    ref="tableBody"
+    class="vc-table-body"
+  >
+    <VcTableRow
+      v-for="(item, itemIndex) in items"
+      :key="(typeof item === 'object' && 'id' in item && item.id) || itemIndex"
+      :item="item"
+      :index="itemIndex"
+      :filtered-cols="filteredCols"
+      :multiselect="multiselect"
+      :selected-item-id="selectedItemId"
+      :selection="selection"
+      :disabled-selection="disabledSelection"
+      :reorderable-rows="reorderableRows"
+      :dragged-row="draggedRow"
+      :has-click-listener="hasClickListener"
+      :editing="editing"
+      :enable-item-actions="enableItemActions"
+      :item-action-builder="itemActionBuilder"
+      :item-actions="itemActions"
+      :selected-row-index="selectedRowIndex"
+      :is-selected="isSelected"
+      @item-click="$emit('itemClick', $event)"
+      @close-actions="$emit('closeActions')"
+      @row-mouse-down="$emit('rowMouseDown', $event)"
+      @row-drag-start="$emit('rowDragStart', $event, item)"
+      @row-drag-over="$emit('rowDragOver', $event, item)"
+      @row-drag-leave="$emit('rowDragLeave', $event)"
+      @row-drag-end="$emit('rowDragEnd', $event)"
+      @row-drop="$emit('rowDrop', $event)"
+      @show-actions="$emit('showActions', $event)"
+      @row-checkbox="$emit('rowCheckbox', $event)"
+      @on-edit-complete="$emit('onEditComplete', $event)"
+      @on-cell-blur="$emit('onCellBlur', $event)"
+    >
+      <template
+        v-for="(slot, i) in slotName"
+        :key="i"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="slotProps"
+        />
+      </template>
+    </VcTableRow>
+  </div>
+  <div
+    v-else
+    class="vc-table-body__empty"
+  >
+    <VcTableEmpty
+      :items="items"
+      :columns-init="columnsInit"
+      :search-value="searchValue"
+      :active-filter-count="activeFilterCount"
+      :notfound="notfound"
+      :empty="empty"
+    >
+      <template #notfound>
+        <slot name="notfound" />
+      </template>
+      <template #empty>
+        <slot name="empty" />
+      </template>
+    </VcTableEmpty>
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends TableItem | string">
+import VcTableRow from "../vc-table-row/vc-table-row.vue";
+import VcTableEmpty from "../../../vc-table-empty/vc-table-empty.vue";
+import type { IActionBuilderResult } from "../../../../../../../../core/types";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../../../vc-table.vue";
+import { MaybeRef, useSlots } from "vue";
+
+defineProps<{
+  items: T[];
+  filteredCols: TableColPartial[];
+  multiselect?: boolean;
+  selectedItemId?: MaybeRef<string>;
+  selection: T[];
+  disabledSelection: T[];
+  reorderableRows?: boolean;
+  draggedRow?: number;
+  hasClickListener?: boolean;
+  editing?: boolean;
+  enableItemActions?: boolean;
+  itemActionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
+  itemActions: IActionBuilderResult[][];
+  selectedRowIndex?: number;
+  columnsInit: boolean;
+  searchValue?: string;
+  activeFilterCount?: number;
+  notfound?: StatusImage;
+  empty?: StatusImage;
+  isSelected: (item: T) => boolean;
+}>();
+
+defineEmits<{
+  (e: "itemClick", item: T): void;
+  (e: "closeActions"): void;
+  (e: "rowMouseDown", event: MouseEvent): void;
+  (e: "rowDragStart", event: DragEvent, item: T): void;
+  (e: "rowDragOver", event: DragEvent, item: T): void;
+  (e: "rowDragLeave", event: DragEvent): void;
+  (e: "rowDragEnd", event: DragEvent): void;
+  (e: "rowDrop", event: DragEvent): void;
+  (e: "showActions", index: number): void;
+  (e: "rowCheckbox", item: T): void;
+  (e: "onEditComplete", args: { event: { field: string; value: string | number }; index: number }): void;
+  (e: "onCellBlur", args: { row: number | undefined; field: string }): void;
+}>();
+
+defineSlots<TableSlots<T>>();
+
+const slots = useSlots();
+
+const slotName = Object.keys(slots) as unknown;
+</script>
+
+<style lang="scss">
+.vc-table-body {
+  @apply tw-flex tw-flex-col tw-overflow-auto;
+
+  &__empty {
+    @apply tw-overflow-auto tw-flex tw-flex-col tw-flex-auto;
+  }
+}
+</style>