@vc-shell/framework 1.0.110 → 1.0.112

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

@@ -0,0 +1,289 @@
+import { VcButton, VcIcon, VcInput, VcStatus } from "./../../../../ui/components";
+import { ITableColumns, IValidationRules } from "../../../../core/types";
+import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
+
+export type KeysOfUnion<T> = T extends T ? keyof T : never;
+
+export type Composable<T> = T[keyof T];
+
+export type DynamicSchema = DynamicGridSchema | DynamicDetailsSchema;
+
+export interface DynamicGridSchema {
+  /**
+   * @description Blade settings
+   */
+  settings: SettingsSchema;
+  content: [ListContentSchema];
+}
+
+export interface DynamicDetailsSchema {
+  /**
+   * @description Blade settings
+   */
+  settings: SettingsSchema;
+  /**
+   * @description Blade content
+   */
+  content: [FormContentSchema, WidgetsSchema?];
+}
+
+export type SettingsSchema = SettingsWorkspace | SettingsDetails;
+
+export interface SettingsWorkspace extends SettingsBase {
+  isWorkspace: boolean;
+}
+
+export interface SettingsDetails extends SettingsBase {
+  status?: {
+    component: string;
+  };
+}
+
+export interface SettingsBase {
+  /**
+   * @description Blade url
+   */
+  url?: string;
+  /**
+   * @description Locale key for VueI18n locale files
+   */
+  localizationPrefix: string;
+  /**
+   * @description Required component id
+   */
+  id: string;
+  /**
+   * @description Blade default header title
+   */
+  titleTemplate: string;
+  /**
+   * @description Composable to use at {@link SettingsBase.model } blade component view
+   */
+  composable: string;
+  /**
+   * @description Toolbar items array
+   * @default 'save', 'delete' in {@link SettingsDetails}
+   * @default 'refresh', 'add' in {@link SettingsWorkspace}
+   */
+  toolbar: {
+    id: string;
+    title: string;
+    icon: string;
+    method: string;
+  }[];
+  /**
+   * @description Blade component
+   */
+  component: string;
+  /**
+   * @description Blade permissions
+   */
+  permissions?: string | string[];
+  pushNotificationType?: string | string[];
+}
+
+export interface ListContentSchema extends SchemaBase {
+  component: "vc-table";
+  filter?: FilterSchema;
+  multiselect?: boolean;
+  header?: boolean;
+  columns?: (ITableColumns & {
+    id: string;
+    title: string;
+    sortable?: boolean;
+    alwaysVisible?: boolean;
+    type?: string;
+    customTemplate?: GridTemplateOverride;
+  })[];
+  mobileTemplate?: {
+    component: string;
+  };
+  notFoundTemplate?: {
+    component: string;
+  };
+  emptyTemplate?: {
+    component: string;
+  };
+}
+
+export interface FormContentSchema extends SchemaBase {
+  component: "vc-form";
+  children: ControlSchema[];
+}
+
+export interface GridTemplateOverride {
+  component?: string;
+}
+
+export interface VisibilityOptions {
+  method: string;
+}
+export interface SchemaBase {
+  id: string;
+  label?: string;
+  property?: string;
+  rules?: IValidationRules;
+  placeholder?: string;
+  disabled?: { method: string };
+  tooltip?: string;
+  visibility?: VisibilityOptions;
+  multilanguage?: boolean;
+  update?: { method: string };
+}
+
+export interface SelectSchema extends SchemaBase {
+  component: "vc-select";
+  optionValue: string;
+  optionLabel: string;
+  optionsMethod: string;
+  customTemplate?: {
+    component: string;
+  };
+  clearable?: boolean;
+  emitValue?: boolean;
+  searchable?: boolean;
+}
+
+export interface InputSchema extends SchemaBase {
+  component: "vc-input";
+  variant?: ComponentProps<typeof VcInput>["type"];
+  clearable?: boolean;
+}
+
+export interface StatusSchema extends SchemaBase {
+  component: "vc-status";
+  outline?: boolean;
+  extend?: boolean;
+  variant?: ComponentProps<typeof VcStatus>["variant"];
+  icon?: string;
+  iconSize?: ComponentProps<typeof VcIcon>["size"];
+  iconVariant?: ComponentProps<typeof VcIcon>["variant"];
+  title?: string;
+  content: {
+    method: string;
+  };
+}
+
+export interface InputCurrencySchema extends SchemaBase {
+  component: "vc-input-currency";
+  optionProperty: string;
+  optionValue?: string;
+  optionLabel?: string;
+  clearable?: boolean;
+}
+
+export interface EditorSchema extends SchemaBase {
+  component: "vc-editor";
+}
+
+export interface DynamicPropertiesSchema extends SchemaBase {
+  component: "vc-dynamic-properties";
+  exclude?: string[];
+  include?: string[];
+}
+
+export interface GallerySchema extends SchemaBase {
+  component: "vc-gallery";
+  uploadFolder: string;
+}
+
+export interface CardSchema extends SchemaBase {
+  component: "vc-card";
+  fields: ControlSchema[];
+  action?: ButtonSchema & { method: string };
+  collapsible?: boolean;
+}
+
+export interface WidgetsSchema extends SchemaBase {
+  component: "vc-widgets";
+  children: string[];
+}
+
+export interface CheckboxSchema extends SchemaBase {
+  component: "vc-checkbox";
+  content: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
+}
+
+export interface FieldsetSchema extends SchemaBase {
+  component: "vc-fieldset";
+  columns?: number;
+  fields: Exclude<ControlSchema[], FieldsetSchema>;
+  remove?: {
+    method: string;
+  };
+}
+
+export interface ButtonSchema extends SchemaBase {
+  component: "vc-button";
+  content: string;
+  small?: boolean;
+  icon?: string;
+  iconSize?: ComponentProps<typeof VcIcon>["size"];
+  text?: boolean;
+  method?: string;
+}
+
+export type ControlSchema =
+  | SelectSchema
+  | InputSchema
+  | EditorSchema
+  | DynamicPropertiesSchema
+  | GallerySchema
+  | CardSchema
+  | WidgetsSchema
+  | CheckboxSchema
+  | FieldsetSchema
+  | ButtonSchema
+  | InputCurrencySchema
+  | StatusSchema;
+
+export interface FilterBase {
+  columns: {
+    title: string;
+    controls: {
+      field: string;
+      component: InputSchema["component"] | CheckboxSchema["component"];
+    }[];
+  }[];
+}
+
+export type FilterCheckbox = FilterBase & {
+  columns: {
+    controls: {
+      data?: { value: string; displayName: string }[];
+    }[];
+  }[];
+};
+
+export type FilterDateInput = FilterBase & {
+  columns: {
+    controls: {
+      label?: string;
+    }[];
+  }[];
+};
+
+export type FilterSchema = FilterCheckbox | FilterDateInput;
+
+export interface OverridesSchema {
+  upsert?: (OverridesUpsert | OverridesReplace)[];
+  remove?: OverridesRemove[];
+}
+
+export interface OverridesUpsert extends OverridesReplace {
+  index: number;
+}
+
+export interface OverridesReplace {
+  path: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: ControlSchema | SettingsSchema["toolbar"][number] | string | boolean;
+  id: string;
+}
+
+export interface OverridesRemove {
+  path: string;
+  id: string;
+}

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

