@vc-shell/framework 1.0.53 → 1.0.54

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

@@ -2,6 +2,4 @@ import { ComponentPublicInstance } from "vue";
 import { VcStatusIconProps } from "./vc-status-icon-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import StatusIcon from "./vc-status-icon.vue";
-export const VcStatusIcon: ComponentConstructor<
-  ComponentPublicInstance<VcStatusIconProps>
-> = StatusIcon;
+export const VcStatusIcon: ComponentConstructor<ComponentPublicInstance<VcStatusIconProps>> = StatusIcon;

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

@@ -1,8 +1,14 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcStatusIconProps {
-  status?: boolean | undefined;
-}
+export const statusIconProps = {
+  status: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcStatusIconProps = ExtractTypes<typeof statusIconProps>;
 
 export interface VcStatusIconSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -17,9 +17,7 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { VcStatusIconProps } from "./vc-status-icon-model";
+import { statusIconProps } from "./vc-status-icon-model";
 
-withDefaults(defineProps<VcStatusIconProps>(), {
-  status: false,
-});
+defineProps(statusIconProps);
 </script>

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

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcSwitchProps } from "./vc-switch-model";
+import { VcSwitchEmits, VcSwitchProps } from "./vc-switch-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Switch from "./vc-switch.vue";
-export const VcSwitch: ComponentConstructor<
-    ComponentPublicInstance<VcSwitchProps>
-> = Switch;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcSwitch: ComponentConstructor<ComponentPublicInstance<VcSwitchProps, any, any, any, any, VcSwitchEmits>> =
+  Switch;

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

@@ -1,13 +1,33 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isBoolean } from "./../../../utils";
 
-export interface VcSwitchProps {
-  modelValue?: boolean | undefined;
-  disabled?: boolean | undefined;
-  tooltip?: string | undefined;
-  required?: boolean | undefined;
-  label?: string | undefined;
-  "onUpdate:modelValue"?: (value: boolean) => void;
-}
+export const switchProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+};
+
+export const switchEmits = {
+  "update:modelValue": (value: boolean) => isBoolean(value),
+};
+
+export type VcSwitchProps = ExtractTypes<typeof switchProps>;
+export type VcSwitchEmits = typeof switchEmits;
 
 export interface VcSwitchSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <!-- Switch label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
     </VcLabel>
     <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
@@ -15,7 +19,10 @@
         />
         <span class="vc-switch__slider"></span>
       </label>
-      <VcHint class="tw-mt-2 tw-w-max" v-if="tooltip">
+      <VcHint
+        class="tw-mt-2 tw-w-max"
+        v-if="tooltip"
+      >
         {{ tooltip }}
       </VcHint>
     </div>
@@ -23,16 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-import { VcSwitchProps } from "./vc-switch-model";
+import { switchEmits, switchProps } from "./vc-switch-model";
 
-withDefaults(defineProps<VcSwitchProps>(), {
-  modelValue: false,
-  disabled: false,
-  tooltip: "",
-  required: false,
-});
+defineProps(switchProps);
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(switchEmits);
 
 function onInput(e: InputEvent) {
   const newValue = (e.target as HTMLInputElement).checked;

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

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcWidgetProps } from "./vc-widget-model";
+import { VcWidgetEmits, VcWidgetProps } from "./vc-widget-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Widget from "./vc-widget.vue";
-export const VcWidget: ComponentConstructor<
-  ComponentPublicInstance<VcWidgetProps>
-> = Widget;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcWidget: ComponentConstructor<ComponentPublicInstance<VcWidgetProps, any, any, any, any, VcWidgetEmits>> =
+  Widget;

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

