@vc-shell/framework 1.0.187 → 1.0.189

package/shared/modules/dynamic/components/fields/storybook/common/args.ts

@@ -0,0 +1,130 @@
+export const SchemaBaseArgTypes = {
+  id: {
+    description: "Unique identifier for component.",
+    control: "text",
+    type: {
+      required: true,
+      name: "string",
+    },
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  label: {
+    description: `Control label.
+      To show label based on some bound property - use interpolation \`{}\` syntax.
+      \n\`@example\` {someProperty}
+      Supports i18n keys.`,
+    control: "text",
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  property: {
+    description: `Property name to populate the component with data.
+    Data can be defined in either the \`item\` or the \`scope\`.
+    \nDot notation can also be used for nested properties, e.g. \`address.city\` or \`addresses[1].city\`.
+    \nYou can also use a \`function\` or \`writable computed\` to set the property in the \`scope\`, which receives the modified data as an argument.
+    `,
+    type: {
+      required: true,
+      name: "string",
+    },
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  rules: {
+    description: `Vee-validate and custom validation rules for the schema.`,
+    control: "object",
+    table: {
+      type: {
+        summary: "IValidationRules",
+        detail:
+          "https://github.com/VirtoCommerce/vc-shell/blob/67ac3849b35660680123efaf59775d4a64a210f6/framework/core/types/index.ts#L10",
+      },
+    },
+  },
+  placeholder: {
+    description: `Placeholder text for the component.
+    Supports i18n keys.`,
+    control: "text",
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  disabled: {
+    description: `Disabled state for component.
+    Method should be defined in the blade \`scope\`.
+    Method should return boolean value.
+    `,
+    table: {
+      type: {
+        summary: "{ method: string }",
+      },
+    },
+  },
+  tooltip: {
+    description: `Tooltip text for the component.
+    Supports i18n keys.`,
+    control: "text",
+    table: {
+      type: {
+        summary: "string",
+      },
+    },
+  },
+  visibility: {
+    description: `Visibility options for component.
+    Method should be defined in the blade \`scope\`.
+    Method should return boolean value.
+    `,
+    table: {
+      type: {
+        summary: "{ method: string }",
+      },
+    },
+  },
+  multilanguage: {
+    description: "Flag to indicate if the component supports multilanguage.",
+    control: "boolean",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+    },
+  },
+  update: {
+    description: `Additional method that is called when the modelValue of the component changes.
+    Method should be defined in the blade \`scope\`.
+    `,
+    table: {
+      type: {
+        summary: "{ method: string }",
+      },
+    },
+  },
+  horizontalSeparator: {
+    description: `Adds horizontal separator after component.`,
+    control: "boolean",
+    table: {
+      type: {
+        summary: "boolean",
+      },
+      defaultValue: {
+        summary: "false",
+      },
+    },
+  },
+} as const;

package/shared/modules/dynamic/components/fields/storybook/common/templates.ts

@@ -0,0 +1,8 @@
+export const template = `
+<page :args="args" :context="context" :additionalSource="additionalSource" @update:modelValue="(val) => Object.assign(context.item, val)" />
+`;
+
+export const templateWithVisibilityToggle = `
+<VcButton @click="toggle" class="tw-mb-4" outline small variant="danger">Toggle visibility</VcButton>
+${template}
+`;

package/shared/modules/dynamic/components/fields/storybook/pages/DynamicRender.ts

@@ -0,0 +1,54 @@
+import { DefineComponent, PropType, UnwrapNestedRefs, defineComponent, h, reactive, ref, watchEffect } from "vue";
+import SchemaRender from "../../../SchemaRender";
+import { sourceHighlighter } from "../utils/sourceHighlighter";
+import { ControlSchema, DetailsBladeContext } from "../../../..";
+import { VcPopupContainer } from "../../../../../../components/popup-handler";
+import { useForm } from "vee-validate";
+
+export default defineComponent({
+  title: "DynamicPage",
+  props: {
+    context: {
+      type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
+      required: true,
+      default: () => ({}) as DetailsBladeContext,
+    },
+    args: {
+      type: Object as PropType<ControlSchema>,
+      required: true,
+      default: (): ControlSchema => ({}) as ControlSchema,
+    },
+    additionalSource: {
+      type: Object as PropType<DefineComponent>,
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    props = reactive(props);
+    useForm({ validateOnMount: true });
+
+    const highlightedCode = ref("");
+
+    watchEffect(async () => {
+      highlightedCode.value = await sourceHighlighter(props.args, props.context, props.additionalSource);
+    });
+
+    return () => [
+      h(SchemaRender, {
+        modelValue: props.context?.item,
+        "onUpdate:modelValue": (value) => {
+          ctx.emit("update:modelValue", value);
+        },
+        context: props.context,
+        uiSchema: [props.args],
+      }),
+
+      h("pre", {
+        ref: "pre",
+        class: "tw-mt-4 tw-p-2 tw-bg-[#F7FAFC]",
+        innerHTML: highlightedCode.value,
+      }),
+      h(VcPopupContainer),
+    ];
+  },
+});

package/shared/modules/dynamic/components/fields/storybook/utils/sourceHighlighter.ts

@@ -0,0 +1,16 @@
+import { sourceTransform } from "./sourceTransform";
+import { highlight, languages } from "prismjs";
+import "prismjs/themes/prism.css";
+import { ControlSchema } from "../../../../types";
+
+export const sourceHighlighter = async (
+  args: ControlSchema,
+  context: Record<string, unknown>,
+  additionalSource: unknown,
+) => {
+  return createPrismEl(await sourceTransform(args, context, additionalSource));
+};
+
+function createPrismEl(state: string) {
+  return highlight(state, languages.javascript, "javascript");
+}

package/shared/modules/dynamic/components/fields/storybook/utils/sourceTransform.ts

@@ -0,0 +1,41 @@
+import * as parserTypeScript from "prettier/parser-typescript";
+import * as prettier from "prettier/standalone";
+// eslint-disable-next-line import/namespace
+import * as prettierPluginEstree from "prettier/plugins/estree";
+import serialize from "serialize-javascript";
+import { ControlSchema } from "../../../../types";
+
+export const sourceTransform = async (
+  args: ControlSchema,
+  context: Record<string, unknown>,
+  additionalSource: unknown,
+) => {
+  let source: string = "";
+
+  if (args) {
+    source += `
+    \nconst ComponentSchema = ${serialize(args, { space: 2 })}`;
+  }
+
+  if (context && Object.keys(context).length > 0) {
+    source += `
+    \nconst ComposableScope = ${serialize(context, { unsafe: true, space: 2 })}`;
+  }
+
+  if (additionalSource) {
+    source += `
+    \nconst Context = ${serialize(additionalSource, { unsafe: true, space: 2 })}`;
+  }
+
+  return await formatCode(source);
+};
+
+const formatCode = async (src: string) => {
+  const options = {
+    parser: "typescript",
+    singleQuote: true,
+    plugins: [parserTypeScript, prettierPluginEstree],
+    tabWidth: 2,
+  };
+  return await prettier.format(src, options);
+};

package/shared/modules/dynamic/factories/base/useDetailsFactory.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, MaybeRef, computed, ref, watch } from "vue";
+import { ComputedRef, MaybeRef, Ref, computed, ref, watch } from "vue";
 import * as _ from "lodash-es";
 import { useForm, useIsFormDirty, useIsFormValid } from "vee-validate";
 import { useAsync, useLoading } from "../../../../../core/composables";
@@ -20,7 +20,7 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
     const itemTemp = ref<Item>();
     const isModified = ref(false);
     const isFormValid = useIsFormValid();
-    const isDirty = useIsFormDirty();
+    let isDirty: Ref<boolean> = useIsFormDirty();
     const isDisabled = computed(() => !isDirty.value || !isFormValid.value);
 
     const { loading: itemLoading, action: load } = useAsync<ItemId>(async (args?: ItemId) => {
@@ -32,6 +32,8 @@ export const useDetailsFactory = <Item>(factoryParams: UseDetailsFactoryParams<I
       if (validationState.value.valid) {
         await factoryParams.saveChanges?.(item as Item);
         isModified.value = false;
+        isDirty = ref(false);
+        isDirty = ref(false);
       } else throw new Error("Form is not valid");
     });
 

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

@@ -3,6 +3,9 @@ import * as _ from "lodash-es";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getModel = (property: string, context: Record<string, any>) => {
   if (property && context) {
+    if (typeof context[property] === "function") {
+      return context[property]();
+    }
     return _.get(context, property);
   }
   return null;

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

@@ -62,7 +62,7 @@ function nodeBuilder<
     safeIn("property", controlSchema) &&
     controlSchema.property &&
     bladeContext.scope &&
-    bladeContext.scope[controlSchema.property];
+    getModel(controlSchema.property, bladeContext.scope);
 
   const modelValue = scopedProperty ?? contextProperty ?? undefined;
 

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

@@ -17,7 +17,7 @@ function setModel(args: {
     if (typeof scope[property] === "function") {
       scope[property](value);
     } else {
-      scope[property] = value;
+      _.set(scope, property, value);
     }
   }
 }

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

@@ -1,4 +1,5 @@
 import {
+  VcButton,
   VcField,
   VcGallery,
   VcIcon,
@@ -209,6 +210,9 @@ export interface SchemaBase {
    */
   label?: string;
   /** Property name to populate the component with data.
+   * Data can be defined in either the `item` or the `scope`.
+   * Dot notation can also be used for nested properties, e.g. `address.city` or `addresses[1].city`.
+   * You can also use a `function` or `writable computed` to set the property in the `scope`, which receives the modified data as an argument.
    * @type {string}
    */
   property: string;
@@ -218,7 +222,7 @@ export interface SchemaBase {
    * @type {IValidationRules}
    */
   rules?: IValidationRules;
-  /** Placeholder text for component.
+  /** Placeholder text for the component.
    * @type {string}
    */
   placeholder?: string;
@@ -228,7 +232,7 @@ export interface SchemaBase {
    * @type {{ method: string }}
    */
   disabled?: { method: string };
-  /** Tooltip text for component.
+  /** Tooltip text for the component.
    * @type {string}
    */
   tooltip?: string;
@@ -277,9 +281,11 @@ export interface SelectSchema extends SchemaBase {
    * @type {string}
    */
   optionLabel: string;
-  /**
-   * Method that is used to get select options.
-   * @description Method should be defined in the blade `scope`.
+  /** Method that is used to get select options.
+   *  @description Method should be defined in the blade \`scope\` and could be:
+   *  1) async method with the following arguments: (\`keyword: string\`, \`skip\`, \`ids?: string[]\`).
+   *  2) any array
+   *  3) composable returning array
    * @type {string}
    */
   optionsMethod: string;
@@ -309,6 +315,11 @@ export interface SelectSchema extends SchemaBase {
    * }
    */
   emitValue?: boolean;
+  /**
+   * @type {boolean}
+   * @default true
+   */
+  mapOptions?: boolean;
   /**
    * Whether the select is searchable or not.
    * @type {boolean}
@@ -424,18 +435,12 @@ export interface InputSchema extends SchemaBase {
  *  Video schema interface.
  * @interface
  */
-export interface VideoSchema
-  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "update"> {
+export interface VideoSchema extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip"> {
   /**
    * 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"];
 }
 
 /**
@@ -478,8 +483,7 @@ export interface FieldSchema
  * Image schema interface.
  * @interface
  */
-export interface ImageSchema
-  extends Pick<SchemaBase, "id" | "property" | "visibility" | "update" | "horizontalSeparator"> {
+export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility"> {
   /**
    * Component type for image.
    * @type {"vc-image"}
@@ -510,11 +514,6 @@ export interface ImageSchema
    * @type {boolean}
    */
   bordered?: boolean;
-  /**
-   * Whether the image has preview on click or not.
-   * @type {boolean}
-   */
-  clickable?: boolean;
 }
 
 /**
@@ -563,13 +562,16 @@ export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility" | "ho
    */
   title?: string;
   /**
-   * Method to call to get status content.
+   * Used to display the content of the status. It can be a `string\` or an `object with a method property`.
+   * Method property could be a function, `computed property` or `ref`, returning a `string` value.
    * @description Method should be defined in the blade `scope`.
-   * @type {{ method: string }}
+   * @type {{ method: string } | string}
    */
-  content: {
-    method: string;
-  };
+  content:
+    | {
+        method: string;
+      }
+    | string;
 }
 
 /**
@@ -583,7 +585,12 @@ export interface InputCurrencySchema extends Omit<SchemaBase, "multilanguage"> {
    */
   component: "vc-input-currency";
   /**
-   * Property that holds available currency options.
+   * List of currency options to be displayed in the dropdown.
+   * @description Array should be defined in the blade `scope`.
+   */
+  options: string;
+  /**
+   * Name of property that holds currency value.
    * @type {string}
    */
   optionProperty: string;
@@ -616,6 +623,11 @@ export interface EditorSchema extends SchemaBase {
    * @type {"vc-editor"}
    */
   component: "vc-editor";
+  /**
+   * Assets folder for the editor image uploads.
+   * @type {string}
+   */
+  assetsFolder: string;
 }
 
 /**
@@ -645,7 +657,8 @@ export interface DynamicPropertiesSchema
  * Gallery schema interface.
  * @interface
  */
-export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multilanguage"> {
+export interface GallerySchema
+  extends Omit<SchemaBase, "placeholder" | "multilanguage" | "update" | "horizontalSeparator"> {
   /**
    * Component type for the gallery.
    * @type {"vc-gallery"}
@@ -681,8 +694,7 @@ export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multila
  * Interface for a card schema.
  * @interface
  */
-export interface CardSchema
-  extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility" | "horizontalSeparator">, "label"> {
+export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility">, "label"> {
   /**
    * Component type for the card.
    * @type {"vc-card"}
@@ -695,14 +707,19 @@ export interface CardSchema
   fields: ControlSchema[];
   /**
    * Button schema for the action button in the card, along with the action method to use.
-   * @type {ButtonSchema & { method: string }}
+   * @type {ButtonSchema}
    */
-  action?: ButtonSchema & { method: string };
+  action?: ButtonSchema;
   /**
    * Whether the card is collapsible or not.
    * @type {boolean}
    */
   collapsible?: boolean;
+  /**
+   * Whether the card is collapsed or not.
+   * @type {boolean}
+   */
+  collapsed?: boolean;
   /**
    * Removes internal padding from the card.
    * @type {boolean}
@@ -727,12 +744,12 @@ export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "plac
    */
   content: string;
   /**
-   * True value for the switch.
+   * Value when checkbox is checked.
    * @type {boolean}
    */
   trueValue?: boolean;
   /**
-   * False value for the switch.
+   * Value when checkbox is unchecked.
    * @type {boolean}
    */
   falseValue?: boolean;
@@ -742,13 +759,18 @@ export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "plac
  * Fieldset schema interface.
  * @interface
  */
-export interface FieldsetSchema
-  extends PartialBy<Pick<SchemaBase, "id" | "property" | "visibility" | "horizontalSeparator">, "property"> {
+export interface FieldsetSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator"> {
   /**
    * Component type for the fieldset.
    * @type {"vc-fieldset"}
    */
   component: "vc-fieldset";
+  /** Property name to build `fieldset` from `array of objects`.
+   * Data can be defined in either the `item` or the `scope`.
+   * Dot notation can also be used for nested properties, e.g. `address.city` or `addresses[1].city`
+   * @type {string}
+   */
+  property?: string;
   /**
    * Number of columns to display the fields in.
    * @type {number}
@@ -756,13 +778,13 @@ export interface FieldsetSchema
   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.
+   * @example If you have two columns - set to [1, 1] to make all columns equal width.
+   * @description Uses CSS flex-grow property to set the width of each column.
    * @type {number[]}
    */
   aspectRatio?: number[];
   /**
-   * Array of control schemas to be displayed in the fieldset.
+   * Array of control schemas for the fields in the fieldset.
    * @type {ControlSchema[]}
    */
   fields: ControlSchema[];
@@ -773,6 +795,7 @@ export interface FieldsetSchema
    *
    * Allows to remove selected fieldset.
    * @description Method should be defined in the blade `scope`.
+   * @argument {number} id - id of the field to remove
    * @type {{ method: string }}
    */
   remove?: {
@@ -791,12 +814,12 @@ export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilan
    */
   component: "vc-switch";
   /**
-   * True value for the switch.
+   * Value when switch is on.
    * @type {boolean}
    */
   trueValue?: boolean;
   /**
-   * False value for the switch.
+   * Value when switch is off.
    * @type {boolean}
    */
   falseValue?: boolean;
@@ -808,7 +831,7 @@ export type TableSchema = Omit<ListContentSchema, "filter"> & Pick<SchemaBase, "
  * Button schema interface.
  * @interface
  */
-export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility" | "horizontalSeparator"> {
+export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility"> {
   /**
    * Component type.
    * @type {"vc-button"}
@@ -845,6 +868,21 @@ export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visi
    * @type {string}
    */
   method: string;
+  /**
+   * Button variant.
+   * @type {primary | warning | danger}
+   */
+  variant?: ComponentProps<typeof VcButton>["variant"];
+  /**
+   * Raised button.
+   * @type {boolean}
+   */
+  raised?: boolean;
+  /**
+   * Outlined button.
+   * @type {boolean}
+   */
+  outline?: boolean;
 }
 
 /**

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

@@ -22,13 +22,14 @@ import {
 } 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;
+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>;

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

@@ -41,7 +41,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "./../vc-icon";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 export interface Props {
   header?: string;
@@ -71,7 +71,7 @@ defineSlots<{
   actions: (props?: any) => any;
 }>();
 
-const isCollapsedInternal = ref(props.isCollapsed);
+const isCollapsedInternal = ref();
 
 function onHeaderClick() {
   if (props.isCollapsable) {
@@ -80,6 +80,16 @@ function onHeaderClick() {
   }
   emit("header:click");
 }
+
+watch(
+  () => props.isCollapsed,
+  (value) => {
+    isCollapsedInternal.value = value;
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 
 <style lang="scss">

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

@@ -1,3 +1 @@
-import _Switch from "./vc-switch.vue";
-
-export const VcSwitch = _Switch as typeof _Switch;
+export { default as VcSwitch } from "./vc-switch.vue";