@vc-shell/framework 1.0.116 → 1.0.118

package/shared/modules/dynamic/components/fields/SelectField.ts

@@ -1,8 +1,14 @@
-import { h, resolveComponent, ExtractPropTypes, Component } from "vue";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
 import { SelectField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { SelectSchema } from "../../types";
+import { VcSelect } from "../../../../../ui/components";
+import type { ComponentSlots } from "vue-component-type-helpers";
+
+type TScope =
+  | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
+  | Parameters<ComponentSlots<typeof VcSelect>["selected-item"]>["0"];
 
 export default {
   name: "SelectField",
@@ -25,10 +31,10 @@ export default {
         slots:
           props.element.customTemplate &&
           ["selected-item", "option"].reduce((obj, slot) => {
-            obj[slot] = (scope) =>
+            obj[slot] = (scope: TScope) =>
               h(resolveComponent(props.element.customTemplate.component), { context: scope, slotName: slot });
             return obj;
-          }, {}),
+          }, {} as Record<string, (scope: TScope) => VNode>),
       });
 
       const render = h(field.component as unknown as Component, field.props, field.slots);

package/shared/modules/dynamic/components/fields/ValidationField.ts

@@ -1,4 +1,4 @@
-import { computed, h, unref, useSlots, defineComponent } from "vue";
+import { computed, h, unref, useSlots, defineComponent, ComputedRef } from "vue";
 import { unrefNested } from "../../helpers/unrefNested";
 import { Field } from "vee-validate";
 import { reactify } from "@vueuse/core";
@@ -20,7 +20,7 @@ export default defineComponent({
         : String(props.props.key)
     );
 
-    const fieldNameLang = reactify((name) => {
+    const fieldNameLang = reactify((name: string) => {
       return props.props.multilanguage ? name + "_" + props.props.currentLanguage : name;
     });
 
@@ -37,7 +37,7 @@ export default defineComponent({
           ).value,
         },
         {
-          default: ({ errorMessage, errors }) => {
+          default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
             return slots.default().map((slot) =>
               h(slot, {
                 ...props.props,

package/shared/modules/dynamic/components/fields/VideoField.ts

@@ -0,0 +1,28 @@
+import { ExtractPropTypes, h } from "vue";
+import { VideoField } from "../factories";
+import componentProps from "./props";
+import { VideoSchema } from "../../types";
+
+export default {
+  name: "VideoField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
+    return () => {
+      const field = VideoField({
+        props: {
+          ...props.baseProps,
+          source: props.baseProps.modelValue,
+          size: props.element.size,
+          rounded: props.element.rounded,
+          bordered: props.element.bordered,
+          clickable: props.element.clickable,
+        },
+        options: props.baseOptions,
+      });
+
+      const render = h(field.component, field.props);
+
+      return props.baseOptions.visibility ? render : null;
+    };
+  },
+};

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -60,7 +60,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
   const _data = args.data;
 
   const isFilterVisible = ref(true);
-  const filter = reactive({});
+  const filter: Record<string, unknown> = reactive({});
 
   const controls = ref<Control[]>([]);
 
@@ -74,21 +74,27 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
   onMounted(() => createFilterControls());
 
   function isItemSelected(value: string, field: string) {
-    return filter[field]?.some((x) => x === value);
+    const item = filter[field];
+    if (Array.isArray(item) && typeof item !== "string") {
+      return item.some((x) => x === value);
+    }
   }
 
   function selectFilterItem(e: boolean, value: string, field: string) {
-    const isSelected = filter[field]?.includes(value);
-
-    if (!Array.isArray(filter[field])) {
+    const item = filter[field];
+    let isSelected = false;
+
+    if (Array.isArray(item)) {
+      isSelected = item.includes(value);
+
+      if (e && !isSelected) {
+        item.push(value);
+      } else if (!e && isSelected) {
+        filter[field] = item.filter((x) => x !== value);
+      }
+    } else {
       filter[field] = [];
     }
-
-    if (e && !isSelected) {
-      filter[field]?.push(value);
-    } else if (!e && isSelected) {
-      filter[field] = filter[field].filter((x) => x !== value);
-    }
   }
 
   function createFilterControls() {
@@ -109,7 +115,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         }
 
         return obj;
-      }, {});
+      }, {} as Record<string, ReturnType<typeof Checkbox> | ReturnType<typeof InputField>>);
 
       return {
         title: item.title,
@@ -125,7 +131,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         props: {
           classNames: "tw-mb-2",
           modelValue: computed(() => isItemSelected(currC.value, control.field)),
-          "onUpdate:modelValue": (e) => selectFilterItem(e, currC.value, control.field),
+          "onUpdate:modelValue": (e: boolean) => selectFilterItem(e, currC.value, control.field),
         },
         slots: {
           default: () => currC.displayName,
@@ -136,7 +142,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
       });
 
       return obj;
-    }, {});
+    }, {} as Record<string, ReturnType<typeof Checkbox>>);
   }
 
   function createInput(control: RawControl) {
@@ -146,7 +152,7 @@ export default <Query>(args: { data: Data; query: MaybeRef<Query>; load: AsyncAc
         classNames: "tw-mb-3",
         label: control.label,
         modelValue: computed(() => filter[control.field]),
-        "onUpdate:modelValue": (e) => (filter[control.field] = e),
+        "onUpdate:modelValue": (e: unknown) => (filter[control.field] = e),
       },
       options: {
         visibility: computed(() => true),

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
+import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef } from "vue";
 import { AsyncAction } from "../../../../../core/composables";
 import { SettingsSchema } from "../../types";
 import { Asset, AssetsHandler, IBladeToolbar, IImage } from "../../../../../core/types";

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -1,4 +1,4 @@
-import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive } from "vue";
+import { unref, computed, toValue, h, UnwrapNestedRefs, MaybeRef, reactive, Ref, VNode } from "vue";
 import FIELD_MAP from "../components/FIELD_MAP";
 import { ControlSchema } from "../types";
 import { IControlBaseProps, IControlBaseOptions } from "../types/models";
@@ -7,6 +7,7 @@ import { setModel } from "./setters";
 import { unwrapInterpolation } from "./unwrapInterpolation";
 import { DetailsBladeContext } from "../factories";
 import * as _ from "lodash-es";
+import { unrefNested } from "./unrefNested";
 
 function disabledHandler(
   disabled: { method?: string } | boolean,
@@ -22,17 +23,17 @@ function disabledHandler(
 function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeContext>, FormData>(args: {
   controlSchema: ControlSchema;
   parentId: string | number;
-  internalContext: Context;
+  internalContext: MaybeRef<Context>;
   bladeContext: BContext;
   currentLocale: MaybeRef<string>;
   formData: FormData;
-}) {
+}): VNode | false {
   const { controlSchema, parentId, internalContext, bladeContext, currentLocale, formData } = args;
   if (!controlSchema) return false;
 
   const baseProps = reactive<IControlBaseProps>({
     key: `${parentId}`,
-    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, internalContext)) : undefined,
+    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext))) : undefined,
     disabled:
       ("disabled" in bladeContext.scope && bladeContext.scope.disabled) ||
       disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext),
