@vc-shell/framework 1.0.281 → 1.0.282

package/shared/components/notifications/types/index.ts

@@ -1,10 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { VNode, DefineComponent } from "vue";
+
 export type NotificationType = "success" | "error" | "warning" | "default";
 
 export interface NotificationOptions {
   limit?: number;
   pauseOnHover?: boolean;
   timeout?: number | boolean;
-  content?: string;
+  content?: Content;
   notificationId?: number | string;
   type?: NotificationType;
   onOpen?: <T>(payload: T) => void;
@@ -17,3 +22,5 @@ export interface NotificationOptions {
 export interface InternalNotificationOptions extends NotificationOptions {
   closeNotification?(): void;
 }
+
+export type Content = string | VNode | DefineComponent<{}, {}, any>;

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -137,7 +137,29 @@
           />
         </template>
 
-        <!-- Override table mobile view -->
+        <!-- Override header -->
+        <template
+          v-if="tableTemplates?.header"
+          #header="headerData"
+        >
+          <component
+            :is="tableTemplates.header"
+            :context="headerData"
+            :blade-context="bladeContext"
+          ></component>
+        </template>
+
+        <!-- Override footer -->
+        <template
+          v-if="tableTemplates?.footer"
+          #footer="footerData"
+        >
+          <component
+            :is="tableTemplates.footer"
+            :context="footerData"
+            :blade-context="bladeContext"
+          ></component>
+        </template>
 
         <template
           v-if="tableTemplates?.mobileView"

package/shared/pages/ChangePasswordPage/components/change-password/ChangePassword.vue

@@ -3,7 +3,7 @@
     class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
     :style="backgroundImageHandler"
   >
-    <ChangePassword :forced="forced"> </ChangePassword>
+    <ChangePassComponent :forced="forced"> </ChangePassComponent>
   </div>
 </template>
 
@@ -13,10 +13,10 @@ import { useRouter } from "vue-router";
 
 const router = useRouter();
 
-const forced = router.currentRoute.value.meta?.forced;
+const forced = router.currentRoute.value.meta?.forced as boolean | undefined;
 const bgimage = router.currentRoute.value.meta?.bgimage;
 
-import { ChangePassword } from "../../../../components/change-password";
+import { ChangePassword as ChangePassComponent } from "../../../../components/change-password";
 
 export interface Props {
   background?: string;

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -14,10 +14,14 @@
         class="tw-mr-2"
       ></VcIcon>
       <div
+        v-if="typeof content === 'string'"
         class="vc-notification__content tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-max-h-[100px]"
       >
         {{ content }}
       </div>
+      <div v-else>
+        <component :is="content"></component>
+      </div>
     </div>
     <VcIcon
       icon="fas fa-times"
@@ -29,12 +33,12 @@
 </template>
 
 <script lang="ts" setup>
-import { NotificationType } from "./../../../../shared/components/notifications";
+import { Content, NotificationType } from "./../../../../shared/components/notifications";
 import { VcIcon } from "./../../";
 import { Ref, onMounted, ref, toRefs, watch } from "vue";
 
 export interface Props {
-  content?: string;
+  content?: Content;
   notificationId?: number | string;
   updateId?: number | string;
   type?: NotificationType;

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

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border"
+    :class="{
+      'tw-px-4 tw-py-2 tw-border-[color:#eef0f2] tw-border-solid tw-border-b ': $isMobile.value,
+      'tw-p-4': $isDesktop.value,
+    }"
+  >
+    <!-- Table filter mobile button -->
+    <div
+      v-if="$isMobile.value && $slots['filters']"
+      class="tw-mr-3"
+    >
+      <VcTableFilter :counter="activeFilterCount">
+        <template #default="{ closePanel }">
+          <slot
+            name="filters"
+            :close-panel="closePanel"
+          ></slot>
+        </template>
+      </VcTableFilter>
+    </div>
+
+    <!-- Table search input -->
+    <VcInput
+      ref="searchInput"
+      class="tw-grow tw-basis-0"
+      :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="fas fa-search"
+          class="tw-text-[color:#d2d4d7]"
+          @click="focus?.()"
+        ></VcIcon>
+      </template>
+    </VcInput>
+
+    <!-- Table filter desktop button -->
+    <div
+      v-if="$isDesktop.value && $slots['filters']"
+      class="tw-ml-3"
+    >
+      <VcTableFilter
+        :title="$t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_FILTERS')"
+        :counter="activeFilterCount"
+        :parent-expanded="expanded"
+      >
+        <template #default="{ closePanel }">
+          <slot
+            name="filters"
+            :close-panel="closePanel"
+          ></slot>
+        </template>
+      </VcTableFilter>
+    </div>
+  </div>
+</template>
+
+<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;
+  activeFilterCount?: number;
+  expanded?: boolean;
+}
+
+export interface Emits {
+  (event: "search:change", value: string): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -64,67 +64,9 @@
         ($slots['header'] || header) && (!columnsInit || searchValue || searchValue === '' || activeFilterCount)
       "
       name="header"
+      :header="headerComponent"
     >
-      <div
-        class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border"
-        :class="{
-          'tw-px-4 tw-py-2 tw-border-[color:#eef0f2] tw-border-solid tw-border-b ': $isMobile.value,
-          'tw-p-4': $isDesktop.value,
-        }"
-      >
-        <!-- Table filter mobile button -->
-        <div
-          v-if="$isMobile.value && $slots['filters']"
-          class="tw-mr-3"
-        >
-          <VcTableFilter :counter="activeFilterCount">
-            <template #default="{ closePanel }">
-              <slot
-                name="filters"
-                :close-panel="closePanel"
-              ></slot>
-            </template>
-          </VcTableFilter>
-        </div>
-
-        <!-- Table search input -->
-        <VcInput
-          ref="searchInput"
-          class="tw-grow tw-basis-0"
-          :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="fas fa-search"
-              class="tw-text-[color:#d2d4d7]"
-              @click="focus?.()"
-            ></VcIcon>
-          </template>
-        </VcInput>
-
-        <!-- Table filter desktop button -->
-        <div
-          v-if="$isDesktop.value && $slots['filters']"
-          class="tw-ml-3"
-        >
-          <VcTableFilter
-            :title="t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_FILTERS')"
-            :counter="activeFilterCount"
-            :parent-expanded="expanded"
-          >
-            <template #default="{ closePanel }">
-              <slot
-                name="filters"
-                :close-panel="closePanel"
-              ></slot>
-            </template>
-          </VcTableFilter>
-        </div>
-      </div>
+      <component :is="headerComponent"></component>
     </slot>
 
     <div class="tw-flex tw-relative tw-overflow-hidden tw-grow">
@@ -528,15 +470,16 @@ import {
   getCurrentInstance,
   shallowRef,
   useSlots,
+  VNode,
 } from "vue";
 import { useI18n } from "vue-i18n";
-import { VcButton, VcCheckbox, VcContainer, VcIcon, VcInput, VcPagination, VcLabel } from "./../../";
+import { VcButton, VcCheckbox, VcContainer, VcIcon, VcPagination, VcLabel } from "./../../";
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import VcTableColumnSwitcher from "./_internal/vc-table-column-switcher/vc-table-column-switcher.vue";
 import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
-import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
+import VcTableBaseHeader from "./_internal/vc-table-base-header/vc-table-base-header.vue";
 import * as _ from "lodash-es";
 import "core-js/actual/array/to-spliced";
 import "core-js/actual/array/to-sorted";
@@ -557,7 +500,7 @@ export interface TableItem {
 }
 
 defineSlots<{
-  header: (props: any) => any;
+  header: (props: { header: VNode }) => any;
   filters: (args: { closePanel: () => void }) => any;
   "mobile-item": (args: { item: T }) => any;
   [key: `header_${string}`]: (props: any) => any;
@@ -760,6 +703,21 @@ const hasClickListener = typeof instance?.vnode.props?.["onItemClick"] === "func
 //   return el ? el.offsetWidth : 0;
 // };
 
+const headerComponent = h(
+  VcTableBaseHeader,
+  {
+    searchValue: props.searchValue,
+    searchPlaceholder: props.searchPlaceholder,
+    activeFilterCount: props.activeFilterCount,
+    expanded: props.expanded,
+  },
+  {
+    filters: () => {
+      return slots.filters?.({ closePanel: () => {} });
+    },
+  },
+);
+
 const allColumns = ref([]) as Ref<ITableColumns[]>;
 
 const mobileTemplateRenderer = ({ item, index }: { item: TableItem | string; index: number }) => {