@eturnity/eturnity_reusable_components 9.31.4-ZOO-65.0 → 9.34.0-dev-06.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.31.4-ZOO-65.0",
+  "version": "9.34.0-dev-06.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/document_templates.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 0C7.63261 0 7.75975 0.0527162 7.85352 0.146484L10.3535 2.64648C10.4473 2.74025 10.5 2.86739 10.5 3V9C10.5 9.55228 10.0523 10 9.5 10H8V11.5C8 12.0523 7.55228 12.5 7 12.5H1C0.447715 12.5 0 12.0523 0 11.5V3.5C0 2.94772 0.447715 2.5 1 2.5H2.5V1C2.5 0.447715 2.94772 0 3.5 0H7.5ZM1 11.5H7V6H5.5C4.94772 6 4.5 5.55228 4.5 5V3.5H1V11.5ZM3.5 2.5H5C5.13261 2.5 5.25975 2.55272 5.35352 2.64648L7.85352 5.14648C7.94728 5.24025 8 5.36739 8 5.5V9H9.5V3.5H8C7.44772 3.5 7 3.05228 7 2.5V1H3.5V2.5ZM5.5 5H6.29297L5.5 4.20703V5ZM8 2.5H8.79297L8 1.70703V2.5Z" fill="#151B1E"/>
+</svg>

package/src/assets/svgIcons/export.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 10.6008C1 10.877 1.22386 11.1008 1.5 11.1008H12.5C12.7761 11.1008 13 10.877 13 10.6008V8.10083C13 7.82469 13.2239 7.60083 13.5 7.60083C13.7761 7.60083 14 7.82469 14 8.10083V10.6008C14 11.4293 13.3284 12.1008 12.5 12.1008H1.5C0.671573 12.1008 0 11.4293 0 10.6008V8.10083C0 7.82469 0.223858 7.60083 0.5 7.60083C0.776142 7.60083 1 7.82469 1 8.10083V10.6008ZM6.72265 0.184805L7 -9.44138e-05L7.27735 0.184805L10.2774 2.1848C10.5071 2.33798 10.5692 2.64842 10.416 2.87818C10.2628 3.10794 9.95241 3.17003 9.72265 3.01686L7.5 1.53509L7.5 9.60083C7.5 9.87697 7.27614 10.1008 7 10.1008C6.72386 10.1008 6.5 9.87697 6.5 9.60083L6.5 1.53509L4.27735 3.01686C4.04759 3.17003 3.73715 3.10795 3.58398 2.87818C3.4308 2.64842 3.49289 2.33798 3.72265 2.18481L6.72265 0.184805Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/house_unfilled.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5.591C11 5.45013 10.9402 5.31564 10.8359 5.22088L6.33594 1.13006C6.1453 0.95698 5.8547 0.95698 5.66406 1.13006L1.16406 5.22088C1.05983 5.31564 1 5.45013 1 5.591V12.1486C1 12.4248 1.22386 12.6486 1.5 12.6486H3C3.27614 12.6486 3.5 12.4248 3.5 12.1486V9.14862C3.5 8.32019 4.17157 7.64862 5 7.64862H7C7.82843 7.64862 8.5 8.32019 8.5 9.14862V12.1486C8.5 12.4248 8.72386 12.6486 9 12.6486H10.5C10.7761 12.6486 11 12.4248 11 12.1486V5.591ZM12 12.1486C12 12.977 11.3284 13.6486 10.5 13.6486H9C8.17157 13.6486 7.5 12.977 7.5 12.1486V9.14862C7.5 8.87247 7.27614 8.64862 7 8.64862H5C4.72386 8.64862 4.5 8.87247 4.5 9.14862V12.1486C4.5 12.977 3.82843 13.6486 3 13.6486H1.5C0.671573 13.6486 0 12.977 0 12.1486V5.591C0 5.16838 0.178499 4.76493 0.491211 4.48065L4.99121 0.389826C5.56325 -0.129942 6.43675 -0.129943 7.00879 0.389826L11.5088 4.48065C11.8215 4.76493 12 5.16838 12 5.591V12.1486Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/import.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1.5C1 1.22386 1.22386 1 1.5 1H12.5C12.7761 1 13 1.22386 13 1.5V4C13 4.27614 13.2239 4.5 13.5 4.5C13.7761 4.5 14 4.27614 14 4V1.5C14 0.671573 13.3284 0 12.5 0H1.5C0.671573 0 0 0.671573 0 1.5V4C0 4.27614 0.223858 4.5 0.5 4.5C0.776142 4.5 1 4.27614 1 4V1.5ZM6.72265 11.916L7 12.1009L7.27735 11.916L10.2774 9.91603C10.5071 9.76285 10.5692 9.45241 10.416 9.22265C10.2628 8.99289 9.95241 8.9308 9.72265 9.08397L7.5 10.5657L7.5 2.5C7.5 2.22386 7.27614 2 7 2C6.72386 2 6.5 2.22386 6.5 2.5L6.5 10.5657L4.27735 9.08397C4.04759 8.9308 3.73715 8.99288 3.58398 9.22265C3.4308 9.45241 3.49289 9.76285 3.72265 9.91602L6.72265 11.916Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/upload_page.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.58594 0C5.98371 4.00002e-05 6.36522 0.158184 6.64648 0.439453L9.56055 3.35352C9.84182 3.63478 9.99996 4.01629 10 4.41406V7.5H9V5H7C6.17157 5 5.5 4.32843 5.5 3.5V1H1.5C1.22386 1 1 1.22386 1 1.5V12.5C1 12.7761 1.22386 13 1.5 13H6V14H1.5C0.671573 14 0 13.3284 0 12.5V1.5C2.01331e-08 0.671573 0.671573 1.61064e-08 1.5 0H5.58594ZM7.7998 7.59961L9.7998 9.09961C10.0206 9.26522 10.0658 9.57891 9.90039 9.7998C9.73478 10.0206 9.42109 10.0658 9.2002 9.90039L8 9V13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5V9L5.7998 9.90039C5.57891 10.0658 5.26522 10.0206 5.09961 9.7998C4.9342 9.57891 4.97939 9.26522 5.2002 9.09961L7.2002 7.59961L7.5 7.375L7.7998 7.59961ZM6.5 3.5C6.5 3.77614 6.72386 4 7 4H8.79297L6.5 1.70703V3.5Z" fill="#151B1E"/>
+</svg>

