@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

package/shared/modules/dynamic/types/models.ts

@@ -1,186 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Raw } from "vue";
-import { VcButton } from "@ui/components/atoms/vc-button";
-import { VcCard } from "@ui/components/atoms/vc-card";
-import { VcCheckbox } from "@ui/components/molecules/vc-checkbox";
-import { VcDynamicProperty } from "@ui/components/organisms/vc-dynamic-property";
-import { VcEditor } from "@ui/components/molecules/vc-editor";
-import { VcField } from "@ui/components/molecules/vc-field";
-import { VcGallery } from "@ui/components/organisms/vc-gallery";
-import { VcImage } from "@ui/components/atoms/vc-image";
-import { VcInput } from "@ui/components/molecules/vc-input";
-import { VcInputCurrency } from "@ui/components/molecules/vc-input-currency";
-import { VcSelect } from "@ui/components/molecules/vc-select";
-import { VcStatus } from "@ui/components/atoms/vc-status";
-import { VcVideo } from "@ui/components/atoms/vc-video";
-import { VcTextarea } from "@ui/components/molecules/vc-textarea";
-import { VcMultivalue } from "@ui/components/molecules/vc-multivalue";
-import { VcSwitch } from "@ui/components/molecules/vc-switch";
-import { VcTable } from "@ui/components/organisms/vc-table";
-import { VcRating } from "@ui/components/molecules/vc-rating";
-import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
-import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
-
-type FromGenericEventsToProps<T extends Record<string, any>> =
-  T extends Record<string, any>
-    ? {
-        [K in string & `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
-          ? (...args: T[Uncapitalize<C>]) => any
-          : never;
-      }
-    : never;
-
-interface FieldOpts<T> {
-  component?: ComponentType<T>;
-  id?: string | number;
-  props?: Record<string, any>;
-}
-
-export type ComponentType<T> = Raw<T>;
-
-export type FormFields = {
-  [key: string]: ControlType & IFieldset;
-};
-
-export type ControlType =
-  | ISelectField
-  | IInputField
-  | ICardCollection
-  | IEditorField
-  | IGallery
-  | IDynamicProperties
-  | ICheckbox
-  | IButton
-  | IInputCurrency
-  | IStatusField
-  | IContentField
-  | IImageField
-  | ITextareaField
-  | IVideoField
-  | IMultivalueField;
-
-export type ControlTypeWithSlots = Extract<
-  ControlType,
-  ISelectField | ICardCollection | ICheckbox | IButton | IStatusField
->;
-export type ControlTypeCtr = Extract<ControlType, ISelectField | IInputField | IInputCurrency | IEditorField>;
-
-/** @deprecated Legacy dynamic module interface. New components should use IFormFieldProps / ITextFieldProps from @ui/types/form-field. */
-export interface IControlBaseProps {
-  key?: string | number | symbol;
-  rules?: Record<string, unknown>;
-  label?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  name?: string;
-  modelValue?: any;
-  tooltip?: string;
-  "onUpdate:modelValue"?: (event: any) => void;
-  multilanguage?: boolean;
-  classNames?: string;
-}
-
-export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
-  [Property in Key]-?: Type[Property];
-};
-
-export type IMultivalueField = {
-  props: ComponentProps<typeof VcMultivalue> | IControlBaseProps;
-  slots?: Partial<ComponentSlots<typeof VcMultivalue>>;
-} & FieldOpts<typeof VcMultivalue>;
-
-export type ISelectField = {
-  props: ComponentProps<typeof VcSelect> | IControlBaseProps;
-  slots?: Partial<ComponentSlots<typeof VcSelect>>;
-} & FieldOpts<typeof VcSelect>;
-
-export type IStatusField = {
-  props: ComponentProps<typeof VcStatus>;
-  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
-} & FieldOpts<typeof VcStatus>;
-
-export type IInputField = {
-  props: ComponentProps<typeof VcInput> | IControlBaseProps;
-
-  slots?: Partial<Pick<ComponentSlots<typeof VcInput>, "append" | "prepend" | "append-inner" | "prepend-inner">>;
-} & FieldOpts<typeof VcInput>;
-
-export type IContentField = {
-  props: ComponentProps<typeof VcField> | IControlBaseProps;
-} & FieldOpts<typeof VcField>;
-
-export type IVideoField = {
-  props: ComponentProps<typeof VcVideo> | IControlBaseProps;
-} & FieldOpts<typeof VcVideo>;
-
-export type IImageField = {
-  props: ComponentProps<typeof VcImage> | IControlBaseProps;
-} & FieldOpts<typeof VcImage>;
-
-export type IInputCurrency = {
-  props: Partial<ComponentProps<typeof VcInputCurrency>> | IControlBaseProps;
-} & FieldOpts<typeof VcInputCurrency>;
-
-export type ICardCollection = {
-  props: ComponentProps<typeof VcCard> | IControlBaseProps;
-
-  slots?: Partial<Pick<ComponentSlots<typeof VcCard>, "default" | "actions">>;
-} & FieldOpts<typeof VcCard>;
-
-export type ICheckbox = {
-  props: ComponentProps<typeof VcCheckbox> | IControlBaseProps;
-
-  slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
-} & FieldOpts<typeof VcCheckbox>;
-
-export type IRadioButton = {
-  props: ComponentProps<typeof VcRadioButton> | IControlBaseProps;
-} & FieldOpts<typeof VcRadioButton>;
-
-export type IDynamicProperties = {
-  props:
-    | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
-    | (ComponentProps<typeof VcDynamicProperty> &
-        Omit<IControlBaseProps, keyof ComponentProps<typeof VcDynamicProperty> | "onUpdate:modelValue" | "rules">);
-} & FieldOpts<typeof VcDynamicProperty>;
-
-export type IEditorField = {
-  props: ComponentProps<typeof VcEditor> | IControlBaseProps;
-} & FieldOpts<typeof VcEditor>;
-
-export type IGallery = {
-  props: (ComponentProps<typeof VcGallery> & { rules: Record<string, unknown> }) | IControlBaseProps;
-} & FieldOpts<typeof VcGallery>;
-
-export type IButton = {
-  props: ComponentProps<typeof VcButton>;
-
-  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
-} & FieldOpts<typeof VcButton>;
-
-export type IFieldset = {
-  columns?: number;
-  property?: string;
-  remove?: { method?: string };
-  fields?: ControlType[];
-};
-
-export type ITextareaField = {
-  props: ComponentProps<typeof VcTextarea> | IControlBaseProps;
-} & FieldOpts<typeof VcTextarea>;
-
-export type ISwitch = {
-  props: ComponentProps<typeof VcSwitch> | IControlBaseProps;
-} & FieldOpts<typeof VcSwitch>;
-
-export type ITable = {
-  props: ComponentProps<typeof VcTable> | IControlBaseProps;
-  slots: Partial<
-    Pick<ComponentSlots<typeof VcTable>, `item_${string}` | "notfound" | "mobile-item" | "empty" | "footer">
-  >;
-} & FieldOpts<typeof VcTable>;
-
-export type IRating = {
-  props: ComponentProps<typeof VcRating> | IControlBaseProps;
-} & FieldOpts<typeof VcRating>;

package/shared/modules/index.ts

@@ -1,3 +0,0 @@
-export * from "@shared/modules/assets";
-export * from "@shared/modules/assets-manager";
-export * from "@shared/modules/dynamic";

package/shared/pages/ChangePasswordPage/components/change-password/ChangePassword.vue

@@ -1,209 +0,0 @@
-<template>
-  <VcAuthLayout
-    :logo="customization.logo"
-    :background="background"
-    :title="forced ? t('COMPONENTS.CHANGE_PASSWORD.TITLE_FORCED') : t('COMPONENTS.CHANGE_PASSWORD.TITLE')"
-    :subtitle="forced ? t('COMPONENTS.CHANGE_PASSWORD.SUBTITLE_FORCED') : undefined"
-  >
-    <div
-      v-if="forced"
-      class="tw-mb-4"
-    >
-      <vc-status
-        extend
-        :outline="false"
-        variant="info-dark"
-      >
-        <div class="tw-flex tw-flex-row tw-items-center tw-text-neutrals-800">
-          <VcIcon
-            icon="material-lightbulb"
-            size="l"
-            class="tw-mr-3"
-          />
-          <div>
-            <p class="tw-m-0">{{ t("COMPONENTS.CHANGE_PASSWORD.FORCED.LABEL") }}</p>
-          </div>
-        </div>
-      </vc-status>
-    </div>
-
-    <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"
-          :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="validateForm"
-        />
-      </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"
-          :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="validateForm"
-        />
-      </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-6"
-          :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="validateForm"
-        />
-      </Field>
-
-      <div class="tw-flex tw-gap-3">
-        <VcButton
-          variant="secondary"
-          class="tw-flex-1"
-          @click="cancelChange"
-        >
-          {{ t("COMPONENTS.CHANGE_PASSWORD.CANCEL") }}
-        </VcButton>
-        <VcButton
-          variant="primary"
-          class="tw-flex-1"
-          :disabled="loading || !form.isValid || isDisabled"
-          :loading="loading"
-          @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-danger-500"
-      >
-        {{
-          (err as IIdentityError).code
-            ? t(`COMPONENTS.CHANGE_PASSWORD.ERRORS.${(err as IIdentityError).code}`)
-            : err
-        }}
-      </VcHint>
-    </VcForm>
-  </VcAuthLayout>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, reactive, computed } from "vue";
-import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
-import { IIdentityError } from "@core/api/platform";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { useSettings } from "@core/composables";
-import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
-
-interface IChangePassForm {
-  isValid: boolean;
-  errors: IIdentityError[] | string[];
-  currentPassword: string;
-  password: string;
-  confirmPassword: string;
-}
-
-export interface Props {
-  forced?: boolean;
-  logo?: string;
-  background?: string;
-}
-
-const props = defineProps<Props>();
-
-const { t } = useI18n({ useScope: "global" });
-const { changeUserPassword, loading, validatePassword, signOut } = useUserManagement();
-const { uiSettings, loading: customizationLoading } = useSettings();
-
-const customization = computed(() => ({
-  logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
-}));
-useForm({ validateOnMount: false });
-const isValid = useIsFormValid();
-const isDirty = useIsFormDirty();
-const router = useRouter();
-
-const form = reactive<IChangePassForm>({
-  isValid: false,
-  errors: [],
-  currentPassword: "",
-  password: "",
-  confirmPassword: "",
-});
-
-const isDisabled = computed(() => {
-  return !isDirty.value || !isValid.value;
-});
-
-async function cancelChange() {
-  await signOut();
-  await router.push("/login");
-}
-
-async function changePassword() {
-  const result = await changeUserPassword(form.currentPassword, form.password);
-  if (result?.succeeded) {
-    await router.push("/");
-  } else if (result?.errors) {
-    form.errors = result?.errors;
-    form.isValid = form.errors.length == 0;
-  }
-}
-
-function validateForm() {
-  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/pages/ChangePasswordPage/components/change-password/change-password.stories.ts

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import ChangePassword from "./ChangePassword.vue";
-import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
-
-const meta = {
-  title: "Shared/Pages/ChangePassword",
-  component: ChangePassword,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        mockPlatformApiFetch();
-        patchUserManagement();
-      },
-      template: "<story />",
-    }),
-  ],
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component:
-          "Change password page with current/new/confirm fields and real-time validation. Supports `forced` mode when password is expired.",
-      },
-    },
-  },
-} satisfies Meta<typeof ChangePassword>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Forced: Story = {
-  args: {
-    forced: true,
-  },
-};
-
-export const WithCustomBackground: Story = {
-  args: {
-    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
-  },
-};

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

@@ -1,3 +0,0 @@
-import _ChangePassword from "@shared/pages/ChangePasswordPage/components/change-password/ChangePassword.vue";
-
-export const ChangePasswordPage = _ChangePassword as typeof _ChangePassword;

package/shared/pages/ChangePasswordPage/components/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/ChangePasswordPage/components/change-password";

package/shared/pages/ChangePasswordPage/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/ChangePasswordPage/components";

package/shared/pages/ChangePasswordPage/plugin.ts

@@ -1,4 +0,0 @@
-import { createModule } from "@core/plugins";
-import * as components from "@shared/pages/ChangePasswordPage/components";
-
-export const ChangePasswordPage = createModule(components);

package/shared/pages/ForgotPasswordPage/components/forgot-password/ForgotPassword.vue

@@ -1,155 +0,0 @@
-<template>
-  <VcAuthLayout
-    :logo="customization.logo"
-    :background="background"
-    :title="forgotPasswordRequestSent ? t('FORGOT_PASSWORD.SUCCESS_TITLE') : t('FORGOT_PASSWORD.TITLE')"
-    :subtitle="forgotPasswordRequestSent ? undefined : t('FORGOT_PASSWORD.SUBTITLE')"
-  >
-    <!-- Request form -->
-    <template v-if="!forgotPasswordRequestSent">
-      <VcForm @submit="forgot">
-        <Field
-          v-slot="{ errorMessage, handleChange, errors }"
-          :label="t('FORGOT_PASSWORD.FIELDS.EMAIL.LABEL')"
-          name="loginOrEmail"
-          :model-value="form.loginOrEmail"
-          rules="required|email"
-        >
-          <VcInput
-            ref="emailField"
-            v-model="form.loginOrEmail"
-            class="tw-mb-6"
-            :label="t('FORGOT_PASSWORD.FIELDS.EMAIL.LABEL')"
-            :placeholder="t('FORGOT_PASSWORD.FIELDS.EMAIL.PLACEHOLDER')"
-            required
-            :error="!!errors.length"
-            :error-message="errorMessage"
-            @update:model-value="handleChange"
-          />
-        </Field>
-
-        <VcButton
-          variant="primary"
-          class="tw-w-full tw-mb-4"
-          :disabled="!isValid || loading"
-          :loading="loading"
-          @click="forgot"
-        >
-          {{ t("FORGOT_PASSWORD.SEND_BUTTON") }}
-        </VcButton>
-
-        <div class="tw-text-center">
-          <VcButton
-            variant="link"
-            icon="fas fa-arrow-left"
-            icon-size="xs"
-            type="button"
-            @click="goBack"
-          >
-            {{ t("FORGOT_PASSWORD.BACK_TO_LOGIN") }}
-          </VcButton>
-        </div>
-      </VcForm>
-
-      <VcHint
-        v-if="error"
-        class="tw-mt-3 tw-text-danger-500"
-      >
-        {{ error }}
-      </VcHint>
-    </template>
-
-    <!-- Success state -->
-    <template v-else>
-      <div class="tw-text-center tw-mb-6">
-        <p class="tw-text-sm tw-text-neutrals-600">
-          {{ t("FORGOT_PASSWORD.SUCCESS_TEXT", { email: maskedEmail }) }}
-        </p>
-      </div>
-
-      <VcButton
-        variant="primary"
-        class="tw-w-full"
-        @click="goBack"
-      >
-        {{ t("FORGOT_PASSWORD.BACK_TO_LOGIN") }}
-      </VcButton>
-    </template>
-  </VcAuthLayout>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, computed } from "vue";
-import { useRouter } from "vue-router";
-import { useIsFormValid, Field, useForm } from "vee-validate";
-import { useSettings } from "@core/composables";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { useI18n } from "vue-i18n";
-
-type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
-
-export interface Props {
-  logo?: string;
-  background?: string;
-  composable?: () => { forgotPassword: ForgotPasswordFunc };
-}
-
-const props = defineProps<Props>();
-
-const router = useRouter();
-const { t } = useI18n({ useScope: "global" });
-useForm({ validateOnMount: false });
-const isValid = useIsFormValid();
-const { uiSettings, loading: customizationLoading } = useSettings();
-
-const loading = ref(false);
-const error = ref("");
-const forgotPasswordRequestSent = ref(false);
-
-const form = reactive({
-  loginOrEmail: "",
-});
-
-let forgotPassword: ForgotPasswordFunc | undefined;
-
-if (props.composable && typeof props.composable === "function") {
-  const result = props.composable();
-  forgotPassword = result.forgotPassword;
-} else {
-  const { requestPasswordReset } = useUserManagement();
-  forgotPassword = async (args: { loginOrEmail: string }) => {
-    await requestPasswordReset(args.loginOrEmail);
-  };
-}
-
-const customization = computed(() => ({
-  logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
-}));
-
-const maskedEmail = computed(() => {
-  const email = form.loginOrEmail;
-  const [name, domain] = email.split("@");
-  if (!name || !domain) return email;
-  const masked = name.length > 2 ? name[0] + "***" + name[name.length - 1] : name[0] + "***";
-  return `${masked}@${domain}`;
-});
-
-const forgot = async () => {
-  if (!isValid.value || !forgotPassword) return;
-
-  try {
-    loading.value = true;
-    error.value = "";
-    await forgotPassword({ loginOrEmail: form.loginOrEmail });
-    forgotPasswordRequestSent.value = true;
-  } catch (e) {
-    error.value = e instanceof Error ? e.message : String(e);
-  } finally {
-    loading.value = false;
-  }
-};
-
-const goBack = () => {
-  router.push({ name: "Login" });
-};
-</script>

package/shared/pages/ForgotPasswordPage/components/forgot-password/forgot-password.stories.ts

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import ForgotPassword from "./ForgotPassword.vue";
-import { mockPlatformApiFetch, patchUserManagement } from "@shared/pages/_storybook-helpers";
-
-const meta = {
-  title: "Shared/Pages/ForgotPassword",
-  component: ForgotPassword,
-  tags: ["autodocs"],
-  decorators: [
-    () => ({
-      setup() {
-        mockPlatformApiFetch();
-        patchUserManagement();
-      },
-      template: "<story />",
-    }),
-  ],
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component:
-          "Forgot password page. User enters email, receives a reset link. Shows masked email confirmation on success. Supports custom composable for password reset logic.",
-      },
-    },
-  },
-} satisfies Meta<typeof ForgotPassword>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithCustomBackground: Story = {
-  args: {
-    background: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
-  },
-};

package/shared/pages/ForgotPasswordPage/components/forgot-password/index.ts

@@ -1,3 +0,0 @@
-import _ForgotPassword from "@shared/pages/ForgotPasswordPage/components/forgot-password/ForgotPassword.vue";
-
-export const ForgotPassword = _ForgotPassword as typeof _ForgotPassword;

package/shared/pages/ForgotPasswordPage/components/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/ForgotPasswordPage/components/forgot-password";

package/shared/pages/ForgotPasswordPage/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/ForgotPasswordPage/components";

package/shared/pages/ForgotPasswordPage/plugin.ts

@@ -1,4 +0,0 @@
-import { createModule } from "@core/plugins";
-import * as components from "@shared/pages/ForgotPasswordPage/components";
-
-export const ForgotPasswordPage = createModule(components);

package/shared/pages/InvitePage/components/index.ts

@@ -1 +0,0 @@
-export * from "@shared/pages/InvitePage/components/invite";