@@ -40,14 +41,14 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     rules: controlSchema.rules,
     placeholder: controlSchema.placeholder,
     required: controlSchema.rules?.required,
-    modelValue: getModel(controlSchema.property, internalContext),
+    modelValue: getModel(controlSchema.property, toValue(internalContext)),
     "onUpdate:modelValue": (e) => {
-      setModel({ property: controlSchema.property, value: e, context: internalContext });
+      setModel({ property: controlSchema.property, value: e, context: toValue(internalContext) });
 
       if (_.has(controlSchema, "update.method")) {
         controlSchema.update.method in bladeContext.scope &&
         typeof bladeContext.scope[controlSchema.update.method] === "function"
-          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, internalContext)
+          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, toValue(internalContext))
           : undefined;
       }
     },
@@ -61,14 +62,14 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     ),
   });
 
-  const component = FIELD_MAP[controlSchema.component];
+  const component = FIELD_MAP[controlSchema.component as keyof typeof FIELD_MAP];
 
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
-    const fieldsModel = getModel(controlSchema.property, internalContext);
+    const fieldsModel = getModel(controlSchema.property, toValue(internalContext));
 
     if (toValue(fieldsModel) && Array.isArray(toValue(fieldsModel))) {
-      return toValue(fieldsModel).map((model) =>
+      return toValue(fieldsModel).map((model: { [x: string]: unknown; id: string }) =>
         controlSchema.fields.map((fieldItem) =>
           nodeBuilder({
             controlSchema: fieldItem,
@@ -106,7 +107,7 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     fieldContext: internalContext,
   };
 
-  return h(component, elProps);
+  return h(component, unrefNested(elProps));
 }
 
 export { nodeBuilder };

package/shared/modules/dynamic/helpers/override.ts

@@ -1,7 +1,7 @@
 import * as _ from "lodash-es";
 import { DynamicSchema, OverridesSchema, OverridesUpsert } from "../types";
 
-export const handleOverrides = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+export const handleOverrides = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   let schema = _.cloneDeep(schemaCopy);
 
   // REMOVE
@@ -49,10 +49,10 @@ const upsertHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: D
       );
     obj[name] = clonedSchema;
     return obj;
-  }, {});
+  }, {} as Record<string, DynamicSchema>);
 };
 
