Is there a way to make certain tabs not draggable?

[naomiperry]

I have a use case where I want a few tabs to remain static and others to be draggable. Is this possible?

[viewweiwu]

Sorry. Temporarily not possible.

[viewweiwu]

@naomiperry v0.9.0 can do it. See last example.

https://viewweiwu.github.io/vue-tabs-chrome/#swap

[naomiperry]

@viewweiwu thanks! it looks like when a tab is not draggable, it also isn't clickable though? I made my tabs non draggable and it won't allow me to click them now. it behaves that way in the example also https://viewweiwu.github.io/vue-tabs-chrome/#swap

[viewweiwu]

This is a bug, I will fix it.

[viewweiwu]

@naomiperry 'v0.9.1' has fixed this bug. 😄

[naomiperry]

@viewweiwu does it still trigger the @click event on click? because it doesn't seem to hit my handleClick breakpoint for click events except for contextmenu when non-dragable or non-swappable:

<vue-tabs-chrome ref="settingstab" theme="custom" :minHiddenWidth="120" :maxWidth="160" :value="currentSubTab" :tabs="tabs" @dragstart="handleClick" @click="handleClick" @contextmenu="handleClick" :onClose="onClose">

[viewweiwu]

@naomiperry try 'v0.9.2'.

https://codesandbox.io/s/vibrant-kare-0t2wx?file=/src/App.vue

[naomiperry]

@viewweiwu yep that worked! thanks for fixing it so fast!

[viewweiwu]

It's my pleasure!

[manojamarasekara]

I'm adding false to swap and drag when I'm making the tab. But still I can swap/drag them

    addTab(tabDetails) {
      const item = `tab${Math.random()}`;
      const newTabs = [
        {
          label: tabDetails.searchTerm,
          key: item,
          favico: tabDetails.bookType === 'book' ? require('../../assets/img/book.png') : require('../../assets/img/ebook.png'),
          swappable: false,
          dragable: false,
        },
      ];
      this.$refs.tab.addTab(...newTabs);
      this.tab = item;
    },

what am I missing here? here is my tabs

            <vue-tabs-chrome
                ref="tab"
                v-model="tab"
                :tabs="tabs"
                @click="handleClick"
                :on-close="handleClose"
            />

[viewweiwu]

@ManojAmarasekara

I did not reproduce the phenomenon you mentioned, please check if the version is higher than v0.9.2.

You can try this demo.

https://codesandbox.io/s/laughing-cannon-nc6xf?file=/src/App.vue

I'm adding false to swap and drag when I'm making the tab. But still I can swap/drag them

    addTab(tabDetails) {
      const item = `tab${Math.random()}`;
      const newTabs = [
        {
          label: tabDetails.searchTerm,
          key: item,
          favico: tabDetails.bookType === 'book' ? require('../../assets/img/book.png') : require('../../assets/img/ebook.png'),
          swappable: false,
          dragable: false,
        },
      ];
      this.$refs.tab.addTab(...newTabs);
      this.tab = item;
    },

what am I missing here? here is my tabs

            <vue-tabs-chrome
                ref="tab"
                v-model="tab"
                :tabs="tabs"
                @click="handleClick"
                :on-close="handleClose"
            />

[manojamarasekara]

@viewweiwu does my code has to do something with @contextmenu="handleClick"? Cause in my vue code `handleClick is called by click.

[viewweiwu]

@ManojAmarasekara These are two things that have no influence on each other.