# vue-tabs-chrome

> A Vue2 component for Chrome-like tabs. Drag-and-drop support provided by Draggabilly by @desandro.

Latest version **0.10.0** (published 2021-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-tabs-chrome
pnpm add vue-tabs-chrome
yarn add vue-tabs-chrome
bun add vue-tabs-chrome
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.0 |
| Published | 2021-07-07 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 206.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | viewweiwu |
| Maintainers | viewweiwu |

## Links

- npm: https://www.npmjs.com/package/vue-tabs-chrome
- npm.io page: https://npm.io/package/vue-tabs-chrome

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [draggabilly](https://npm.io/package/draggabilly.md) ^2.2.0

## Recent versions

- 0.10.0 (latest) — 2021-07-07
- 0.9.2 — 2021-04-22
- 0.9.1 — 2021-04-21
- 0.9.0 — 2021-04-20
- 0.8.1 — 2020-12-28
- 0.8.0 — 2020-09-21
- 0.7.1 — 2020-09-07
- 0.7.0 — 2020-09-07
- 0.6.0 — 2020-08-19
- 0.6.2 — 2020-08-19
- 0.5.2 — 2020-08-19
- 0.5.1 — 2020-02-10
- 0.5.0 — 2019-09-25
- 0.4.6 — 2019-09-24
- 0.4.5 — 2019-06-24
- … 8 more at https://npm.io/package/vue-tabs-chrome/versions

## README

# vue-tabs-chrome

A Vue2 component for Chrome-like tabs.<br>
Drag-and-drop support provided by Draggabilly by @desandro.

If you are using Vue3, please see here.
https://github.com/viewweiwu/vue3-tabs-chrome

## Live Demo

[https://viewweiwu.github.io/vue-tabs-chrome/](https://viewweiwu.github.io/vue-tabs-chrome/)

### Code Sandbox Example

[https://codesandbox.io/s/kind-wave-00ipv?file=/src/App.vue](https://codesandbox.io/s/kind-wave-00ipv?file=/src/App.vue)

### CDN

[https://codepen.io/viewweiwu/pen/GRmKaZZ](https://codepen.io/viewweiwu/pen/GRmKaZZ)

## Install

```
npm i vue-tabs-chrome -S
```

## Usage

```html
<template>
  <vue-tabs-chrome v-model="tab" :tabs="tabs" />
</template>
<script>
  import Vue from 'vue'
  import VueTabsChrome from 'vue-tabs-chrome'

  export default {
    components: {
      VueTabsChrome
    },
    data() {
      return {
        tab: 'google',
        tabs: [
          {
            label: 'google',
            key: 'google',
            closable: false,
            favicon: require('./assets/google.jpg')
          },
          {
            label: 'facebook',
            key: 'facebook',
            favicon: require('./assets/fb.jpg')
          },
          {
            label: 'New Tab',
            key: 'any-string-key',
            favicon: (h, { tab, index }) => {
              return h('span', tab.label)
            }
          }
        ]
      }
    }
  }
</script>
```

## Attributes

| Attributes                   | Description                                                                                                                          | Type                      | Default |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ------- |
| tabs                         | tabs configuration. Details are mentioned below.                                                                                     | Array                     | []      |
| value / v-model              | binding value                                                                                                                        | String                    | -       |
| props                        | configuration options, Details are mentioned below.                                                                                  |
| insert-to-after              | Insert to tag's after                                                                                                                | Boolean                   | false   |
| is-mousedown-active          | set tab is active when mousedown                                                                                                     | Boolean                   | true    |
| render-label                 | render label                                                                                                                         | Function(tab, index)      | -       |
| auto-hidden-close-icon-width | auto hidden close tab width. if tabWidth < 120, close icon can not show. If you don’t want this feature, you can set the value to 0. | Number                    | 120     |
| on-close                     | when tab close btn click. if return false, it cannot be closed.                                                                      | Function(tab, key, index) | -       |
| tab-close-width              | tab close icon width.                                                                                                                | Number                    | 16      |

## Tabs Attributes

| Attributes | Description                                                                                                                                                     | Type                     | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
| label      | tab label                                                                                                                                                       | String                   | -       |
| key        | tab key                                                                                                                                                         | String                   | -       |
| class      | tab class                                                                                                                                                       | String                   | -       |
| closable   | tab closable                                                                                                                                                    | Boolean                  | true    |
| dragable   | tab tragable                                                                                                                                                    | Boolean                  | true    |
| swappable  | tab swappable                                                                                                                                                   | Boolean                  | true    |
| favicon    | tab favicon. Custom favicon renderer. It uses Vue's render function. It accepts two arguments: the first is h, the second is an object. including tab and index | Function, required image | -       |

## Props Attributes

| Attributes | Description                                                | Type   | Default |
| ---------- | ---------------------------------------------------------- | ------ | ------- |
| label      | specify which key of tab object is used as the tab's label | String | 'label' |
| key        | specify which key of tab object is used as the tab's key   | String | 'key'   |

## Methods

| Method    | Description | Parameters                  |
| --------- | ----------- | --------------------------- |
| addTab    | add tab     | (tab1, [, ...tab, ...tabN]) |
| removeTab | remove tab  | (tabKey or index)           |
| getTabs   | get tabs    | -                           |

## Events

| Event Name  | Description                                                                                            | Parameters          |
| ----------- | ------------------------------------------------------------------------------------------------------ | ------------------- |
| click       | Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. | (event, tab, index) |
| swap        | Swap tab                                                                                               | (tab, targetTab)    |
| remove      | Remove tab                                                                                             | (tab, index)        |
| contextmenu | Contextmenu event                                                                                      | (event, tab, index) |
| dragstart   | Tab dragstart event                                                                                    | (event, tab, index) |
| dragging    | Tab dragstart event                                                                                    | (event, tab, index) |
| dragend     | Tab dragend event                                                                                      | (event, tab)        |

## Slots

| Attributes | Description    |
| ---------- | -------------- |
| after      | Tab after slot |
| close-icon | Close icon     |

## Change log

## 0.10.0

1. feat: Add Custom Close Button.

## v0.9.2

1. fix: 'v0.9.1' doesn't work

## v0.9.1

1. fix: 'dragable' needs to respond to the 'click' event.

## v0.9.0

1. feat: tab can set dragable.
2. feat: tab can set swappable.
3. feat: can be introduced with "Vue.components" instead of "Vue.use".
4. feat: new example UI.
5. feat: new 'Chrome UI' example.
6. feat: new 'swap & drag' example.
7. remove: remove 'Save to Localstorage' example.

## 2020/9/21

fix: tab[key] => tab[this.tabKey]

## 2020/9/21

feat: add after slots
feat: add drag events

## 2020/9/7

fix: closable not work
feat: auto hidden close tab width

## 2020/8/19

add new feature: tab close event listener & tab custom class

## 2020/2/10

add new feature: tab closable

## License

MIT

---
_Source: https://npm.io/package/vue-tabs-chrome · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._