@processmaker/screen-builder 2.83.11 → 2.84.0

package/src/components/TabsBar.vue

@@ -0,0 +1,354 @@
+<template>
+  <b-tabs
+    ref="tabs"
+    v-model="activeTab"
+    class="h-100 w-100 flat-tabs"
+    content-class="h-tab"
+    lazy
+    @changed="tabsUpdated"
+    @input="tabOpened"
+  >
+    <template #tabs-start>
+      <div class="tabs-sticky d-flex flex-row tabs-start">
+        <div
+          v-show="tabsListOverflow"
+          class="position-relative overflow-visible"
+        >
+          <div
+            role="link"
+            class="nav-scroll nav-scroll-left"
+            data-test="scroll-left"
+            @click="scrollTabsLeft"
+          >
+            <i class="fas fa-chevron-left" />
+          </div>
+        </div>
+      </div>
+
+      <div :class="{'dd-ml': tabsListOverflow}">
+        <slot name="tabs-start" />
+      </div>
+    </template>
+    <b-tab
+      v-for="(index, n) in validLocalOpenedPages"
+      :key="`tab-${n}`"
+      class="h-100 w-100"
+    >
+      <template #title>
+        <b-badge variant="primary" class="mr-1">
+          {{ pageNumber(index) }}
+        </b-badge>
+        <span :data-test="`tab-${n}`">
+          {{ pages[index]?.name }}
+        </span>
+        <span
+          :data-test="`close-tab-${n}`"
+          class="close-tab"
+          role="link"
+          @click.stop="closeTab(n)"
+        >
+          <i class="fas fa-times" />
+        </span>
+      </template>
+      <template #default>
+        <div class="h-100 w-100" data-test="tab-content">
+          <slot :current-page="index" />
+        </div>
+      </template>
+    </b-tab>
+    <template #tabs-end>
+      <div
+        v-if="tabsListOverflow"
+        class="tabs-sticky overflow-visible"
+      >
+        <div
+          role="link"
+          class="nav-scroll nav-scroll-right"
+          data-test="scroll-right"
+          @click="scrollTabsRight"
+        >
+          <i class="fas fa-chevron-right" />
+        </div>
+      </div>
+    </template>
+    <template #empty>
+      <p class="text-center m-5 text-secondary" data-test="tab-content">
+        {{ $t("There are no open pages.") }}<br />
+        {{ $t("Open a new page above using the button") }}
+        <i :class="buttonIcon" />
+      </p>
+    </template>
+  </b-tabs>
+</template>
+
+<script>
+const SCROLL_STEP = 200;
+
+export default {
+  props: {
+    /**
+     * The configuration of all the pages
+     */
+    pages: {
+      type: Array,
+      required: true
+    },
+    /**
+     * The array of initial opened pages indexes
+     */
+    initialOpenedPages: {
+      type: Array,
+      default: () => [0]
+    },
+    /**
+     * Icon to open a new tab, displayed when there are no pages opened.
+     */
+    buttonIcon: {
+      type: String,
+      default: () => "fa fa-file"
+    }
+  },
+  data() {
+    return {
+      tabsListOverflow: false,
+      showLeftScroll: true,
+      showRightScroll: true,
+      updates: 0,
+      activeTab: 0,
+      localOpenedPages: this.initialOpenedPages
+    };
+  },
+  computed: {
+    validLocalOpenedPages() {
+      return this.localOpenedPages.filter((page) => this.pages[page]);
+    }
+  },
+  watch: {
+    openedPages: {
+      handler(newVal) {
+        this.localOpenedPages = newVal;
+      },
+      deep: true
+    },
+    pages: {
+      handler() {
+        this.localOpenedPages = this.localOpenedPages.filter(
+          (page) => this.pages[page]
+        );
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // check resize of tabs list
+      window.addEventListener("resize", this.checkTabsOverflow);
+      // listen to scroll event
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.addEventListener("scroll", this.checkScrollPosition);
+
+      Promise.resolve().then(() => {
+        this.checkTabsOverflow();
+        this.checkScrollPosition();
+      });
+    });
+
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.checkTabsOverflow);
+  },
+  updated() {
+    this.checkTabsOverflow();
+  },
+  methods: {
+    tabOpened() {
+      const pageIndex = this.localOpenedPages[this.activeTab];
+      this.$emit("tab-opened", pageIndex);
+    },
+    pageNumber(index) {
+      return index + 1;
+    },
+    checkScrollPosition() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      this.showLeftScroll = tablist.scrollLeft > 0;
+      this.showRightScroll =
+        tablist.scrollWidth - tablist.clientWidth > tablist.scrollLeft;
+    },
+    scrollTabsLeft() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.scrollLeft -= SCROLL_STEP;
+    },
+    scrollTabsRight() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      tablist.scrollLeft += SCROLL_STEP;
+    },
+    tabsUpdated() {
+      this.updates++;
+    },
+    waitUpdates(n, timeout, visualThreshold = 80) {
+      return new Promise((resolve) => {
+        const start = Date.now();
+        const interval = setInterval(() => {
+          if (this.updates >= n || Date.now() - start > timeout) {
+            clearInterval(interval);
+            resolve();
+          }
+        }, visualThreshold);
+      });
+    },
+    closeTab(pageId) {
+      this.localOpenedPages.splice(this.localOpenedPages.indexOf(pageId), 1);
+      this.$emit("tab-closed", this.pages[pageId], this.localOpenedPages);
+    },
+    updateTabsReferences(pageDelete) {
+      this.localOpenedPages = this.localOpenedPages.map((page) =>
+        page > pageDelete ? page - 1 : page
+      );
+    },
+    async openPageByIndex(index) {
+      if (index === -1) {
+        return;
+      }
+      const n = this.localOpenedPages.indexOf(index * 1);
+      if (n === -1) {
+        this.localOpenedPages.push(index);
+        await this.waitUpdates(this.updates + 2, 1000);
+        this.activeTab = this.localOpenedPages.length - 1;
+      } else {
+        this.activeTab = n;
+      }
+    },
+    closePageByIndex(index) {
+      const n = this.localOpenedPages.indexOf(index);
+      if (n !== -1) {
+        this.localOpenedPages.splice(n, 1);
+      }
+    },
+    checkTabsOverflow() {
+      const tablist = this.$refs.tabs.$el.querySelector(".nav-tabs");
+      this.tabsListOverflow = tablist.scrollWidth > tablist.clientWidth;
+    }
+  }
+};
+</script>
+
+<style>
+/* Setup some colors */
+:root {
+  --tabs-blue: #1572c2;
+  --tabs-light: #c3c9cf;
+  --tabs-grey: #6a7888;
+  --tabs-border: #cdddee;
+  --tabs-scroll-bg: #ebeef2;
+  --tabs-white: #ffffff;
+}
+/* Override Bootstrap default tab styles */
+.nav-tabs {
+  border-bottom: 1px solid var(--tabs-border) !important;
+  flex-wrap: nowrap !important;
+  overflow: hidden !important;
+}
+
+.nav-tabs .nav-item .nav-link {
+  display: flex;
+  align-items: center;
+}
+
+/* Style for individual tabs */
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  border: none;
+  box-shadow: inset 0 -3px 0 0 var(--tabs-blue) !important; /* This sets the blue bottom border for the active tab */
+  background-color: var(
+    --tabs-white
+  ); /* This sets the background color for the active tab */
+  border-radius: 0 !important; /* This removes the border-radius */
+  color: var(--tabs-blue) !important;
+  position: relative;
+}
+
+/* Style for non-active tabs */
+.nav-tabs .nav-link {
+  border: 1px solid var(--tabs-border) !important;
+  color: var(--tabs-grey); /* This sets the text color for the inactive tabs */
+  border-radius: 0 !important; /* This ensures no border radius for a flat design */
+  padding: 0.5rem 1rem;
+  margin-right: -1px;
+  text-wrap: nowrap !important;
+  flex-wrap: nowrap !important;
+}
+
+.nav-tabs .nav-item .nav-link:not(.active) {
+  .badge {
+    background-color: #6A7888 !important;
+  }
+
+  span:not(.badge, .close-tab) {
+    color: #556271 !important;
+  }
+}
+
+/* Style for the hover effect */
+.nav-tabs .nav-link:hover {
+  border: none;
+  background-color: var(
+    --tabs-white
+  ); /* This changes the background color when hovering */
+}
+
+/* Adding the 'x' button to the tab */
+.nav-tabs .nav-link .close-tab {
+  font-size: 0.8rem;
+  color: var(--tabs-light);
+  margin-left: 0.5rem;
+  display: inline !important;
+}
+
+/* Style adjustments for the 'x' button */
+.nav-tabs .nav-link .close-tab:hover {
+  color: var(--tabs-grey);
+  cursor: pointer;
+}
+.nav-tabs .nav-scroll {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--tabs-scroll-bg);
+  color: var(--tabs-grey);
+  cursor: pointer;
+  border: 1px solid var(--tabs-border);
+  border-radius: 100%;
+  z-index: 1;
+}
+.nav-tabs .nav-scroll-right {
+  right: 5px;
+}
+.nav-tabs .nav-scroll-left {
+  margin-left: 5px;
+}
+.nav-tabs .tabs-sticky {
+  position: sticky;
+  -webkit-position: sticky;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+.nav-tabs .tabs-start {
+  background-color: var(--tabs-white);
+}
+/* add margin right to the last li element to hide safely the right scroll button */
+.nav-tabs .nav-item:last-of-type {
+  margin-right: 2rem;
+}
+.flat-tabs .h-tab {
+  height: calc(100% - 42px) !important;
+}
+.dd-ml {
+  margin-left: 2rem;
+}
+</style>

package/src/components/editor/pagesDropdown.vue

@@ -0,0 +1,125 @@
+<template>
+  <!--
+    Dropdown component to display options related to pages.
+    Provides options to add a new page, see all pages, and select individual pages.
+  -->
+  <b-dropdown
+    ref="pageDropdown"
+    data-test="page-dropdown"
+    variant="platform"
+    :boundary="boundary"
+    menu-class="page-dropdown-menu"
+  >
+    <!-- Dropdown button content -->
+    <template #button-content>
+      <!-- Icon representing a file -->
+      <i class="fa fa-file"></i>
+    </template>
+
+    <!-- Option to add a new page -->
+    <b-dropdown-item data-test="add-page" @click="onAddPage">
+      <!-- Icon for adding a new page -->
+      <i class="fa fa-plus platform-dropdown-item-icon"></i>
+      <!-- Text for adding a new page -->
+      {{ $t("Create Page") }}
+    </b-dropdown-item>
+
+    <!-- Option to see all pages -->
+    <b-dropdown-item data-test="see-all-pages" @click="onSeeAllPages">
+      <!-- Icon for seeing all pages -->
+      <i class="fa fa-eye platform-dropdown-item-icon"></i>
+      <!-- Text for seeing all pages -->
+      {{ $t("See all pages") }}
+    </b-dropdown-item>
+
+    <!-- Divider between adding and viewing options -->
+    <b-dropdown-divider></b-dropdown-divider>
+
+    <!-- Dropdown items for selecting individual pages -->
+    <b-dropdown-item
+      v-for="(item, page) in data"
+      :key="page"
+      :data-test="'page-' + item.name"
+      :data-cy="'page-' + page"
+      @click="onClickPage(page)"
+    >
+      <!-- Display the name of the page -->
+      {{ item.name }}
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+/**
+ * Vue component for managing pages through a dropdown menu.
+ * @component
+ * @prop {Props} props - The component's props object.
+ */
+
+export default {
+  /**
+   * The name of the component.
+   * @type {string}
+   */
+  name: "PagesDropdown",
+
+  /**
+   * The props that the component accepts.
+   * @type {Object}
+   * @property {PageItem[]} data - The array of page items to be displayed in the dropdown.
+   *                               Defaults to null.
+   */
+  props: {
+    data: {
+      type: Array,
+      default: null
+    },
+    boundary: {
+      type: String,
+      default: "viewport"
+    }
+  },
+
+  /**
+   * The methods available within the component.
+   */
+  methods: {
+    /**
+     * Handler for when the "Add Page" option is clicked.
+     * Emits the "addPage" event.
+     */
+    onAddPage() {
+      this.$emit("addPage");
+    },
+
+    /**
+     * Handler for when the "See All Pages" option is clicked.
+     * Emits the "seeAllPages" event.
+     */
+    onSeeAllPages() {
+      this.$emit("seeAllPages");
+    },
+
+    /**
+     * Handler for when a specific page is clicked.
+     * Emits the "clickPage" event with the selected page.
+     * @param {PageItem} page - The selected page item.
+     */
+    onClickPage(page) {
+      this.$emit("clickPage", page);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// Platform btn style
+.btn-platform {
+  background-color: #ffff;
+  color: #6a7888;
+}
+.platform-dropdown-item-icon {
+  // Style for the icons in dropdown items.
+  color: #1572c2;
+}
+</style>

package/src/components/inspector/color-select.vue

@@ -36,7 +36,24 @@
 <script>
 export default {
   components: {},
-  props: ["label", "value", "helper", "options"],
+  props: {
+    /**
+     * The label for the color select
+     */
+    label: {},
+    /**
+     * The value of the color select. eg. `alert alert-success`
+     */
+    value: {},
+    /**
+     * The helper text for the color select (not visible yet)
+     */
+     helper: {},
+    /**
+     * The options for the color select
+     */
+    options: {},
+  },
   data() {
     return {
       newColor: ""

package/src/components/sortable/Sortable.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="container sortable-box">
+    <div class="row">
+      <div class="col-sm border rounded-lg p-0 mr-3 sortable-search-box">
+        <i class="fa fa-search sortable-search-icon"></i>
+        <input
+          id="search"
+          v-model="search"
+          class="form-control border-0 shadow-none px-0"
+          :placeholder="$t('Search here')"
+          data-test="search"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          class="btn sortable-btn-new"
+          @click="$emit('add-page', $event)"
+        >
+          <i class="fa fa-plus"></i>
+        </button>
+      </div>
+    </div>
+
+    <SortableList
+      :items="items"
+      :filtered-items="filteredItems"
+      @ordered="$emit('ordered', $event)"
+      @item-edit="$emit('item-edit', $event)"
+      @item-delete="$emit('item-delete', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import SortableList from './sortableList/SortableList.vue'
+
+export default {
+  name: 'Sortable',
+  components: {
+    SortableList
+  },
+  props: {
+    items: { type: Array, required: true },
+    filterKey: { type: String, required: true },
+  },
+  data() {
+    return {
+      search: "",
+      filteredItems: [...this.items],
+    };
+  },
+  watch: {
+    search(value) {
+      this.filteredItems = this.filterItems(value, this.items);
+    },
+    items: {
+      handler(newItems) {
+        this.filteredItems = [...newItems];
+
+        if (this.search.length > 0) {
+          this.filteredItems = this.filterItems(this.search, newItems);
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    clearSearch(value) {
+      return value.trim().toLowerCase();
+    },
+    filterItems(searchValue, items) {
+      const cleanSearch = this.clearSearch(searchValue);
+      return items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanSearch));
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped src="./sortable.scss"></style>

package/src/components/sortable/sortable.scss

@@ -0,0 +1,25 @@
+.sortable {
+  &-box {
+    font-family: "Open Sans", sans-serif !important;
+  }
+
+  &-search-box {
+    display: flex;
+    align-items: center;
+    border-color: #cdddee !important;
+  }
+
+  &-search-icon {
+    margin: {
+      left: 16px;
+      right: 8px;
+    }
+    color: #6A7888;
+  }
+
+  &-btn-new {
+    background: #1572C2;
+    color: #ffffff;
+  }
+}
+