@eturnity/eturnity_reusable_components 9.31.4 → 9.34.0

package/package.json

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

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>