@@ -1,12 +1,22 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcWidgetProps {
-  icon?: string | undefined;
-  title?: string | undefined;
-  value?: string | number | undefined;
-  disabled?: boolean | undefined;
-  onClick?: () => void;
-}
+export const widgetProps = {
+  icon: String,
+  title: String,
+  value: [String, Number],
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const widgetEmits = {
+  click: () => true,
+};
+
+export type VcWidgetProps = ExtractTypes<typeof widgetProps>;
+export type VcWidgetEmits = typeof widgetEmits;
 
 export interface VcWidgetSlots {
   default: () => VNode[];

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -10,18 +10,27 @@
       :icon="icon"
       size="xxl"
     ></VcIcon>
-    <div v-if="title" class="vc-widget__title">{{ title }}</div>
-    <div v-if="value !== undefined" class="vc-widget__value">{{ value }}</div>
+    <div
+      v-if="title"
+      class="vc-widget__title"
+    >
+      {{ title }}
+    </div>
+    <div
+      v-if="value !== undefined"
+      class="vc-widget__value"
+    >
+      {{ value }}
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcWidgetProps } from "./vc-widget-model";
+import { widgetEmits, widgetProps } from "./vc-widget-model";
 
-const props = withDefaults(defineProps<VcWidgetProps>(), {
-  disabled: false,
-});
-const emit = defineEmits(["click"]);
+const props = defineProps(widgetProps);
+
+const emit = defineEmits(widgetEmits);
 
 function onClick() {
   if (!props.disabled) {

package/ui/components/index.ts

@@ -1,6 +1,6 @@
 /* Atoms */
 export { VcBadge } from "./atoms/vc-badge";
-export {VcButton } from "./atoms/vc-button";
+export { VcButton } from "./atoms/vc-button";
 export { VcCard } from "./atoms/vc-card";
 export { VcCheckbox } from "./atoms/vc-checkbox";
 export { VcCol } from "./atoms/vc-col";

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

@@ -2,6 +2,4 @@ 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;
+export const VcBreadcrumbs: ComponentConstructor<ComponentPublicInstance<VcBreadcrumbsProps>> = Breadcrumbs;

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

@@ -1,14 +1,22 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcBreadcrumbsProps {
-  items?: {
-    current: boolean;
-    icon: string;
-    title: string;
-    clickHandler: () => void;
-    id: string;
-  }[];
-}
+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,9 +14,7 @@
 
 <script lang="ts" setup>
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
+import { breadcrumbsProps } from "./vc-breadcrumbs-model";
 
-withDefaults(defineProps<VcBreadcrumbsProps>(), {
-  items: () => [],
-});
+defineProps(breadcrumbsProps);
 </script>

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

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcEditorProps } from "./vc-editor-model";
+import { VcEditorEmits, VcEditorProps } from "./vc-editor-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Editor from "./vc-editor.vue";
-export const VcEditor: ComponentConstructor<
-  ComponentPublicInstance<VcEditorProps>
-> = Editor;
+// 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

@@ -1,16 +1,36 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString, isNumber, isDate } from "./../../../utils";
 
-export interface VcEditorProps {
-  placeholder?: string | undefined;
-  modelValue?: string | number | Date | undefined;
-  required?: boolean | undefined;
-  disabled?: boolean | undefined;
-  label?: string | undefined;
-  tooltip?: string | undefined;
-  name?: string | undefined;
-  errorMessage?: string | undefined;
-  "onUpdate:modelValue"?: (value: string) => void;
-}
+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

@@ -9,9 +9,17 @@
     ]"
   >
     <!-- 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 -->
@@ -22,7 +30,10 @@
       theme="chrome"
       @input="onInput"
     />
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-editor__error">
         {{ errorMessage }}
       </VcHint>
@@ -35,16 +46,11 @@ 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 { VcEditorProps } from "./vc-editor-model";
+import { editorEmits, editorProps } from "./vc-editor-model";
 
-const props = withDefaults(defineProps<VcEditorProps>(), {
-  placeholder: "",
-  modelValue: null,
-  required: false,
-  name: "Field",
-});
+const props = defineProps(editorProps);
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(editorEmits);
 const content = ref();
 
 watch(

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

@@ -1,7 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcFileUploadProps } from "./vc-file-upload-model";
+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<
-  ComponentPublicInstance<VcFileUploadProps>
+  // 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

@@ -1,14 +1,36 @@
-import { VNode } from "vue";
-
-export interface VcFileUploadProps {
-  variant?: "gallery" | "file-upload" | undefined;
-  loading?: boolean | undefined;
-  accept?: string | undefined;
-  multiple?: boolean | undefined;
-  rules?: string | Record<string, unknown> | undefined;
-  name?: string | undefined;
-  onUpload?: (files: FileList) => void;
-}
+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

@@ -18,9 +18,7 @@
         size="xxl"
       ></VcIcon>
 
-      <div
-        class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4"
-      >
+      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
         <span>Drag and drop file here or</span>&nbsp;
         <br />
         <VcLink @click="toggleUploader">browse your files</VcLink>
@@ -36,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>
@@ -47,23 +48,18 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-import { VcFileUploadProps } from "./vc-file-upload-model";
+import { fileUploadEmits, fileUploadProps } from "./vc-file-upload-model";
+
+const props = defineProps(fileUploadProps);
 
-const props = withDefaults(defineProps<VcFileUploadProps>(), {
-  variant: "gallery",
-  loading: false,
-  accept: ".jpg, .png, .jpeg",
-  multiple: false,
-  name: "Gallery",
-});
+const emit = defineEmits(fileUploadEmits);
 
-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/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 "./../../../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;