@vc-shell/framework 1.0.69 → 1.0.71

package/shared/components/change-password/change-password.vue

@@ -0,0 +1,167 @@
+<template>
+  <VcPopup
+    variant="small"
+    :title="$t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
+    @close="$emit('close')"
+  >
+    <div class="tw-p-3">
+      <VcForm>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+          name="current"
+          rules="required|min:6"
+          :model-value="form.currentPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="passwordField"
+            v-model="form.currentPassword"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CURRENT_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+          name="new_pass"
+          rules="required|min:6"
+          :model-value="form.password"
+        >
+          <VcInput
+            v-bind="field"
+            ref="newPasswordField"
+            v-model="form.password"
+            class="tw-mb-4 tw-mt-1"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.NEW_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <Field
+          v-slot="{ field, errorMessage, errors }"
+          :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+          name="confirm_pass"
+          rules="required|min:6"
+          :model-value="form.confirmPassword"
+        >
+          <VcInput
+            v-bind="field"
+            ref="confirmPasswordField"
+            v-model="form.confirmPassword"
+            class="tw-mb-4"
+            :label="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="$t('COMPONENTS.CHANGE_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="validate"
+          ></VcInput>
+        </Field>
+        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+          <span
+            v-if="$isDesktop.value"
+            class="tw-grow tw-basis-0"
+          ></span>
+          <VcButton
+            :outline="true"
+            class="tw-mr-3"
+            @click="$emit('close')"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.CANCEL") }}
+          </VcButton>
+          <VcButton
+            :disabled="loading || !form.isValid || isDisabled"
+            @click="changePassword"
+          >
+            {{ $t("COMPONENTS.CHANGE_PASSWORD.SAVE") }}
+          </VcButton>
+        </div>
+
+        <VcHint
+          v-for="(err, i) in form.errors"
+          :key="i"
+          class="tw-mt-3 !tw-text-[#f14e4e]"
+        >
+          <!-- TODO: stylizing-->
+          {{
+            (err as IIdentityError).code ? $t(`COMPONENTS.CHANGE_PASSWORD.ERRORS.${(err as IIdentityError).code}`) : err
+          }}
+        </VcHint>
+      </VcForm>
+    </div>
+  </VcPopup>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, reactive, computed } from "vue";
+import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
+import { VcInput, VcHint, VcButton, VcPopup, VcForm } from "./../../../ui/components";
+import { IIdentityError } from "./../../../core/api";
+import { useUser } from "./../../../core/composables/useUser";
+
+interface IChangePassForm {
+  isValid: boolean;
+  errors: IIdentityError[] | string[];
+  currentPassword: string;
+  password: string;
+  confirmPassword: string;
+}
+
+interface Emits {
+  (event: "close"): void;
+}
+
+const emit = defineEmits<Emits>();
+const { changeUserPassword, loading, validatePassword } = useUser();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
+const form = reactive<IChangePassForm>({
+  isValid: false,
+  errors: [],
+  currentPassword: "",
+  password: "",
+  confirmPassword: "",
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+async function changePassword() {
+  const result = await changeUserPassword(form.currentPassword, form.password);
+  if (result.succeeded) {
+    emit("close");
+  } else {
+    form.errors = result.errors;
+    form.isValid = form.errors.length == 0;
+  }
+}
+
+function validate() {
+  nextTick(async () => {
+    if (form.password || form.confirmPassword) {
+      form.errors = (await validatePassword(form.password)).errors;
+      if (form.confirmPassword !== form.password) {
+        (form.errors as IIdentityError[]).push({ code: "Repeat-password" });
+      }
+      if (form.confirmPassword === form.currentPassword && form.password === form.currentPassword) {
+        (form.errors as IIdentityError[]).push({ code: "Equal-passwords" });
+      }
+      form.isValid = form.errors.length == 0;
+    }
+  });
+}
+</script>

package/shared/components/change-password/index.ts

@@ -0,0 +1,10 @@
+import _ChangePassword from "./change-password.vue";
+
+export const ChangePassword = _ChangePassword as typeof _ChangePassword;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    ChangePassword: typeof ChangePassword;
+  }
+}

