@vc-shell/framework 1.0.188 → 1.0.190

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

@@ -1,4 +1,4 @@
-import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, computed, h, mergeProps, unref } from "vue";
 import { Button } from "../factories";
 import componentProps from "./props";
 import { ButtonSchema } from "../../types";
@@ -19,6 +19,9 @@ export default {
             icon: props.element?.icon,
             iconSize: props.element?.iconSize,
             text: props.element?.text,
+            variant: props.element?.variant,
+            raised: props.element?.raised,
+            outline: props.element?.outline,
             onClick: () => {
               unref(props.bladeContext.scope)?.[props.element.method]();
             },
@@ -33,7 +36,7 @@ export default {
         },
       });
 
-      return h(field.component as Component, field.props, field.slots);
+      return h(field.component as Component, mergeProps(field.props, { class: "tw-self-start" }), field.slots);
     };
   },
 };

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

@@ -65,7 +65,7 @@ export default {
           {
             header: toValue(props.baseProps.label),
             isCollapsable: props.element.collapsible,
-            isCollapsed: restoreCollapsed(props.element.id),
+            isCollapsed: restoreCollapsed(props.element.id) || props.element.collapsed,
             "onState:collapsed": (e: boolean) => handleCollapsed(props.element.id, e),
           },
           unrefNested(props.baseProps),
@@ -89,13 +89,13 @@ export default {
               toValue(props.fields),
             ),
           actions: () => {
-            if (props.element.action && props.fieldContext && props.currentLocale) {
+            if (props.element.action) {
               const elem = nodeBuilder({
                 controlSchema: props.element.action,
                 parentId: `${props.element.id}`,
-                internalContext: props.fieldContext,
+                internalContext: props.fieldContext ?? {},
                 bladeContext: props.bladeContext,
-                currentLocale: props.currentLocale,
+                currentLocale: props.currentLocale ?? "en",
                 formData: props.formData,
               });
               return elem;

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

@@ -16,6 +16,7 @@ export default {
             type: props.element.variant,
             copyable: props.element.copyable || false,
             orientation: props.element.orientation,
+            aspectRatio: props.element.aspectRatio,
           },
           unrefNested(props.baseProps),
           {

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

@@ -78,12 +78,11 @@ export default {
             disabled:
               props.bladeContext.scope && "disabled" in props.bladeContext.scope && props.bladeContext.scope.disabled,
             property: prop,
-            modelValue: computed(
-              () =>
-                props.bladeContext.scope?.dynamicProperties?.getPropertyValue(
-                  prop,
-                  toValue(props.currentLocale ?? "en-US"),
-                ),
+            modelValue: computed(() =>
+              props.bladeContext.scope?.dynamicProperties?.getPropertyValue(
+                prop,
+                toValue(props.currentLocale ?? "en-US"),
+              ),
             ),
             optionsGetter: props.bladeContext.scope?.dynamicProperties?.loadDictionaries as (
               property: Record<string, any>,

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

@@ -1,20 +1,22 @@
-import { h, ExtractPropTypes, Component, unref } from "vue";
+import { h, ExtractPropTypes, Component } from "vue";
 import { EditorField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
 import { unrefNested } from "../../helpers/unrefNested";
+import { EditorSchema } from "../..";
 
 export default {
   name: "EditorField",
   props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps>) {
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: EditorSchema }) {
     return () => {
       const field = EditorField({
         props: Object.assign(
           {},
           {
             currentLanguage: props.currentLocale,
-            assetsFolder: unref(props.formData).id || unref(props.formData).categoryId,
+            assetsFolder: props.element.assetsFolder,
+            maxlength: props.element.maxlength,
           },
           unrefNested(props.baseProps),
           {

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

@@ -14,7 +14,7 @@ export default {
     const { fields: fieldsetFields } = toRefs(props);
 
     return () =>
-      toValue(fieldsetFields.value).map((fields, index, arr) => {
+      toValue(fieldsetFields.value)?.map((fields, index, arr) => {
         const divideByCols = _.chunk(fields, props.element.columns || 1) ?? [];
 
         return h(

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

@@ -1,4 +1,4 @@
-import { Component, ExtractPropTypes, computed, h, markRaw, ref, toRefs, toValue, unref, watch } from "vue";
+import { Component, ExtractPropTypes, computed, h, markRaw, ref, toRefs, toValue, watch } from "vue";
 import { Gallery } from "../factories";
 import componentProps from "./props";
 import { ICommonAsset } from "../../../../../core/types";
@@ -81,7 +81,7 @@ export default {
             await showConfirmation(
               computed(() =>
                 t(
-                  `${props.bladeContext.settings.localizationPrefix
+                  `${props.bladeContext?.settings?.localizationPrefix
                     .trim()
                     .toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE_CONFIRMATION`,
                 ),
@@ -114,7 +114,10 @@ export default {
             context: props.fieldContext,
             scope: props.bladeContext.scope,
           });
-          await props.bladeContext.validationState.setFieldValue(props.element.id, args);
+
+          if (props.bladeContext.validationState) {
+            await props.bladeContext.validationState.setFieldValue(props.element.id, args);
+          }
         }
       }
 

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

@@ -17,7 +17,6 @@ export default {
             aspect: props.element.aspect,
             rounded: props.element.rounded,
             bordered: props.element.bordered,
-            clickable: props.element.clickable,
             size: props.element.size,
             background: props.element.background,
           },

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

@@ -21,7 +21,7 @@ export default {
             option: toValue(getModel(props.element.optionProperty, props.fieldContext ?? {})),
             optionLabel: props.element.optionLabel,
             optionValue: props.element.optionValue,
-            options: unref(props.bladeContext.scope)?.["currencies"],
+            options: toValue(unref(props.bladeContext.scope)?.[props.element.options]),
             "onUpdate:option": (e: string | number | Record<string, unknown>) => {
               setModel({
                 value: e,

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

@@ -25,6 +25,7 @@ export default {
             type: props.element.variant,
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
           },
           unrefNested(props.baseProps),
           {

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

@@ -7,7 +7,8 @@ import { MultivalueSchema } from "../../types";
 import { VcMultivalue } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
 
-type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["item"]>["0"];
+type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
+  Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
 
 export default {
   name: "MultivalueField",
@@ -33,7 +34,7 @@ export default {
 
         slots:
           props.element.customTemplate &&
-          ["item"].reduce(
+          ["option", "selected-item"].reduce(
             (obj, slot) => {
               obj[slot] = (scope: TScope) =>
                 h(resolveComponent(props.element.customTemplate?.component as string), {

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

@@ -23,6 +23,7 @@ export default {
             optionValue: props.element.optionValue,
             optionLabel: props.element.optionLabel,
             emitValue: props.element.emitValue,
+            mapOptions: props.element.mapOptions,
             options: props.bladeContext.scope?.[props.element.optionsMethod],
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,

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

@@ -15,10 +15,14 @@ export default {
     return () => {
       const slotContent = computed(() => {
         if (props.element.content && typeof props.element.content === "string") {
-          return props.element.content;
-        } else if (props.element.content?.method) {
+          return t(props.element.content);
+        } else if (
+          typeof props.element.content === "object" &&
+          "method" in props.element.content &&
+          props.element.content?.method
+        ) {
           const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
-          if (method === "function") {
+          if (typeof method === "function") {
             return method();
           } else {
             return method;
@@ -43,12 +47,14 @@ export default {
         slots: {
           default: () => {
             return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
-              h(VcIcon, {
-                icon: props.element.icon,
-                size: props.element.iconSize,
-                variant: props.element.iconVariant,
-                class: "tw-mr-3",
-              }),
+              props.element.icon
+                ? h(VcIcon, {
+                    icon: props.element.icon,
+                    size: props.element.iconSize,
+                    variant: props.element.iconVariant,
+                    class: "tw-mr-3",
+                  })
+                : undefined,
               h("div", [
                 h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
                 h("div", slotContent.value),
@@ -58,7 +64,11 @@ export default {
         },
       });
 
-      return h(field.component as Component, { ...field.props, class: "tw-w-full tw-box-border" }, field.slots);
+      return h(
+        field.component as Component,
+        { ...field.props, class: props.element.extend ? "tw-w-full tw-box-border" : "tw-flex tw-self-start" },
+        field.slots,
+      );
     };
   },
 };

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

@@ -16,6 +16,7 @@ export default {
           {
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
           },
           unrefNested(props.baseProps),
           {

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

@@ -14,7 +14,6 @@ export default {
           {},
           {
             source: toValue(props.baseProps.modelValue),
-            size: props.element.size,
           },
           unrefNested(props.baseProps),
           {

package/shared/modules/dynamic/components/fields/storybook/Button.stories.ts

@@ -0,0 +1,247 @@
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { computed, reactive, ref } from "vue";
+import page from "./pages/DynamicRender";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { ButtonSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/atoms/VcButton",
+  component: page,
+  args: {
+    id: "buttonId",
+    component: "vc-button",
+    content: "I am a button",
+    method: "runFn",
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "disabled", "visibility"]),
+    variant: {
+      description: "Button variant.",
+      control: "radio",
+      options: ["primary", "warning", "danger"],
+      table: {
+        type: {
+          summary: "primary | warning | danger",
+        },
+        defaultValue: {
+          summary: "primary",
+        },
+      },
+    },
+    content: {
+      description: `Button inner text.
+      Supports i18n keys.`,
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    component: {
+      description: `Component type.`,
+      control: "text",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-button",
+        },
+        defaultValue: {
+          summary: "vc-button",
+        },
+      },
+    },
+    small: {
+      description: "Small sized button.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    raised: {
+      description: "Raised button.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    text: {
+      description: "Button as text without overlay.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    outline: {
+      description: "Outlined button.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    icon: {
+      description: "Button icon.",
+      control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    iconSize: {
+      description: "Size of the button icon.",
+      control: "radio",
+      options: ["s", "m", "xs", "l", "xl", "xxl", "xxxl"],
+      table: {
+        type: {
+          summary: "s | m | xs | l | xl | xxl | xxxl",
+        },
+        defaultValue: {
+          summary: "s",
+        },
+      },
+    },
+    method: {
+      description: `Method to be called when the button is clicked.
+      Method should be defined in the blade \`scope\``,
+      type: {
+        required: true,
+        name: "string",
+      },
+      control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<ButtonSchema>;
+
+export const Template: StoryFn<ButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      scope: {
+        runFn: () => alert("Button click"),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const Disabled: StoryFn<ButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      scope: {
+        runFn: () => alert("Button click"),
+        disabledFn: computed(() => true),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Disabled.args = {
+  disabled: { method: "disabledFn" },
+};
+
+export const WithVisibilityMethod: StoryFn<ButtonSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      scope: {
+        runFn: () => alert("Button click"),
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: { method: "visibilityFn" },
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  small: true,
+};
+
+export const Text = Template.bind({});
+Text.args = {
+  text: true,
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: "fas fa-truck-moving",
+};
+
+export const IconSize = Template.bind({});
+IconSize.args = {
+  icon: "fas fa-truck-moving",
+  iconSize: "xxl",
+};
+
+export const Raised = Template.bind({});
+Raised.args = {
+  raised: true,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: "warning",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: "danger",
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  outline: true,
+};

package/shared/modules/dynamic/components/fields/storybook/Card.stories.ts

@@ -0,0 +1,166 @@
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { reactive, ref } from "vue";
+import page from "./pages/DynamicRender";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { CardSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/atoms/VcCard",
+  component: page,
+  args: {
+    id: "cardId",
+    component: "vc-card",
+    label: "Card Title",
+    fields: [
+      {
+        id: "fieldId",
+        component: "vc-input",
+        label: "Input field",
+        placeholder: "Enter text here",
+        property: "mockedProperty",
+      },
+    ],
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "disabled", "visibility"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-card",
+        },
+        defaultValue: {
+          summary: "vc-card",
+        },
+      },
+    },
+    fields: {
+      description: "Array of control schemas for the fields in the card.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "ControlSchema[]",
+        },
+      },
+    },
+    collapsible: {
+      description: "Whether the card is collapsible or not.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    collapsed: {
+      description: "Whether the card is collapsed or not.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    removePadding: {
+      description: "Remove padding from card.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    action: {
+      description: "Action button to be displayed in card.",
+      table: {
+        type: {
+          summary: "ButtonSchema",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<CardSchema>;
+
+export const Template: StoryFn<CardSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      scope: {
+        runFn: () => alert("Button click"),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const EmptyCard = Template.bind({});
+EmptyCard.args = {
+  fields: [],
+};
+
+export const Collapsible = Template.bind({});
+Collapsible.args = {
+  collapsible: true,
+};
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+  collapsed: true,
+  collapsible: true,
+};
+
+export const WithoutPadding = Template.bind({});
+WithoutPadding.args = {
+  removePadding: true,
+};
+
+export const WithAction = Template.bind({});
+WithAction.args = {
+  action: {
+    id: "actionId",
+    component: "vc-button",
+    content: "Action",
+    method: "runFn",
+    small: true,
+    variant: "danger",
+  },
+};
+
+export const WithVisibilityMethod: StoryFn<CardSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      scope: {
+        runFn: () => alert("Button click"),
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: { method: "visibilityFn" },
+};