@vc-shell/framework 1.0.120 → 1.0.121

package/shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue

@@ -86,7 +86,7 @@
           class="tw-mt-3 !tw-text-[#f14e4e]"
         >
           <!-- TODO: stylizing-->
-          {{ t(`PASSWORDRESET.ERRORS.${error}`) }}
+          {{ t(`PASSWORDRESET.ERRORS.${+error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -100,26 +100,24 @@ import { Field, useForm } from "vee-validate";
 import { useUser } from "./../../../../../core/composables";
 import { useI18n } from "vue-i18n";
 
-const props = defineProps({
-  userId: {
-    type: String,
-    default: undefined,
-  },
-  userName: {
-    type: String,
-    default: undefined,
-  },
-  token: {
-    type: String,
-    default: undefined,
-  },
-});
+const props = defineProps<{
+  userId: string;
+  userName: string;
+  token: string;
+}>();
+
 const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
 const router = useRouter();
 const { t } = useI18n({ useScope: "global" });
 const { validate: veeValidate } = useForm({ validateOnMount: false });
 
-const form = reactive({
+const form = reactive<{
+  isValid: boolean;
+  tokenIsValid: boolean;
+  errors: string[];
+  password: string;
+  confirmPassword: string;
+}>({
   isValid: false,
   tokenIsValid: false,
   errors: [],
@@ -141,7 +139,7 @@ const disableButton = computed(() => {
 const validate = async () => {
   if (form.tokenIsValid) {
     const errors = (await validatePassword(form.password)).errors;
-    form.errors = errors.map((x) => x.code);
+    form.errors = errors?.map((x) => x.code) as string[];
     if (form.confirmPassword !== form.password) {
       form.errors.push("Repeat-password");
     }
@@ -158,10 +156,10 @@ const resetPassword = async () => {
       if (result.succeeded) {
         router.push("/");
       } else {
-        form.errors = [result.errorCode];
+        form.errors = [result.errorCode as string];
       }
     } else {
-      form.errors = result.errors;
+      form.errors = result.errors as string[];
     }
   }
 };

package/shared/utilities/assets.ts

@@ -15,17 +15,19 @@ function getExtension(fileName: string) {
   return fileName.split(".").pop()?.toLowerCase();
 }
 
-function isImage(name: string) {
-  return imageExtensions.has(getExtension(name));
+function isImage(name: string | undefined) {
+  if (!name) return false;
+  return imageExtensions.has(getExtension(name) ?? "");
 }
 
-function getFileThumbnail(name: string) {
+function getFileThumbnail(name: string | undefined) {
+  if (!name) return "fas fa-file";
   return (
     fileThumbnails.find((thumb) => thumb.extensions.some((ext) => ext === getExtension(name)))?.image || "fas fa-file"
   );
 }
 
-function readableSize(bytes: number, decimals = 2) {
+function readableSize(bytes: number | undefined, decimals = 2) {
   if (!bytes) return "0 Bytes";
 
   const k = 1024;

package/shared/utilities/vueUtils.ts

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
+
+type RemoveOnVnodePrefix<T> = {
+  [K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer Event}` ? Uncapitalize<Event> : K]: T[K];
+};
+
+type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;
+
+export type ComponentProps<T> = T extends new () => { $props: infer P }
+  ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any
+  ? P
+  : {};
+
+export type ComponentSlots<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; slots: infer Slots } }
+    ? NonNullable<Slots>
+    : {}
+  : T extends new () => { $slots: infer S }
+  ? NonNullable<S>
+  : {};
+
+export type ComponentEmit<T> = T extends (...args: any) => any
+  ? ReturnType<T> extends { [x: string]: any; __ctx?: { [x: string]: any; props: infer Props } }
+    ? EmitsExtractor<Props>
+    : {}
+  : T extends new () => { $props: infer Props }
+  ? EmitsExtractor<Props>
+  : never;
+
+export type ComponentPublicInstanceConstructor<
+  T extends ComponentPublicInstance<Props, RawBindings, D, C, M> = ComponentPublicInstance<any>,
+  Props = any,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions
+> = {
+  __isFragment?: never;
+  __isTeleport?: never;
+  __isSuspense?: never;
+  new (...args: any[]): T;
+};

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

