@vc-shell/framework 1.0.52 → 1.0.54

package/ui/components/index.ts

@@ -1,43 +1,43 @@
 /* Atoms */
 export { VcBadge } from "./atoms/vc-badge";
-export { default as VcButton } from "./atoms/vc-button/vc-button.vue";
-export { default as VcCard } from "./atoms/vc-card/vc-card.vue";
-export { default as VcCheckbox } from "./atoms/vc-checkbox/vc-checkbox.vue";
-export { default as VcCol } from "./atoms/vc-col/vc-col.vue";
-export { default as VcContainer } from "./atoms/vc-container/vc-container.vue";
-export { default as VcHint } from "./atoms/vc-hint/vc-hint.vue";
-export { default as VcIcon } from "./atoms/vc-icon/vc-icon.vue";
-export { default as VcInfoRow } from "./atoms/vc-info-row/vc-info-row.vue";
-export { default as VcImage } from "./atoms/vc-image/vc-image.vue";
-export { default as VcLabel } from "./atoms/vc-label/vc-label.vue";
-export { default as VcLink } from "./atoms/vc-link/vc-link.vue";
-export { default as VcLoading } from "./atoms/vc-loading/vc-loading.vue";
-export { default as VcProgress } from "./atoms/vc-progress/vc-progress.vue";
-export { default as VcRow } from "./atoms/vc-row/vc-row.vue";
-export { default as VcStatus } from "./atoms/vc-status/vc-status.vue";
-export { default as VcStatusIcon } from "./atoms/vc-status-icon/vc-status-icon.vue";
-export { default as VcSwitch } from "./atoms/vc-switch/vc-switch.vue";
-export { default as VcWidget } from "./atoms/vc-widget/vc-widget.vue";
+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 { default as VcBreadcrumbs } from "./molecules/vc-breadcrumbs/vc-breadcrumbs.vue";
-export { default as VcEditor } from "./molecules/vc-editor/vc-editor.vue";
-export { default as VcForm } from "./molecules/vc-form/vc-form.vue";
-export { default as VcFileUpload } from "./molecules/vc-file-upload/vc-file-upload.vue";
+export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
+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 { default as VcNotification } from "./molecules/vc-notification/vc-notification.vue";
-export { default as VcPagination } from "./molecules/vc-pagination/vc-pagination.vue";
-export { default as VcRating } from "./molecules/vc-rating/vc-rating.vue";
+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 { default as VcSlider } from "./molecules/vc-slider/vc-slider.vue";
-export { default as VcTextarea } from "./molecules/vc-textarea/vc-textarea.vue";
+export { VcSlider } from "./molecules/vc-slider";
+export { VcTextarea } from "./molecules/vc-textarea";
 
 /* Organisms */