package/src/components/tabsHeader/index.vue

@@ -4,83 +4,103 @@
       data-test-id="tabs-scroll-area"
       :scroll-overflow="scrollOverflow"
     >
-      <TabsContainer
+      <Draggable
+        class="rc-tabs-header__tabs"
+        :class="{ 'rc-tabs-header__tabs--scroll': scrollOverflow }"
         data-test-id="tabs-container"
-        :scroll-overflow="scrollOverflow"
+        :model-value="localTabs"
+        item-key="id"
+        :disabled="!dragEnabled"
+        :animation="150"
+        direction="horizontal"
+        :force-fallback="true"
+        :fallback-tolerance="5"
+        :scroll="true"
+        :scroll-sensitivity="60"
+        filter=".rc-tabs-header__menu-slot"
+        :prevent-on-filter="false"
+        ghost-class="rc-tabs-header__tab--ghost"
+        chosen-class="rc-tabs-header__tab--chosen"
+        drag-class="rc-tabs-header__tab--drag"
+        @start="onDragStart"
+        @end="onDragEnd"
+        @update:model-value="onDragOrderUpdate"
       >
-        <TabItem
-          v-for="item in tabsData"
-          :key="item.id"
-          :data-id="item.dataId"
-          :data-qa-id="item.dataId"
-          :data-test-active="activeTab === item.id"
-          data-test-id="tab-item"
-          :full-size="fullSize"
-          :is-active="activeTab === item.id"
-          :is-disabled="item.isDisabled"
-          :scroll-overflow="scrollOverflow"
-          @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
-        >
-          <RCIcon
-            v-if="item.icon"
-            :color="
-              activeTab === item.id
-                ? theme.semanticColors.purple[500]
-                : theme.semanticColors.teal[800]
-            "
-            data-test-id="tab-icon"
-            :hovered-color="
-              activeTab === item.id
-                ? theme.semanticColors.purple[500]
-                : theme.semanticColors.teal[800]
-            "
-            :name="item.icon"
-            size="14px"
-          />
-          <TabText
-            data-test-id="tab-text"
+        <template #item="{ element: item }">
+          <TabItem
+            :data-id="item.dataId"
+            :data-qa-id="item.dataId"
+            :data-test-active="activeTab === item.id"
+            data-test-id="tab-item"
+            :full-size="fullSize"
             :is-active="activeTab === item.id"
             :is-disabled="item.isDisabled"