@@ -0,0 +1,140 @@
+import { ComputedRef, Raw } from "vue";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  VcButton,
+  VcCard,
+  VcCheckbox,
+  VcDynamicProperty,
+  VcEditor,
+  VcGallery,
+  VcInput,
+  VcInputCurrency,
+  VcSelect,
+  VcStatus,
+} from "../../../../ui/components";
+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;
+
+export type ControlTypeWithSlots = Extract<
+  ControlType,
+  ISelectField | ICardCollection | ICheckbox | IButton | IStatusField
+>;
+export type ControlTypeCtr = Extract<ControlType, ISelectField | IInputField | IInputCurrency | IEditorField>;
+
+export interface IControlBaseProps {
+  key?: string | number | symbol;
+  rules?: string | Record<string, unknown>;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  classNames?: string;
+  modelValue?: any;
+  tooltip?: string;
+  "onUpdate:modelValue"?: (event: any) => void;
+  multilanguage?: boolean;
+}
+
+export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+  [Property in Key]-?: Type[Property];
+};
+
+export interface IControlBaseOptions {
+  visibility?: ComputedRef<boolean>;
+}
+
+export type ISelectField = {
+  props: ComponentProps<typeof VcSelect> | IControlBaseProps;
+  slots?: Partial<ComponentSlots<typeof VcSelect>>;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcSelect>;
+
+export type IStatusField = {
+  props: ComponentProps<typeof VcStatus> & IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcStatus>;
+
+export type IInputField = {
+  props: ComponentProps<typeof VcInput> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcInput>;
+
+export type IInputCurrency = {
+  props: Partial<ComponentProps<typeof VcInputCurrency>> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcInputCurrency>;
+
+export type ICardCollection = {
+  props: ComponentProps<typeof VcCard> | IControlBaseProps;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcCard>, "default" | "actions">>;
+} & FieldOpts<typeof VcCard>;
+
+export type ICheckbox = {
+  props: ComponentProps<typeof VcCheckbox> | IControlBaseProps;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
+} & FieldOpts<typeof VcCheckbox>;
+
+export type IDynamicProperties = {
+  props:
+    | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
+    | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcDynamicProperty>;
+
+export type IEditorField = {
+  props: ComponentProps<typeof VcEditor> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcEditor>;
+
+export type IGallery = {
+  props: ComponentProps<typeof VcGallery> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcGallery>;
+
+export type IButton = {
+  props: ComponentProps<typeof VcButton>;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
+} & FieldOpts<typeof VcButton>;
+
+export type IFieldset = {
+  columns?: number;
+  property?: string;
+  remove?: { method?: string };
+  fields?: ControlType[];
+};

package/shared/modules/index.ts

@@ -1,2 +1,3 @@
 export * from "./assets";
 export * from "./assets-manager";
+export * from "./dynamic";

package/shared/pages/InvitePage/index.ts

@@ -1,7 +1 @@
-import { createModule } from "./../../../core/plugins";
-import * as components from "./components";
-import * as locales from "./locales";
-
-export const InvitePage = createModule(components, locales);
-
 export * from "./components";

package/shared/pages/InvitePage/plugin.ts

@@ -0,0 +1,5 @@
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export const InvitePage = createModule(components, locales);

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

@@ -176,12 +176,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed, onMounted, inject } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
 import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
-import { CommonPageComposables } from "./../../../../../typings";
 import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
@@ -190,6 +189,7 @@ export interface Props {
   logo: string;
   background: string;
   title: string;
+  composable?: () => { forgotPassword: (args: { loginOrEmail: string }) => Promise<void> };
 }
 
 const props = defineProps<Props>();
@@ -200,11 +200,10 @@ useForm({ validateOnMount: false });
 const { getUiCustomizationSettings, uiSettings } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;
-const injected = inject<CommonPageComposables>("commonPageComposables");
 const signInResult = ref<SignInResults>({ succeeded: true });
 const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
 const forgotPasswordRequestSent = ref(false);
-const { signIn, loading, externalSignIn, getExternalLoginProviders } = useUser();
+const { signIn, loading, externalSignIn, getExternalLoginProviders, isAuthenticated } = useUser();
 const isLogin = ref(true);
 const isValid = useIsFormValid();
 const isDirty = useIsFormDirty();
@@ -213,8 +212,8 @@ const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
 let forgotPassword;
 
-if (injected) {
-  useLogin = injected?.useLogin;
+if (props.composable && typeof props.composable === "function") {
+  useLogin = props.composable;
 
   if (useLogin) {
     const { forgotPassword: forgot } = useLogin();

package/shared/pages/LoginPage/index.ts

@@ -1,2 +1 @@
-export * from "./plugin";
 export * from "./components";

package/shared/pages/LoginPage/plugin.ts

@@ -1,17 +1,5 @@
-import { App } from "vue";
 import { createModule } from "./../../../core/plugins";
 import * as components from "./components";
 import * as locales from "./locales";
-import { CommonPageComposables } from "./../../../typings";
 
-export const LoginPage = {
-  install(app: App, config: CommonPageComposables) {
-    // Register components
-    createModule(components, locales).install(app);
-
-    if (config) {
-      app.config.globalProperties.commonPageComposables = config;
-      app.provide("commonPageComposables", config);
-    }
-  },
-};
+export const LoginPage = createModule(components, locales);

package/shared/pages/ResetPasswordPage/index.ts

@@ -1,7 +1 @@
-import { createModule } from "./../../../core/plugins";
-import * as components from "./components";
-import * as locales from "./locales";
-
-export const ResetPasswordPage = createModule(components, locales);
-
 export * from "./components";

package/shared/pages/ResetPasswordPage/plugin.ts

@@ -0,0 +1,5 @@
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export const ResetPasswordPage = createModule(components, locales);

package/shared/pages/index.ts

@@ -1,12 +1,3 @@
-import { CommonPageComposables } from "./../../typings";
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface ComponentCustomProperties {
-    CommonPageComposables: CommonPageComposables;
-  }
-}
-
 export * from "./InvitePage";
 export * from "./LoginPage";
 export * from "./ResetPasswordPage";

package/shared/pages/plugin.ts

@@ -0,0 +1,3 @@
+export * from "./InvitePage/plugin";
+export * from "./LoginPage/plugin";
+export * from "./ResetPasswordPage/plugin";

package/ui/components/atoms/vc-button/index.ts

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

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

@@ -8,7 +8,7 @@
       v-if="icon"
       :class="['vc-button__icon', iconClass]"
       :icon="icon"
-      :size="small ? 'xs' : 's'"
+      :size="small ? 'xs' : iconSize"
     ></VcIcon>
     <span
       v-if="$slots['default']"
@@ -18,13 +18,14 @@
     </span>
   </button>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
   icon?: string;
   iconClass?: string;
+  iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
   variant?: "primary" | "warning" | "danger";
   disabled?: boolean;
   small?: boolean;
@@ -43,10 +44,15 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
+  iconSize: "s",
 });
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props?: any) => any;
+}>();
+
 const buttonClass = computed(() => {
   return [
     "vc-button",

package/ui/components/atoms/vc-card/index.ts

@@ -1,11 +1,3 @@
-import { VNode } from "vue";
 import _Card from "./vc-card.vue";
 
-export const VcCard = _Card as typeof _Card & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      actions: () => VNode[];
-    };
-  };
-};
+export const VcCard = _Card as typeof _Card;

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

@@ -38,7 +38,7 @@
     </transition>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "./../vc-icon";
 import { ref } from "vue";
@@ -63,6 +63,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props?: any) => any;
+  actions: (props?: any) => any;
+}>();
+
 const isCollapsedInternal = ref(props.isCollapsed);
 
 function onHeaderClick() {

package/ui/components/atoms/vc-checkbox/index.ts

@@ -1,11 +1,3 @@
-import { VNode } from "vue";
 import _Checkbox from "./vc-checkbox.vue";
 
-export const VcCheckbox = _Checkbox as typeof _Checkbox & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      error: () => VNode[];
-    };
-  };
-};
+export const VcCheckbox = _Checkbox as typeof _Checkbox;