@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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-login-form/vc-login-form.vue

@@ -1,99 +1,99 @@
-<template>
-  <div
-    class="vc-login-form__container"
-    :style="backgroundImageHandler"
-  >
-    <div
-      class="vc-login-form__logo"
-      :style="logoImageHandler"
-    ></div>
-    <div class="vc-login-form__box">
-      <div class="vc-login-form__header">
-        {{ title }}
-      </div>
-      <div class="vc-login-form__content">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="vc-login-form__version">
-      {{ version }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-
-export interface Props {
-  logo?: string;
-  background?: string;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Login",
-});
-
-defineSlots<{
-  default: void;
-}>();
-
-const router = useRouter();
-
-const backgroundImageHandler = computed(() => {
-  if (props.background) {
-    return `background: url(${CSS.escape(props.background)}) center / cover no-repeat`;
-  }
-  return undefined;
-});
-
-const logoImageHandler = computed(() => {
-  if (props.logo) {
-    return `background: url(${CSS.escape(props.logo)}) center / contain no-repeat`;
-  }
-  return undefined;
-});
-
-const version = router.currentRoute.value.meta?.appVersion;
-
-console.debug("Init vc-login-form");
-</script>
-
-<style lang="scss">
-:root {
-  --login-version-color: var(--neutrals-400);
-  --login-header-bg-color: var(--secondary-700);
-  --login-box-shadow-color: var(--additional-950);
-  --login-box-shadow: rgb(from var(--login-box-shadow-color) r g b / 5%);
-  --login-bg-color: var(--additional-50);
-  --login-title-color: var(--additional-50);
-  --login-title-bg: var(--secondary-700);
-}
-
-.vc-login-form {
-  &__container {
-    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
-  }
-
-  &__logo {
-    @apply tw-h-20 tw-w-[516px] tw-max-w-[90%] tw-mb-12 -tw-mt-24;
-  }
-
-  &__box {
-    @apply tw-w-[516px] tw-max-w-[90%] tw-bg-[var(--login-bg-color)] tw-rounded-md tw-overflow-hidden [box-shadow:var(--login-box-shadow)];
-  }
-
-  &__header {
-    @apply tw-uppercase tw-text-[var(--login-title-color)] tw-bg-[var(--login-title-bg)] tw-h-12 tw-px-7 tw-text-lg tw-flex tw-items-center;
-  }
-
-  &__content {
-    @apply tw-pt-4 tw-px-7 tw-pb-6;
-  }
-
-  &__version {
-    @apply tw-absolute tw-bottom-0.5 tw-left-[93px] tw-text-[var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-login-form__container"
+    :style="backgroundImageHandler"
+  >
+    <div
+      class="vc-login-form__logo"
+      :style="logoImageHandler"
+    ></div>
+    <div class="vc-login-form__box">
+      <div class="vc-login-form__header">
+        {{ title }}
+      </div>
+      <div class="vc-login-form__content">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="vc-login-form__version">
+      {{ version }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+
+export interface Props {
+  logo?: string;
+  background?: string;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Login",
+});
+
+defineSlots<{
+  default: void;
+}>();
+
+const router = useRouter();
+
+const backgroundImageHandler = computed(() => {
+  if (props.background) {
+    return `background: url(${CSS.escape(props.background)}) center / cover no-repeat`;
+  }
+  return undefined;
+});
+
+const logoImageHandler = computed(() => {
+  if (props.logo) {
+    return `background: url(${CSS.escape(props.logo)}) center / contain no-repeat`;
+  }
+  return undefined;
+});
+
+const version = router.currentRoute.value.meta?.appVersion;
+
+console.debug("Init vc-login-form");
+</script>
+
+<style lang="scss">
+:root {
+  --login-version-color: var(--neutrals-400);
+  --login-header-bg-color: var(--secondary-700);
+  --login-box-shadow-color: var(--additional-950);
+  --login-box-shadow: rgb(from var(--login-box-shadow-color) r g b / 5%);
+  --login-bg-color: var(--additional-50);
+  --login-title-color: var(--additional-50);
+  --login-title-bg: var(--secondary-700);
+}
+
+.vc-login-form {
+  &__container {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__logo {
+    @apply tw-h-20 tw-w-[516px] tw-max-w-[90%] tw-mb-12 -tw-mt-24;
+  }
+
+  &__box {
+    @apply tw-w-[516px] tw-max-w-[90%] tw-bg-[var(--login-bg-color)] tw-rounded-md tw-overflow-hidden [box-shadow:var(--login-box-shadow)];
+  }
+
+  &__header {
+    @apply tw-uppercase tw-text-[var(--login-title-color)] tw-bg-[var(--login-title-bg)] tw-h-12 tw-px-7 tw-text-lg tw-flex tw-items-center;
+  }
+
+  &__content {
+    @apply tw-pt-4 tw-px-7 tw-pb-6;
+  }
+
+  &__version {
+    @apply tw-absolute tw-bottom-0.5 tw-left-[93px] tw-text-[var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1;
+  }
+}
+</style>

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

@@ -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
       v-if="$isMobile.value && $slots['filters']"
-      class="vc-table-header__filter-mobile"
+      class="vc-table-base-header__filter-mobile"
     >
       <VcTableFilter
         :counter="activeFilterCount"
@@ -25,7 +25,7 @@
 
     <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,7 +35,7 @@
       <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>
@@ -43,7 +43,7 @@
 
     <div
       v-if="$isDesktop.value && $slots['filters']"
-      class="vc-table-header__filter-desktop"
+      class="vc-table-base-header__filter-desktop"
     >
       <VcTableFilter
         :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_FILTERS')"
@@ -65,6 +65,10 @@
 <script lang="ts" setup>
 import VcTableFilter from "./../vc-table-filter/vc-table-filter.vue";
 import { VcInput } from "./../../../../molecules";
+import { inject, ref, watch, computed } from "vue";
+import { useGlobalSearch } from "../../../../../../core/composables/useGlobalSearch";
+import { useBladeNavigation } from "../../../../../../shared";
+
 export interface Props {
   searchValue?: string;
   searchPlaceholder?: string;
@@ -77,26 +81,28 @@ export interface Emits {
   (event: "search:change", value: string): void;
 }
 
-defineProps<Props>();
-defineEmits<Emits>();
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 </script>
 
 <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(--base-border-color, var(--neutrals-200));
+  --table-base-header-input-icon-color: var(--neutrals-300);
+  --table-base-header-padding: 18px;
+  --table-base-header-mobile-padding: 30px;
 }
 
-.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-p-[var(--table-base-header-padding)];
   }
 
   &__filter-mobile {
@@ -112,7 +118,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,11 @@ 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, ITableColumns } from "../../types";
 
 export interface Props {
   cell: ITableColumns;
-  item: Record<string, unknown>;
+  item: string | TableItem;
   width?: number;
   editing?: boolean;
   index?: number;
@@ -329,7 +329,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);
 }
 
@@ -349,7 +349,7 @@ function onBlur(args: { row: number | undefined; field: string; errors?: string[
 }
 
 .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 "../../types";
 
 export interface Props {
-  items: ITableColumns[];
+  items: TableColPartial[];
   stateKey: string;
 }
 

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

@@ -20,11 +20,12 @@ 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-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,134 @@
+<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 { TableColPartial, TableItem, StatusImage } from "../../../../types";
+import type { TableSlots } 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>