-const removeHelper = (overrides, schemaCopy: { [key: string]: DynamicSchema }) => {
+const removeHelper = (overrides: OverridesSchema, schemaCopy: { [key: string]: DynamicSchema }) => {
   return Object.entries(schemaCopy).reduce((obj, [name, schema]) => {
     const clonedSchema = _.cloneDeep(schema);
     overrides.remove
@@ -66,5 +66,5 @@ const removeHelper = (overrides, schemaCopy: { [key: string]: DynamicSchema }) =
       }, {});
     obj[name] = clonedSchema;
     return obj;
-  }, {});
+  }, {} as Record<string, DynamicSchema>);
 };

package/shared/modules/dynamic/helpers/setters.ts

@@ -9,7 +9,7 @@ function setModel(args: {
 }) {
   const { property, value, option, context } = args;
 
-  _.set(context, property, option ? value[option] : value);
+  _.set(context, property, option ? value[option as keyof typeof value] : value);
 }
 
 export { setModel };

package/shared/modules/dynamic/helpers/toolbarReducer.ts

@@ -15,7 +15,9 @@ export const toolbarReducer = (args: {
   const toolbarMethodsMerge = _.merge(ref({}), ref(args.defaultToolbarBindings), ref(args.customToolbarConfig));
   return computed(() =>
     args.defaultToolbarSchema.reduce((acc, curr) => {
-      const toolbarItemCtx = toolbarMethodsMerge.value[curr.method];
+      const toolbarItemCtx = toolbarMethodsMerge.value[
+        curr.method as keyof typeof toolbarMethodsMerge.value
+      ] as IBladeToolbar;
       if (toolbarItemCtx) {
         const context =
           typeof toolbarItemCtx === "function"

package/shared/modules/dynamic/helpers/unrefNested.ts

@@ -1,10 +1,10 @@
 import { unref } from "vue";
 
-export function unrefNested<T>(field: T) {
+export function unrefNested<T extends Record<string, unknown>>(field: T) {
   const unreffedProps = {} as T;
 
   if (field) {
-    Object.keys(field).forEach((key) => {
+    Object.keys(field).forEach((key: keyof T) => {
       unreffedProps[key] = unref(field[key]);
     });
 

package/shared/modules/dynamic/index.ts

@@ -66,6 +66,7 @@ const register = (
   const defineBladeComponent = defineComponent({
     ...bladeComponent,
     name: bladeName,
+    isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
     setup: (props, ctx) =>
       (bladeComponent as DefineComponent).setup(
         reactiveComputed(() => ({
@@ -139,7 +140,7 @@ export const createDynamicAppModule = <T extends BladeMenu>(args: {
           const blade = register(
             {
               app,
-              component: bladePages[JsonSchema.settings.component],
+              component: bladePages[JsonSchema.settings.component as keyof typeof bladePages],
               composables: { ...args.composables },
               json: JsonSchema,
               options,

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -190,7 +190,10 @@ const bladeMultilanguage = reactiveComputed(() => {
 });
 
 const bladeWidgets = computed(() => {
-  return widgets.value?.children?.map((x) => resolveComponent(x));
+  return widgets.value?.children?.map((x) => {
+    if (typeof x === "string") return resolveComponent(x);
+    else throw new Error(`Component is required in widget: ${x}`);
+  });
 });
 
 const bladeOptions = reactive({

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -15,7 +15,7 @@
       :expanded="expanded"
       v-bind="bladeOptions?.table"
       :state-key="tableData?.id"
-      :items="items"
+      :items="itemsProxy"
       :multiselect="tableData?.multiselect"
       :header="tableData?.header"
       :sort="sort"
@@ -26,6 +26,7 @@
       :total-label="$t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
       :total-count="pagination?.totalCount"
       :active-filter-count="activeFilterCount"
+      :reorderable-rows="tableData?.reorderableRows"
       @item-click="onItemClick"
       @pagination-click="onPaginationClick"
       @selection-changed="onSelectionChanged"
@@ -33,6 +34,7 @@
       @load:change="onSearchList"
       @scroll:ptr="reload"
       @search:change="onSearchList"
+      @row:reorder="sortRows"
     >
       <template
         v-if="isFilterVisible"
@@ -122,6 +124,8 @@ import {
   unref,
   watch,
   UnwrapRef,
+  ShallowRef,
+  ConcreteComponent,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema } from "../types";
@@ -131,6 +135,8 @@ import { ITableColumns } from "../../../../core/types";
 import { toolbarReducer } from "../helpers/toolbarReducer";
 import { notification, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
+import { IParentCallArgs } from "../../../index";
+import * as _ from "lodash-es";
 
 export interface Props {
   expanded?: boolean;
@@ -142,6 +148,7 @@ export interface Props {
 }
 
 export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
   (event: "close:blade"): void;
   (event: "collapse:blade"): void;
   (event: "expand:blade"): void;
@@ -172,6 +179,8 @@ const selectedItemId = ref();
 const sort = ref("createdDate:DESC");
 const selectedIds = ref<string[]>([]);
 const isDesktop = inject<Ref<boolean>>("isDesktop");
+const itemsProxy = ref<Record<string, any>[]>();
+const modified = ref(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value.pushNotificationType);
 
@@ -229,7 +238,7 @@ const {
 const bladeContext = ref<ListBladeContext>({
   load,
   remove,
-  items,
+  items: computed(() => itemsProxy.value),
   loading,
   pagination,
   query,
@@ -240,6 +249,12 @@ const bladeContext = ref<ListBladeContext>({
 const toolbarComputed = toolbarReducer({
   defaultToolbarSchema: settings.value.toolbar,
   defaultToolbarBindings: {
+    save: {
+      clickHandler() {
+        emit("close:blade");
+      },
+      disabled: computed(() => !modified.value),
+    },
     openAddBlade: {
       async clickHandler() {
         if (
@@ -272,10 +287,22 @@ onMounted(async () => {
   await load({ ...query.value, sort: sort.value });
 });
 
+watch(
+  () => itemsProxy.value,
+  (newVal) => {
+    modified.value = !_.isEqual(newVal, items.value);
+  },
+  { deep: true }
+);
+
 watch(sort, async (value) => {
   await load({ ...query.value, sort: value });
 });
 
+watch(items, (newVal) => {
+  itemsProxy.value = newVal;
+});
+
 watch(
   () => props.param,
   (newVal) => {
@@ -429,7 +456,7 @@ async function resetSearch() {
   });
 }
 
-function templateOverrideComponents(): Record<string, VNode> {
+function templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
   return {
     ...table.value.columns?.reduce((acc, curr) => {
       if ("customTemplate" in curr) {
@@ -446,22 +473,37 @@ function templateOverrideComponents(): Record<string, VNode> {
         }
       }
       return acc;
-    }, {}),
+    }, {} as Record<string, ShallowRef<ConcreteComponent>>),
   };
 }
 
-function resolveTemplateComponent(name: string) {
+function resolveTemplateComponent(name: keyof ListContentSchema) {
   if (!tableData.value) return;
-  const componentName = tableData.value[name]?.component;
-  if (componentName) {
-    const component = resolveComponent(componentName);
+  const value = tableData.value[name];
+  if (value && typeof value === "object" && "component" in value) {
+    const componentName = value.component;
+    if (componentName) {
+      const component = resolveComponent(componentName);
+
+      if (component && typeof component !== "string") return shallowRef(component);
+    }
+  }
+}
+
+function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] }) {
+  if (event.dragIndex !== event.dropIndex) {
+    const sorted = event.value.map((item, index) => {
+      item.sortOrder = index;
+      return item;
+    });
 
-    if (component && typeof component !== "string") return shallowRef(component);
+    itemsProxy.value = sorted;
   }
 }
 
 defineExpose({
   reload,
   title,
+  ...scope.value,
 });
 </script>

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

@@ -1,4 +1,4 @@
-import { VcButton, VcIcon, VcInput, VcStatus } from "./../../../../ui/components";
+import { VcButton, VcField, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules } from "../../../../core/types";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -95,6 +95,7 @@ export interface ListContentSchema extends SchemaBase {
     type?: string;
     customTemplate?: GridTemplateOverride;
   })[];
+  reorderableRows?: boolean;
   mobileTemplate?: {
     component: string;
   };
@@ -150,6 +151,30 @@ export interface InputSchema extends SchemaBase {
   clearable?: boolean;
 }
 
+export interface VideoSchema extends SchemaBase {
+  component: "vc-video";
+  size?: ComponentProps<typeof VcVideo>["size"];
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
+}
+
+export interface FieldSchema extends SchemaBase {
+  component: "vc-field";
+  variant?: ComponentProps<typeof VcField>["type"];
+  copyable?: boolean;
+}
+
+export interface ImageSchema extends SchemaBase {
+  component: "vc-image";
+  aspect?: ComponentProps<typeof VcImage>["aspect"];
+  size?: ComponentProps<typeof VcImage>["size"];
+  background?: ComponentProps<typeof VcImage>["background"];
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
+}
+
 export interface StatusSchema extends SchemaBase {
   component: "vc-status";
   outline?: boolean;
@@ -237,7 +262,10 @@ export type ControlSchema =
   | FieldsetSchema
   | ButtonSchema
   | InputCurrencySchema
-  | StatusSchema;
+  | StatusSchema
+  | FieldSchema
+  | VideoSchema
+  | ImageSchema;
 
 export interface FilterBase {
   columns: {

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

@@ -6,11 +6,14 @@ import {
   VcCheckbox,
   VcDynamicProperty,
   VcEditor,
+  VcField,
   VcGallery,
+  VcImage,
   VcInput,
   VcInputCurrency,
   VcSelect,
   VcStatus,
+  VcVideo,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -44,7 +47,9 @@ export type ControlType =
   | ICheckbox
   | IButton
   | IInputCurrency
-  | IStatusField;
+  | IStatusField
+  | IContentField
+  | IImageField;
 
 export type ControlTypeWithSlots = Extract<
   ControlType,
@@ -54,7 +59,7 @@ export type ControlTypeCtr = Extract<ControlType, ISelectField | IInputField | I
 
 export interface IControlBaseProps {
   key?: string | number | symbol;
-  rules?: string | Record<string, unknown>;
+  rules?: Record<string, unknown>;
   label?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -92,6 +97,21 @@ export type IInputField = {
   options: IControlBaseOptions;
 } & FieldOpts<typeof VcInput>;
 
+export type IContentField = {
+  props: ComponentProps<typeof VcField> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcField>;
+
+export type IVideoField = {
+  props: ComponentProps<typeof VcVideo> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcVideo>;
+
+export type IImageField = {
+  props: ComponentProps<typeof VcImage> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcImage>;
+
 export type IInputCurrency = {
   props: Partial<ComponentProps<typeof VcInputCurrency>> | IControlBaseProps;
   options: IControlBaseOptions;
@@ -112,7 +132,8 @@ export type ICheckbox = {
 export type IDynamicProperties = {
   props:
     | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
-    | IControlBaseProps;
+    | (ComponentProps<typeof VcDynamicProperty> &
+        Omit<IControlBaseProps, keyof ComponentProps<typeof VcDynamicProperty> | "onUpdate:modelValue" | "rules">);
   options: IControlBaseOptions;
 } & FieldOpts<typeof VcDynamicProperty>;
 
@@ -122,7 +143,7 @@ export type IEditorField = {
 } & FieldOpts<typeof VcEditor>;
 
 export type IGallery = {
-  props: ComponentProps<typeof VcGallery> | IControlBaseProps;
+  props: (ComponentProps<typeof VcGallery> & { rules: Record<string, unknown> }) | IControlBaseProps;
   options: IControlBaseOptions;
 } & FieldOpts<typeof VcGallery>;
 

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

@@ -185,11 +185,13 @@ import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
 
+type ForgotPasswordFunc = (args: { loginOrEmail: string }) => Promise<void>;
+
 export interface Props {
   logo: string;
   background: string;
   title: string;
-  composable?: () => { forgotPassword: (args: { loginOrEmail: string }) => Promise<void> };
+  composable?: () => { forgotPassword: ForgotPasswordFunc };
 }
 
 const props = defineProps<Props>();
@@ -210,7 +212,7 @@ const isDirty = useIsFormDirty();
 const customizationLoading = ref(false);
 const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
-let forgotPassword;
+let forgotPassword: ForgotPasswordFunc;
 
 if (props.composable && typeof props.composable === "function") {
   useLogin = props.composable;

package/ui/components/molecules/index.ts

@@ -12,3 +12,4 @@ export * from "./vc-select";
 export * from "./vc-slider";
 export * from "./vc-textarea";
 export * from "./vc-multivalue";
+export * from "./vc-field";