@vc-shell/framework 1.0.53 → 1.0.54

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

@@ -1,7 +1,5 @@
 import { ComponentPublicInstance } from "vue";
 import { VcRatingProps } from "./vc-rating-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Rating from "./vc-rating.vue";
-export const VcRating: ComponentConstructor<
-    ComponentPublicInstance<VcRatingProps>
-> = Rating;
+export const VcRating: ComponentConstructor<ComponentPublicInstance<VcRatingProps>> = Rating;

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

@@ -1,13 +1,22 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcRatingProps {
-  label?: string;
-  placeholder?: string;
-  tooltip?: string;
-  rating: number | undefined;
-  max?: number;
-  variant?: "stars" | "star-and-text" | "text";
-}
+export const ratingProps = {
+  label: String,
+  placeholder: String,
+  tooltip: String,
+  rating: Number,
+  max: {
+    type: Number,
+    default: 5,
+  },
+  variant: {
+    type: String as PropType<"stars" | "star-and-text" | "text">,
+    default: "stars",
+  },
+};
+
+export type VcRatingProps = ExtractTypes<typeof ratingProps>;
 
 export interface VcRatingSlots {
   details: () => VNode[];

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

@@ -1,9 +1,15 @@
 <template>
   <div class="vc-rating">
     <!-- Rating label -->
-    <VcLabel v-if="label" class="tw-mb-2">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+      >
         <span v-html="tooltip"></span>
       </template>
     </VcLabel>
@@ -42,9 +48,9 @@
 
 <script lang="ts" setup>
 import { VcIcon, VcLabel } from "./../../../components";
-import { VcRatingProps } from "./vc-rating-model";
+import { ratingProps } from "./vc-rating-model";
 
-withDefaults(defineProps<VcRatingProps>(), { max: 5, variant: "stars" });
+defineProps(ratingProps);
 </script>
 
 <style lang="scss">

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

@@ -1,8 +1,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcSelectProps } from "./vc-select-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcSelectProps, VcSelectEmits } from "./vc-select-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Select from "./vc-select.vue";
 
-export const VcSelect: ComponentConstructor<
-  ComponentPublicInstance<VcSelectProps>
-> = Select;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcSelect: ComponentConstructor<ComponentPublicInstance<VcSelectProps, any, any, any, any, VcSelectEmits>> =
+  Select;

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

@@ -1,132 +1,162 @@
-import { VNode } from "vue";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VNode, PropType } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { isString } 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 VcSelectProps {
+export const selectProps = {
   /**
    * Name of select
    */
-  name?: string | undefined;
+  name: {
+    type: String,
+    default: "Field",
+  },
   /**
    * Model of the component; Must be Array if using 'multiple' prop; Use this property with a listener for 'update:modelValue' event OR use v-model directive
    */
-  modelValue: any;
+  modelValue: null,
   /**
    * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;
    * Default value: true
    */
-  mapOptions?: boolean | undefined;
+  mapOptions: {
+    type: Boolean,
+    default: true,
+  },
   /**
    * 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,
   /**
    * Select label
    */
-  label?: string | undefined;
+  label: String,
   /**
    * Select description (hint) text below input component
    */
-  hint?: string | undefined;
+  hint: String,
   /**
    * Prefix
    */
-  prefix?: string | undefined;
+  prefix: String,
   /**
    * Suffix
    */
-  suffix?: string | undefined;
+  suffix: String,
   /**
    * Signals the user a process is in progress by displaying a spinner
    */
-  loading?: boolean | undefined;
+  loading: Boolean,
   /**
    * Appends clearable icon when a value is set;
    * When clicked, model becomes null
    */
-  clearable?: boolean | undefined;
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
   /**
    * Put component in disabled mode
    */
-  disabled?: boolean | undefined;
+  disabled: Boolean,
   /**
    * Allow multiple selection; Model must be Array
    */
-  multiple?: boolean | undefined;
+  multiple: Boolean,
   /**
    * Available options that the user can select from.
    * Default value: []
    */
-  options?:
-  | ((
-    keyword?: string,
-    skip?: number,
-    ids?: string[]
-  ) => Promise<{
-    results?: object[];
-    totalCount?: number;
-  }>)
-  | any[]
-  | undefined;
+  options: {
+    type: [Function, Array] as PropType<
+      | ((
+          keyword?: string,
+          skip?: number,
+          ids?: string[]
+        ) => Promise<{
+          results?: object[];
+          totalCount?: number;
+        }>)
+      | any[]
+    >,
+    default: () => [],
+  },
   /**
    * 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: { type: [Function, String] as PropType<OptionProp>, default: "id" },
   /**
    * 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: { type: [Function, String] as PropType<OptionProp>, default: "title" },
   /**
    * Update model with the value of the selected option instead of the whole option
    */
-  emitValue?: boolean | undefined;
+  emitValue: {
+    type: Boolean,
+    default: true,
+  },
   /**
    * Debounce the search input update with an amount of milliseconds
    * Default value: 500
    */
-  debounce?: number | string | undefined;
+  debounce: {
+    type: [Number, String],
+    default: 500,
+  },
   /**
    * Input placeholder text
    */
-  placeholder?: string | undefined;
+  placeholder: String,
   /**
    * Input tooltip information
    */
-  tooltip?: string | undefined;
+  tooltip: String,
   /**
    * Input required state
    */
-  required?: boolean | undefined;
+  required: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Input search activation
    */
-  searchable?: boolean | undefined;
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectEmits = {
   /**
-  * Emitted when the component needs to change the model; Is also used by v-model
-  */
-  "onUpdate:modelValue"?: (inputValue: any) => void;
+   * Emitted when the component needs to change the model; Is also used by v-model
+   */
+  "update:modelValue": (inputValue: any) => !!inputValue,
   /**
    * Emitted when user wants to filter a value
    */
-  onSearch?: (inputValue: string) => void;
+  search: (inputValue: string) => isString(inputValue),
   /**
    * Emitted when the select options list is hidden
    */
-  onClose?: () => void;
-}
+  close: () => true,
+};
+
+export type VcSelectProps = ExtractTypes<typeof selectProps>;
+export type VcSelectEmits = typeof selectEmits;
 
 export interface VcSelectSlots {
   /**