@vc-shell/framework 1.0.49 → 1.0.50

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -27,21 +27,10 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  logo: {
-    type: String,
-    default: undefined,
-  },
+import { VcLoginFormProps } from "@/ui/components/organisms/vc-login-form/vc-login-form-model";
 
-  background: {
-    type: String,
-    default: undefined,
-  },
-
-  title: {
-    type: String,
-    default: "Login",
-  },
+withDefaults(defineProps<VcLoginFormProps>(), {
+  title: "Login",
 });
 
 console.debug("Init vc-login-form");

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcPopupProps } from "./vc-popup-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Popup from "./vc-popup.vue";
+export const VcPopup: ComponentConstructor<
+  ComponentPublicInstance<VcPopupProps>
+> = Popup;

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

@@ -0,0 +1,12 @@
+import { VNode } from "vue";
+
+export interface VcPopupProps {
+  title?: string | undefined;
+  closable?: boolean | undefined;
+  variant?: "small" | "medium" | "fullscreen" | undefined;
+  onClose?: () => void;
+}
+
+export interface VcPopupSlots {
+  default: () => VNode[];
+}

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

@@ -23,22 +23,11 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    default: undefined,
-  },
+import { VcPopupProps } from "@/ui/components/organisms/vc-popup/vc-popup-model";
 
-  closable: {
-    type: Boolean,
-    default: true,
-  },
-
-  variant: {
-    type: String,
-    default: "fullscreen",
-    enum: ["small", "medium", "fullscreen"],
-  },
+withDefaults(defineProps<VcPopupProps>(), {
+  closable: true,
+  variant: "fullscreen",
 });
 
 defineEmits(["close"]);

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -125,9 +125,9 @@ import { VcIcon } from "@/ui/components";
 
 export interface Props {
   item: {
-    id: string;
+    id?: string;
   };
-  actionBuilder?: (item: { id: string }) => IActionBuilderResult[];
+  actionBuilder?: (item: { id?: string }) => IActionBuilderResult[];
   swipingItem?: string;
 }
 

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcTableProps } from "./vc-table-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Table from "./vc-table.vue";
+export const VcTable: ComponentConstructor<
+  ComponentPublicInstance<VcTableProps>
+> = Table;

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

@@ -0,0 +1,56 @@
+import { IActionBuilderResult, ITableColumns } from "@/core/types";
+import { VNode } from "vue";
+
+export interface StatusImage {
+  image?: string;
+  text: string;
+  action?: string;
+  clickHandler?: () => void;
+}
+
+export interface VcTableProps {
+  columns?: ITableColumns[];
+  items?: { id?: string }[];
+  itemActionBuilder?: (item: {
+    id?: string;
+  }) => IActionBuilderResult[] | undefined;
+  sort?: string | undefined;
+  multiselect?: boolean | undefined;
+  expanded?: boolean | undefined;
+  totalLabel?: string | undefined;
+  totalCount?: number | undefined;
+  pages?: number | undefined;
+  currentPage?: number | undefined;
+  searchPlaceholder?: string | undefined;
+  searchValue?: string | undefined;
+  loading?: boolean | undefined;
+  empty?: StatusImage | undefined;
+  notfound?: StatusImage | undefined;
+  header?: boolean | undefined;
+  footer?: boolean | undefined;
+  activeFilterCount?: number | undefined;
+  selectedItemId?: string | undefined;
+  scrolling?: boolean | undefined;
+  onPaginationClick?: (page: number) => void;
+  onSelectionChanged?: (values: Record<string, boolean>) => void;
+  "onSearch:change"?: (value: string) => void;
+  onHeaderClick?: (value: Record<string, unknown>) => void;
+  onItemClick?: (item: { id: string }) => void;
+  "onScroll:ptr"?: () => void;
+}
+
+export interface VcTableSlots {
+  header: () => VNode[];
+  filters: (args: { closePanel: () => void }) => VNode[];
+  "mobile-item": (args: {
+    item: { [x: string]: unknown; id: string };
+  }) => VNode[];
+  [key: `header_${string}`]: () => VNode[];
+  [key: `item_${string}`]: (args: {
+    item?: { [x: string]: unknown; id: string };
+    cell?: ITableColumns;
+  }) => VNode[];
+  notfound: () => VNode[];
+  empty: () => VNode[];
+  footer: () => VNode[];
+}

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