@@ -54,7 +54,7 @@
 import { MaybeRef, computed, unref } from "vue";
 import { VcHint } from "./../vc-hint";
 export interface Props {
-  modelValue?: MaybeRef<boolean>;
+  modelValue: MaybeRef<boolean>;
   disabled?: boolean;
   required?: boolean;
   name?: string;
@@ -81,7 +81,7 @@ const value = computed({
   get() {
     return unref(props.modelValue);
   },
-  set(newValue: boolean) {
+  set(newValue) {
     emit("update:modelValue", newValue);
   },
 });

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

@@ -1,3 +1 @@
-import _StatusIcon from "./vc-status-icon.vue";
-
-export const VcStatusIcon = _StatusIcon as typeof _StatusIcon;
+export { default as VcStatusIcon } from "./vc-status-icon.vue";

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

@@ -15,17 +15,7 @@
       >
     </VcLabel>
 
-    <div
-      :class="[
-        `vc-video_auto`,
-        {
-          'tw-rounded-full tw-pb-[var(--video-padding-bottom-1x1)]': rounded,
-          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
-          'tw-cursor-pointer': clickable,
-        },
-        'tw-relative',
-      ]"
-    >
+    <div :class="[`vc-video_auto`, 'tw-relative']">
       <div v-if="source">
         <iframe
           :src="`${source}`"
@@ -56,9 +46,6 @@ import { VcIcon, VcLabel } from "./../../";
 export interface Props {
   label?: string;
   tooltip?: string;
-  rounded?: boolean;
-  bordered?: boolean;
-  clickable?: boolean;
   source?: string;
   size?: "auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 }

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

@@ -62,9 +62,7 @@ export interface Emits {
   (event: "update:modelValue", value: string | number | Date | null | undefined): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 const content = ref();

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

@@ -26,7 +26,7 @@
 
     <!-- Editor field -->
     <QuillEditor
-      :key="disabled.toString()"
+      :key="disabled?.toString()"
       v-model:content="content"
       class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
       :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
@@ -35,6 +35,7 @@
       :modules="modules"
       content-type="html"
       :read-only="disabled"
+      :placeholder="placeholder"
       @update:content="onInput"
     />
     <slot
@@ -47,12 +48,12 @@
     </slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { useUser } from "./../../../../core/composables";
-import { ref, unref, watch } from "vue";
+import { ref, unref, watch, onMounted } from "vue";
 import ImageUploader from "quill-image-uploader";
 import { VcLabel, VcHint } from "./../../";
 
@@ -75,10 +76,7 @@ export interface Emits {
 
 const { getAccessToken } = useUser();
 
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
-  disabled: false,
-});
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
@@ -131,6 +129,14 @@ const modules = {
   },
 };
 
+onMounted(() => {
+  // fixes quill editor placeholder visibility issue when content is not empty
+  const editor = document.querySelector(".ql-editor.ql-blank");
+  if (editor && content.value) {
+    editor.classList.remove("ql-blank");
+  }
+});
+
 watch(
   () => props.modelValue,
   (value) => {

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -1,9 +1,18 @@
 <template>
+  <!-- Normal -->
+  <template v-if="type === 'normal'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate tw-mt-1">
+      <div class="tw-truncate">
+        <p>{{ value }}</p>
+      </div>
+    </div>
+  </template>
+
   <!-- Text -->
   <template v-if="type === 'text'">
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-truncate">
-        <VcHint class="tw-text-s">{{ value }}</VcHint>
+        <VcHint class="!tw-text-s">{{ value }}</VcHint>
       </div>
     </div>
   </template>
@@ -12,7 +21,7 @@
   <template v-if="type === 'date'">
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-truncate">
-        <VcHint class="tw-text-s"> {{ value.toLocaleDateString() }}</VcHint>
+        <VcHint class="!tw-text-s"> {{ value.toLocaleDateString() }}</VcHint>
       </div>
     </div>
   </template>
@@ -21,7 +30,7 @@
   <template v-if="type === 'date-ago'">
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-truncate">
-        <VcHint class="tw-text-s"> {{ moment(value).fromNow() ?? "N/A" }}</VcHint>
+        <VcHint class="!tw-text-s"> {{ moment(value).fromNow() ?? "N/A" }}</VcHint>
       </div>
     </div>
   </template>
@@ -31,7 +40,7 @@
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-truncate">
         <VcLink
-          class="vc-link tw-text-s tw-truncate tw-w-full"
+          class="vc-link !tw-text-s tw-truncate tw-w-full"
           @click="onLinkClick"
           >{{ value }}</VcLink
         >
@@ -45,7 +54,7 @@
 import moment from "moment";
 
 export interface Props {
-  type: "text" | "date" | "date-ago" | "link";
+  type: "text" | "date" | "date-ago" | "link" | "normal";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
 }

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

@@ -43,7 +43,7 @@ export interface Props {
   /**
    * Field type
    */
-  type?: "text" | "date" | "date-ago" | "link";
+  type?: "text" | "normal" | "date" | "date-ago" | "link";
   /**
    * Field content
    */

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

@@ -284,11 +284,11 @@ defineSlots<{
     /**
      * Field is editable
      */
-    editable: boolean;
+    editable: boolean | undefined;
     /**
      * Field has focus
      */
-    focused: boolean;
+    focused: boolean | undefined;
     /**
      * Field's value
      */
@@ -371,13 +371,13 @@ function onInput(e: Event) {
   emitValue(newValue);
 }
 
-function emitValue(val: string) {
+function emitValue(val: string | number | Date | null) {
   emitValueFn = () => {
     if (mutatedModel.value !== val) {
       let value;
       if (internalType.value === "datetime-local" || internalType.value === "date") {
         value = moment(val).toDate();
-      } else if (internalType.value === "number") {
+      } else if (internalType.value === "number" && val !== null) {
         value = +val;
       } else {
         value = val;

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

@@ -55,10 +55,9 @@
 
 <script lang="ts" setup>
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
-import { MaybeRef, unref, watch } from "vue";
+import { unref, watch } from "vue";
 import { VcSelect, VcInput } from "./../../";
-
-export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
+import { OptionProp } from "../vc-select/vc-select.vue";
 
 export interface Props {
   /**
@@ -147,14 +146,14 @@ export interface Props {
    * @param option The current option being processed
    * @returns Value of the current option
    */
-  optionValue?: OptionProp;
+  optionValue?: OptionProp<unknown>;
   /**
    * 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?: OptionProp<unknown>;
 }
 
 export interface Emits {
@@ -183,12 +182,13 @@ const { inputRef, setOptions, numberValue } = useCurrencyInput(
 watch(
   () => props.option,
   (newVal) => {
-    setOptions({
-      locale: navigator.language,
-      currency: newVal,
-      currencyDisplay: CurrencyDisplay.hidden,
-      hideGroupingSeparatorOnFocus: false,
-    });
+    if (newVal)
+      setOptions({
+        locale: navigator.language,
+        currency: newVal,
+        currencyDisplay: CurrencyDisplay.hidden,
+        hideGroupingSeparatorOnFocus: false,
+      });
   }
 );
 

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

@@ -285,7 +285,7 @@ function closeDropdown() {
   emit("close");
 }
 
-function onSearch(event: InputEvent) {
+function onSearch(event: Event) {
   emit("search", (event.target as HTMLInputElement).value);
 }
 </script>

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

@@ -1,3 +1 @@
-import _Notification from "./vc-notification.vue";
-
-export const VcNotification = _Notification as typeof _Notification;
+export { default as VcNotification } from "./vc-notification.vue";

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

@@ -7,8 +7,8 @@
     @mouseleave="onMouseLeave"
   >
     <VcIcon
-      :icon="types[type]?.icon"
-      :style="{ color: types[type]?.color }"
+      :icon="types[type ?? 'default']?.icon"
+      :style="{ color: types[type ?? 'default']?.color }"
       size="l"
       class="tw-mr-2"
     ></VcIcon>
@@ -27,7 +27,7 @@
 <script lang="ts" setup>
 import { NotificationType } from "./../../../../shared/components/notifications";
 import { VcIcon } from "./../../";
-import { onMounted, ref, toRefs, watch } from "vue";
+import { Ref, onMounted, ref, toRefs, watch } from "vue";
 
 export interface Props {
   content?: string;
@@ -42,7 +42,7 @@ export interface Props {
 
 const props = defineProps<Props>();
 
-const types = {
+const types: Record<NotificationType, { icon: string; color: string }> = {
   default: { icon: "fas fa-info-circle", color: "var(--notification-info)" },
   success: { icon: "fas fa-check-circle", color: "var(--notification-success)" },
   error: { icon: "fas fa-exclamation-circle", color: "var(--notification-error)" },
@@ -53,11 +53,11 @@ const { timeout } = toRefs(props);
 const timer = ref();
 
 watch(
-  timeout,
+  timeout as Ref<number | boolean>,
   (newVal) => {
     if (newVal) {
       timer.value = Timer(() => {
-        props.closeNotification();
+        props.closeNotification?.();
       }, props.timeout as number);
 
       timer.value.start();

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

@@ -257,8 +257,8 @@
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup generic="T, P extends {results?: T[]; totalCount?: number }">
-import { ref, computed, watch, nextTick, Ref, toRefs, MaybeRef, unref } from "vue";
+<script lang="ts" setup generic="T, P extends {results: T[]; totalCount: number }">
+import { ref, computed, watch, nextTick, Ref, toRefs } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
@@ -485,7 +485,9 @@ const emit = defineEmits<{
    */
 
   "update:modelValue": [
-    inputValue: MaybeArray<string | Option | (T & P["results"][number] & object)[keyof T | keyof P["results"][number]]>
+    inputValue: MaybeArray<
+      string | Option | (T & P["results"][number] & object)[keyof T | keyof P["results"][number]]
+    > | null
   ];
   /**
    * Emitted when user wants to filter a value
@@ -710,7 +712,7 @@ function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Op
 
   return typeof val === "function"
     ? val
-    : (opt: Option) => (opt !== null && typeof opt === "object" && val in opt ? opt[val as keyof Option] : opt);
+    : (opt: Option) => (opt !== null && typeof opt === "object" && val && val in opt ? opt[val as keyof Option] : opt);
 }
 
 function getOption(value: Option, valueCache: Option[]) {

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

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Textarea from "./vc-textarea.vue";
-
-export const VcTextarea = _Textarea as typeof _Textarea & {
-  new (): {
-    $slots: {
-      error: () => VNode[];
-    };
-  };
-};
+export { default as VcTextarea } from "./vc-textarea.vue";

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

@@ -65,9 +65,14 @@ export interface Props {
 }
 
 export interface Emits {
-  (event: "update:modelValue", value: string): void;
+  (event: "update:modelValue", value: string | undefined): void;
 }
 
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: (props: any) => any;
+}>();
+
 const props = withDefaults(defineProps<Props>(), {
   name: "Field",
   maxchars: "1024",

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -113,7 +113,6 @@ export interface Props {
 export interface Emits {
   (event: "logo:click"): void;
   (event: "backlink:click"): void;
-  (event: "toolbarbutton:click"): void;
   (event: "menubutton:click"): void;
   (event: "button:click", item: IBladeToolbar): void;
 }

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -2,8 +2,8 @@
   <div
     class="vc-app-menu-item"
     :class="[
-      { 'vc-app-menu-item_active': isActive && !children.length },
-      { 'vc-app-menu-item_no-hover': children.length },
+      { 'vc-app-menu-item_active': isActive && !children?.length },
+      { 'vc-app-menu-item_no-hover': children?.length },
     ]"
     @click="$emit('onClick')"
   >
@@ -28,7 +28,7 @@
     <div class="vc-app-menu-item__title">
       {{ title }}
       <VcIcon
-        v-if="children.length"
+        v-if="children?.length"
         class="vc-app-menu-item__title-icon"
         icon="fas fa-chevron-down"
         size="xs"

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -10,8 +10,8 @@
           :is-active="isExactActive"
           :children="children"
           :sticky="sticky"
-          :icon="icon"
-          :title="title"
+          :icon="icon ?? ''"
+          :title="title ?? ''"
           @on-click="onMenuItemClick"
         />
       </router-link>
@@ -20,8 +20,8 @@
       <vc-app-menu-link
         :children="children"
         :sticky="sticky"
-        :icon="icon"
-        :title="title"
+        :icon="icon ?? ''"
+        :title="title ?? ''"
         @on-click="onMenuItemClick"
       />
 
@@ -36,7 +36,7 @@
         >
           <router-link
             v-slot="{ isActive }"
-            :to="nested.component.url"
+            :to="(nested.component?.url as string)"
             custom
           >
             <div
@@ -64,12 +64,12 @@ import { onMounted, ref } from "vue";
 import { BladeMenu } from "./../../../../../../../../core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
 import { useRoute } from "vue-router";
-import { BladeConstructor } from "./../../../../../../../../shared";
+import { BladeInstanceConstructor } from "./../../../../../../../../shared";
 
 export interface Props {
   sticky?: boolean;
   isVisible?: boolean;
-  component?: BladeConstructor;
+  component?: BladeInstanceConstructor;
   icon?: string;
   title?: string;
   children?: BladeMenu[];

package/ui/components/organisms/vc-app/vc-app.vue

@@ -17,7 +17,6 @@
       :blades="bladesRefs"
       :buttons="toolbarItems"
       :title="title"
-      @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
       @logo:click="$emit('logo:click')"
@@ -61,16 +60,16 @@ import { getCurrentInstance, markRaw } from "vue";
 import { BladeMenu, IBladeToolbar } from "../../../../core/types";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { BladePageComponent, IBladeRef, useBladeNavigation } from "./../../../../shared";
+import { BladeInstanceConstructor, IBladeRef, useBladeNavigation } from "./../../../../shared";
 
 export interface Props {
-  pages?: BladePageComponent[];
+  pages?: BladeInstanceConstructor[];
   menuItems?: BladeMenu[];
   mobileMenuItems?: IBladeToolbar[];
   toolbarItems?: IBladeToolbar[];
   isReady?: boolean;
   isAuthorized?: boolean;
-  logo?: string;
+  logo: string;
   version?: string;
   theme?: "light" | "dark";
   bladesRefs?: IBladeRef[];
@@ -109,25 +108,18 @@ const onMenuItemClick = function ({ item }: { item: BladeMenu }) {
   if (item.clickHandler && typeof item.clickHandler === "function") {
     item.clickHandler(instance?.exposed);
   } else {
-    openBlade(
-      {
-        blade: markRaw(item.component),
-      },
-      true
-    );
-  }
-};
-
-const onToolbarButtonClick = function (item: Record<string, unknown>) {
-  console.debug(`vc-app#onToolbarButtonClick() called.`);
-
-  if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler(instance?.proxy);
+    if (item.component) {
+      openBlade(
+        {
+          blade: markRaw(item.component),
+        },
+        true
+      );
+    }
   }
 };
 
 defineExpose({
-  onToolbarButtonClick,
   onMenuItemClick,
 });
 </script>