@vc-shell/framework 1.0.53 → 1.0.56

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,119 @@
 </template>
 
 <script lang="ts" setup>
-import { VcInputCurrencyProps } from "./vc-input-currency-model";
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { watch } from "vue";
 
-const props = withDefaults(defineProps<VcInputCurrencyProps>(), {
+export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
+
+export interface Props {
+  /**
+   * Model of the currency component; Use with a listener for 'update:price' event OR use v-model:price directive
+   */
+  modelValue: string | number | Date | null;
+  /**
+   * Input label text
+   */
+  label?: string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Debounce amount (in milliseconds) for search input
+   * Default: 0
+   */
+  debounce?: string | number;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+  /**
+   * Option label
+   */
+  option?: string;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options: unknown[];
+  /**
+   * 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;
+  /**
+   * 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;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string | number | null): void;
+  (event: "update:option", value: string | number | null): void;
+  (event: "change", value: string | number | null): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
   debounce: 0,
 });
 
-defineEmits(["update:modelValue", "update:option"]);
+defineEmits<Emits>();
 
 const { inputRef, setOptions } = useCurrencyInput({
   locale: navigator.language,
@@ -73,7 +184,7 @@ watch(
   (newVal) => {
     setOptions({
       locale: navigator.language,
-      currency: newVal,
+      currency: newVal as string,
       autoSign: false,
       currencyDisplay: CurrencyDisplay.hidden,
       hideGroupingSeparatorOnFocus: false,

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcNotificationProps } from "./vc-notification-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Notification from "./vc-notification.vue";
-export const VcNotification: ComponentConstructor<
-  ComponentPublicInstance<VcNotificationProps>
-> = Notification;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcNotificationSlots = {
+  default?: () => VNode[];
+};
+
+export const VcNotification: GlobalComponentConstructor<typeof Notification, VcNotificationSlots> = Notification;

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

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

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

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

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,33 @@
       }"
       @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";
 
-withDefaults(defineProps<VcPaginationProps>(), {
-  expanded: false,
+export interface Props {
+  expanded?: boolean;
+  pages?: number;
+  currentPage?: number;
+}
+
+export interface Emits {
+  (event: "itemClick", pages: number): void;
+}
+
+withDefaults(defineProps<Props>(), {
   pages: 1,
   currentPage: 1,
 });
 
-defineEmits(["itemClick"]);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcRatingProps } from "./vc-rating-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Rating from "./vc-rating.vue";
-export const VcRating: ComponentConstructor<
-    ComponentPublicInstance<VcRatingProps>
-> = Rating;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcRatingSlots = {
+  details?: () => VNode[];
+};
+
+export const VcRating: GlobalComponentConstructor<typeof Rating, VcRatingSlots> = Rating;

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,17 @@
 
 <script lang="ts" setup>
 import { VcIcon, VcLabel } from "./../../../components";
-import { VcRatingProps } from "./vc-rating-model";
 
-withDefaults(defineProps<VcRatingProps>(), { max: 5, variant: "stars" });
+export interface Props {
+  label?: string;
+  placeholder?: string;
+  tooltip?: string;
+  rating: number;
+  max?: number;
+  variant?: "stars" | "star-and-text" | "text";
+}
+
+withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
 </script>
 
 <style lang="scss">

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

@@ -1,8 +1,88 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSelectProps } from "./vc-select-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VNode } from "vue";
 import Select from "./vc-select.vue";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
 
-export const VcSelect: ComponentConstructor<
-  ComponentPublicInstance<VcSelectProps>
-> = Select;
+export type VcSelectSlots = {
+  /**
+   * Custom select control
+   */
+  control?: (scope: { toggleHandler: () => void }) => VNode[];
+  /**
+   * Prepend inner field
+   */
+  "prepend-inner"?: () => VNode[];
+  /**
+   * Append to inner field
+   */
+  "append-inner"?: () => VNode[];
+  /**
+   * Prepend outer field
+   */
+  prepend?: () => VNode[];
+  /**
+   * Append outer field
+   */
+  append?: () => VNode[];
+  /**
+   * What should the menu display after filtering options and none are left to be displayed
+   * @param scope
+   */
+  "no-option"?: () => VNode[];
+  /**
+   * Slot for errors
+   */
+  error?: () => VNode[];
+  /**
+   * Slot for hint text
+   */
+  hint?: () => VNode[];
+  /**
+   * Override default selection slot
+   * @param scope
+   */
+  "selected-item"?: (scope: {
+    /**
+     * Selection index
+     */
+    index: number;
+    /**
+     * Selected option -- its value is taken from model
+     */
+    opt: any;
+    /**
+     * Always true -- passed as prop
+     */
+    selected: boolean;
+    /**
+     * Remove selected option located at specific index
+     * @param index Index at which to remove selection
+     */
+    removeAtIndex: (index: number) => void;
+  }) => VNode[];
+  /**
+   * Override default selection slot;
+   */
+  option?: (scope: {
+    /**
+     * Option index
+     */
+    index: number;
+    /**
+     * Option -- its value is taken from 'options' prop
+     */
+    opt: any;
+    /**
+     * Is option selected?
+     */
+    selected: boolean;
+    /**
+     * Add/remove option from model
+     * @param opt Option to add to model
+     */
+    toggleOption: (opt: any) => void;
+  }) => VNode[];
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcSelect: GlobalComponentConstructor<typeof Select, VcSelectSlots> = Select;