-export { default as VcApp } from "./organisms/vc-app/vc-app.vue";
-export { default as VcBlade } from "./organisms/vc-blade/vc-blade.vue";
-export { default as VcDynamicProperty } from "./organisms/vc-dynamic-property/vc-dynamic-property.vue";
-export { default as VcGallery } from "./organisms/vc-gallery/vc-gallery.vue";
-export { default as VcLoginForm } from "./organisms/vc-login-form/vc-login-form.vue";
-export { default as VcPopup } from "./organisms/vc-popup/vc-popup.vue";
-export { default as VcTable } from "./organisms/vc-table/vc-table.vue";
+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/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
+import { VcIcon } from "./../../../../../components";
 
 const props = defineProps({
   current: {

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

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Breadcrumbs from "./vc-breadcrumbs.vue";
+export const VcBreadcrumbs: ComponentConstructor<ComponentPublicInstance<VcBreadcrumbsProps>> = Breadcrumbs;

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

@@ -0,0 +1,23 @@
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const breadcrumbsProps = {
+  items: {
+    type: Array as PropType<
+      {
+        current: boolean;
+        icon: string;
+        title: string;
+        clickHandler: () => void;
+        id: string;
+      }[]
+    >,
+    default: () => [],
+  },
+};
+
+export type VcBreadcrumbsProps = ExtractTypes<typeof breadcrumbsProps>;
+
+export interface VcBreadcrumbsSlots {
+  default: () => VNode[];
+}

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="items" class="tw-flex tw-items-center tw-flex-nowrap">
+  <div
+    v-if="items"
+    class="tw-flex tw-items-center tw-flex-nowrap"
+  >
     <VcBreadcrumbsItem
       v-for="(item, i) in items"
       :key="item.id"
@@ -11,18 +14,7 @@
 
 <script lang="ts" setup>
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
+import { breadcrumbsProps } from "./vc-breadcrumbs-model";
 
-export interface Props {
-  items: {
-    current: boolean;
-    icon: string;
-    title: string;
-    clickHandler: () => void;
-    id: string;
-  }[];
-}
-
-withDefaults(defineProps<Props>(), {
-  items: () => [],
-});
+defineProps(breadcrumbsProps);
 </script>

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcEditorEmits, VcEditorProps } from "./vc-editor-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Editor from "./vc-editor.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcEditor: ComponentConstructor<ComponentPublicInstance<VcEditorProps, any, any, any, any, VcEditorEmits>> =
+  Editor;

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

@@ -0,0 +1,37 @@
+import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString, isNumber, isDate } from "./../../../utils";
+
+export const editorProps = {
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  modelValue: {
+    type: [String, Number, Date],
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: Boolean,
+  label: String,
+  tooltip: String,
+  name: {
+    type: String,
+    default: "Field",
+  },
+  errorMessage: String,
+};
+
+export const editorEmits = {
+  "update:modelValue": (value: string | number | Date) => isString(value) || isNumber(value) || isDate(value),
+};
+
+export type VcEditorProps = ExtractTypes<typeof editorProps>;
+export type VcEditorEmits = typeof editorEmits;
+
+export interface VcEditorSlots {
+  error: () => VNode[];
+}

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

@@ -4,26 +4,36 @@
     :class="[
       {
         'vc-editor_error': errorMessage,
-        'vc-editor_disabled': disabled
+        'vc-editor_disabled': disabled,
       },
     ]"
   >
     <!-- Editor label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+        >{{ tooltip }}</template
+      >
     </VcLabel>
 
     <!-- Editor field -->
     <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)]"
+      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)] tw-h-[200px]"
       v-model:value="content"
       lang="html"
       theme="chrome"
-      style="height: 200px"
       @input="onInput"
     />
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-editor__error">
         {{ errorMessage }}
       </VcHint>
@@ -35,63 +45,22 @@
 import { VAceEditor } from "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-chrome";
-import {ref, unref, watch} from "vue";
+import { ref, unref, watch } from "vue";
+import { editorEmits, editorProps } from "./vc-editor-model";
 
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: "",
-  },
+const props = defineProps(editorProps);
 
-  modelValue: {
-    type: [String, Number, Date],
-    default: null,
-  },
-
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined
-  }
-});
-
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(editorEmits);
 const content = ref();
-let initialValue = unref(props.modelValue);
 
 watch(
-    () => props.modelValue,
-    (value) => {
-        let init = unref(value);
-        emit("update:modelValue", init);
-    }
+  () => props.modelValue,
+  (value) => {
+    let init = unref(value);
+    emit("update:modelValue", init);
+  }
 );
 
-// Handle input event to propertly validate value and emit changes
 function onInput() {
   emit("update:modelValue", content.value);
 }

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

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcFileUploadEmits, VcFileUploadProps } from "./vc-file-upload-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import FileUpload from "./vc-file-upload.vue";
+export const VcFileUpload: ComponentConstructor<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcFileUploadProps, any, any, any, any, VcFileUploadEmits>
+> = FileUpload;

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