@@ -150,9 +150,8 @@
             <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,
@@ -298,7 +297,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, PropType, ref, watch, onBeforeUpdate } from "vue";
+import { computed, nextTick, ref, watch, onBeforeUpdate } from "vue";
 import {
   VcIcon,
   VcLoading,
@@ -312,40 +311,10 @@ 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 { VcTableProps } from "@/ui/components/organisms/vc-table/vc-table-model";
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<VcTableProps>(), {
   columns: () => [],
   items: () => [],
   itemActionBuilder: undefined,
@@ -370,7 +339,6 @@ const props = withDefaults(defineProps<Props>(), {
   activeFilterCount: 0,
   selectedItemId: undefined,
   scrolling: false,
-  onItemClick: undefined,
 });
 
 interface ITableItemRef {
@@ -382,9 +350,9 @@ const emit = defineEmits([
   "paginationClick",
   "selectionChanged",
   "search:change",
-  "filter:apply",
-  "filter:reset",
   "headerClick",
+  "itemlick",
+  "scroll:ptr",
 ]);
 
 const checkboxes = ref<Record<string, boolean>>({});
@@ -464,7 +432,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);
@@ -492,7 +460,7 @@ function showActions(item: { id: string }, index: string) {
   }
 }
 
-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

@@ -11,16 +11,203 @@ import {
   VcInputCurrencyProps,
   VcInputCurrencySlots,
 } from "../components/molecules/vc-input-currency/vc-input-currency-model";
+import {
+  VcBadgeProps,
+  VcBadgeSlots,
+} from "../components/atoms/vc-badge/vc-badge-model";
+import {
+  VcButtonProps,
+  VcButtonSlots,
+} from "../components/atoms/vc-button/vc-button-model";
+import {
+  VcCardProps,
+  VcCardSlots,
+} from "../components/atoms/vc-card/vc-card-model";
+import {
+  VcCheckboxProps,
+  VcCheckboxSlots,
+} from "../components/atoms/vc-checkbox/vc-checkbox-model";
+import {
+  VcColProps,
+  VcColSlots,
+} from "../components/atoms/vc-col/vc-col-model";
+import {
+  VcContainerProps,
+  VcContainerSlots,
+} from "../components/atoms/vc-container/vc-container-model";
+import {
+  VcIconProps,
+  VcIconSlots,
+} from "../components/atoms/vc-icon/vc-icon-model";
+import {
+  VcImageProps,
+  VcImageSlots,
+} 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,
+} 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,
+} from "../components/atoms/vc-switch/vc-switch-model";
+import {
+  VcWidgetProps,
+  VcWidgetSlots,
+} from "../components/atoms/vc-widget/vc-widget-model";
+import {
+  VcBreadcrumbsProps,
+  VcBreadcrumbsSlots,
+} from "../components/molecules/vc-breadcrumbs/vc-breadcrumbs-model";
+import {
+  VcEditorProps,
+  VcEditorSlots,
+} from "../components/molecules/vc-editor/vc-editor-model";
+import {
+  VcFileUploadProps,
+  VcFileUploadSlots,
+} from "../components/molecules/vc-file-upload/vc-file-upload-model";
+import {
+  VcNotificationProps,
+  VcNotificationSlots,
+} from "../components/molecules/vc-notification/vc-notification-model";
+import {
+  VcPaginationProps,
+  VcPaginationSlots,
+} 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,
+} from "../components/molecules/vc-textarea/vc-textarea-model";
+import {
+  VcAppProps,
+  VcAppSlots,
+} from "../components/organisms/vc-app/vc-app-model";
+import {
+  VcBladeProps,
+  VcBladeSlots,
+} from "../components/organisms/vc-blade/vc-blade-model";
+import {
+  VcDynamicPropertyProps,
+  VcDynamicPropertySlots,
+} from "../components/organisms/vc-dynamic-property/vc-dynamic-property-model";
+import {
+  VcGalleryProps,
+  VcGallerySlots,
+} from "../components/organisms/vc-gallery/vc-gallery-model";
+import {
+  VcLoginFormProps,
+  VcLoginFormSlots,
+} from "../components/organisms/vc-login-form/vc-login-form-model";
+import {
+  VcPopupProps,
+  VcPopupSlots,
+} from "../components/organisms/vc-popup/vc-popup-model";
+import {
+  VcTableProps,
+  VcTableSlots,
+} from "../components/organisms/vc-table/vc-table-model";
 
 declare module "@vue/runtime-core" {
   interface GlobalComponents {
+    // atoms
+    VcBadge: GlobalComponentConstructor<VcBadgeProps, VcBadgeSlots>;
+    VcButton: GlobalComponentConstructor<VcButtonProps, VcButtonSlots>;
+    VcCard: GlobalComponentConstructor<VcCardProps, VcCardSlots>;
+    VcCheckbox: GlobalComponentConstructor<VcCheckboxProps, VcCheckboxSlots>;
+    VcCol: GlobalComponentConstructor<VcColProps, VcColSlots>;
+    VcContainer: GlobalComponentConstructor<VcContainerProps, VcContainerSlots>;
+    VcHint: GlobalComponentConstructor;
+    VcIcon: GlobalComponentConstructor<VcIconProps, VcIconSlots>;
+    VcImage: GlobalComponentConstructor<VcImageProps, VcImageSlots>;
+    VcInfoRow: GlobalComponentConstructor<VcInfoRowProps, VcInfoRowSlots>;
+    VcLabel: GlobalComponentConstructor<VcLabelProps, VcLabelSlots>;
+    VcLink: GlobalComponentConstructor<VcLinkProps, VcLinkSlots>;
+    VcLoading: GlobalComponentConstructor<VcLoadingProps, VcLoadingSlots>;
+    VcProgress: GlobalComponentConstructor<VcProgressProps, VcProgressSlots>;
+    VcRow: GlobalComponentConstructor<any, VcRowSlots>;
+    VcStatus: GlobalComponentConstructor<VcStatusProps, VcStatusSlots>;
+    VcStatusIcon: GlobalComponentConstructor<
+      VcStatusIconProps,
+      VcStatusIconSlots
+    >;
+    VcSwitch: GlobalComponentConstructor<VcSwitchProps, VcSwitchSlots>;
+    VcWidget: GlobalComponentConstructor<VcWidgetProps, VcWidgetSlots>;
+
+    // molecules
+    VcBreadcrumbs: GlobalComponentConstructor<
+      VcBreadcrumbsProps,
+      VcBreadcrumbsSlots
+    >;
+    VcEditor: GlobalComponentConstructor<VcEditorProps, VcEditorSlots>;
+    VcFileUpload: GlobalComponentConstructor<
+      VcFileUploadProps,
+      VcFileUploadSlots
+    >;
+    VcForm: GlobalComponentConstructor;
     VcInput: GlobalComponentConstructor<VcInputProps, VcInputSlots>;
     VcInputCurrency: GlobalComponentConstructor<
       VcInputCurrencyProps,
       VcInputCurrencySlots
     >;
+    VcNotification: GlobalComponentConstructor<
+      VcNotificationProps,
+      VcNotificationSlots
+    >;
+    VcPagination: GlobalComponentConstructor<
+      VcPaginationProps,
+      VcPaginationSlots
+    >;
+    VcRating: GlobalComponentConstructor<VcRatingProps, VcRatingSlots>;
     VcSelect: GlobalComponentConstructor<VcSelectProps, VcSelectSlots>;
+    VcSlider: GlobalComponentConstructor<VcSliderProps, VcSliderSlots>;
+    VcTextarea: GlobalComponentConstructor<VcTextareaProps, VcTextareaSlots>;
+
+    // organisms
+    VcApp: GlobalComponentConstructor<VcAppProps, VcAppSlots>;
+    VcBlade: GlobalComponentConstructor<VcBladeProps, VcBladeSlots>;
+    VcDynamicProperty: GlobalComponentConstructor<
+      VcDynamicPropertyProps,
+      VcDynamicPropertySlots
+    >;
+    VcGallery: GlobalComponentConstructor<VcGalleryProps, VcGallerySlots>;
+    VcLoginForm: GlobalComponentConstructor<VcLoginFormProps, VcLoginFormSlots>;
+    VcPopup: GlobalComponentConstructor<VcPopupProps, VcPopupSlots>;
+    VcTable: GlobalComponentConstructor<VcTableProps, VcTableSlots>;
   }
 }
 
-export { };
+export {};