@vc-shell/framework 1.0.56 → 1.0.59

package/ui/components/atoms/vc-label/index.ts

@@ -1,10 +1,11 @@
-import Label from "./vc-label.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Label from "./vc-label.vue";
 import { VNode } from "vue";
 
-export type VcLabelSlots = {
-  default?: () => VNode[];
-  tooltip?: () => VNode[];
+export const VcLabel = _Label as typeof _Label & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+      tooltip: () => VNode[];
+    };
+  };
 };
-
-export const VcLabel: GlobalComponentConstructor<typeof Label, VcLabelSlots> = Label;

package/ui/components/atoms/vc-link/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Link from "./vc-link.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Link from "./vc-link.vue";
 
-export type VcLinkSlots = {
-  default?: () => VNode[];
+export const VcLink = _Link as typeof _Link & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcLink: GlobalComponentConstructor<typeof Link, VcLinkSlots> = Link;

package/ui/components/atoms/vc-loading/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Loading from "./vc-loading.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Loading from "./vc-loading.vue";
 
-export type VcLoadingSlots = {
-  default?: () => VNode[];
-};
-
-export const VcLoading: GlobalComponentConstructor<typeof Loading, VcLoadingSlots> = Loading;
+export const VcLoading = _Loading as typeof _Loading;

package/ui/components/atoms/vc-progress/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Progress from "./vc-progress.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Progress from "./vc-progress.vue";
 
-export type VcProgressSlots = {
-  default?: () => VNode[];
+export const VcProgress = _Progress as typeof _Progress & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcProgress: GlobalComponentConstructor<typeof Progress, VcProgressSlots> = Progress;

package/ui/components/atoms/vc-row/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Row from "./vc-row.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Row from "./vc-row.vue";
 
-export type VcRowSlots = {
-  default?: () => VNode[];
+export const VcRow = _Row as typeof _Row & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcRow: GlobalComponentConstructor<typeof Row, VcRowSlots> = Row;

package/ui/components/atoms/vc-status/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Status from "./vc-status.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Status from "./vc-status.vue";
 
-export type VcStatusSlots = {
-  default?: () => VNode[];
+export const VcStatus = _Status as typeof _Status & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcStatus: GlobalComponentConstructor<typeof Status, VcStatusSlots> = Status;

package/ui/components/atoms/vc-status-icon/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import StatusIcon from "./vc-status-icon.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _StatusIcon from "./vc-status-icon.vue";
 
-export type VcStatusIconSlots = {
-  default?: () => VNode[];
-};
-
-export const VcStatusIcon: GlobalComponentConstructor<typeof StatusIcon, VcStatusIconSlots> = StatusIcon;
+export const VcStatusIcon = _StatusIcon as typeof _StatusIcon;

package/ui/components/atoms/vc-switch/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
-import Switch from "./vc-switch.vue";
+import _Switch from "./vc-switch.vue";
 
-export type VcSwitchSlots = {
-  default?: () => VNode[];
-};
-
-export const VcSwitch: GlobalComponentConstructor<typeof Switch, VcSwitchSlots> = Switch;
+export const VcSwitch = _Switch as typeof _Switch;

package/ui/components/atoms/vc-widget/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Widget from "./vc-widget.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Widget from "./vc-widget.vue";
 
-export type VcWidgetSlots = {
-  default?: () => VNode[];
-}
-
-export const VcWidget: GlobalComponentConstructor<typeof Widget, VcWidgetSlots> = Widget;
+export const VcWidget = _Widget as typeof _Widget;

package/ui/components/index.ts

@@ -1,44 +1,44 @@
 /* Atoms */
-export * from "./atoms/vc-badge";
-export * from "./atoms/vc-button";
-export * from "./atoms/vc-card";
-export * from "./atoms/vc-checkbox";
-export * from "./atoms/vc-col";
-export * from "./atoms/vc-container";
-export * from "./atoms/vc-hint";
-export * from "./atoms/vc-icon";
-export * from "./atoms/vc-info-row";
-export * from "./atoms/vc-image";
-export * from "./atoms/vc-label";
-export * from "./atoms/vc-link";
-export * from "./atoms/vc-loading";
-export * from "./atoms/vc-progress";
-export * from "./atoms/vc-row";
-export * from "./atoms/vc-status";
-export * from "./atoms/vc-status-icon";
-export * from "./atoms/vc-switch";
-export * from "./atoms/vc-widget";
+export { VcBadge } from "./atoms/vc-badge";
+export { VcButton } from "./atoms/vc-button";
+export { VcCard } from "./atoms/vc-card";
+export { VcCheckbox } from "./atoms/vc-checkbox";
+export { VcCol } from "./atoms/vc-col";
+export { VcContainer } from "./atoms/vc-container";
+export { VcHint } from "./atoms/vc-hint";
+export { VcIcon } from "./atoms/vc-icon";
+export { VcInfoRow } from "./atoms/vc-info-row";
+export { VcImage } from "./atoms/vc-image";
+export { VcLabel } from "./atoms/vc-label";
+export { VcLink } from "./atoms/vc-link";
+export { VcLoading } from "./atoms/vc-loading";
+export { VcProgress } from "./atoms/vc-progress";
+export { VcRow } from "./atoms/vc-row";
+export { VcStatus } from "./atoms/vc-status";
+export { VcStatusIcon } from "./atoms/vc-status-icon";
+export { VcSwitch } from "./atoms/vc-switch";
+export { VcWidget } from "./atoms/vc-widget";
 
 /* Molecules */
-export * from "./molecules/vc-breadcrumbs";
-export * from "./molecules/vc-code-editor";
-export * from "./molecules/vc-editor";
-export * from "./molecules/vc-form";
-export * from "./molecules/vc-file-upload";
-export * from "./molecules/vc-input";
-export * from "./molecules/vc-input-currency";
-export * from "./molecules/vc-notification";
-export * from "./molecules/vc-pagination";
-export * from "./molecules/vc-rating";
-export * from "./molecules/vc-select";
-export * from "./molecules/vc-slider";
-export * from "./molecules/vc-textarea";
+export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
+export { VcCodeEditor } from "./molecules/vc-code-editor";
+export { VcEditor } from "./molecules/vc-editor";
+export { VcForm } from "./molecules/vc-form";
+export { VcFileUpload } from "./molecules/vc-file-upload";
+export { VcInput } from "./molecules/vc-input";
+export { VcInputCurrency } from "./molecules/vc-input-currency";
+export { VcNotification } from "./molecules/vc-notification";
+export { VcPagination } from "./molecules/vc-pagination";
+export { VcRating } from "./molecules/vc-rating";
+export { VcSelect } from "./molecules/vc-select";
+export { VcSlider } from "./molecules/vc-slider";
+export { VcTextarea } from "./molecules/vc-textarea";
 
 /* Organisms */
-export * from "./organisms/vc-app";
-export * from "./organisms/vc-blade";
-export * from "./organisms/vc-dynamic-property";
-export * from "./organisms/vc-gallery";
-export * from "./organisms/vc-login-form";
-export * from "./organisms/vc-popup";
-export * from "./organisms/vc-table";
+export { VcApp } from "./organisms/vc-app";
+export { VcBlade } from "./organisms/vc-blade";
+export { VcDynamicProperty } from "./organisms/vc-dynamic-property";
+export { VcGallery } from "./organisms/vc-gallery";
+export { VcLoginForm } from "./organisms/vc-login-form";
+export { VcPopup } from "./organisms/vc-popup";
+export { VcTable } from "./organisms/vc-table";

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -1,9 +1,3 @@
-import { VNode } from "vue";
-import Breadcrumbs from "./vc-breadcrumbs.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Breadcrumbs from "./vc-breadcrumbs.vue";
 
-export type VcBreadcrumbsSlots = {
-  default?: () => VNode[];
-};
-
-export const VcBreadcrumbs: GlobalComponentConstructor<typeof Breadcrumbs, VcBreadcrumbsSlots> = Breadcrumbs;
+export const VcBreadcrumbs = _Breadcrumbs as typeof _Breadcrumbs;

package/ui/components/molecules/vc-code-editor/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import CodeEditor from "./vc-code-editor.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _CodeEditor from "./vc-code-editor.vue";
 
-export type VcCodeEditorSlots = {
-  error?: () => VNode[];
+export const VcCodeEditor = _CodeEditor as typeof _CodeEditor & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
 };
-
-export const VcCodeEditor: GlobalComponentConstructor<typeof CodeEditor, VcCodeEditorSlots> = CodeEditor;

package/ui/components/molecules/vc-editor/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Editor from "./vc-editor.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Editor from "./vc-editor.vue";
 
-export type VcEditorSlots = {
-  error?: () => VNode[];
+export const VcEditor = _Editor as typeof _Editor & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
 };
-
-export const VcEditor: GlobalComponentConstructor<typeof Editor, VcEditorSlots> = Editor;

package/ui/components/molecules/vc-file-upload/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import FileUpload from "./vc-file-upload.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _FileUpload from "./vc-file-upload.vue";
 
-export type VcFileUploadSlots = {
-  error?: () => VNode[];
+export const VcFileUpload = _FileUpload as typeof _FileUpload & {
+  new (): {
+    $slots: {
+      error?: () => VNode[];
+    };
+  };
 };
-
-export const VcFileUpload: GlobalComponentConstructor<typeof FileUpload, VcFileUploadSlots> = FileUpload;

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="tw-flex tw-flex-col tw-flex-1">
     <div
-      class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-2 tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
-      :class="`vc-file-upload_${variant}`"
+      class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
+      :class="[
+        `vc-file-upload_${variant}`,
+        {
+          '!tw-bg-[#e8f1f9] !tw-border-solid tw-cursor-copy': isDragging,
+        },
+      ]"
       @drop.stop.prevent="onDrop"
       @drag.stop.prevent
       @dragstart.stop.prevent
       @dragend.stop.prevent
-      @dragover.stop.prevent
+      @dragover.stop.prevent="dragOver"
       @dragenter.stop.prevent
-      @dragleave.stop.prevent
+      @dragleave.stop.prevent="dragLeave"
     >
       <VcLoading :active="loading"></VcLoading>
       <VcIcon
@@ -73,6 +78,7 @@ const emit = defineEmits<Emits>();
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 let internalRules = unref(props.rules) || "";
+const isDragging = ref(false);
 
 // Prepare field-level validation
 const { errorMessage, handleChange, validate } = useField(
@@ -103,12 +109,21 @@ function toggleUploader() {
 }
 
 function onDrop(event: DragEvent) {
+  dragLeave();
   const fileList = event.dataTransfer?.files;
 
   if (fileList && fileList.length) {
     emit("upload", fileList);
   }
 }
+
+function dragOver() {
+  isDragging.value = true;
+}
+
+function dragLeave() {
+  isDragging.value = false;
+}
 </script>
 
 <style lang="scss">

package/ui/components/molecules/vc-form/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Form from "./vc-form.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Form from "./vc-form.vue";
 
-export type VcFormSlots = {
-  default?: () => VNode[];
+export const VcForm = _Form as typeof _Form & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcForm: GlobalComponentConstructor<typeof Form, VcFormSlots> = Form;

package/ui/components/molecules/vc-input/index.ts

@@ -1,59 +1,60 @@
 import { VNode } from "vue";
-import Input from "./vc-input.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Input from "./vc-input.vue";
 
-export type VcInputSlots = {
-  /**
-   * Slot for controls
-   * @param scope
-   */
-  control?: (scope: {
-    /**
-     * Field is editable
-     */
-    editable: boolean;
-    /**
-     * Field has focus
-     */
-    focused: boolean;
-    /**
-     * Field's value
-     */
-    modelValue: string | number | Date | null;
-    /**
-     * Function that emits an @input event in the context of the field
-     * @param value Value to be emitted
-     */
-    emitValue: (value: string | number | Date | null) => void;
-    /**
-     * Field placeholder text
-     */
-    placeholder?: string | undefined;
-  }) => VNode[];
-  /**
-   * Prepend outer field
-   */
-  prepend?: () => VNode[];
-  /**
-   * Prepend inner field
-   */
-  "prepend-inner"?: () => VNode[];
-  /**
-   * Append to inner field
-   */
-  "append-inner"?: () => VNode[];
-  /**
-   * Append outer field
-   */
-  append?: () => VNode[];
-  /**
-   * Slot for errors
-   */
-  error?: () => VNode[];
-  /**
-   * Slot for hint text
-   */
-  hint?: () => VNode[];
+export const VcInput = _Input as typeof _Input & {
+  new (): {
+    $slots: {
+      /**
+       * Slot for controls
+       * @param scope
+       */
+      control: (scope: {
+        /**
+         * Field is editable
+         */
+        editable: boolean;
+        /**
+         * Field has focus
+         */
+        focused: boolean;
+        /**
+         * Field's value
+         */
+        modelValue: string | number | Date | null;
+        /**
+         * Function that emits an @input event in the context of the field
+         * @param value Value to be emitted
+         */
+        emitValue: (value: string | number | Date | null) => void;
+        /**
+         * Field placeholder text
+         */
+        placeholder: string | undefined;
+      }) => VNode[];
+      /**
+       * Prepend outer field
+       */
+      prepend: () => VNode[];
+      /**
+       * Prepend inner field
+       */
+      "prepend-inner": () => VNode[];
+      /**
+       * Append to inner field
+       */
+      "append-inner": () => VNode[];
+      /**
+       * Append outer field
+       */
+      append: () => VNode[];
+      /**
+       * Slot for errors
+       */
+      error: () => VNode[];
+      /**
+       * Slot for hint text
+       */
+      hint: () => VNode[];
+    };
+  };
 };
-
-export const VcInput: GlobalComponentConstructor<typeof Input, VcInputSlots> = Input;

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

@@ -176,7 +176,7 @@ export interface Props {
   /**
    * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
    */
-  modelValue: string | number | Date | null | undefined;
+  modelValue?: string | number | Date | null | undefined;
   /**
    * Input label text
    */

package/ui/components/molecules/vc-input-currency/index.ts

@@ -1,17 +1,18 @@
 import { VNode } from "vue";
-import InputCurrency from "./vc-input-currency.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _InputCurrency from "./vc-input-currency.vue";
 
-export type VcInputCurrencySlots = {
-  /**
-   * Slot for custom dropdown open handler
-   */
-  button?: (scope: {
-    /**
-     * Dropdown open/close handler
-     */
-    toggleHandler: () => void;
-  }) => VNode[];
+export const VcInputCurrency = _InputCurrency as typeof _InputCurrency & {
+  new (): {
+    $slots: {
+      /**
+       * Slot for custom dropdown open handler
+       */
+      button?: (scope: {
+        /**
+         * Dropdown open/close handler
+         */
+        toggleHandler: () => void;
+      }) => VNode[];
+    };
+  };
 };
-
-export const VcInputCurrency: GlobalComponentConstructor<typeof InputCurrency, VcInputCurrencySlots> = InputCurrency;

package/ui/components/molecules/vc-notification/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Notification from "./vc-notification.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Notification from "./vc-notification.vue";
 
-export type VcNotificationSlots = {
-  default?: () => VNode[];
+export const VcNotification = _Notification as typeof _Notification & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
 };
-
-export const VcNotification: GlobalComponentConstructor<typeof Notification, VcNotificationSlots> = Notification;

package/ui/components/molecules/vc-pagination/index.ts

@@ -1,9 +1,3 @@
-import Pagination from "./vc-pagination.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
-import { VNode } from "vue";
+import _Pagination from "./vc-pagination.vue";
 
-export type VcPaginationSlots = {
-  default?: () => VNode[];
-};
-
-export const VcPagination: GlobalComponentConstructor<typeof Pagination, VcPaginationSlots> = Pagination;
+export const VcPagination = _Pagination as typeof _Pagination;

package/ui/components/molecules/vc-rating/index.ts

@@ -1,9 +1,10 @@
 import { VNode } from "vue";
-import Rating from "./vc-rating.vue";
-import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import _Rating from "./vc-rating.vue";
 
-export type VcRatingSlots = {
-  details?: () => VNode[];
+export const VcRating = _Rating as typeof _Rating & {
+  new (): {
+    $slots: {
+      details: () => VNode[];
+    };
+  };
 };
-
-export const VcRating: GlobalComponentConstructor<typeof Rating, VcRatingSlots> = Rating;