@processmaker/screen-builder 2.83.10 → 2.84.0

package/src/main.js

@@ -225,8 +225,7 @@ window.ProcessMaker = {
     }
   },
   alert(message, variant) {
-    variant;
-    message;
+    console.log(`${variant}: ${message}`);
   },
   screen: {
     cacheEnabled: cacheEnabled ? cacheEnabled.content === "true" : false,

package/src/mixins/canOpenJsonFile.js

@@ -24,7 +24,7 @@ export default {
       if (json instanceof Array) {
         screen = { config:json, computed: [], customCSS: null };
       } else if (json && json.screens instanceof Array) {
-        screen = json.screens[1];
+        screen = json.screens[0];
         if (window.exampleScreens instanceof Array) {
           window.exampleScreens = json.screens;
         }

package/src/stories/ColorSelect.stories.js

@@ -0,0 +1,79 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { userEvent, expect } from "@storybook/test";
+import "../bootstrap";
+import ColorSelect from "../components/inspector/color-select.vue";
+
+export default {
+  title: "Components/ColorSelect",
+  component: ColorSelect,
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { ColorSelect },
+    template: '<color-select v-bind="$props" v-model="inputValue" />',
+    data() {
+      return { inputValue: args.value };
+    },
+    watch: {
+      // Updates the value when the property changes in storybook controls
+      value(value) {
+        this.inputValue = value;
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    label: "Select a color",
+    helper: "Helper text",
+    options: [
+      { value: "alert alert-primary", content: "primary" },
+      { value: "alert alert-secondary", content: "secondary" },
+      { value: "alert alert-success", content: "success" },
+      { value: "alert alert-danger", content: "danger" },
+      { value: "alert alert-warning", content: "warning" },
+      { value: "alert alert-info", content: "info" },
+      { value: "alert alert-light", content: "light" },
+      { value: "alert alert-dark", content: "dark" }
+    ],
+    value: "alert alert-success"
+  }
+};
+
+// A user can change the selected color
+export const ChangeSelectedColor = {
+  args: {
+    label: "Select a color",
+    helper: "Helper text",
+    options: [
+      { value: "alert alert-primary", content: "primary" },
+      { value: "alert alert-secondary", content: "secondary" },
+      { value: "alert alert-success", content: "success" },
+      { value: "alert alert-danger", content: "danger" },
+      { value: "alert alert-warning", content: "warning" },
+      { value: "alert alert-info", content: "info" },
+      { value: "alert alert-light", content: "light" },
+      { value: "alert alert-dark", content: "dark" }
+    ],
+    value: "alert alert-success"
+  },
+  play: async ({ canvasElement }) => {
+    const primaryColor = canvasElement.querySelector(".text-primary.fa-check");
+
+    // check if the default value is the success color
+    let selected = canvasElement.querySelector(".text-light");
+    expect(selected.parentNode).toHaveClass("bg-success");
+
+    // change the selected color
+    await userEvent.click(primaryColor);
+
+    // check if the alert is now the primary color
+    selected = canvasElement.querySelector(".text-light");
+    expect(selected.parentNode).toHaveClass("bg-primary");
+  }
+};

package/src/stories/Configure.mdx

@@ -0,0 +1,78 @@
+import pkg from '../../package.json'; // Adjust the path as necessary
+import { Meta } from "@storybook/blocks";
+
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
+
+<Meta title="ProcessMaker ScreenBuilder" />
+
+# ScreenBuilder <strong>v{pkg.version}</strong>
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    ## Introduction
+  </div>
+
+  Welcome to the ProcessMaker ScreenBuilder Storybook! This interactive library is designed to showcase the components used to render screens within ProcessMaker processes. Built with Vue2, our components provide a versatile and intuitive way to build dynamic forms and interfaces for your business processes.
+
+  <div className='sb-section-title'>
+    ## Key Features
+  </div>
+  <ul>
+    <li>**Wide Range of Components**: From basic input fields to complex data grids, our library covers all the components you might need.</li>
+    <li>**Vue2 Compatibility**: Fully compatible with Vue2, ensuring seamless integration into your Vue applications.</li>
+    <li>**Interactive Examples**: Explore components through interactive examples, allowing you to see how they work in real-time.</li>
+    <li>**Customization**: Learn how to customize components to match your specific process requirements.</li>
+  </ul>
+
+  <div className='sb-section-title'>
+    ## Getting Started
+  </div>
+
+  To start using the ScreenBuilder components in your ProcessMaker processes, follow these steps:
+
+  Clone the repository and `cd` into the `screen-builder` directory:
+
+```bash
+git clone git@github.com:ProcessMaker/screen-builder.git
+cd screen-builder
+```
+
+  Install dependencies using NPM, then run the local development server:
+
+```bash
+npm i
+npm run serve
+```
+  <div className='sb-section-title'>
+    ## Explore Components
+  </div>
+  Start exploring the components by selecting them from the sidebar. Each entry provides detailed information about the component, including usage examples and customization options.
+</div>
+
+<style>
+{`
+.sb-container {
+  font-family: 'Arial', sans-serif;
+}
+
+.sb-section-title {
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 20px;
+}
+`}
+</style>

package/src/stories/DropdownAndPages.stories.js

@@ -0,0 +1,112 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { within, expect, waitFor } from "@storybook/test";
+import "../bootstrap";
+// b-tabs from bootstrap-vue
+import TabsBar from "../components/TabsBar.vue";
+import PagesDropdown from "../components/editor/pagesDropdown.vue";
+
+export default {
+  title: "Components/DropdownAndPages",
+  component: [TabsBar, PagesDropdown],
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { TabsBar, PagesDropdown },
+    template: `
+      <tabs-bar ref="tabsBar" v-bind="$props">
+        <template v-slot:tabs-start>
+          <pages-dropdown
+            :data="pages"
+            @addPage="onAddPage"
+            @clickPage="onClick"
+            @seeAllPages="onSeeAllPages"
+          />
+        </template>
+        <template v-slot="{ currentPage }">
+          Here comes content of {{pages[currentPage].name}} (#{{currentPage}})
+        </template>
+      </tabs-bar>
+    `,
+    data() {
+      return {};
+    },
+    methods: {
+      onAddPage() {
+        console.log("Add page clicked");
+      },
+      onSeeAllPages() {
+        console.log("See all pages clicked");
+      },
+      onClick(index) {
+        this.$refs.tabsBar.openPageByIndex(index);
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0]
+  }
+};
+
+// Open a page using the PageDropdown(index)
+export const OpenPageUsingDropdown = {
+  args: {
+    pages: [
+      { name: "Page1" },
+      { name: "Page2" },
+      { name: "Page3" },
+      { name: "Page4" },
+      { name: "Page5" }
+    ],
+    initialOpenedPages: [0]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const selector = canvasElement.querySelector(
+      "[data-test=page-dropdown] button"
+    );
+    let selectorAddPage = canvasElement.querySelector("[data-test=page-Page3]");
+    console.log(selectorAddPage);
+    await selector.click(selector);
+    await selectorAddPage.click(selectorAddPage);
+    // Open Page 3 (index=2)
+    await step("Open Page 3 (index=2)", async () => {
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page3 (#2)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Open Page 2 (index=1)
+    await selector.click(selector);
+    selectorAddPage = canvasElement.querySelector("[data-test=page-Page2]");
+    await selectorAddPage.click(selectorAddPage);
+    await step("Open Page 2 (index=1)", async () => {
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+  }
+};

package/src/stories/PageTabs.stories.js

@@ -0,0 +1,338 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { within, userEvent, expect, waitFor } from "@storybook/test";
+import "../bootstrap";
+// b-tabs from bootstrap-vue
+import TabsBar from "../components/TabsBar.vue";
+
+export default {
+  title: "Components/TabsBar",
+  component: TabsBar,
+  tags: ["autodocs"],
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { TabsBar },
+    template: `
+      <tabs-bar ref="tabsBar" v-bind="$props">
+        <template v-slot:tabs-start>
+          <b-form-select :options="pages.map((v,k)=>k)" @change="openPage($event)" data-test="open-page" />
+        </template>
+        <template v-slot="{ currentPage }">
+          Here comes content of {{pages[currentPage].name}} (#{{currentPage}})
+        </template>
+      </tabs-bar>
+    `,
+    data() {
+      return {};
+    },
+    methods: {
+      openPage(index) {
+        this.$refs.tabsBar.openPageByIndex(index);
+      }
+    }
+  })
+};
+
+/**
+ * Stories of the component
+ */
+// Preview the component
+export const Preview = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0]
+  }
+};
+
+// Open a page using openPageByIndex(index)
+export const OpenPageByIndexFunction = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const selector = canvasElement.querySelector("[data-test=open-page]");
+
+    // Open Page 3 (index=2)
+    await step("Open Page 3 (index=2)", async () => {
+      userEvent.selectOptions(selector, "2");
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 3 (#2)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Open Page 2 (index=1)
+    await step("Open Page 2 (index=1)", async () => {
+      userEvent.selectOptions(selector, "1");
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Close Tab #1 = Page 3 (index=2)
+    await step("Close Page 3 (index=2)", async () => {
+      canvas.getByTestId("close-tab-2").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).not.toContainHTML(
+            "Here comes content of Page 3 (#2)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Select Page 1 using dropdown (index=0) (tab=0)
+    await step("Select Page 1 (index=0)", async () => {
+      userEvent.selectOptions(selector, "0");
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 1 (#0)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Select Page 2 using dropdown (index=1) (tab=1)
+    await step("Select Page 2 (index=1)", async () => {
+      userEvent.selectOptions(selector, "1");
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+  }
+};
+
+// User navigating through tabs
+export const UserNavigatingThroughTabs = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0, 1]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    // Select Page 2 using tab (data-test=tab-1)
+    await step("Select Page 2 using tab", async () => {
+      canvas.getByTestId("tab-1").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Select Page 1 using tab (data-test=tab-0)
+    await step("Select Page 1 using tab", async () => {
+      canvas.getByTestId("tab-0").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 1 (#0)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+  }
+};
+
+// Lots of pages opened
+export const ALotOfPagesOpen = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" },
+      { name: "Page 6" },
+      { name: "Page 7" },
+      { name: "Page 8" },
+      { name: "Page 9" },
+      { name: "Page 10" },
+      { name: "Page 11" },
+      { name: "Page 12" },
+      { name: "Page 13" },
+      { name: "Page 14" },
+      { name: "Page 15" },
+      { name: "Page 16" }
+    ],
+    initialOpenedPages: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const scrollLeft = canvas.getByTestId("scroll-left");
+    const scrollRight = canvas.getByTestId("scroll-right");
+
+    await waitFor(() => expect(scrollRight).toBeVisible());
+    await waitFor(() => expect(scrollLeft).toBeVisible());
+
+    // Scroll to the right
+    await step("Scroll to the right", async () => {
+      scrollRight.click();
+      await waitFor(() => expect(scrollLeft).toBeVisible());
+    });
+
+    // Scroll to the left
+    await step("Scroll to the left", async () => {
+      scrollLeft.click();
+      await waitFor(() => expect(scrollLeft).toBeVisible());
+    });
+  }
+};
+
+// Tab content fill all the available space
+export const TabContentFillAllTheAvailableSpace = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: [0, 1]
+  },
+  parameters: {
+    layout: "fullscreen"
+  },
+  decorators: [
+    () => ({
+      template: '<div style="height: calc(100vh - 2rem)"><story/></div>'
+    })
+  ],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    // Check content position in Page 1
+    await step("Check content position in Page 1", async () => {
+      const tabContent = canvas.getByTestId("tab-content");
+      const tabsBar = canvas.getByRole("tablist").parentElement;
+
+      // -------------------------------------
+      //
+      // Check the height of the tab content is the same as the height
+      // of the canvas minus height of the tabs bar. This is important
+      // to make sure the tab content fill all the available space and
+      // the dropzone can be used to drop elements. Also check the top
+      // position of the tab content is the same as the height of the
+      // tabs bar.
+      //
+      // -------------------------------------
+      await waitFor(() => {
+        const canvasHeight = canvasElement.clientHeight;
+        const tabsBarHeight = tabsBar.clientHeight;
+        const tabContentTop = tabContent.getBoundingClientRect().top;
+        expect(tabContentTop).toBe(tabsBarHeight);
+        expect(tabContent).toHaveStyle({
+          height: `${canvasHeight - tabsBarHeight}px`
+        });
+      });
+    });
+
+    // Select Page 2 using tab (data-test=tab-1)
+    await step("Select Page 2 using tab", async () => {
+      canvas.getByTestId("tab-1").click();
+      await waitFor(
+        () => {
+          expect(canvas.getByTestId("tab-content")).toContainHTML(
+            "Here comes content of Page 2 (#1)"
+          );
+        },
+        { timeout: 1000 }
+      );
+    });
+
+    // Check content position in Page 2
+    await step("Check content position in Page 2", async () => {
+      const tabContent = canvas.getByTestId("tab-content");
+      const tabsBar = canvas.getByRole("tablist").parentElement;
+
+      // -------------------------------------
+      //
+      // Check the height of the tab content is the same as the height
+      // of the canvas minus height of the tabs bar. This is important
+      // to make sure the tab content fill all the available space and
+      // the dropzone can be used to drop elements. Also check the top
+      // position of the tab content is the same as the height of the
+      // tabs bar.
+      //
+      // -------------------------------------
+      await waitFor(() => {
+        const canvasHeight = canvasElement.clientHeight;
+        const tabsBarHeight = tabsBar.clientHeight;
+        const tabContentTop = tabContent.getBoundingClientRect().top;
+        expect(tabContentTop).toBe(tabsBarHeight);
+        expect(tabContent).toHaveStyle({
+          height: `${canvasHeight - tabsBarHeight}px`
+        });
+      });
+    });
+  }
+};
+
+// Without any page opened
+export const WithoutAnyPageOpened = {
+  args: {
+    pages: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ],
+    initialOpenedPages: []
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Check that there is a message when there is no page open.
+    await waitFor(
+      () => {
+        expect(canvas.getByTestId("tab-content")).toContainHTML(
+          "There are no open pages."
+        );
+      },
+      { timeout: 1000 }
+    );
+  }
+};