@@ -0,0 +1,37 @@
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const fileUploadProps = {
+  variant: {
+    type: String as PropType<"gallery" | "file-upload">,
+    default: "gallery",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: ".jpg, .png, .jpeg",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  rules: [String, Object] as PropType<string | Record<string, unknown>>,
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+};
+
+export const fileUploadEmits = {
+  upload: (files: FileList) => !!files,
+};
+
+export type VcFileUploadProps = ExtractTypes<typeof fileUploadProps>;
+export type VcFileUploadEmits = typeof fileUploadEmits;
+
+export interface VcFileUploadSlots {
+  error: () => VNode[];
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <div class= "tw-flex tw-flex-col tw-flex-1">
+  <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}`"
@@ -34,7 +34,10 @@
         :name="name"
       />
     </div>
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-input__error">
         {{ errorMessage }}
       </VcHint>
@@ -45,46 +48,18 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
+import { fileUploadEmits, fileUploadProps } from "./vc-file-upload-model";
+
+const props = defineProps(fileUploadProps);
+
+const emit = defineEmits(fileUploadEmits);
 
-const props = defineProps({
-  variant: {
-    type: String,
-    enum: ["gallery", "file-upload"],
-    default: "gallery",
-  },
-
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-
-  accept: {
-    type: String,
-    default: ".jpg, .png, .jpeg",
-  },
-
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  rules: {
-    type: [String, Object],
-  },
-
-  name: {
-    type: String,
-    default: "Gallery",
-  },
-});
-
-const emit = defineEmits(["upload"]);
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 let internalRules = unref(props.rules) || "";
 
 // Prepare field-level validation
-const { errorMessage, handleChange, errors, validate } = useField(
+const { errorMessage, handleChange, validate } = useField(
   `${props.name === "Gallery" ? instance?.uid : props.name}`,
   internalRules
 );

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

@@ -0,0 +1,2 @@
+import Form from "./vc-form.vue";
+export const VcForm = Form;

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

@@ -0,0 +1,5 @@
+import { VNode } from "vue";
+
+export interface VcFormSlots {
+  default: () => VNode[];
+}

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

@@ -1,8 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Input from "./vc-input.vue";
-import { VcInputProps } from "./vc-input-model";
-
-export const VcInput: ComponentConstructor<
-  ComponentPublicInstance<VcInputProps>
-> = Input;
+import { VcInputEmits, VcInputProps } from "./vc-input-model";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcInput: ComponentConstructor<ComponentPublicInstance<VcInputProps, any, any, any, any, VcInputEmits>> =
+  Input;

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

@@ -1,96 +1,114 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString, isNumber, isDate } from "./../../../utils";
 
-export interface VcInputProps {
+export const inputProps = {
   /**
    * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
    */
-  modelValue?: string | number | Date | null;
+  modelValue: {
+    type: [String, Number, Date],
+    default: null,
+  },
   /**
    * Input label text
    */
-  label?: string | undefined;
+  label: String,
   /**
    * Input placeholder text
    */
-  placeholder?: string | undefined;
+  placeholder: String,
   /**
    * Input type
    * Default value: text
    */
-  type?:
-    | "text"
-    | "password"
-    | "email"
-    | "tel"
-    | "number"
-    | "url"
-    | "time"
-    | "date"
-    | "datetime-local"
-    | undefined;
+  type: {
+    type: String as PropType<
+      "text" | "password" | "email" | "tel" | "number" | "url" | "time" | "date" | "datetime-local"
+    >,
+    default: "text",
+  },
   /**
    * Input description (hint) text below input component
    */
-  hint?: string | undefined;
+  hint: String,
   /**
    * Appends clearable icon when a value is set;
    * When clicked, model becomes null
    */
-  clearable?: boolean | undefined;
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Prefix
    */
-  prefix?: string | undefined;
+  prefix: String,
   /**
    * Suffix
    */
-  suffix?: string | undefined;
+  suffix: String,
   /**
    * Used to specify the name of the control; If not specified, it takes the value 'Field'
    */
-  name?: string | undefined;
+  name: {
+    type: String,
+    default: "Field",
+  },
   /**
    * Signals the user a process is in progress by displaying a spinner
    */
-  loading?: boolean | undefined;
+  loading: Boolean,
   /**
    * Debounce amount (in milliseconds) when updating model
    */
-  debounce?: string | number | undefined;
+  debounce: [String, Number],
   /**
    * Put component in disabled mode
    */
-  disabled?: boolean | undefined;
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Focus field on initial component render
    */
-  autofocus?: boolean | undefined;
+  autofocus: Boolean,
   /**
    * Does field have validation errors?
    */
-  error?: boolean | undefined;
+  error: Boolean,
   /**
    * Validation error message (gets displayed only if 'error' is set to 'true')
    */
-  errorMessage?: string | undefined;
+  errorMessage: String,
   /**
    * Specify a max length of model
    * Default value: 1024
    */
-  maxlength?: string | number | undefined;
+  maxlength: {
+    type: [String, Number],
+    default: "1024",
+  },
   /**
    * Input tooltip information
    */
-  tooltip?: string | undefined;
+  tooltip: String,
   /**
    * Input required state
    */
-  required?: boolean | undefined;
-  /**
-   * Emitted when the component needs to change the model; Is also used by v-model
-   */
-  "onUpdate:modelValue"?: (value: string | number | Date | null) => void;
-}
+  required: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const inputEmits = {
+  "update:modelValue": (value: string | number | Date | null) => isString(value) || isNumber(value) || isDate(value) || value === null,
+};
+
+export type VcInputProps = ExtractTypes<typeof inputProps>;
+export type VcInputEmits = typeof inputEmits;
 
 export interface VcInputSlots {
   /**