@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

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

@@ -1,130 +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;
+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

@@ -1,8 +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}
-`;
+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/index.ts

@@ -1,4 +1,4 @@
-import * as factories from "./factories";
-import * as models from "../types/models";
-
-export { factories, models };
+import * as factories from "./factories";
+import * as models from "../types/models";
+
+export { factories, models };

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

@@ -1,4 +1,4 @@
-export { default as useFilterBuilder } from "./useFilterBuilder";
-export { useTableTemplates } from "./useTableTemplates";
-export { useToolbarReducer } from "./useToolbarReducer";
-export { default as useDynamicViewsUtils } from "./useDynamicViewsUtils";
+export { default as useFilterBuilder } from "./useFilterBuilder";
+export { useTableTemplates } from "./useTableTemplates";
+export { useToolbarReducer } from "./useToolbarReducer";
+export { default as useDynamicViewsUtils } from "./useDynamicViewsUtils";

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

@@ -1,46 +1,46 @@
-import { ref, WatchStopHandle, watch, onMounted, onUnmounted, getCurrentInstance, Ref } from "vue";
-import { ListBaseBladeScope, DetailsBaseBladeScope, DetailsBladeExposed, ListBladeExposed } from "../..";
-
-export interface IUseDynamicViewsUtils {
-  getBladeExposedData: <BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>(
-    scope: BladeScope,
-  ) => BladeScope extends ListBaseBladeScope ? Ref<ListBladeExposed<BladeScope>> : Ref<DetailsBladeExposed<BladeScope>>;
-}
-
-export default () => {
-  const instance = getCurrentInstance();
-
-  function getBladeExposedData<BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>() {
-    const reactiveBlade = ref<BladeScope | null>(null);
-
-    const blade = ref(instance?.vnode);
-
-    let unwatch: WatchStopHandle | null = null;
-
-    const updateReactiveBlade = () => {
-      if (blade.value && blade.value.props?.navigation?.instance) {
-        reactiveBlade.value = blade.value.props.navigation.instance;
-      }
-    };
-
-    unwatch = watch(blade, updateReactiveBlade, { immediate: true, deep: true });
-
-    onMounted(() => {
-      updateReactiveBlade();
-    });
-
-    onUnmounted(() => {
-      if (unwatch) {
-        unwatch();
-      }
-    });
-
-    return reactiveBlade as unknown as BladeScope extends ListBaseBladeScope
-      ? Ref<ListBladeExposed<BladeScope>>
-      : Ref<DetailsBladeExposed<BladeScope>>;
-  }
-
-  return {
-    getBladeExposedData,
-  };
-};
+import { ref, WatchStopHandle, watch, onMounted, onUnmounted, getCurrentInstance, Ref } from "vue";
+import { ListBaseBladeScope, DetailsBaseBladeScope, DetailsBladeExposed, ListBladeExposed } from "../..";
+
+export interface IUseDynamicViewsUtils {
+  getBladeExposedData: <BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>(
+    scope: BladeScope,
+  ) => BladeScope extends ListBaseBladeScope ? Ref<ListBladeExposed<BladeScope>> : Ref<DetailsBladeExposed<BladeScope>>;
+}
+
+export default () => {
+  const instance = getCurrentInstance();
+
+  function getBladeExposedData<BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>() {
+    const reactiveBlade = ref<BladeScope | null>(null);
+
+    const blade = ref(instance?.vnode);
+
+    let unwatch: WatchStopHandle | null = null;
+
+    const updateReactiveBlade = () => {
+      if (blade.value && blade.value.props?.navigation?.instance) {
+        reactiveBlade.value = blade.value.props.navigation.instance;
+      }
+    };
+
+    unwatch = watch(blade, updateReactiveBlade, { immediate: true, deep: true });
+
+    onMounted(() => {
+      updateReactiveBlade();
+    });
+
+    onUnmounted(() => {
+      if (unwatch) {
+        unwatch();
+      }
+    });
+
+    return reactiveBlade as unknown as BladeScope extends ListBaseBladeScope
+      ? Ref<ListBladeExposed<BladeScope>>
+      : Ref<DetailsBladeExposed<BladeScope>>;
+  }
+
+  return {
+    getBladeExposedData,
+  };
+};

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

@@ -338,6 +338,7 @@ export default <Query>(args: {
     return h(
       VcContainer,
       {
+        noPadding: true,
         onVnodeBeforeMount: () => {
           filter.value = { ...appliedFilter.value };
         },
@@ -345,7 +346,7 @@ export default <Query>(args: {
       () => [
         h(VcRow, () =>
           Object.values(controls.value).map(({ title, fields }) => {
-            return h(VcCol, { class: "tw-p-2" }, () => [
+            return h(VcCol, { class: "tw-px-5 tw-py-[10px]" }, () => [
               title
                 ? h(
                     "div",
@@ -386,27 +387,35 @@ export default <Query>(args: {
           }),
         ),
         h(VcRow, () =>
-          h(VcCol, { class: "tw-p-2 !tw-flex-auto" }, () =>
-            h("div", { class: "tw-flex tw-justify-end" }, [
-              h(
-                VcButton,
-                {
-                  outline: true,
-                  class: "tw-mr-4",
-                  disabled: isDisabled(appliedFilter),
-                  onClick: () => resetFilters(slotMethods.close),
-                },
-                () => t("COMPONENTS.FILTERS.RESET"),
-              ),
-              h(
-                VcButton,
-                {
-                  disabled: isDisabled(filter),
-                  onClick: () => applyFilters(slotMethods.close),
-                },
-                () => t("COMPONENTS.FILTERS.APPLY"),
-              ),
-            ]),
+          h(
+            VcCol,
+            {
+              class:
+                "tw-px-5 tw-py-[10px] !tw-flex-auto tw-border-t tw-border-solid tw-border-[var(--base-border-color)]",
+            },
+            () =>
+              h("div", { class: "tw-flex tw-justify-start" }, [
+                h(
+                  VcButton,
+                  {
+                    class: "tw-mr-4",
+                    small: true,
+                    disabled: isDisabled(filter),
+                    onClick: () => applyFilters(slotMethods.close),
+                  },
+                  () => t("COMPONENTS.FILTERS.APPLY"),
+                ),
+                h(
+                  VcButton,
+                  {
+                    outline: true,
+                    small: true,
+                    disabled: isDisabled(appliedFilter),
+                    onClick: () => resetFilters(slotMethods.close),
+                  },
+                  () => t("COMPONENTS.FILTERS.RESET"),
+                ),
+              ]),
           ),
         ),
       ],

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

@@ -1,67 +1,67 @@
-import { ConcreteComponent, MaybeRef, ShallowRef, reactive, resolveComponent, shallowRef, toValue } from "vue";
-import { ListContentSchema } from "../..";
-
-export interface IUseTableTemplates {
-  tableTemplates: {
-    templateOverrideComponents: Record<string, ShallowRef<ConcreteComponent>>;
-    mobileView: ConcreteComponent | undefined;
-    notFound: ConcreteComponent | undefined;
-    empty: ConcreteComponent | undefined;
-    footer: ConcreteComponent | undefined;
-    header: ConcreteComponent | undefined;
-  };
-}
-
-export const useTableTemplates = (
-  tableSchema: MaybeRef<ListContentSchema | undefined> | undefined,
-): IUseTableTemplates => {
-  const tableTemplates = reactive({
-    templateOverrideComponents: templateOverrideComponents(),
-    mobileView: resolveTemplateComponent("mobileTemplate"),
-    notFound: resolveTemplateComponent("notFoundTemplate"),
-    empty: resolveTemplateComponent("emptyTemplate"),
-    footer: resolveTemplateComponent("footerTemplate"),
-    header: resolveTemplateComponent("headerTemplate"),
-  });
-
-  function resolveTemplateComponent(name: keyof ListContentSchema): ShallowRef<ConcreteComponent> | undefined {
-    if (!toValue(tableSchema)) return;
-    const value = toValue(tableSchema)?.[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 templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
-    return {
-      ...toValue(tableSchema)?.columns?.reduce(
-        (acc, curr) => {
-          if ("customTemplate" in curr && curr.customTemplate) {
-            if (!("component" in curr.customTemplate)) {
-              throw new Error(
-                `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`,
-              );
-            } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
-              const component = resolveComponent(curr.customTemplate.component);
-
-              if (typeof component !== "string") {
-                acc[curr.id] = shallowRef(component);
-              }
-            }
-          }
-          return acc;
-        },
-        {} as Record<string, ShallowRef<ConcreteComponent>>,
-      ),
-    };
-  }
-
-  return {
-    tableTemplates,
-  };
-};
+import { ConcreteComponent, MaybeRef, ShallowRef, reactive, resolveComponent, shallowRef, toValue } from "vue";
+import { ListContentSchema } from "../..";
+
+export interface IUseTableTemplates {
+  tableTemplates: {
+    templateOverrideComponents: Record<string, ShallowRef<ConcreteComponent>>;
+    mobileView: ConcreteComponent | undefined;
+    notFound: ConcreteComponent | undefined;
+    empty: ConcreteComponent | undefined;
+    footer: ConcreteComponent | undefined;
+    header: ConcreteComponent | undefined;
+  };
+}
+
+export const useTableTemplates = (
+  tableSchema: MaybeRef<ListContentSchema | undefined> | undefined,
+): IUseTableTemplates => {
+  const tableTemplates = reactive({
+    templateOverrideComponents: templateOverrideComponents(),
+    mobileView: resolveTemplateComponent("mobileTemplate"),
+    notFound: resolveTemplateComponent("notFoundTemplate"),
+    empty: resolveTemplateComponent("emptyTemplate"),
+    footer: resolveTemplateComponent("footerTemplate"),
+    header: resolveTemplateComponent("headerTemplate"),
+  });
+
+  function resolveTemplateComponent(name: keyof ListContentSchema): ShallowRef<ConcreteComponent> | undefined {
+    if (!toValue(tableSchema)) return;
+    const value = toValue(tableSchema)?.[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 templateOverrideComponents(): Record<string, ShallowRef<ConcreteComponent>> {
+    return {
+      ...toValue(tableSchema)?.columns?.reduce(
+        (acc, curr) => {
+          if ("customTemplate" in curr && curr.customTemplate) {
+            if (!("component" in curr.customTemplate)) {
+              throw new Error(
+                `Component name must be provided in 'customTemplate' property, column: ${JSON.stringify(curr)}`,
+              );
+            } else if ("component" in curr.customTemplate && curr.customTemplate.component) {
+              const component = resolveComponent(curr.customTemplate.component);
+
+              if (typeof component !== "string") {
+                acc[curr.id] = shallowRef(component);
+              }
+            }
+          }
+          return acc;
+        },
+        {} as Record<string, ShallowRef<ConcreteComponent>>,
+      ),
+    };
+  }
+
+  return {
+    tableTemplates,
+  };
+};