@vc-shell/framework 1.0.119 → 1.0.121

package/shared/pages/InvitePage/components/invite/Invite.vue

@@ -93,7 +93,7 @@
           style="color: #f14e4e"
         >
           <!-- TODO: stylizing-->
-          {{ t(`INVITATION.ERRORS.${error}`) }}
+          {{ t(`INVITATION.ERRORS.${+error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -109,26 +109,24 @@ import { useI18n } from "vue-i18n";
 
 useForm({ validateOnMount: false });
 
-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 isFormValid = useIsFormValid();
 const isDirty = useIsFormDirty();
-const form = reactive({
+const form = reactive<{
+  isValid: boolean;
+  tokenIsValid: boolean;
+  errors: string[];
+  password: string;
+  confirmPassword: string;
+}>({
   isValid: false,
   tokenIsValid: false,
   errors: [],
@@ -150,7 +148,7 @@ onMounted(async () => {
 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.confirmPassword !== form.password) {
       form.errors.push("Repeat-password");
     }
@@ -165,10 +163,10 @@ const acceptInvitation = 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[];
   }
 };
 </script>

package/shared/pages/LoginPage/components/login/Login.vue

@@ -50,7 +50,7 @@
         </Field>
 
         <div
-          v-if="forgotPassword"
+          v-if="!!forgotPassword"
           class="tw-flex tw-justify-end tw-items-center tw-pt-2"
         >
           <VcButton
@@ -85,10 +85,10 @@
             v-for="external in loginProviders"
             :key="external.authenticationType"
             outline
-            @click="externalSignOn(external.authenticationType)"
+            @click="externalSignOn(external.authenticationType ?? '')"
             ><div class="tw-flex tw-flex-row tw-items-center">
               <img
-                :src="externalAuthIcon(external.authenticationType)"
+                :src="externalAuthIcon(external.authenticationType ?? '')"
                 :alt="external.authenticationType"
                 class="tw-h-5 tw-mr-2"
               />{{ external.displayName }}
@@ -239,11 +239,9 @@ const externalAuthIcon = (authenticationType: string) => {
 };
 
 const customization = computed(() => {
-  return (
-    !customizationLoading.value && {
-      logo: uiSettings.value?.logo || props.logo,
-    }
-  );
+  return {
+    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
+  };
 });
 
 const isDisabled = computed(() => {

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

@@ -10,6 +10,11 @@
       :required="required"
     >
       <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      >
     </VcLabel>
     <label class="vc-checkbox__label">
       <input
@@ -49,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;
@@ -57,6 +62,7 @@ export interface Props {
   trueValue?: boolean;
   falseValue?: boolean;
   label?: string;
+  tooltip?: string;
 }
 
 export interface Emits {
@@ -75,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;
 }