-            >{{ item.text }}</TabText
+            :is-draggable="dragEnabled"
+            :scroll-overflow="scrollOverflow"
+            @click="onTabClick({ id: item.id, isDisabled: item.isDisabled })"
           >
-          <TabMenuSlot
-            v-if="item.showTabMenu && $slots['tab-menu']"
-            class="rc-tabs-header__menu-slot"
-            data-test-id="tab-menu-slot"
-            :is-active="activeTab === item.id"
-          >
-            <slot
-              name="tab-menu"
-              :item="item"
+            <RCIcon
+              v-if="item.icon"
+              :color="
+                activeTab === item.id
+                  ? theme.semanticColors.purple[500]
+                  : theme.semanticColors.teal[800]
+              "
+              data-test-id="tab-icon"
+              :hovered-color="
+                activeTab === item.id
+                  ? theme.semanticColors.purple[500]
+                  : theme.semanticColors.teal[800]
+              "
+              :name="item.icon"
+              size="14px"
+            />
+            <TabText
+              data-test-id="tab-text"
+              :is-active="activeTab === item.id"
+              :is-disabled="item.isDisabled"
+              :is-draggable="dragEnabled"
+              >{{ item.text }}</TabText
+            >
+            <TabMenuSlot
+              v-if="item.showTabMenu && $slots['tab-menu']"
+              class="rc-tabs-header__menu-slot"
+              data-test-id="tab-menu-slot"
+              :is-active="activeTab === item.id"
+            >
+              <slot
+                name="tab-menu"
+                :item="item"
+                :is-active="activeTab === item.id"
+              />
+            </TabMenuSlot>
+            <DotIcon
+              v-if="item.subText"
+              data-test-id="dot-icon"
               :is-active="activeTab === item.id"
             />
-          </TabMenuSlot>
-          <DotIcon
-            v-if="item.subText"
-            data-test-id="dot-icon"
-            :is-active="activeTab === item.id"
-          />
-          <SubText v-if="item.subText" data-test-id="tab-subtext">{{
-            item.subText
-          }}</SubText>
-          <RCIcon
-            v-if="item.hasError"
-            data-test-id="warning-icon"
-            name="warning"
-            size="14px"
-          />
-          <ConversionTag
-            v-if="item.showUpgradeTag"
-            :data-id="
-              item.isTrialEnded || item.isTrialActive
-                ? `${item.upgradeName}_upgrade_only`
-                : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
-            "
-            :is-capitalized="true"
-            :text="item.upgradeTagText"
-          />
-        </TabItem>
-      </TabsContainer>
+            <SubText v-if="item.subText" data-test-id="tab-subtext">{{
+              item.subText
+            }}</SubText>
+            <RCIcon
+              v-if="item.hasError"
+              data-test-id="warning-icon"
+              name="warning"
+              size="14px"
+            />
+            <ConversionTag
+              v-if="item.showUpgradeTag"
+              :data-id="
+                item.isTrialEnded || item.isTrialActive
+                  ? `${item.upgradeName}_upgrade_only`
+                  : `conversion_tag_import_${item.upgradeName}_available_trial_${item.isTrialAvailable}`
+              "
+              :is-capitalized="true"
+              :text="item.upgradeTagText"
+            />
+          </TabItem>
+        </template>
+      </Draggable>
     </TabsScrollArea>
     <AfterTabsSlot v-if="$slots['after-tabs']" data-test-id="after-tabs-slot">
       <slot name="after-tabs" />
@@ -90,6 +110,7 @@
 
 <script>
   import styled from 'vue3-styled-components'
+  import Draggable from 'vuedraggable'
   import RCIcon from '../icon'
   import theme from '@/assets/theme'
   import ConversionTag from '../tag/conversionTag'
@@ -131,15 +152,6 @@
         : ''}
   `
 
-  const TabsContainerAttrs = { scrollOverflow: Boolean }
-  const TabsContainer = styled('div', TabsContainerAttrs)`
-    display: flex;
-    flex-wrap: ${(props) => (props.scrollOverflow ? 'nowrap' : 'wrap')};
-    align-items: stretch;
-    cursor: pointer;
-    width: ${(props) => (props.scrollOverflow ? 'max-content' : '100%')};
-  `
-
   const AfterTabsSlot = styled.div`
     flex-shrink: 0;
     display: flex;
