@vc-shell/framework 1.0.53 → 1.0.54

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 {
   /**

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

@@ -12,9 +12,17 @@
     ]"
   >
     <!-- Input 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>
 
     <div class="tw-flex tw-flex-nowrap tw-items-start">
@@ -25,9 +33,7 @@
         >
           <slot name="prepend"></slot>
         </div>
-        <div
-          class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative"
-        >
+        <div class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative">
           <div class="vc-input__field-wrapper">
             <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full">
               <div
@@ -72,13 +78,14 @@
                   {{ suffix }}
                 </div>
                 <div
-                  v-if="
-                    clearable && modelValue && !disabled && type !== 'password'
-                  "
+                  v-if="clearable && modelValue && !disabled && type !== 'password'"
                   class="vc-input__clear"
                   @click="onReset"
                 >
-                  <VcIcon size="s" icon="fas fa-times"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-times"
+                  ></VcIcon>
                 </div>
 
                 <div
@@ -86,7 +93,10 @@
                   v-if="type === 'password' && internalType === 'password'"
                   @click="internalType = 'text'"
                 >
-                  <VcIcon size="s" icon="fas fa-eye-slash"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-eye-slash"
+                  ></VcIcon>
                 </div>
 
                 <div
@@ -94,7 +104,10 @@
                   v-if="type === 'password' && internalType === 'text'"
                   @click="internalType = 'password'"
                 >
-                  <VcIcon size="s" icon="fas fa-eye"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-eye"
+                  ></VcIcon>
                 </div>
               </div>
 
@@ -116,20 +129,27 @@
               </div>
             </div>
           </div>
-          <div
-            class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]"
-          >
-            <Transition name="slide-up" mode="out-in">
+          <div class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]">
+            <Transition
+              name="slide-up"
+              mode="out-in"
+            >
               <div v-if="error">
                 <slot name="error">
-                  <VcHint class="vc-input__error" v-if="errorMessage">
+                  <VcHint
+                    class="vc-input__error"
+                    v-if="errorMessage"
+                  >
                     {{ errorMessage }}
                   </VcHint>
                 </slot>
               </div>
               <div v-else>
                 <slot name="hint">
-                  <VcHint class="vc-input__desc" v-if="hint">
+                  <VcHint
+                    class="vc-input__desc"
+                    v-if="hint"
+                  >
                     {{ hint }}
                   </VcHint>
                 </slot>
@@ -151,19 +171,11 @@
 
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
-import { VcInputProps } from "./vc-input-model";
+import { inputEmits, inputProps } from "./vc-input-model";
 
-const props = withDefaults(defineProps<VcInputProps>(), {
-  modelValue: null,
-  clearable: false,
-  required: false,
-  disabled: false,
-  type: "text",
-  name: "Field",
-  maxlength: "1024",
-});
+const props = defineProps(inputProps);
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(inputEmits);
 
 let emitTimer;
 let emitValueFn;
@@ -194,7 +206,7 @@ function onInput(e: Event) {
   emitValue(newValue);
 }
 
-function emitValue(val) {
+function emitValue(val: string) {
   emitValueFn = () => {
     if (props.modelValue !== val) {
       emit("update:modelValue", val);

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

@@ -1,8 +1,9 @@
 import { ComponentPublicInstance } from "vue";
-import { VcInputCurrencyProps } from "./vc-input-currency-model";
+import { VcInputCurrencyEmits, VcInputCurrencyProps } from "./vc-input-currency-model";
 import { ComponentConstructor } from "./../../../types/ts-helpers";
 import InputCurrency from "./vc-input-currency.vue";
 
 export const VcInputCurrency: ComponentConstructor<
-  ComponentPublicInstance<VcInputCurrencyProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcInputCurrencyProps, any, any, any, any, VcInputCurrencyEmits>
 > = InputCurrency;

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

@@ -1,114 +1,124 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString, isNumber } from "./../../../utils";
 
-export type OptionProp =
-  | ((option: string | Record<string, unknown>) => string)
-  | string
-  | undefined;
+export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
 
-export interface VcInputCurrencyProps {
+export const inputCurrencyProps = {
   /**
    * Model of the currency component; Use with a listener for 'update:price' event OR use v-model:price directive
    */
-  modelValue?: string | number | Date | null;
+  modelValue: [String, Number, Date],
   /**
    * Input label text
    */
-  label?: string | undefined;
+  label: String,
   /**
    * Input placeholder text
    */
-  placeholder?: string | undefined;
+  placeholder: String,
   /**
    * 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: Boolean,
   /**
    * 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: String,
   /**
    * Signals the user a process is in progress by displaying a spinner
    */
-  loading?: boolean | undefined;
+  loading: Boolean,
   /**
    * Debounce amount (in milliseconds) for search input
    * Default: 0
    */
-  debounce?: string | number | undefined;
+  debounce: {
+    type: [String, Number],
+    default: 0,
+  },
   /**
    * Put component in disabled mode
    */
-  disabled?: boolean | undefined;
+  disabled: Boolean,
   /**
    * 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: [String, Number],
   /**
    * Input tooltip information
    */
-  tooltip?: string | undefined;
+  tooltip: String,
   /**
    * Input required state
    */
-  required?: boolean | undefined;
+  required: Boolean,
   /**
    * Option label
    */
-  option?: string | undefined;
+  option: String,
   /**
    * Available options that the user can select from.
    * Default value: []
    */
-  options?: any[] | undefined;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: Array as PropType<any[]>,
   /**
    * Property of option which holds the 'value'
    * Default value: id
    * @param option The current option being processed
    * @returns Value of the current option
    */
-  optionValue?: OptionProp;
+  optionValue: [Function, String] as PropType<OptionProp>,
   /**
    * Property of option which holds the 'label'
    * Default value: title
    * @param option The current option being processed
    * @returns Label of the current option
    */
-  optionLabel?: OptionProp;
+  optionLabel: [Function, String] as PropType<OptionProp>,
+};
+
+export const inputCurrencyEmits = {
   /**
-  * Emitted when the component needs to change the model; Is also used by v-model
-  */
-  "onUpdate:modelValue"?: (value: string | number | null) => void;
+   * Emitted when the component needs to change the model; Is also used by v-model
+   */
+  "update:modelValue": (value: string | number | null) => isString(value) || isNumber(value) || value === null,
   /**
    * Emitted when the component needs to change the options model; Is also used by v-model:option
    */
-  "onUpdate:option"?: (value: string | number | null) => void;
-}
+  "update:option": (value: string | number | null) => isString(value) || isNumber(value) || value === null,
+};
+
+export type VcInputCurrencyProps = ExtractTypes<typeof inputCurrencyProps>;
+export type VcInputCurrencyEmits = typeof inputCurrencyEmits;
+
 export interface VcInputCurrencySlots {
   /**
    * Slot for custom dropdown open handler

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

@@ -31,7 +31,10 @@
         @update:modelValue="$emit('update:modelValue', +$event)"
       >
         <template v-slot:append-inner>
-          <slot name="button" :toggleHandler="toggleHandler">
+          <slot
+            name="button"
+            :toggleHandler="toggleHandler"
+          >
             <button
               class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
               @click.stop.prevent="toggleHandler"
@@ -41,7 +44,11 @@
           </slot>
         </template>
         <template v-slot:control="{ placeholder }">
-          <input type="text" ref="inputRef" :placeholder="placeholder" />
+          <input
+            type="text"
+            ref="inputRef"
+            :placeholder="placeholder"
+          />
         </template>
       </VcInput>
     </template>
@@ -49,15 +56,13 @@
 </template>
 
 <script lang="ts" setup>
-import { VcInputCurrencyProps } from "./vc-input-currency-model";
+import { inputCurrencyEmits, inputCurrencyProps } from "./vc-input-currency-model";
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { watch } from "vue";
 
-const props = withDefaults(defineProps<VcInputCurrencyProps>(), {
-  debounce: 0,
-});
+const props = defineProps(inputCurrencyProps);
 
-defineEmits(["update:modelValue", "update:option"]);
+defineEmits(inputCurrencyEmits);
 
 const { inputRef, setOptions } = useCurrencyInput({
   locale: navigator.language,

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

@@ -1,7 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcNotificationProps } from "./vc-notification-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcNotificationEmits, VcNotificationProps } from "./vc-notification-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Notification from "./vc-notification.vue";
 export const VcNotification: ComponentConstructor<
-  ComponentPublicInstance<VcNotificationProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcNotificationProps, any, any, any, any, VcNotificationEmits>
 > = Notification;

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

@@ -1,10 +1,20 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcNotificationProps {
-  timeout?: number | undefined;
-  onDismiss?: () => void;
-  onExpired?: () => void;
-}
+export const notificationProps = {
+  timeout: {
+    type: Number,
+    default: 0,
+  },
+};
+
+export const notificationEmits = {
+  dismiss: () => true,
+  expired: () => true,
+};
+
+export type VcNotificationProps = ExtractTypes<typeof notificationProps>;
+export type VcNotificationEmits = typeof notificationEmits;
 
 export interface VcNotificationSlots {
   default: () => VNode[];

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

@@ -18,13 +18,11 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { VcNotificationProps } from "./vc-notification-model";
+import { notificationEmits, notificationProps } from "./vc-notification-model";
 
-const props = withDefaults(defineProps<VcNotificationProps>(), {
-  timeout: 0,
-});
+const props = defineProps(notificationProps);
 
-const emit = defineEmits(["dismiss", "expired"]);
+const emit = defineEmits(notificationEmits);
 
 function Timer(callback: (...args: unknown[]) => unknown, delay: number) {
   let timerId: number;

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

@@ -1,7 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcPaginationProps } from "./vc-pagination-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcPaginationEmits, VcPaginationProps } from "./vc-pagination-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Pagination from "./vc-pagination.vue";
 export const VcPagination: ComponentConstructor<
-  ComponentPublicInstance<VcPaginationProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcPaginationProps, any, any, any, any, VcPaginationEmits>
 > = Pagination;

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

@@ -1,11 +1,28 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isNumber } from "./../../../utils";
 
-export interface VcPaginationProps {
-  expanded?: boolean | undefined;
-  pages?: number | undefined;
-  currentPage?: number | undefined;
-  onItemClick?: (pages: number) => void;
-}
+export const paginationProps = {
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+  pages: {
+    type: Number,
+    default: 1,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+};
+
+export const paginationEmits = {
+  itemClick: (pages: number) => isNumber(pages),
+};
+
+export type VcPaginationProps = ExtractTypes<typeof paginationProps>;
+export type VcPaginationEmits = typeof paginationEmits;
 
 export interface VcPaginationSlots {
   default: () => VNode[];

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

@@ -8,7 +8,10 @@
       }"
       @click="currentPage !== 1 && $emit('itemClick', 1)"
     >
-      <VcIcon size="xs" icon="fas fa-angle-double-left"></VcIcon>
+      <VcIcon
+        size="xs"
+        icon="fas fa-angle-double-left"
+      ></VcIcon>
     </div>
 
     <!-- To previous page arrow -->
@@ -19,7 +22,10 @@
       }"
       @click="currentPage !== 1 && $emit('itemClick', currentPage - 1)"
     >
-      <VcIcon size="xs" icon="fas fa-arrow-left"></VcIcon>
+      <VcIcon
+        size="xs"
+        icon="fas fa-arrow-left"
+      ></VcIcon>
     </div>
 
     <template v-if="expanded && $isDesktop.value">
@@ -75,7 +81,10 @@
       }"
       @click="currentPage !== pages && $emit('itemClick', currentPage + 1)"
     >
-      <VcIcon size="xs" icon="fas fa-arrow-right"></VcIcon>
+      <VcIcon
+        size="xs"
+        icon="fas fa-arrow-right"
+      ></VcIcon>
     </div>
 
     <!-- To last page chevron -->
@@ -86,22 +95,21 @@
       }"
       @click="currentPage !== pages && $emit('itemClick', pages)"
     >
-      <VcIcon size="xs" icon="fas fa-angle-double-right"></VcIcon>
+      <VcIcon
+        size="xs"
+        icon="fas fa-angle-double-right"
+      ></VcIcon>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { VcPaginationProps } from "./vc-pagination-model";
+import { paginationEmits, paginationProps } from "./vc-pagination-model";
 
-withDefaults(defineProps<VcPaginationProps>(), {
-  expanded: false,
-  pages: 1,
-  currentPage: 1,
-});
+defineProps(paginationProps);
 
-defineEmits(["itemClick"]);
+defineEmits(paginationEmits);
 </script>
 
 <style lang="scss">