package/{core/plugins → shared/components}/error-interceptor/interceptor.ts

@@ -1,4 +1,4 @@
-import { useErrorHandler } from "./../../composables";
+import { useErrorHandler } from "./../../../core/composables";
 import { SetupContext, defineComponent, VNode } from "vue";
 
 export interface Props {

package/shared/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./app-switcher";
+export * from "./blade-navigation";
+export * from "./notifications";
+export * from "./error-interceptor";
+export * from "./popup-handler";
+export * from "./change-password";
+export * from "./language-selector";
+export * from "./user-dropdown-button";

package/shared/components/language-selector/index.ts

@@ -0,0 +1,10 @@
+import _LanguageSelector from "./language-selector.vue";
+
+export const LanguageSelector = _LanguageSelector as typeof _LanguageSelector;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    LanguageSelector: typeof LanguageSelector;
+  }
+}

package/shared/components/language-selector/language-selector.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    v-on-click-outside="
+      () => {
+        isDropActive = false;
+      }
+    "
+    class="tw-relative"
+    :title="title"
+    @click.stop="isDropActive = !isDropActive"
+  >
+    <div
+      :class="[
+        {
+          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10000]':
+            isDropActive,
+        },
+        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
+      ]"
+    >
+      <VcIcon
+        icon="fas fa-globe"
+        size="xl"
+      ></VcIcon>
+    </div>
+    <div
+      v-if="isDropActive"
+      class="tw-absolute tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] tw-w-min tw-z-[10000]"
+    >
+      <div
+        v-for="(lang, i) in languageItems"
+        :key="i"
+        class="tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-white tw-cursor-pointer hover:tw-bg-[#eff7fc]"
+        @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+      >
+        {{ lang.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "./../../../ui/components";
+import { ref } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+export interface Props {
+  title: string;
+  value: string;
+  languageItems: { lang: string; title: string; clickHandler: (lang: string) => void }[];
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  value: "",
+  languageItems: () => [],
+});
+
+const isDropActive = ref(false);
+</script>

package/shared/components/notifications/composables/useContainer/index.ts

@@ -114,7 +114,7 @@ export function useContainer(): IUseContainer {
         nextTick(() => {
           notificationContainer.value?.push(options);
           if (options.onOpen && typeof options?.onOpen === "function") {
-            options.onOpen(options.payload ?? {});
+            options.onOpen(options.payload);
           }
         });
       }
@@ -136,7 +136,7 @@ export function useContainer(): IUseContainer {
 
           nextTick(() => {
             if (notification?.onClose && typeof notification?.onClose === "function") {
-              notification.onClose(notification.payload ?? {});
+              notification.onClose(notification.payload);
               notification = undefined;
             }
           });

package/shared/components/notifications/core/notification.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from "vue";
-import { NotificationOptions } from "../types";
+import { InternalNotificationOptions, NotificationOptions } from "../types";
 import { useContainer } from "../composables";
 
 const {
@@ -18,7 +18,7 @@ function checkPending(limit?: number) {
   return limitCount > 0 && visibleCount + pending.items.length >= limitCount;
 }
 
-function resolvePending(options) {
+function resolvePending(options: InternalNotificationOptions) {
   if (checkPending(options.limit)) {
     pending.items.push({
       notificationId: options.notificationId,
@@ -27,7 +27,7 @@ function resolvePending(options) {
   }
 }
 
-function showNotification(content: string, options: NotificationOptions) {
+function showNotification(content: string, options: InternalNotificationOptions) {
   options = mergeProps(defaultOptions as Record<string, unknown>, options as Record<string, unknown>);
 
   if (

package/shared/components/notifications/index.ts

@@ -1,16 +1,5 @@
-import * as components from "./components";
-import { createModule } from "../../../core/plugins";
 import "./styles/index.scss";
 
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    VcNotificationContainer: (typeof components)["NotificationContainer"];
-  }
-}
-
-export const VcNotificationComponent = createModule(components);
-
 export * from "./components";
 export * from "./composables";
 export * from "./types";

package/shared/components/notifications/types/index.ts

@@ -7,10 +7,13 @@ export interface NotificationOptions {
   content?: string;
   notificationId?: number | string;
   type?: NotificationType;
-  closeNotification?(): void;
   onOpen?: <T>(payload: T) => void;
   onClose?: <T>(payload: T) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload?: string | Record<string, any>;
   updateId?: string | number;
 }
+
+export interface InternalNotificationOptions extends NotificationOptions {
+  closeNotification?(): void;
+}

package/shared/components/popup-handler/components/index.ts

@@ -0,0 +1 @@
+export * from "./vc-popup-container";

package/shared/components/popup-handler/components/vc-popup-container/index.ts

@@ -0,0 +1,3 @@
+import _PopupContainer from "./vc-popup-container.vue";
+
+export const VcPopupContainer = _PopupContainer as typeof _PopupContainer;

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="popup.component"
+    v-for="popup in popupPlugin.popups"
+    :key="popup.id"
+    v-bind="{ ...popup.props, ...popup.emits }"
+    @close="() => popup.close()"
+  >
+    <template
+      v-for="(slot, key) in popup.slots"
+      :key="key"
+    >
+      <div v-if="typeof slot === 'string'">{{ slot }}</div>
+      <component
+        :is="slot"
+        v-else
+      ></component>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { getPopupPlugin } from "./../../utils";
+const popupPlugin = getPopupPlugin();
+</script>

package/shared/components/popup-handler/composables/index.ts

@@ -0,0 +1 @@
+export { usePopup } from "./usePopup";

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -0,0 +1,129 @@
+import { VcPopup } from "./../../../../../ui/components";
+import { markRaw, getCurrentInstance, inject, reactive, shallowRef, nextTick, Ref } from "vue";
+import { UsePopupInternal, UsePopupProps } from "./../../types";
+import { popupPluginInstance } from "./../../plugin";
+import { useI18n } from "vue-i18n";
+
+interface IUsePopup {
+  open(): void;
+  close(): void;
+  showConfirmation(message: string | Ref<string>): Promise<boolean>;
+  showError(message: string | Ref<string>): void;
+}
+
+export function usePopup<T = InstanceType<typeof VcPopup>["$props"]>(props?: UsePopupProps<T>): IUsePopup {
+  const { t } = useI18n({ useScope: "global" });
+  const instance = getCurrentInstance();
+  const popupInstance = (instance && inject("popupPlugin")) || popupPluginInstance;
+  const rawPopup = createInstance(props);
+
+  async function open(customInstance?: UsePopupProps<unknown>) {
+    let activeInstance;
+    await nextTick();
+    if (popupInstance) {
+      activeInstance = popupInstance;
+    }
+
+    activeInstance.popups.push(rawPopup || customInstance);
+  }
+
+  function close(customInstance?: UsePopupProps<unknown>) {
+    let activeInstance;
+    if (popupInstance) {
+      activeInstance = popupInstance;
+    }
+    const index = activeInstance.popups.indexOf(rawPopup || customInstance);
+    if (index !== -1) activeInstance.popups.splice(index, 1);
+  }
+
+  async function showConfirmation(message: string | Ref<string>): Promise<boolean> {
+    let resolvePromise;
+    const confirmation = createInstance({
+      component: VcPopup,
+      props: {
+        type: "warning",
+        variant: "small",
+        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION"),
+      },
+      emits: {
+        onClose() {
+          resolvePromise(false);
+          close(confirmation);
+        },
+        onConfirm() {
+          resolvePromise(true);
+          close(confirmation);
+        },
+      },
+      slots: {
+        default: message,
+      },
+    });
+
+    popupInstance.popups.push(confirmation);
+
+    return new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+  }
+
+  function showError(message: string | Ref<string>) {
+    const confirmation = createInstance({
+      component: VcPopup,
+      props: {
+        type: "error",
+        variant: "small",
+        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"),
+      },
+      emits: {
+        onClose() {
+          close(confirmation);
+        },
+      },
+      slots: {
+        default: message,
+      },
+    });
+
+    popupInstance.popups.push(confirmation);
+  }
+
+  function createInstance<T>(props: UsePopupProps<T>) {
+    return (
+      props &&
+      (reactive({
+        id: Symbol("usePopup"),
+        ...createComponent(props),
+        close: close,
+        open: open,
+      }) as UsePopupProps<unknown> & UsePopupInternal)
+    );
+  }
+
+  return {
+    open,
+    close,
+    showConfirmation,
+    showError,
+  };
+}
+
+function createComponent<T>(props: UsePopupProps<T>) {
+  const slots =
+    typeof props.slots === "undefined"
+      ? {}
+      : Object.fromEntries(
+          Object.entries(props.slots).map(([slotName, slotContent]) => {
+            if (typeof slotContent === "string") {
+              return [slotName, slotContent];
+            }
+            return [slotName, markRaw(slotContent)];
+          })
+        );
+
+  return {
+    ...props,
+    slots,
+    component: markRaw(shallowRef(props.component)),
+  };
+}

package/shared/components/popup-handler/index.ts

@@ -0,0 +1,19 @@
+import * as components from "./components";
+import { PopupPlugin } from "./types";
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    VcPopupContainer: (typeof components)["VcPopupContainer"];
+  }
+
+  export interface ComponentCustomProperties {
+    $popupPlugin: PopupPlugin;
+  }
+}
+
+export * from "./plugin";
+export * from "./components";
+export * from "./composables";
+export * from "./types";
+export * from "./utils";

package/shared/components/popup-handler/plugin.ts

@@ -0,0 +1,24 @@
+import { App, shallowReactive } from "vue";
+import * as components from "./components";
+import { PopupPlugin, UsePopupProps, UsePopupInternal } from "./types";
+import { createModule } from "./../../../core/plugins";
+
+export let popupPluginInstance;
+
+export const VcPopupHandler = {
+  install(app: App) {
+    // Register components
+    createModule(components).install(app);
+
+    // Plugin
+    const popups = shallowReactive<(UsePopupProps<unknown> & UsePopupInternal)[]>([]);
+
+    const popupPlugin: PopupPlugin = {
+      popups,
+    };
+
+    app.config.globalProperties.$popupPlugin = popupPlugin;
+    app.provide("popupPlugin", popupPlugin);
+    popupPluginInstance = popupPlugin;
+  },
+};

package/shared/components/popup-handler/types/index.ts

@@ -0,0 +1,28 @@
+import { Component, Slot as VueSlot } from "vue";
+
+export type RawProps<T> = Omit<T, `on${string}`>;
+export type RawEmits<T> = Pick<T, Extract<keyof T, `on${string}`>>;
+export type Slot = string | Component | VueSlot;
+
+export interface UsePopupInternal {
+  id: symbol;
+  open: () => void;
+  close: () => void;
+}
+
+export interface PopupPlugin {
+  popups: (UsePopupProps<unknown> & UsePopupInternal)[];
+}
+
+export interface ComponentPublicInstanceConstructor<T = unknown> {
+  new (...args: unknown[]): { $props: T };
+}
+
+export interface UsePopupProps<T> {
+  component: ComponentPublicInstanceConstructor<T>;
+  emits?: RawEmits<T>;
+  props?: RawProps<T>;
+  slots?: {
+    [key: string]: Slot;
+  };
+}

package/shared/components/popup-handler/utils/index.ts

@@ -0,0 +1,9 @@
+import { getCurrentInstance, inject } from "vue";
+import { PopupPlugin } from "../types";
+
+export function getPopupPlugin() {
+  const instance = getCurrentInstance();
+  if (instance) {
+    return inject<PopupPlugin>("popupPlugin");
+  }
+}

package/shared/components/user-dropdown-button/index.ts

@@ -0,0 +1,10 @@
+import _UserDropdownButton from "./user-dropdown-button.vue";
+
+export const UserDropdownButton = _UserDropdownButton as typeof _UserDropdownButton;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    UserDropdownButton: typeof UserDropdownButton;
+  }
+}