@@ -160,6 +172,7 @@
     isActive: Boolean,
     fullSize: Boolean,
     isDisabled: Boolean,
+    isDraggable: Boolean,
     scrollOverflow: Boolean,
   }
   const TabItem = styled('div', TabAttrs)`
@@ -169,7 +182,10 @@
     gap: 8px;
     padding: 10px 25px;
     font-size: 14px;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: ${(props) =>
+      props.isDisabled ? 'not-allowed' : props.isDraggable ? 'grab' : 'pointer'};
     font-weight: ${(props) => (props.isActive ? '500' : '400')};
     color: ${(props) =>
       props.isActive
@@ -199,7 +215,11 @@
     }
   `
 
-  const TabTextAttrs = { isActive: Boolean, isDisabled: Boolean }
+  const TabTextAttrs = {
+    isActive: Boolean,
+    isDisabled: Boolean,
+    isDraggable: Boolean,
+  }
   const TabText = styled('div', TabTextAttrs)`
     font-size: 14px;
     font-weight: 400;
@@ -209,15 +229,16 @@
         : props.isDisabled
           ? props.theme.semanticColors.grey[600]
           : props.theme.semanticColors.teal[700]};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    cursor: ${(props) =>
+      props.isDisabled ? 'not-allowed' : props.isDraggable ? 'grab' : 'pointer'};
   `
 
   export default {
     name: 'RCTabsHeader',
     components: {
+      Draggable,
       RootContainer,
       TabsScrollArea,
-      TabsContainer,
       AfterTabsSlot,
       TabItem,
       TabMenuSlot,
@@ -250,13 +271,41 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Opt-in drag-and-drop reordering of the tabs. Off by default so existing
+       * usages are unaffected. When on, dragging a tab emits `on-tabs-reorder`
+       * with the new ordered list of tab ids. No affordance is shown for a
+       * single tab.
+       */
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
     },
-    emits: ['on-tab-change', 'on-tab-close'],
+    emits: ['on-tab-change', 'on-tab-close', 'on-tabs-reorder'],
     data() {
       return {
         theme,
+        localTabs: [],
       }
     },
+    computed: {
+      dragEnabled() {
+        return (
+          this.draggable &&
+          Array.isArray(this.tabsData) &&
+          this.tabsData.length > 1
+        )
+      },
+    },
+    watch: {
+      tabsData: {
+        immediate: true,
+        handler(next) {
+          this.localTabs = Array.isArray(next) ? [...next] : []
+        },
+      },
+    },
     methods: {
       onTabClick({ id, isDisabled }) {
         if (isDisabled) {
@@ -267,6 +316,64 @@
         }
         this.$emit('on-tab-change', id)
       },
+      onDragOrderUpdate(nextTabs) {
+        this.localTabs = nextTabs
+        this.$emit(
+          'on-tabs-reorder',
+          nextTabs.map((tab) => tab.id)
+        )
+      },
+      onDragStart() {
+        // Force a consistent grabbing cursor for the whole drag: the fallback
+        // clone has pointer-events none, so without this the cursor flickers to
+        // whatever sits under the pointer (a tab, a gap, the body).
+        document.body.classList.add('rc-tabs-header--dragging')
+      },
+      onDragEnd() {
+        document.body.classList.remove('rc-tabs-header--dragging')
+      },
+    },
+    beforeUnmount() {
+      // Guard against a drag interrupted by an unmount leaving the class stuck.
+      document.body.classList.remove('rc-tabs-header--dragging')
     },
   }
 </script>
+
+<style scoped>
+  .rc-tabs-header__tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .rc-tabs-header__tabs--scroll {
+    flex-wrap: nowrap;
+    width: max-content;
+  }
+
+  /* Drop position: a slim gap rather than a swap highlight. */
+  .rc-tabs-header__tab--ghost {
+    opacity: 0.25;
+  }
+
+  .rc-tabs-header__tab--chosen {
+    cursor: grabbing;
+  }
+
+  .rc-tabs-header__tab--drag {
+    opacity: 0.9;
+  }
+</style>
+
+<style>
+  /* While a tab is being dragged, keep the grabbing cursor everywhere — the
+     forceFallback clone lets the pointer fall through to elements underneath,
+     which would otherwise flip the cursor between grab / default / grabbing. */
+  body.rc-tabs-header--dragging,
+  body.rc-tabs-header--dragging * {
+    cursor: grabbing !important;
+  }
+</style>