@vc-shell/framework 1.0.52 → 1.0.54

package/ui/components/organisms/vc-table/vc-table-model.ts

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isNumber, isString, isObject } from "./../../../utils";
+
+export interface StatusImage {
+  image?: string;
+  text: string;
+  action?: string;
+  clickHandler?: () => void;
+}
+
+export const tableProps = {
+  columns: { type: Array as PropType<ITableColumns[]>, default: () => [] },
+  items: { type: Array as PropType<{ id?: string }[] | any[]>, default: () => [] },
+  itemActionBuilder: {
+    type: Function as PropType<(item: { id?: string }) => IActionBuilderResult[]>,
+    default: undefined,
+  },
+  sort: {
+    type: String,
+    default: undefined,
+  },
+  multiselect: {
+    type: Boolean,
+    default: false,
+  },
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+  totalLabel: {
+    type: String,
+    default: "Totals:",
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  currentPage: {
+    type: Number,
+    default: 0,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: "Search...",
+  },
+  searchValue: {
+    type: String,
+    default: undefined,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  empty: {
+    type: Object as PropType<StatusImage>,
+    default: () => ({
+      text: "List is empty.",
+    }),
+  },
+  notfound: {
+    type: Object as PropType<StatusImage>,
+    default: () => ({
+      text: "Nothing found.",
+    }),
+  },
+  header: {
+    type: Boolean,
+    default: true,
+  },
+  footer: {
+    type: Boolean,
+    default: true,
+  },
+  activeFilterCount: {
+    type: Number,
+    default: 0,
+  },
+  selectedItemId: {
+    type: String,
+    default: undefined,
+  },
+  scrolling: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const tableEmits = {
+  paginationClick: (page: number) => isNumber(page),
+  selectionChanged: (values: Record<string, boolean>) => isObject(values),
+  "search:change": (value: string) => isString(value),
+  headerClick: (value: Record<string, unknown>) => isObject(value),
+  itemClick: (item: { id?: string }) => isObject(item),
+  "scroll:ptr": () => true,
+};
+
+export type VcTableProps = ExtractTypes<typeof tableProps>;
+export type VcTableEmits = typeof tableEmits;
+
+export interface VcTableSlots {
+  header: () => VNode[];
+  filters: (args: { closePanel: () => void }) => VNode[];
+  "mobile-item": (args: { item: { [x: string]: any; id: string } }) => VNode[];
+  [key: `header_${string}`]: () => VNode[];
+  [key: `item_${string}`]: (args: { item?: { [x: string]: any; id: string }; cell?: ITableColumns }) => VNode[];
+  notfound: () => VNode[];
+  empty: () => VNode[];
+  footer: () => VNode[];
+}

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

@@ -1,26 +1,25 @@
 <template>
-  <div
-    class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0"
-  >
+  <div class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0">
     <!-- Header slot with filter and searchbar -->
     <slot
       name="header"
       v-if="
         ($slots['header'] || header) &&
-        ((items && items.length) ||
-          searchValue ||
-          searchValue === '' ||
-          activeFilterCount)
+        ((items && items.length) || searchValue || searchValue === '' || activeFilterCount)
       "
     >
-      <div
-        class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4"
-      >
+      <div class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4">
         <!-- Table filter mobile button -->
-        <div v-if="$isMobile.value && $slots['filters']" class="tw-mr-3">
+        <div
+          v-if="$isMobile.value && $slots['filters']"
+          class="tw-mr-3"
+        >
           <VcTableFilter :counter="activeFilterCount">
             <template v-slot:default="{ closePanel }">
-              <slot name="filters" :closePanel="closePanel"></slot>
+              <slot
+                name="filters"
+                :closePanel="closePanel"
+              ></slot>
             </template>
           </VcTableFilter>
         </div>
@@ -36,14 +35,20 @@
         ></VcInput>
 
         <!-- Table filter desktop button -->
-        <div v-if="$isDesktop.value && $slots['filters']" class="tw-ml-3">
+        <div
+          v-if="$isDesktop.value && $slots['filters']"
+          class="tw-ml-3"
+        >
           <VcTableFilter
             :title="$t('Filters')"
             :counter="activeFilterCount"
             :parentExpanded="expanded"
           >
             <template v-slot:default="{ closePanel }">
-              <slot name="filters" :closePanel="closePanel"></slot>
+              <slot
+                name="filters"
+                :closePanel="closePanel"
+              ></slot>
             </template>
           </VcTableFilter>
         </div>
@@ -75,7 +80,10 @@
               @swipeStart="handleSwipe"
               :swipingItem="mobileSwipeItem"
             >
-              <slot name="mobile-item" :item="item"></slot>
+              <slot
+                name="mobile-item"
+                :item="item"
+              ></slot>
             </VcTableMobileItem>
           </div>
         </template>
@@ -89,7 +97,10 @@
             'vc-table_multiselect': multiselect,
           }"
         >
-          <thead v-if="columns" class="vc-table__header">
+          <thead
+            v-if="columns"
+            class="vc-table__header"
+          >
             <tr class="vc-table__header-row">
               <th
                 v-if="multiselect"
@@ -121,20 +132,27 @@
                   <div>
                     <slot :name="`header_${item.id}`">{{ item.title }}</slot>
                   </div>
-                  <div v-if="sortField === item.id" class="tw-ml-1">
+                  <div
+                    v-if="sortField === item.id"
+                    class="tw-ml-1"
+                  >
                     <VcIcon
                       size="xs"
-                      :icon="`fas fa-caret-${
-                        sortDirection === 'DESC' ? 'down' : 'up'
-                      }`"
+                      :icon="`fas fa-caret-${sortDirection === 'DESC' ? 'down' : 'up'}`"
                     ></VcIcon>
                   </div>
                   <div
                     class="tw-flex tw-flex-col tw-ml-1 tw-invisible group-hover:tw-visible"
                     v-else
                   >
-                    <VcIcon size="xs" icon="fas fa-caret-up"></VcIcon>
-                    <VcIcon size="xs" icon="fas fa-caret-down"></VcIcon>
+                    <VcIcon
+                      size="xs"
+                      icon="fas fa-caret-up"
+                    ></VcIcon>
+                    <VcIcon
+                      size="xs"
+                      icon="fas fa-caret-down"
+                    ></VcIcon>
                   </div>
                 </div>
               </th>
@@ -146,22 +164,26 @@
             </tr>
           </thead>
 
-          <tbody v-if="items" class="vc-table__body">
+          <tbody
+            v-if="items"
+            class="vc-table__body"
+          >
             <tr
               v-for="(item, i) in items"
               :key="item.id"
-              class="vc-table__body-row tw-h-[60px] tw-bg-white hover:tw-bg-[#dfeef9]"
+              class="vc-table__body-row tw-h-[60px] tw-bg-white hover:tw-bg-[#dfeef9] tw-cursor-pointer"
               :class="{
-                'tw-cursor-pointer hover:tw-bg-[#dfeef9]': onItemClick,
                 'tw-bg-[#f8f8f8]': i % 2 === 1,
-                '!tw-bg-[#dfeef9] hover:tw-bg-[#dfeef9]':
-                  item && item.id ? selectedItemId === item.id : false,
+                '!tw-bg-[#dfeef9] hover:tw-bg-[#dfeef9]': item && item.id ? selectedItemId === item.id : false,
               }"
               @click="$emit('itemClick', item)"
               @mouseover="calculateActions(item)"
               @mouseleave="closeActions"
             >
-              <td v-if="multiselect" width="50">
+              <td
+                v-if="multiselect"
+                width="50"
+              >
                 <div class="tw-flex tw-justify-center tw-items-center">
                   <VcCheckbox
                     :modelValue="checkboxes[item.id]"
@@ -177,8 +199,15 @@
                 :class="cell.class"
                 :width="cell.width"
               >
-                <slot :name="`item_${cell.id}`" :item="item" :cell="cell">
-                  <VcTableCell :cell="cell" :item="item"></VcTableCell>
+                <slot
+                  :name="`item_${cell.id}`"
+                  :item="item"
+                  :cell="cell"
+                >
+                  <VcTableCell
+                    :cell="cell"
+                    :item="item"
+                  ></VcTableCell>
                 </slot>
               </td>
               <td
@@ -186,9 +215,7 @@
                 width="44"
                 v-if="itemActionBuilder"
               >
-                <div
-                  class="vc-table__body-actions-container tw-relative !tw-hidden tw-justify-center tw-items-center"
-                >
+                <div class="vc-table__body-actions-container tw-relative !tw-hidden tw-justify-center tw-items-center">
                   <button
                     class="tw-text-[#319ed4] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray]"
                     @click.stop="showActions(item, item.id)"
@@ -196,7 +223,10 @@
                     aria-describedby="tooltip"
                     :disabled="!(itemActions && itemActions.length)"
                   >
-                    <VcIcon icon="fas fa-cog" size="m" />
+                    <VcIcon
+                      icon="fas fa-cog"
+                      size="m"
+                    />
                   </button>
                   <div
                     class="vc-table__body-tooltip tw-bg-white tw-rounded-l-[4px] tw-p-[15px] tw-z-0 tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)]"
@@ -217,7 +247,10 @@
                         ]"
                         @click.stop="itemAction.clickHandler(item)"
                       >
-                        <VcIcon :icon="itemAction.icon" size="m" />
+                        <VcIcon
+                          :icon="itemAction.icon"
+                          size="m"
+                        />
                         <div
                           class="tw-not-italic tw-font-normal tw-text-base tw-leading-[20px] tw-text-[#3f3f3f] tw-ml-[7px]"
                         >
@@ -247,23 +280,38 @@
             v-if="notfound"
             class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
           >
-            <img v-if="notfound.image" :src="notfound.image" />
+            <img
+              v-if="notfound.image"
+              :src="notfound.image"
+            />
             <div class="tw-m-4 vc-table__empty-text">
               {{ notfound.text }}
             </div>
-            <VcButton v-if="notfound.action" @click="notfound.clickHandler">
+            <VcButton
+              v-if="notfound.action"
+              @click="notfound.clickHandler"
+            >
               {{ notfound.action }}
             </VcButton>
           </div>
         </slot>
-        <slot v-else name="empty">
+        <slot
+          v-else
+          name="empty"
+        >
           <div
             v-if="empty"
             class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
           >
-            <img v-if="empty.image" :src="empty.image" />
+            <img
+              v-if="empty.image"
+              :src="empty.image"
+            />
             <div class="tw-m-4 tw-text-xl tw-font-medium">{{ empty.text }}</div>
-            <VcButton v-if="empty.action" @click="empty.clickHandler">
+            <VcButton
+              v-if="empty.action"
+              @click="empty.clickHandler"
+            >
               {{ empty.action }}
             </VcButton>
           </div>
@@ -299,94 +347,23 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, watch, onBeforeUpdate } from "vue";
-import {
-  VcIcon,
-  VcLoading,
-  VcCheckbox,
-  VcContainer,
-  VcInput,
-  VcPagination,
-} from "@/ui/components";
+import { VcIcon, VcLoading, VcCheckbox, VcContainer, VcInput, VcPagination } from "./../../../components";
 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 VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import { createPopper, Instance } from "@popperjs/core";
-import { IActionBuilderResult, ITableColumns } from "@/core/types";
-
-export interface Props {
-  columns: ITableColumns[];
-  items: { id: string }[];
-  itemActionBuilder?: (item: { id: string }) => IActionBuilderResult[];
-  sort?: string;
-  multiselect?: boolean;
-  expanded?: boolean;
-  totalLabel?: string;
-  totalCount?: number;
-  pages?: number;
-  currentPage?: number;
-  searchPlaceholder?: string;
-  searchValue?: string;
-  loading?: boolean;
-  empty?: StatusImage;
-  notfound?: StatusImage;
-  header?: boolean;
-  footer?: boolean;
-  activeFilterCount?: number;
-  selectedItemId?: string;
-  scrolling?: boolean;
-  onItemClick?: () => void;
-}
-
-export interface StatusImage {
-  image?: string;
-  text: string;
-  action?: boolean;
-  clickHandler?: () => void;
-}
+import { IActionBuilderResult } from "./../../../../core/types";
+import { tableEmits, tableProps } from "./vc-table-model";
 
-const props = withDefaults(defineProps<Props>(), {
-  columns: () => [],
-  items: () => [],
-  itemActionBuilder: undefined,
-  sort: undefined,
-  multiselect: false,
-  expanded: false,
-  totalLabel: "Totals:",
-  totalCount: 0,
-  pages: 0,
-  currentPage: 0,
-  searchPlaceholder: "Search...",
-  searchValue: undefined,
-  loading: false,
-  empty: () => ({
-    text: "List is empty.",
-  }),
-  notfound: () => ({
-    text: "Nothing found.",
-  }),
-  header: true,
-  footer: true,
-  activeFilterCount: 0,
-  selectedItemId: undefined,
-  scrolling: false,
-  onItemClick: undefined,
-});
+const props = defineProps(tableProps);
 
 interface ITableItemRef {
   element: Element;
   id: string;
 }
 
-const emit = defineEmits([
-  "paginationClick",
-  "selectionChanged",
-  "search:change",
-  "filter:apply",
-  "filter:reset",
-  "headerClick",
-  "scroll:ptr",
-]);
+const emit = defineEmits(tableEmits);
 
 const checkboxes = ref<Record<string, boolean>>({});
 const selectedRow = ref<string>();
@@ -421,9 +398,7 @@ const tableAlignment = {
   evenly: "justify-evenly",
 };
 
-const headerCheckbox = computed(() =>
-  Object.values(checkboxes.value).every((value) => value)
-);
+const headerCheckbox = computed(() => Object.values(checkboxes.value).every((value) => value));
 
 watch(
   () => props.items,
@@ -454,9 +429,7 @@ function setActionToggleRefs(el: Element, id: string) {
 
 function processHeaderCheckbox() {
   const currentState = Object.values(checkboxes.value).every((value) => value);
-  Object.keys(checkboxes.value).forEach(
-    (key) => (checkboxes.value[key] = !currentState)
-  );
+  Object.keys(checkboxes.value).forEach((key) => (checkboxes.value[key] = !currentState));
   emit("selectionChanged", checkboxes.value);
 }
 
@@ -465,7 +438,7 @@ function processCheckbox(id: string, state: boolean) {
   emit("selectionChanged", checkboxes.value);
 }
 
-function showActions(item: { id: string }, index: string) {
+function showActions(item: { id?: string }, index: string) {
   selectedRow.value = item.id;
 
   const toggleRef = actionToggleRefs.value.find((item) => item.id === index);
@@ -473,27 +446,23 @@ function showActions(item: { id: string }, index: string) {
 
   if (toggleRef && tooltipRef) {
     nextTick(() => {
-      tooltip.value = createPopper(
-        toggleRef.element,
-        tooltipRef.element as HTMLElement,
-        {
-          placement: "bottom",
-          onFirstUpdate: () => tooltip.value?.update(),
-          modifiers: [
-            {
-              name: "offset",
-              options: {
-                offset: [-15, 15],
-              },
+      tooltip.value = createPopper(toggleRef.element, tooltipRef.element as HTMLElement, {
+        placement: "bottom",
+        onFirstUpdate: () => tooltip.value?.update(),
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [-15, 15],
             },
-          ],
-        }
-      );
+          },
+        ],
+      });
     });
   }
 }
 
-async function calculateActions(item: { id: string }) {
+async function calculateActions(item: { id?: string }) {
   if (typeof props.itemActionBuilder === "function") {
     itemActions.value = await props.itemActionBuilder(item);
   }

package/ui/types/index.ts

@@ -1,26 +1,117 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { GlobalComponentConstructor } from "./ts-helpers";
-import {
-  VcInputProps,
-  VcInputSlots,
-} from "../components/molecules/vc-input/vc-input-model";
-import {
-  VcSelectProps,
-  VcSelectSlots,
-} from "../components/molecules/vc-select/vc-select-model";
+import { VcInputProps, VcInputSlots, VcInputEmits } from "../components/molecules/vc-input/vc-input-model";
+import { VcSelectEmits, VcSelectProps, VcSelectSlots } from "../components/molecules/vc-select/vc-select-model";
 import {
   VcInputCurrencyProps,
   VcInputCurrencySlots,
+  VcInputCurrencyEmits,
 } from "../components/molecules/vc-input-currency/vc-input-currency-model";
+import { VcBadgeEmits, VcBadgeProps, VcBadgeSlots } from "../components/atoms/vc-badge/vc-badge-model";
+import { VcButtonProps, VcButtonSlots, VcButtonEmits } from "../components/atoms/vc-button/vc-button-model";
+import { VcCardProps, VcCardSlots, VcCardEmits } from "../components/atoms/vc-card/vc-card-model";
+import { VcCheckboxProps, VcCheckboxSlots, VcCheckboxEmits } from "../components/atoms/vc-checkbox/vc-checkbox-model";
+import { VcColProps, VcColSlots } from "../components/atoms/vc-col/vc-col-model";
+import {
+  VcContainerProps,
+  VcContainerSlots,
+  VcContainerEmits,
+} from "../components/atoms/vc-container/vc-container-model";
+import { VcIconProps, VcIconSlots } from "../components/atoms/vc-icon/vc-icon-model";
+import { VcImageProps, VcImageSlots, VcImageEmits } from "../components/atoms/vc-image/vc-image-model";
+import { VcInfoRowProps, VcInfoRowSlots } from "../components/atoms/vc-info-row/vc-info-row-model";
+import { VcLabelProps, VcLabelSlots } from "../components/atoms/vc-label/vc-label-model";
+import { VcLinkProps, VcLinkSlots, VcLinkEmits } from "../components/atoms/vc-link/vc-link-model";
+import { VcLoadingProps, VcLoadingSlots } from "../components/atoms/vc-loading/vc-loading-model";
+import { VcProgressProps, VcProgressSlots } from "../components/atoms/vc-progress/vc-progress-model";
+import { VcRowSlots } from "../components/atoms/vc-row/vc-row-model";
+import { VcStatusProps, VcStatusSlots } from "../components/atoms/vc-status/vc-status-model";
+import { VcStatusIconProps, VcStatusIconSlots } from "../components/atoms/vc-status-icon/vc-status-icon-model";
+import { VcSwitchProps, VcSwitchSlots, VcSwitchEmits } from "../components/atoms/vc-switch/vc-switch-model";
+import { VcWidgetProps, VcWidgetSlots, VcWidgetEmits } from "../components/atoms/vc-widget/vc-widget-model";
+import { VcBreadcrumbsProps, VcBreadcrumbsSlots } from "../components/molecules/vc-breadcrumbs/vc-breadcrumbs-model";
+import { VcEditorProps, VcEditorSlots, VcEditorEmits } from "../components/molecules/vc-editor/vc-editor-model";
+import {
+  VcFileUploadProps,
+  VcFileUploadSlots,
+  VcFileUploadEmits,
+} from "../components/molecules/vc-file-upload/vc-file-upload-model";
+import {
+  VcNotificationProps,
+  VcNotificationSlots,
+  VcNotificationEmits,
+} from "../components/molecules/vc-notification/vc-notification-model";
+import {
+  VcPaginationProps,
+  VcPaginationSlots,
+  VcPaginationEmits,
+} from "../components/molecules/vc-pagination/vc-pagination-model";
+import { VcRatingProps, VcRatingSlots } from "../components/molecules/vc-rating/vc-rating-model";
+import { VcSliderProps, VcSliderSlots } from "../components/molecules/vc-slider/vc-slider-model";
+import {
+  VcTextareaProps,
+  VcTextareaSlots,
+  VcTextareaEmits,
+} from "../components/molecules/vc-textarea/vc-textarea-model";
+import { VcAppProps, VcAppSlots, VcAppEmits } from "../components/organisms/vc-app/vc-app-model";
+import { VcBladeProps, VcBladeSlots, VcBladeEmits } from "../components/organisms/vc-blade/vc-blade-model";
+import {
+  VcDynamicPropertyProps,
+  VcDynamicPropertySlots,
+} from "../components/organisms/vc-dynamic-property/vc-dynamic-property-model";
+import { VcGalleryProps, VcGallerySlots, VcGalleryEmits } from "../components/organisms/vc-gallery/vc-gallery-model";
+import { VcLoginFormProps, VcLoginFormSlots } from "../components/organisms/vc-login-form/vc-login-form-model";
+import { VcPopupProps, VcPopupSlots, VcPopupEmits } from "../components/organisms/vc-popup/vc-popup-model";
+import { VcTableProps, VcTableSlots, VcTableEmits } from "../components/organisms/vc-table/vc-table-model";
+import { VcHintSlots } from "./../components/atoms/vc-hint/vc-hint-model";
+import { VcFormSlots } from "./../components/molecules/vc-form/vc-form-model";
 
 declare module "@vue/runtime-core" {
   interface GlobalComponents {
-    VcInput: GlobalComponentConstructor<VcInputProps, VcInputSlots>;
-    VcInputCurrency: GlobalComponentConstructor<
-      VcInputCurrencyProps,
-      VcInputCurrencySlots
-    >;
-    VcSelect: GlobalComponentConstructor<VcSelectProps, VcSelectSlots>;
+    // atoms
+    VcBadge: GlobalComponentConstructor<VcBadgeProps, VcBadgeSlots, VcBadgeEmits>;
+    VcButton: GlobalComponentConstructor<VcButtonProps, VcButtonSlots, VcButtonEmits>;
+    VcCard: GlobalComponentConstructor<VcCardProps, VcCardSlots, VcCardEmits>;
+    VcCheckbox: GlobalComponentConstructor<VcCheckboxProps, VcCheckboxSlots, VcCheckboxEmits>;
+    VcCol: GlobalComponentConstructor<VcColProps, VcColSlots>;
+    VcContainer: GlobalComponentConstructor<VcContainerProps, VcContainerSlots, VcContainerEmits>;
+    VcHint: GlobalComponentConstructor<any, VcHintSlots>;
+    VcIcon: GlobalComponentConstructor<VcIconProps, VcIconSlots>;
+    VcImage: GlobalComponentConstructor<VcImageProps, VcImageSlots, VcImageEmits>;
+    VcInfoRow: GlobalComponentConstructor<VcInfoRowProps, VcInfoRowSlots>;
+    VcLabel: GlobalComponentConstructor<VcLabelProps, VcLabelSlots>;
+    VcLink: GlobalComponentConstructor<VcLinkProps, VcLinkSlots, VcLinkEmits>;
+    VcLoading: GlobalComponentConstructor<VcLoadingProps, VcLoadingSlots>;
+    VcProgress: GlobalComponentConstructor<VcProgressProps, VcProgressSlots>;
+    VcRow: GlobalComponentConstructor<any, VcRowSlots>;
+    VcStatus: GlobalComponentConstructor<VcStatusProps, VcStatusSlots>;
+    VcStatusIcon: GlobalComponentConstructor<VcStatusIconProps, VcStatusIconSlots>;
+    VcSwitch: GlobalComponentConstructor<VcSwitchProps, VcSwitchSlots, VcSwitchEmits>;
+    VcWidget: GlobalComponentConstructor<VcWidgetProps, VcWidgetSlots, VcWidgetEmits>;
+
+    // molecules
+    VcBreadcrumbs: GlobalComponentConstructor<VcBreadcrumbsProps, VcBreadcrumbsSlots>;
+    VcEditor: GlobalComponentConstructor<VcEditorProps, VcEditorSlots, VcEditorEmits>;
+    VcFileUpload: GlobalComponentConstructor<VcFileUploadProps, VcFileUploadSlots, VcFileUploadEmits>;
+    VcForm: GlobalComponentConstructor<any, VcFormSlots>;
+    VcInput: GlobalComponentConstructor<VcInputProps, VcInputSlots, VcInputEmits>;
+    VcInputCurrency: GlobalComponentConstructor<VcInputCurrencyProps, VcInputCurrencySlots, VcInputCurrencyEmits>;
+    VcNotification: GlobalComponentConstructor<VcNotificationProps, VcNotificationSlots, VcNotificationEmits>;
+    VcPagination: GlobalComponentConstructor<VcPaginationProps, VcPaginationSlots, VcPaginationEmits>;
+    VcRating: GlobalComponentConstructor<VcRatingProps, VcRatingSlots>;
+    VcSelect: GlobalComponentConstructor<VcSelectProps, VcSelectSlots, VcSelectEmits>;
+    VcSlider: GlobalComponentConstructor<VcSliderProps, VcSliderSlots>;
+    VcTextarea: GlobalComponentConstructor<VcTextareaProps, VcTextareaSlots, VcTextareaEmits>;
+
+    // organisms
+    VcApp: GlobalComponentConstructor<VcAppProps, VcAppSlots, VcAppEmits>;
+    VcBlade: GlobalComponentConstructor<VcBladeProps, VcBladeSlots, VcBladeEmits>;
+    VcDynamicProperty: GlobalComponentConstructor<VcDynamicPropertyProps, VcDynamicPropertySlots>;
+    VcGallery: GlobalComponentConstructor<VcGalleryProps, VcGallerySlots, VcGalleryEmits>;
+    VcLoginForm: GlobalComponentConstructor<VcLoginFormProps, VcLoginFormSlots>;
+    VcPopup: GlobalComponentConstructor<VcPopupProps, VcPopupSlots, VcPopupEmits>;
+    VcTable: GlobalComponentConstructor<VcTableProps, VcTableSlots, VcTableEmits>;
   }
 }
 
-export { };
+export {};