chore: separate builder.io components

client-app/pages/matcher/builder-io.vue → client-app/pages/matcher/builderIo/builder-io.vue

@@ -11,8 +11,8 @@ import { onMounted, ref, shallowRef, watchEffect } from "vue";
 import { onBeforeRouteUpdate } from "vue-router";
 import { usePageHead } from "@/core/composables";
 import { IS_DEVELOPMENT } from "@/core/constants";
-import { builderIOComponents } from "@/shared/static-content";
-import type { StateType } from "./priorityManager";
+import { builderIOComponents } from "./customCompunents";
+import type { StateType } from "../priorityManager";
 import type { BuilderContent } from "@builder.io/sdk-vue";
 
 interface IEmits {

client-app/pages/matcher/builderIo/customCompunents.ts

@@ -0,0 +1,221 @@
+import { defineAsyncComponent } from "vue";
+import type { Component } from "vue";
+
+const Category = defineAsyncComponent(() => import("@/shared/catalog/components/category.vue"));
+const Slider = defineAsyncComponent(() => import("@/shared/static-content/components/slider.vue"));
+const ProductsBlock = defineAsyncComponent(() => import("@/shared/static-content/components/products-block.vue"));
+
+export const builderIOComponents: Array<BuilderIOComponentType> = [
+  {
+    name: "Category",
+    component: Category,
+    inputs: [
+      {
+        name: "title",
+        type: "string",
+        defaultValue: "Custom Category",
+      },
+      {
+        name: "hideBreadcrumbs",
+        type: "boolean",
+      },
+      {
+        name: "hideSidebar",
+        type: "boolean",
+      },
+      {
+        name: "hideControls",
+        type: "boolean",
+      },
+      {
+        name: "hideSorting",
+        type: "boolean",
+      },
+      {
+        name: "viewMode",
+        type: "string",
+        defaultValue: "<unset>",
+        enum: ["<unset>", "grid", "list"],
+        helperText: "Fixing the View Mode",
+        showIf: `options.get('hideViewModeSelector') === false`,
+      },
+      {
+        name: "filtersOrientation",
+        type: "string",
+        defaultValue: "vertical",
+        enum: ["vertical", "horizontal"],
+        helperText: "Show filters vertically or horizontally",
+      },
+      {
+        name: "cardType",
+        type: "string",
+        defaultValue: "full",
+        helperText: "Card type for grid view mode",
+        enum: ["full", "short"],
+      },
+      {
+        name: "columnsAmountTablet",
+        type: "string",
+        defaultValue: "3",
+        enum: ["3", "2"],
+      },
+      {
+        name: "columnsAmountDesktop",
+        type: "string",
+        defaultValue: "4",
+        enum: ["4", "3"],
+      },
+      {
+        name: "keyword",
+        type: "string",
+      },
+      {
+        name: "filter",
+        type: "string",
+        helperText:
+          "On your website open Developer Tools(right-click a page and select 'Inspect'). Filter products that needed in the Catalog. Then go to Network -> graphql -> operationName: 'SearchProducts' -> variables -> copy filter",
+      },
+      {
+        name: "countLimitation",
+        type: "boolean",
+        helperText: "Turn on to set up products count limitation",
+        onChange: "options.set('fixedProductsCount', 0)",
+      },
+      {
+        showIf: `options.get('countLimitation') === true`,
+        name: "fixedProductsCount",
+        type: "number",
+        defaultValue: 0,
+        onChange: (options: Map<string, number>) => {
+          const count = options.get("fixedProductsCount");
+          if (typeof count !== "number") {
+            return;
+          }
+          if (count > 20) {
+            options.set("fixedProductsCount", 20);
+            alert("the maximum number of cards is 20");
+          }
+        },
+      },
+      {
+        name: "hideTotal",
+        type: "boolean",
+        showIf: `options.get('countLimitation') === false`,
+        helperText: "hidden if Count Limitation is active",
+      },
+      {
+        name: "allowSetMeta",
+        type: "boolean",
+        defaultValue: false,
+        helperText: "Allow the component to set SEO meta tags based on fetched category",
+      },
+    ],
+  },
+  {
+    name: "Products",
+    component: ProductsBlock,
+    inputs: [
+      {
+        name: "title",
+        type: "string",
+        defaultValue: "Products Block",
+      },
+      {
+        name: "cardType",
+        type: "string",
+        defaultValue: "full",
+        enum: ["full", "short"],
+      },
+      {
+        name: "count",
+        type: "number",
+        defaultValue: 4,
+        friendlyName: "Cards amount",
+        onChange: (options: Map<string, number>) => {
+          const count = options.get("count");
+          if (typeof count !== "number") {
+            return;
+          }
+          if (count > 12) {
+            options.set("count", 12);
+            alert("the maximum number of cards is 12");
+          }
+        },
+      },
+      {
+        name: "columnsAmountTablet",
+        type: "string",
+        defaultValue: "3",
+        enum: ["3", "2"],
+      },
+      {
+        name: "columnsAmountDesktop",
+        type: "string",
+        defaultValue: "4",
+        enum: ["4", "3"],
+      },
+      {
+        name: "query",
+        friendlyName: "Keyword",
+        type: "string",
+      },
+      {
+        name: "filter",
+        type: "string",
+        helperText:
+          "On your website open Developer Tools(right-click a page and select 'Inspect'). Filter products that needed in the Catalog. Then go to Network -> graphql -> operationName: 'SearchProducts' -> variables -> copy filter",
+      },
+    ],
+  },
+  {
+    component: Slider,
+    name: "Slider",
+    inputs: [
+      {
+        name: "title",
+        type: "string",
+        defaultValue: "Slider",
+      },
+      {
+        name: "subtitle",
+        type: "string",
+        defaultValue: "Subtitle",
+      },
+      {
+        name: "height",
+        type: "string",
+        defaultValue: "auto",
+        enum: ["small", "medium", "large", "auto"],
+      },
+      {
+        name: "slides",
+        type: "list",
+        subFields: [
+          {
+            id: "image",
+            name: "image",
+            type: "file",
+            allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+          },
+          {
+            name: "title",
+            id: "title",
+            label: "Title",
+            type: "string",
+          },
+          {
+            name: "text",
+            id: "text",
+            type: "string",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+type BuilderIOComponentType = {
+  component: Component;
+  inputs: Array<object>;
+  name: string;
+};

client-app/pages/matcher/matcher.vue

@@ -25,21 +25,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 import { useThemeContext } from "@/core/composables";
 import { getVisiblePreviewer } from "./priorityManager";
 import type { StateType, PreviewerStateType } from "./priorityManager";
 import NotFound from "@/pages/404.vue";
-import BuilderIo from "@/pages/matcher/builder-io.vue";
-import Internal from "@/pages/matcher/internal.vue";
-import SlugContent from "@/pages/matcher/slug-content.vue";
 
 interface IProps {
   pathMatch?: string[];
 }
 
 defineProps<IProps>();
 
+const BuilderIo = defineAsyncComponent(() => import("@/pages/matcher/builderIo/builder-io.vue"));
+const SlugContent = defineAsyncComponent(() => import("@/pages/matcher/slug-content.vue"));
+const Internal = defineAsyncComponent(() => import("@/pages/matcher/internal.vue"));
+
 const { modulesSettings } = useThemeContext();
 
 const moduleSettings = computed(() => {