@vc-shell/framework 1.0.119 → 1.0.121

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

@@ -1,4 +1,4 @@
-import { VcButton, VcField, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
+import { VcButton, VcField, VcGallery, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules } from "../../../../core/types";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -7,6 +7,8 @@ export type KeysOfUnion<T> = T extends T ? keyof T : never;
 export type Composable<T> = T[keyof T];
 
 export type DynamicSchema = DynamicGridSchema | DynamicDetailsSchema;
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 export interface DynamicGridSchema {
   /**
@@ -41,27 +43,27 @@ export interface SettingsDetails extends SettingsBase {
 
 export interface SettingsBase {
   /**
-   * @description Blade url
+   * Blade url
    */
   url?: string;
   /**
-   * @description Locale key for VueI18n locale files
+   * Locale key for VueI18n locale files
    */
   localizationPrefix: string;
   /**
-   * @description Required component id
+   * Required component id
    */
   id: string;
   /**
-   * @description Blade default header title
+   * Blade default header title
    */
   titleTemplate: string;
   /**
-   * @description Composable to use at {@link SettingsBase.model } blade component view
+   * Composable to use at {@link SettingsBase.model } blade component view
    */
   composable: string;
   /**
-   * @description Toolbar items array
+   * Toolbar items array
    * @default 'save', 'delete' in {@link SettingsDetails}
    * @default 'refresh', 'add' in {@link SettingsWorkspace}
    */
@@ -72,17 +74,18 @@ export interface SettingsBase {
     method: string;
   }[];
   /**
-   * @description Blade component
+   * Blade component
    */
   component: string;
   /**
-   * @description Blade permissions
+   * Blade permissions
    */
   permissions?: string | string[];
   pushNotificationType?: string | string[];
 }
 
-export interface ListContentSchema extends SchemaBase {
+export interface ListContentSchema {
+  id: string;
   component: "vc-table";
   filter?: FilterSchema;
   multiselect?: boolean;
@@ -107,7 +110,8 @@ export interface ListContentSchema extends SchemaBase {
   };
 }
 
-export interface FormContentSchema extends SchemaBase {
+export interface FormContentSchema {
+  id: string;
   component: "vc-form";
   children: ControlSchema[];
 }
@@ -116,143 +120,540 @@ export interface GridTemplateOverride {
   component?: string;
 }
 
-export interface VisibilityOptions {
-  method: string;
-}
+/**
+ * Base component schema interface.
+ */
 export interface SchemaBase {
+  /** Unique identifier for component.
+   * @type {string}
+   */
   id: string;
+  /** Control label.
+   * To show label based on some bound property - use interpolation {} syntax.
+   * @example {someProperty}
+   * @type {string}
+   */
   label?: string;
-  property?: string;
+  /** Property name to populate the component with data.
+   * @type {string}
+   */
+  property: string;
+  /** Vee-validate and custom validation rules for the schema.
+   *
+   * Available rules - {@link IValidationRules}
+   * @type {IValidationRules}
+   */
   rules?: IValidationRules;
+  /** Placeholder text for component.
+   * @type {string}
+   */
   placeholder?: string;
+  /** Disabled state for component.
+   * @description Method should be defined in the blade `scope`.
+   * Method should return boolean value.
+   * @type {{ method: string }}
+   */
   disabled?: { method: string };
+  /** Tooltip text for component.
+   * @type {string}
+   */
   tooltip?: string;
-  visibility?: VisibilityOptions;
+  /** Visibility options for component.
+   * @description Method should be defined in the blade `scope`.
+   * Method should return boolean value.
+   * @type {{ method: string }}
+   */
+  visibility?: {
+    method: string;
+  };
+  /** Flag to indicate if the component supports multilanguage.
+   * @type {boolean}
+   */
   multilanguage?: boolean;
+  /** Additional method that is called when the modelValue of the component changes
+   * @description Method should be defined in the blade `scope`.
+   * @type {{ method: string }}
+   */
   update?: { method: string };
 }
 
+/**
+ * Select schema interface.
+ * @interface
+ */
 export interface SelectSchema extends SchemaBase {
+  /**
+   * Component type for select.
+   * @type {"vc-select"}
+   */
   component: "vc-select";
+  /**
+   * Property of optionProperty which holds the `value`
+   * @default id
+   * @type {string}
+   */
   optionValue: string;
+  /**
+   * Property of optionProperty which holds the `label`
+   * @default title
+   * @type {string}
+   */
   optionLabel: string;
+  /**
+   * Method that is used to get select options.
+   * @description Method should be defined in the blade `scope`.
+   * @type {string}
+   */
   optionsMethod: string;
+  /**
+   * Name of custom template to display data in select.
+   * Component should be registered globally.
+   * @type {{component: string}}
+   */
   customTemplate?: {
     component: string;
   };
+  /**
+   * Whether the select is clearable or not.
+   * @type {boolean}
+   */
   clearable?: boolean;
+  /**
+   * Update model with the value of the selected option instead of the whole option
+   * @default true
+   * @example true
+   * only value will be emitted
+   * @example false
+   * whole option will be emitted
+   * {
+   *  value: "someValue",
+   *  label: "someLabel"
+   * }
+   */
   emitValue?: boolean;
+  /**
+   * Whether the select is searchable or not.
+   * @type {boolean}
+   */
   searchable?: boolean;
 }
 
+export interface TextareaSchema extends SchemaBase {
+  /**
+   * Component type for textarea.
+   * @type {"vc-textarea"}
+   */
+  component: "vc-textarea";
+  /**
+   * Whether the textarea is clearable or not.
+   * @type {boolean}
+   */
+  clearable?: boolean;
+}
+
+/**
+ * Input schema interface.
+ * @interface
+ */
 export interface InputSchema extends SchemaBase {
+  /**
+   * Component type for input.
+   * @type {"vc-input"}
+   */
   component: "vc-input";
+  /**
+   * Input type.
+   * @type {"number" | "text" | "password" | "email" | "tel" | "url" | "time" | "date" | "datetime-local"}
+   */
   variant?: ComponentProps<typeof VcInput>["type"];
+  /**
+   * Whether the input is clearable or not.
+   * @type {boolean}
+   */
   clearable?: boolean;
+  /**
+   * Schema of component to be displayed before the input.
+   * @type {ControlSchema}
+   */
   prepend?: ControlSchema;
+  /**
+   * Schema of component to be displayed after the input
+   * @type {ControlSchema}
+   */
   append?: ControlSchema;
+  /**
+   * Schema of component to be displayed inside the input after the value.
+   * @type {ControlSchema}
+   */
   appendInner?: ControlSchema;
+  /**
+   * Schema of component to be displayed inside the input before the value.
+   * @type {ControlSchema}
+   */
   prependInner?: ControlSchema;
 }
 
-export interface VideoSchema extends SchemaBase {
+/**
+ *  Video schema interface.
+ * @interface
+ */
+export interface VideoSchema
+  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "update"> {
+  /**
+   * Component type for video.
+   * @type {"vc-video"}
+   */
   component: "vc-video";
+  /**
+   * Video size.
+   * @type {"auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl"}
+   */
   size?: ComponentProps<typeof VcVideo>["size"];
-  rounded?: boolean;
-  bordered?: boolean;
-  clickable?: boolean;
 }
 
-export interface FieldSchema extends SchemaBase {
+/**
+ * Data field schema interface.
+ * @interface
+ */
+export interface FieldSchema extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip"> {
+  /**
+   * Component type for field.
+   * @type {"vc-field"}
+   */
   component: "vc-field";
+  /**
+   * Field variant.
+   * @type {"text" | "normal" | "date" | "date-ago" | "link"}
+   */
   variant?: ComponentProps<typeof VcField>["type"];
+  /**
+   * Whether the field is copyable or not.
+   * @type {boolean}
+   */
   copyable?: boolean;
 }
 
-export interface ImageSchema extends SchemaBase {
+/**
+ * Image schema interface.
+ * @interface
+ */
+export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility" | "update"> {
+  /**
+   * Component type for image.
+   * @type {"vc-image"}
+   */
   component: "vc-image";
+  /**
+   * Image aspect ratio.
+   * @type {"1x1" | "16x9" | "4x3" | "3x2"}
+   */
   aspect?: ComponentProps<typeof VcImage>["aspect"];
+  /**
+   * Image size.
+   * @type {"auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl"}
+   */
   size?: ComponentProps<typeof VcImage>["size"];
+  /**
+   * Size of the element's background image. Accepts auto, cover, contain CSS background-size value.
+   * @type {"auto" | "contain" | "cover"}
+   */
   background?: ComponentProps<typeof VcImage>["background"];
+  /**
+   * Whether the image is rounded or not.
+   * @type {boolean}
+   */
   rounded?: boolean;
+  /**
+   * Whether the image is bordered or not.
+   * @type {boolean}
+   */
   bordered?: boolean;
+  /**
+   * Whether the image has preview on click or not.
+   * @type {boolean}
+   */
   clickable?: boolean;
 }
 
-export interface StatusSchema extends SchemaBase {
+/**
+ * Status schema interface.
+ * @interface
+ */
+export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility"> {
+  /**
+   * Component type for status.
+   * @type {"vc-status"}
+   */
   component: "vc-status";
+  /**
+   * Whether the status is outlined or not.
+   * @type {boolean}
+   */
   outline?: boolean;
+  /**
+   * Whether the status is extendable or not.
+   * @type {boolean}
+   */
   extend?: boolean;
+  /**
+   * Status variant.
+   * @type {"info" | "warning" | "danger" | "success" | "light-danger"}
+   */
   variant?: ComponentProps<typeof VcStatus>["variant"];
+  /**
+   * Status icon.
+   * @type {string}
+   */
   icon?: string;
+  /**
+   * Status icon size.
+   * @type {"xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl"}
+   */
   iconSize?: ComponentProps<typeof VcIcon>["size"];
+  /**
+   * Status icon variant.
+   * @type {"warning" | "danger" | "success"}
+   */
   iconVariant?: ComponentProps<typeof VcIcon>["variant"];
+  /**
+   * Status title.
+   * @type {string}
+   */
   title?: string;
+  /**
+   * Method to call to get status content.
+   * @description Method should be defined in the blade `scope`.
+   * @type {{ method: string }}
+   */
   content: {
     method: string;
   };
 }
 
-export interface InputCurrencySchema extends SchemaBase {
+/**
+ * Input-currency schema interface.
+ * @interface
+ */
+export interface InputCurrencySchema extends Omit<SchemaBase, "multilanguage"> {
+  /**
+   * Component type for input-currency.
+   * @type {"vc-input-currency"}
+   */
   component: "vc-input-currency";
+  /**
+   * Property that holds available currency options.
+   * @type {string}
+   */
   optionProperty: string;
+  /**
+   * Property of optionProperty which holds the `value`
+   * @default id
+   * @type {string}
+   */
   optionValue?: string;
+  /**
+   * Property of optionProperty which holds the `label`
+   * @default title
+   * @type {string}
+   */
   optionLabel?: string;
+  /**
+   * Whether the input-currency is clearable or not.
+   * @type {boolean}
+   */
   clearable?: boolean;
 }
 
+/**
+ * Editor schema interface.
+ * @interface
+ */
 export interface EditorSchema extends SchemaBase {
+  /**
+   * Component type for editor.
+   * @type {"vc-editor"}
+   */
   component: "vc-editor";
 }
 
-export interface DynamicPropertiesSchema extends SchemaBase {
+/**
+ * Interface for dynamic properties schema.
+ * @interface
+ */
+export interface DynamicPropertiesSchema extends Pick<SchemaBase, "id" | "disabled" | "property" | "visibility"> {
+  /**
+   * The component type for dynamic properties.
+   * @type {"vc-dynamic-properties"}
+   */
   component: "vc-dynamic-properties";
+  /**
+   * An array of property names to exclude from the dynamic properties schema.
+   * @type {string[]}
+   */
   exclude?: string[];
+  /**
+   * An array of property names to include in the dynamic properties schema.
+   * @type {string[]}
+   */
   include?: string[];
 }
 
-export interface GallerySchema extends SchemaBase {
+/**
+ * Gallery schema interface.
+ * @interface
+ */
+export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multilanguage"> {
+  /**
+   * Component type for the gallery.
+   * @type {"vc-gallery"}
+   */
   component: "vc-gallery";
+  /**
+   * Folder name for files upload.
+   * @type {string}
+   */
   uploadFolder: string;
+  /**
+   * Gallery type
+   * @type {"gallery" | "file-upload"}
+   */
+  variant?: ComponentProps<typeof VcGallery>["variant"];
+  /**
+   * Whether the gallery has multiple files upload or not.
+   * @type {boolean}
+   */
+  multiple?: boolean;
+  /**
+   * Gallery item button actions on hover.
+   * @type {{
+      preview: boolean;
+      edit: boolean;
+      remove: boolean;
+    }}
+   */
+  actions?: ComponentProps<typeof VcGallery>["itemActions"];
 }
 
-export interface CardSchema extends SchemaBase {
+/**
+ * Interface for a card schema.
+ * @interface
+ */
+export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility">, "label"> {
+  /**
+   * Component type for the card.
+   * @type {"vc-card"}
+   */
   component: "vc-card";
+  /**
+   * Array of control schemas for the fields in the card.
+   * @type {ControlSchema[]}
+   */
   fields: ControlSchema[];
+  /**
+   * Button schema for the action button in the card, along with the action method to use.
+   * @type {ButtonSchema & { method: string }}
+   */
   action?: ButtonSchema & { method: string };
+  /**
+   * Whether the card is collapsible or not.
+   * @type {boolean}
+   */
   collapsible?: boolean;
 }
 
-export interface WidgetsSchema extends SchemaBase {
+export interface WidgetsSchema extends Pick<SchemaBase, "id"> {
   component: "vc-widgets";
   children: string[];
 }
 
-export interface CheckboxSchema extends SchemaBase {
+export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "placeholder"> {
   component: "vc-checkbox";
   content: string;
   trueValue?: boolean;
   falseValue?: boolean;
 }
 
-export interface FieldsetSchema extends SchemaBase {
+/**
+ * Fieldset schema interface.
+ * @interface
+ */
+export interface FieldsetSchema extends PartialBy<Pick<SchemaBase, "id" | "property" | "visibility">, "property"> {
+  /**
+   * Component type for the fieldset.
+   * @type {"vc-fieldset"}
+   */
   component: "vc-fieldset";
+  /**
+   * Number of columns to display the fields in.
+   * @type {number}
+   */
   columns?: number;
+  /**
+   * Array of numbers that define the aspect ratio of each column.
+   * @example Set to [1, 1] to make all columns equal width.
+   * @description Uses CSS flex-grow property.
+   * @type {number[]}
+   */
   aspectRatio?: number[];
-  fields: Exclude<ControlSchema[], FieldsetSchema>;
+  /**
+   * Array of control schemas to be displayed in the fieldset.
+   * @type {ControlSchema[]}
+   */
+  fields: ControlSchema[];
+  /**
+   * Method to call to remove field from the fieldset. When set - activates remove button.
+   *
+   * Used for property-based fieldsets.
+   *
+   * Allows to remove selected fieldset.
+   * @description Method should be defined in the blade `scope`.
+   * @type {{ method: string }}
+   */
   remove?: {
     method: string;
   };
 }
 
-export interface ButtonSchema extends SchemaBase {
+/**
+ * Button schema interface.
+ */
+export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility"> {
+  /**
+   * Component type.
+   * @type {"vc-button"}
+   */
   component: "vc-button";
+  /**
+   * Button inner text.
+   * @type {string}
+   */
   content: string;
+  /**
+   * Small sized button.
+   * @type {boolean}
+   */
   small?: boolean;
+  /**
+   * Button icon.
+   * @type {string}
+   */
   icon?: string;
+  /**
+   * Size of the button icon.
+   * @type {ComponentProps<typeof VcIcon>["size"]}
+   */
   iconSize?: ComponentProps<typeof VcIcon>["size"];
+  /**
+   * Button as text without overlay.
+   * @type {boolean}
+   */
   text?: boolean;
-  method?: string;
+  /**
+   * Method to be called when the button is clicked.
+   * @description Method should be defined in the blade `scope`.
+   * @type {string}
+   */
+  method: string;
 }
 
 export type ControlSchema =
@@ -270,7 +671,8 @@ export type ControlSchema =
   | StatusSchema
   | FieldSchema
   | VideoSchema
-  | ImageSchema;
+  | ImageSchema
+  | TextareaSchema;
 
 export interface FilterBase {
   columns: {

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

@@ -1,4 +1,4 @@
-import { ComputedRef, Raw } from "vue";
+import { ComputedRef, Raw, Component } from "vue";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   VcButton,
@@ -14,6 +14,7 @@ import {
   VcSelect,
   VcStatus,
   VcVideo,
+  VcTextarea,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -49,7 +50,9 @@ export type ControlType =
   | IInputCurrency
   | IStatusField
   | IContentField
-  | IImageField;
+  | IImageField
+  | ITextareaField
+  | IVideoField;
 
 export type ControlTypeWithSlots = Extract<
   ControlType,
@@ -77,7 +80,7 @@ export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
 };
 
 export interface IControlBaseOptions {
-  visibility?: ComputedRef<boolean>;
+  visibility?: ComputedRef<boolean | undefined>;
 }
 
 export type ISelectField = {
@@ -160,3 +163,8 @@ export type IFieldset = {
   remove?: { method?: string };
   fields?: ControlType[];
 };
+
+export type ITextareaField = {
+  props: ComponentProps<typeof VcTextarea> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcTextarea>;