├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── examples
    ├── assets
    │   ├── bg.png
    │   ├── fb.jpg
    │   ├── google.jpg
    │   └── logo.png
    ├── main.js
    ├── example
    │   ├── example-dark.vue
    │   ├── example-insert.vue
    │   ├── example-after.vue
    │   ├── example.vue
    │   ├── example-swap.vue
    │   ├── example-key.vue
    │   ├── example-save.vue
    │   ├── example-custom-close.vue
    │   ├── example-custom.vue
    │   ├── example-events.vue
    │   ├── example-custom-tab-buttons.vue
    │   └── example-chrome.vue
    └── App.vue
├── .editorconfig
├── .gitignore
├── packages
    ├── render-temp.vue
    ├── index.js
    └── vue-tabs-chrome.vue
├── .npmignore
├── deploy.sh
├── vue.config.js
├── package.json
└── README.md


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viewweiwu/vue-tabs-chrome/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/examples/assets/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viewweiwu/vue-tabs-chrome/HEAD/examples/assets/bg.png


--------------------------------------------------------------------------------
/examples/assets/fb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viewweiwu/vue-tabs-chrome/HEAD/examples/assets/fb.jpg


--------------------------------------------------------------------------------
/examples/assets/google.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viewweiwu/vue-tabs-chrome/HEAD/examples/assets/google.jpg


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/viewweiwu/vue-tabs-chrome/HEAD/examples/assets/logo.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | quote_type = single
7 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueTabsChrome from '../packages'
 4 | 
 5 | Vue.use(VueTabsChrome)
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   render: h => h(App)
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/packages/render-temp.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'render-temp',
 4 |   props: {
 5 |     render: {
 6 |       type: Function,
 7 |       default: () => {}
 8 |     },
 9 |     params: {
10 |       type: Object,
11 |       default: () => ({})
12 |     }
13 |   },
14 |   render (h) {
15 |     return this.render && this.render(h, { ...this.params })
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | examples/
 4 | public/
 5 | dist/
 6 | vue.config.js
 7 | babel.config.js
 8 | deploy.sh
 9 | *.map
10 | *.html
11 | 
12 | # local env files
13 | .env.local
14 | .env.*.local
15 | 
16 | # Log files
17 | npm-debug.log*
18 | yarn-debug.log*
19 | yarn-error.log*
20 | 
21 | # Editor directories and files
22 | .idea
23 | .vscode
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw*


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | import VueTabsChrome from './vue-tabs-chrome'
 2 | 
 3 | const install = function (Vue) {
 4 |   if (install.installed) return
 5 |   install.installed = true
 6 |   Vue.component(VueTabsChrome.name, VueTabsChrome)
 7 | }
 8 | 
 9 | if (typeof window !== 'undefined' && window.Vue) {
10 |   install(window.Vue)
11 | }
12 | 
13 | VueTabsChrome.install = install
14 | 
15 | export { VueTabsChrome }
16 | 
17 | export default VueTabsChrome
18 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 当发生错误时中止脚本
 4 | set -e
 5 | 
 6 | # 构建
 7 | npm run build
 8 | 
 9 | # cd 到构建输出的目录下 
10 | cd dist
11 | 
12 | # 部署到自定义域域名
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | # 部署到 https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # 部署到 https://<USERNAME>.github.io/<REPO>
23 | git push -f https://github.com/viewweiwu/vue-tabs-chrome.git master:gh-pages
24 | 
25 | cd -


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | function resolve (dir) {
 3 |   return path.join(__dirname, dir)
 4 | }
 5 | module.exports = {
 6 |   lintOnSave: false,
 7 |   css: {
 8 |     extract: false
 9 |   },
10 |   publicPath: process.env.NODE_ENV === 'production'
11 |     ? '/vue-tabs-chrome/'
12 |     : '/',
13 |   pages: {
14 |     index: {
15 |       entry: 'examples/main.js',
16 |       template: 'public/index.html',
17 |       filename: 'index.html'
18 |     }
19 |   },
20 |   chainWebpack: (config) => {
21 |     config.resolve.alias
22 |       .set('@', resolve('examples/assets'))
23 |     config.module
24 |       .rule('js').include
25 |       .add('/packages')
26 |       .end()
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport"
 8 |     content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 9 |   <link rel="icon" href="<%= BASE_URL %>faviconn.ico">
10 |   <link rel="stylesheet" href="https://at.alicdn.com/t/font_2498827_ixeycf9piwi.css">
11 |   <title>vue-tabs-chrome</title>
12 | </head>
13 | 
14 | <body>
15 |   <noscript>
16 |     <strong>We're sorry but vue-tabs-chrome doesn't work properly without JavaScript enabled. Please enable it to
17 |       continue.</strong>
18 |   </noscript>
19 |   <div id="app"></div>
20 |   <!-- built files will be auto injected -->
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/examples/example/example-dark.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content dark">
 3 |     <vue-tabs-chrome theme="dark" ref="tab" v-model="tab" :tabs="tabs" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data () {
13 |     return {
14 |       tab: 'google',
15 |       tabs: [
16 |         {
17 |           label: 'google',
18 |           key: 'google',
19 |           favicon: require('../assets/google.jpg')
20 |         },
21 |         {
22 |           label: 'facebook',
23 |           key: 'facebook',
24 |           favicon: require('../assets/fb.jpg')
25 |         }
26 |       ]
27 |     }
28 |   },
29 |   methods: {
30 |     addTab () {
31 |       let item = 'tab' + Date.now()
32 |       let newTabs = [
33 |         {
34 |           label: 'New Tab',
35 |           key: item
36 |         }
37 |       ]
38 |       this.$refs.tab.addTab(...newTabs)
39 |       this.tab = item
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/examples/example/example-insert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs" insert-to-after />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data () {
13 |     return {
14 |       tab: 'google',
15 |       tabs: [
16 |         {
17 |           label: 'google',
18 |           key: 'google',
19 |           favicon: require('../assets/google.jpg')
20 |         },
21 |         {
22 |           label: 'facebook',
23 |           key: 'facebook',
24 |           favicon: require('../assets/fb.jpg')
25 |         }
26 |       ]
27 |     }
28 |   },
29 |   methods: {
30 |     addTab () {
31 |       let item = 'tab' + Date.now()
32 |       let newTabs = [
33 |         {
34 |           label: 'New Tab',
35 |           key: item
36 |         }
37 |       ]
38 |       this.$refs.tab.addTab(...newTabs)
39 |       this.tab = item
40 |     }
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/examples/example/example-after.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs">
 4 |       <button slot="after" style="height: 20px line-height: 20px; padding: 0 10px;" @click="addTab">➕</button>
 5 |       <button slot="after" style="height: 20px line-height: 20px; padding: 0 10px;margin-left: 5px;" @click="handleDog">🐶</button>
 6 |     </vue-tabs-chrome>
 7 |     <div class="btns">
 8 |       <button @click="addTab">New Tab</button>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   data () {
16 |     return {
17 |       tab: 'google',
18 |       tabs: [
19 |         {
20 |           label: 'google',
21 |           key: 'google',
22 |           favicon: require('../assets/google.jpg')
23 |         },
24 |         {
25 |           label: 'facebook',
26 |           key: 'facebook',
27 |           favicon: require('../assets/fb.jpg')
28 |         }
29 |       ]
30 |     }
31 |   },
32 |   methods: {
33 |     addTab () {
34 |       let item = 'tab' + Date.now()
35 |       let newTabs = [
36 |         {
37 |           label: 'New Tab',
38 |           key: item
39 |         }
40 |       ]
41 |       this.$refs.tab.addTab(...newTabs)
42 |       this.tab = item
43 |     },
44 |     handleDog () {
45 |       alert('hello!')
46 |     }
47 |   }
48 | }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/examples/example/example.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome ref="tab" :minHiddenWidth="120" v-model="tab" :tabs="tabs" @contextmenu="handleClick" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |       <button @click="removeTab">Remove active Tab</button>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data () {
14 |     return {
15 |       tab: 'google',
16 |       tabs: [
17 |         {
18 |           label: 'google',
19 |           key: 'google',
20 |           favicon: require('../assets/google.jpg')
21 |         },
22 |         {
23 |           label: 'facebook',
24 |           key: 'facebook',
25 |           favicon: require('../assets/fb.jpg')
26 |         },
27 |         {
28 |           label: 'New Tab',
29 |           key: 'any-string-key'
30 |         }
31 |       ]
32 |     }
33 |   },
34 |   methods: {
35 |     addTab () {
36 |       let item = 'tab' + Date.now()
37 |       let newTabs = [
38 |         {
39 |           label: 'New Tab',
40 |           key: item
41 |         }
42 |       ]
43 |       this.$refs.tab.addTab(...newTabs)
44 |       this.tab = item
45 |     },
46 |     removeTab () {
47 |       this.$refs.tab.removeTab(this.tab)
48 |     },
49 |     handleClick (e, tab, i) {
50 |       console.log(e, tab, i)
51 |     }
52 |   }
53 | }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/examples/example/example-swap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome ref="tab" :minHiddenWidth="120" v-model="tab" :tabs="tabs" @contextmenu="handleClick" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |       <button @click="removeTab">Remove active Tab</button>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data () {
14 |     return {
15 |       tab: 'normal',
16 |       tabs: [
17 |         {
18 |           label: 'Normal tab',
19 |           key: 'normal'
20 |         },
21 |         {
22 |           label: 'You cant swap me',
23 |           key: 'swappable',
24 |           swappable: false
25 |         },
26 |         {
27 |           label: 'You cant drag me',
28 |           key: 'dragable',
29 |           dragable: false
30 |         },
31 |         {
32 |           label: 'Both',
33 |           key: 'any-string-key',
34 |           dragable: false,
35 |           swappable: false
36 |         }
37 |       ]
38 |     }
39 |   },
40 |   methods: {
41 |     addTab () {
42 |       let item = 'tab' + Date.now()
43 |       let newTabs = [
44 |         {
45 |           label: 'New Tab',
46 |           key: item
47 |         }
48 |       ]
49 |       this.$refs.tab.addTab(...newTabs)
50 |       this.tab = item
51 |     },
52 |     removeTab () {
53 |       this.$refs.tab.removeTab(this.tab)
54 |     },
55 |     handleClick (e, tab, i) {
56 |       console.log(e, tab, i)
57 |     }
58 |   }
59 | }
60 | </script>
61 | 


--------------------------------------------------------------------------------
/examples/example/example-key.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs" :props="{ key: 'meta.key', label: 'meta.title' }" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |       <button @click="removeTab">Remove active Tab</button>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data () {
14 |     return {
15 |       tab: 'hello1',
16 |       tabs: [
17 |         {
18 |           label: 'google',
19 |           key: 'google',
20 |           favicon: require('../assets/google.jpg'),
21 |           meta: {
22 |             key: 'hello1'
23 |           }
24 |         },
25 |         {
26 |           label: 'facebook',
27 |           key: 'facebook',
28 |           favicon: require('../assets/fb.jpg'),
29 |           meta: {
30 |             key: 'hello2'
31 |           }
32 |         },
33 |         {
34 |           label: 'New Tab',
35 |           key: 'any-string-key',
36 |           favicon: (h, { tab, index }) => {
37 |             return h('span', { style: { color: 'red' } }, '*')
38 |           },
39 |           meta: {
40 |             title: 'aaa',
41 |             key: 'hello3'
42 |           }
43 |         }
44 |       ]
45 |     }
46 |   },
47 |   methods: {
48 |     addTab () {
49 |       let item = 'tab' + Date.now()
50 |       let newTabs = [
51 |         {
52 |           label: 'New Tab',
53 |           key: item,
54 |           meta: {
55 |             key: item
56 |           }
57 |         }
58 |       ]
59 |       this.$refs.tab.addTab(...newTabs)
60 |       this.tab = item
61 |     },
62 |     removeTab () {
63 |       this.$refs.tab.removeTab(this.tab)
64 |     }
65 |   }
66 | }
67 | </script>
68 | 


--------------------------------------------------------------------------------
/examples/example/example-save.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome
 4 |       ref="tab"
 5 |       v-model="tab"
 6 |       :tabs="tabs"
 7 |       @swap="handleSwap"
 8 |       @remove="handleRemove"
 9 |     />
10 |     <div class="btns">
11 |       <button @click="addTab">New Tab</button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   data () {
19 |     return {
20 |       tab: 'google',
21 |       tabs: [
22 |         {
23 |           label: 'google',
24 |           key: 'google',
25 |           favicon: require('../assets/google.jpg')
26 |         },
27 |         {
28 |           label: 'facebook',
29 |           key: 'facebook',
30 |           favicon: require('../assets/fb.jpg')
31 |         }
32 |       ]
33 |     }
34 |   },
35 |   beforeMount () {
36 |     this.load()
37 |   },
38 |   methods: {
39 |     addTab () {
40 |       let name = prompt('input tab name')
41 |       if (!name) return
42 |       let item = 'tab' + Date.now()
43 |       let newTabs = [
44 |         {
45 |           label: name,
46 |           key: item
47 |         }
48 |       ]
49 |       this.$refs.tab.addTab(...newTabs)
50 |       this.tab = item
51 |       this.save()
52 |     },
53 |     load () {
54 |       let tabs = localStorage.getItem('VUE_TABS_CHROME')
55 |       if (tabs) {
56 |         this.tabs = JSON.parse(tabs)
57 |       }
58 |     },
59 |     save () {
60 |       localStorage.setItem('VUE_TABS_CHROME', JSON.stringify(this.$refs.tab.getTabs()))
61 |     },
62 |     handleSwap (tab, targetTab) {
63 |       console.log(tab, targetTab)
64 |       this.save()
65 |     },
66 |     handleRemove (tab, index) {
67 |       console.log(tab, index)
68 |       this.save()
69 |     }
70 |   }
71 | }
72 | </script>
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tabs-chrome",
 3 |   "version": "0.10.0",
 4 |   "author": "viewweiwu",
 5 |   "private": false,
 6 |   "license": "MIT",
 7 |   "main": "lib/vue-tabs-chrome.umd.min.js",
 8 |   "scripts": {
 9 |     "serve": "vue-cli-service serve",
10 |     "build": "vue-cli-service build",
11 |     "lint": "vue-cli-service lint",
12 |     "lib": "vue-cli-service build --target lib --name vue-tabs-chrome --dest lib packages/index.js"
13 |   },
14 |   "dependencies": {
15 |     "core-js": "^2.6.5",
16 |     "draggabilly": "^2.2.0",
17 |     "vue": "^2.6.10"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.8.0",
21 |     "@vue/cli-plugin-eslint": "^3.8.0",
22 |     "@vue/cli-service": "^3.8.0",
23 |     "@vue/eslint-config-standard": "^4.0.0",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.16.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "less": "^3.0.4",
28 |     "less-loader": "^4.1.0",
29 |     "lint-staged": "^8.1.5",
30 |     "pug": "^3.0.1",
31 |     "pug-loader": "^2.4.0",
32 |     "pug-plain-loader": "^1.0.0",
33 |     "vue-highlightjs": "^1.3.3",
34 |     "vue-template-compiler": "^2.6.10"
35 |   },
36 |   "eslintConfig": {
37 |     "root": true,
38 |     "env": {
39 |       "node": true
40 |     },
41 |     "extends": [
42 |       "plugin:vue/essential",
43 |       "@vue/standard"
44 |     ],
45 |     "rules": {},
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     }
49 |   },
50 |   "postcss": {
51 |     "plugins": {
52 |       "autoprefixer": {}
53 |     }
54 |   },
55 |   "browserslist": [
56 |     "> 1%",
57 |     "last 2 versions"
58 |   ],
59 |   "gitHooks": {
60 |     "pre-commit": "lint-staged"
61 |   },
62 |   "lint-staged": {
63 |     "*.{js,vue}": [
64 |       "vue-cli-service lint",
65 |       "git add"
66 |     ]
67 |   }
68 | }


--------------------------------------------------------------------------------
/examples/example/example-custom-close.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content example-custom-close">
 3 |     <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs" @contextmenu="handleClick" :onClose="onClose" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |       <button @click="removeTab">Remove active Tab</button>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data () {
14 |     return {
15 |       tab: 'google',
16 |       tabs: [
17 |         {
18 |           label: 'google',
19 |           key: 'google',
20 |           class: 'go',
21 |           favicon: require('../assets/google.jpg')
22 |         },
23 |         {
24 |           label: 'facebook',
25 |           key: 'facebook',
26 |           favicon: require('../assets/fb.jpg')
27 |         }
28 |       ]
29 |     }
30 |   },
31 |   methods: {
32 |     addTab () {
33 |       let item = 'tab' + Date.now()
34 |       let newTabs = [
35 |         {
36 |           label: 'New Tab',
37 |           key: item,
38 |           closable: false
39 |         }
40 |       ]
41 |       this.$refs.tab.addTab(...newTabs)
42 |       this.tab = item
43 |     },
44 |     removeTab () {
45 |       this.$refs.tab.removeTab(this.tab)
46 |     },
47 |     handleClick (e, tab, i) {
48 |       console.log(e, tab, i)
49 |     },
50 |     onClose (tab, key, index) {
51 |       console.log(tab, key, index)
52 |       // do not update tab key
53 |       if (tab.class === 'go') {
54 |         alert('you cant close this tab')
55 |         return false
56 |       }
57 |       return true
58 |     }
59 |   }
60 | }
61 | </script>
62 | 
63 | <style lang="less">
64 | .example-custom-close {
65 |   .go {
66 |     .tabs-close {
67 |       svg {
68 |         display: none;
69 |       }
70 |       &::after {
71 |         content: '';
72 |         width: 10px;
73 |         height: 10px;
74 |         border-radius: 50%;
75 |         background-color: #f06;
76 |         position: relative;
77 |         display: inline-block;
78 |       }
79 |     }
80 |   }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/examples/example/example-custom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome theme="custom" ref="tab" v-model="tab" :tabs="tabs" :gap="2" />
 4 |     <div class="btns">
 5 |       <button @click="addTab">New Tab</button>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   data () {
13 |     return {
14 |       tab: 'google',
15 |       tabs: [
16 |         {
17 |           label: 'google',
18 |           key: 'google',
19 |           favicon: require('../assets/google.jpg')
20 |         },
21 |         {
22 |           label: 'facebook',
23 |           key: 'facebook',
24 |           favicon: require('../assets/fb.jpg')
25 |         }
26 |       ]
27 |     }
28 |   },
29 |   methods: {
30 |     addTab () {
31 |       let item = 'tab' + Date.now()
32 |       let newTabs = [
33 |         {
34 |           label: 'New Tab',
35 |           key: item
36 |         }
37 |       ]
38 |       this.$refs.tab.addTab(...newTabs)
39 |       this.tab = item
40 |     }
41 |   }
42 | }
43 | </script>
44 | 
45 | <style lang="less">
46 | .vue-tabs-chrome.theme-custom {
47 |   padding-top: 0;
48 |   background-color: transparent;
49 |   overflow: hidden;
50 |   .tabs-footer,
51 |   .tabs-divider,
52 |   .tabs-background-before,
53 |   .tabs-background-after {
54 |     display: none;
55 |   }
56 |   .tabs-item {
57 |     cursor: pointer;
58 |   }
59 |   .tabs-content {
60 |     overflow: unset;
61 |     border-bottom: 1px solid #e4e7ed;
62 |   }
63 |   .tabs-background {
64 |     padding: 0;
65 |   }
66 |   .tabs-background-content {
67 |     border-top: 1px solid #e4e7ed;
68 |     border-left: 1px solid #e4e7ed;
69 |     border-right: 1px solid #e4e7ed;
70 |     border-radius: 0;
71 |     background-color: #fff;
72 |   }
73 |   .tabs-content {
74 |     height: 40px;
75 |   }
76 |   .active {
77 |     color: #409eff;
78 |     .tabs-background {
79 |       &::before,
80 |       &::after {
81 |         top: 100%;
82 |         left: 0;
83 |         content: '';
84 |         width: 100%;
85 |         height: 1px;
86 |         background-color: #fff;
87 |         z-index: 1;
88 |         position: absolute;
89 |       }
90 |       &::before {
91 |         top: 0;
92 |         height: 2px;
93 |         background-color: #409eff;
94 |       }
95 |     }
96 |   }
97 | }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/examples/example/example-events.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <vue-tabs-chrome
 4 |       ref="tab"
 5 |       v-model="tab"
 6 |       :tabs="tabs"
 7 |       @dragstart="handleDragStart"
 8 |       @dragging="handleDragging"
 9 |       @dragend="handleDragEnd"
10 |       @swap="handleSwap"
11 |       @remove="handleRemove"
12 |       @contextmenu="handleRightClick"
13 |       @click="handleTabClick"
14 |     />
15 |     <div class="btns">
16 |       <button @click="addTab">New Tab</button>
17 |     </div>
18 |     <div>
19 |       {{ msgList }}
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   data () {
27 |     return {
28 |       tab: 'google',
29 |       tabs: [
30 |         {
31 |           label: 'google',
32 |           key: 'google',
33 |           favicon: require('../assets/google.jpg')
34 |         },
35 |         {
36 |           label: 'facebook',
37 |           key: 'facebook',
38 |           favicon: require('../assets/fb.jpg')
39 |         }
40 |       ],
41 |       msgList: []
42 |     }
43 |   },
44 |   methods: {
45 |     addTab () {
46 |       let item = 'tab' + Date.now()
47 |       let newTabs = [
48 |         {
49 |           label: 'New Tab',
50 |           key: item
51 |         }
52 |       ]
53 |       this.$refs.tab.addTab(...newTabs)
54 |       this.tab = item
55 |     },
56 |     handleDragStart (e, tab, index) {
57 |       console.info('dragstart', e, tab, index)
58 |       this.msgList.push('dragstart')
59 |     },
60 |     handleDragging (e, tab, index) {
61 |       console.info('dragging', e, tab, index)
62 |       this.msgList.push('dragging')
63 |     },
64 |     handleDragEnd (e, tab) {
65 |       console.info('dragend', e, tab)
66 |       this.msgList.push('dragend')
67 |     },
68 |     handleRemove (tab, index) {
69 |       console.info('remove', tab, index)
70 |       this.msgList.push('remove')
71 |     },
72 |     handleSwap (tab, targetTab) {
73 |       console.info('swap', tab, targetTab)
74 |       this.msgList.push('swap')
75 |     },
76 |     handleRightClick (e, tab, index) {
77 |       console.info('contextmenu', e, tab, index)
78 |       this.msgList.push('contextmenu')
79 |     },
80 |     handleTabClick (e, tab, index) {
81 |       console.info(e, tab, index)
82 |       this.msgList.push('click')
83 |     }
84 |   }
85 | }
86 | </script>
87 | 


--------------------------------------------------------------------------------
/examples/example/example-custom-tab-buttons.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content example-custom-close">
  3 |     <vue-tabs-chrome ref="tab" v-model="tab" :tabs="tabs" @contextmenu="handleClick" :onClose="onClose" :autoHiddenCloseIconWidth="170" :tabCloseWidth="50">
  4 |       <template #close-icon="{tab: tabSelected, index}">
  5 |         <div class="btn-container">
  6 |           <a class="btn-1" @click.stop="button1(tabSelected, index)"></a>
  7 |           <a class="btn-2" @click.stop="button2(tabSelected, index)"></a>
  8 |         </div>
  9 |       </template>
 10 |     </vue-tabs-chrome>
 11 |     <div class="btns">
 12 |       <button @click="addTab">New Tab</button>
 13 |       <button @click="removeTab">Remove active Tab</button>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   data () {
 21 |     return {
 22 |       tab: 'google',
 23 |       tabs: [
 24 |         {
 25 |           label: 'google',
 26 |           key: 'google',
 27 |           favicon: require('../assets/google.jpg')
 28 |         },
 29 |         {
 30 |           label: 'facebook',
 31 |           key: 'facebook',
 32 |           favicon: require('../assets/fb.jpg')
 33 |         }
 34 |       ]
 35 |     }
 36 |   },
 37 |   methods: {
 38 |     addTab () {
 39 |       let item = 'tab' + Date.now()
 40 |       let newTabs = [
 41 |         {
 42 |           label: 'New Tab',
 43 |           key: item
 44 |         }
 45 |       ]
 46 |       this.$refs.tab.addTab(...newTabs)
 47 |       this.tab = item
 48 |     },
 49 | 
 50 |     button1 (tabSelected, index) {
 51 |       console.log(tabSelected, index)
 52 |       alert('You pressed button 1! index: ' + index + 'tab: ' + JSON.stringify(tabSelected))
 53 |     },
 54 |     button2 (tabSelected, index) {
 55 |       console.log(tabSelected, index)
 56 |       alert('You pressed button 2! index: ' + index + 'tab: ' + JSON.stringify(tabSelected))
 57 |     },
 58 |     removeTab () {
 59 |       this.$refs.tab.removeTab(this.tab)
 60 |     },
 61 |     handleClick (e, tab, i) {
 62 |       console.log(e, tab, i)
 63 |     },
 64 |     onClose (tab, key, index) {
 65 |       console.log(tab, key, index)
 66 |       // do not update tab key
 67 |       if (tab.class === 'go') {
 68 |         alert('you cant close this tab')
 69 |         return false
 70 |       }
 71 |       return true
 72 |     }
 73 |   }
 74 | }
 75 | </script>
 76 | 
 77 | <style lang="less">
 78 | .example-custom-close {
 79 |   .btn-container {
 80 |     display: flex;
 81 |     flex-direction: row;
 82 |     height: 100%;
 83 |     width: 100%;
 84 |     justify-content: center;
 85 |     align-items: center;
 86 |   }
 87 | 
 88 |   .btn-1 {
 89 |     width: 16px;
 90 |     height: 16px;
 91 |     border-radius: 50%;
 92 |     background-color: gold;
 93 | 
 94 |     &:hover {
 95 |       background-color: black;
 96 |     }
 97 |   }
 98 | 
 99 |   .btn-2 {
100 |     width: 16px;
101 |     height: 16px;
102 |     border-radius: 50%;
103 |     background-color: silver;
104 | 
105 |     &:hover {
106 |       background-color: black;
107 |     }
108 |   }
109 | }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <h1>vue-tabs-chrome </h1>
  4 |     <p>A Vue component for Chrome-like tabs.</p>
  5 |     <p>
  6 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome" target="_blank">
  7 |         <button>
  8 |           <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273111538,3388165957&fm=26&gp=0.jpg" alt="">
  9 |           <span>github</span>
 10 |         </button>
 11 |       </a>
 12 |     </p>
 13 |     <h2>
 14 |       <a href="#chrome" name="chrome">Chrome UI</a>
 15 |     </h2>
 16 |     <p>
 17 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-chrome.vue" target="_blank">code</a>
 18 |     </p>
 19 |     <example-chrome />
 20 |     <h2>
 21 |       <a href="#default" name="default">Default</a>
 22 |     </h2>
 23 |     <p>
 24 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example.vue" target="_blank">code</a>
 25 |     </p>
 26 |     <example />
 27 |     <h2>
 28 |       <a href="#dark" name="dark">Theme Dark</a>
 29 |     </h2>
 30 |     <p>
 31 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-dark.vue" target="_blank">code</a>
 32 |     </p>
 33 |     <example-dark />
 34 |     <h2>
 35 |       <a href="#after" name="after">after slots</a>
 36 |     </h2>
 37 |     <p>
 38 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-after.vue" target="_blank">code</a>
 39 |     </p>
 40 |     <example-after />
 41 |     <h2>
 42 |       <a href="#custom" name="custom">Theme Custom</a>
 43 |     </h2>
 44 |     <p>
 45 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-custom.vue" target="_blank">code</a>
 46 |     </p>
 47 |     <example-custom />
 48 |     <h2>
 49 |       <a href="#listener" name="listener">Event Listener</a>
 50 |     </h2>
 51 |     <p>
 52 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-custom-close.vue" target="_blank">code</a>
 53 |     </p>
 54 |     <p>google tab has custom close icon, and cant close.</p>
 55 |     <example-custom-close></example-custom-close>
 56 |     <h2>
 57 |       <a href="#custom-tab-buttons" name="custom-tab-buttons">Custom tab icons</a>
 58 |     </h2>
 59 |     <p>
 60 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-custom-tab-buttons.vue" target="_blank">code</a>
 61 |     </p>
 62 |     <p>google tab has custom tab icons</p>
 63 |     <example-custom-tab-buttons></example-custom-tab-buttons>
 64 |     <h2>
 65 |       <a href="#insert" name="insert">Insert to tag's after</a>
 66 |     </h2>
 67 |     <p>
 68 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-insert.vue" target="_blank">code</a>
 69 |     </p>
 70 |     <example-insert />
 71 |     <h2>
 72 |       <a href="#events" name="events">Events</a>
 73 |     </h2>
 74 |     <p>
 75 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-events.vue" target="_blank">code</a>
 76 |     </p>
 77 |     <example-events />
 78 |     <h2>
 79 |       <a href="#swap" name="swap"> Swap & Drag</a>
 80 |     </h2>
 81 |     <p>
 82 |       <a href="https://github.com/viewweiwu/vue-tabs-chrome/blob/master/examples/example/example-swap.vue" target="_blank">code</a>
 83 |     </p>
 84 |     <example-swap />
 85 |   </div>
 86 | </template>
 87 | 
 88 | <script>
 89 | import Example from './example/example'
 90 | import ExampleChrome from './example/example-chrome'
 91 | import ExampleDark from './example/example-dark'
 92 | import ExampleCustom from './example/example-custom'
 93 | import ExampleAfter from './example/example-after'
 94 | import ExampleInsert from './example/example-insert'
 95 | import ExampleCustomClose from './example/example-custom-close'
 96 | import ExampleEvents from './example/example-events'
 97 | import ExampleSwap from './example/example-swap'
 98 | import ExampleCustomTabButtons from './example/example-custom-tab-buttons'
 99 | export default {
100 |   name: 'app',
101 |   components: { Example, ExampleChrome, ExampleDark, ExampleCustom, ExampleAfter, ExampleInsert, ExampleCustomClose, ExampleEvents, ExampleSwap, ExampleCustomTabButtons }
102 | }
103 | </script>
104 | 
105 | <style lang="less">
106 | * {
107 |   box-sizing: border-box;
108 | }
109 | html {
110 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
111 | }
112 | 
113 | body {
114 |   margin: 0;
115 |   background-color: #fff;
116 |   color: #2c3e50;
117 |   background-image: url(./assets/bg.png);
118 | }
119 | 
120 | h1 {
121 |   color: #000;
122 | }
123 | 
124 | h1,
125 | h2,
126 | h3 {
127 |   font-weight: 700;
128 |   letter-spacing: 1px;
129 |   color: #666;
130 |   text-shadow: 1px 1px 1px #fff;
131 | 
132 |   a {
133 |     color: inherit;
134 |   }
135 | }
136 | 
137 | h1 {
138 |   font-size: 32px;
139 | }
140 | 
141 | h2 {
142 |   font-size: 24px;
143 |   margin: 55px 0 15px;
144 | }
145 | 
146 | a {
147 |   color: #ff4081;
148 |   text-decoration: none;
149 |   &:hover {
150 |     text-decoration: underline;
151 |   }
152 |   img {
153 |     height: 1.5em;
154 |     margin-right: 10px;
155 |     vertical-align: middle;
156 |   }
157 | }
158 | 
159 | #app {
160 |   width: 1200px;
161 |   padding: 0 20px;
162 |   max-width: 100%;
163 |   margin: 50px auto 100px;
164 | }
165 | 
166 | .btns {
167 |   padding: 50px 30px;
168 | }
169 | 
170 | button {
171 |   padding: 10px 16px;
172 |   border-radius: 2px;
173 |   box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
174 |   border: 1px solid #fff;
175 |   color: #000;
176 |   background-color: #fff;
177 |   cursor: pointer;
178 |   &:hover {
179 |     text-decoration: none;
180 |   }
181 | }
182 | 
183 | button + button {
184 |   margin-left: 20px;
185 | }
186 | 
187 | .content {
188 |   padding: 20px;
189 |   background-color: #fff;
190 |   &.dark {
191 |     background-color: #323639;
192 |   }
193 | }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/examples/example/example-chrome.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <button @click="handleFullscreen" style="margin-bottom: 8px">full screen</button>
  4 |     <div class="chrome-ui" ref="content">
  5 |       <vue-tabs-chrome ref="tab" :minHiddenWidth="120" v-model="tab" :tabs="tabs" @contextnav="handleClick">
  6 |         <span slot="after" class="btn-add" @click="addTab">
  7 |           <i class="iconfont icon-plus"></i>
  8 |         </span>
  9 |       </vue-tabs-chrome>
 10 |       <div class="nav">
 11 |         <div class="nav-btns">
 12 |           <span class="nav-btn" @click="handleNavClick('back')">
 13 |             <i class="iconfont icon-left"></i>
 14 |           </span>
 15 |           <span class="nav-btn" @click="handleNavClick('forward')">
 16 |             <i class="iconfont icon-right"></i>
 17 |           </span>
 18 |           <span class="nav-btn" @click="handleNavClick('refresh')">
 19 |             <i class="iconfont icon-refresh"></i>
 20 |           </span>
 21 |           <span class="nav-btn" @click="handleNavClick('home')">
 22 |             <i class="iconfont icon-home"></i>
 23 |           </span>
 24 |         </div>
 25 |         <div class="nav-location">
 26 |           <input type="search" ref="location" class="nav-location-input" v-model="location" @keydown.enter="handleSearch">
 27 |           <span class="nav-btn nav-collection" @click="handleCollection">
 28 |             <i class="iconfont icon-star"></i>
 29 |           </span>
 30 |         </div>
 31 |         <div class="nav-btns">
 32 |           <span class="nav-btn" @click="handleMore">
 33 |             <i class="iconfont icon-more"></i>
 34 |           </span>
 35 |         </div>
 36 |       </div>
 37 |       <iframe :src="url" frameborder="0"></iframe>
 38 |     </div>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | import { capitalize } from 'lodash'
 44 | // chrome-ui icon from https://www.iconfont.cn/
 45 | 
 46 | export default {
 47 |   data () {
 48 |     return {
 49 |       tab: '',
 50 |       location: '',
 51 |       tabs: [
 52 |         {
 53 |           label: 'Bing',
 54 |           key: 'bing',
 55 |           url: 'bing.com',
 56 |           favicon: 'https://bing.com/favicon.ico'
 57 |         },
 58 |         {
 59 |           label: '掘金',
 60 |           key: 'juejin',
 61 |           url: 'https://juejin.cn/',
 62 |           favicon: 'https://juejin.cn/favicon.ico'
 63 |         },
 64 |         {
 65 |           label: 'Vue',
 66 |           key: 'vue',
 67 |           url: 'https://cn.vuejs.org/',
 68 |           favicon: 'https://cn.vuejs.org/images/logo.png'
 69 |         }
 70 |       ]
 71 |     }
 72 |   },
 73 |   mounted () {
 74 |     this.tab = 'bing'
 75 |   },
 76 |   computed: {
 77 |     url () {
 78 |       let currTab = this.tabs.find(item => item.key === this.tab)
 79 |       let url = ''
 80 |       if (currTab) {
 81 |         url = currTab.url || ''
 82 |       }
 83 |       if (!url.startsWith('http://') && !url.startsWith('https://')) {
 84 |         url = 'https://' + url
 85 |       }
 86 |       return url
 87 |     }
 88 |   },
 89 |   watch: {
 90 |     tab () {
 91 |       let tab = this.getCurrTab()
 92 |       let location = tab.url || ''
 93 | 
 94 |       if (!location) {
 95 |         return ''
 96 |       }
 97 | 
 98 |       if (!location.startsWith('http://') && !location.startsWith('https://')) {
 99 |         location = 'https://' + location
100 |       }
101 | 
102 |       this.location = location
103 |     }
104 |   },
105 |   methods: {
106 |     addTab () {
107 |       let item = 'tab' + Date.now()
108 |       let newTabs = [
109 |         {
110 |           label: 'New Tab',
111 |           key: item
112 |         }
113 |       ]
114 |       this.$refs.tab.addTab(...newTabs)
115 |       this.tab = item
116 |       this.location = ''
117 |     },
118 |     removeTab () {
119 |       this.$refs.tab.removeTab(this.tab)
120 |     },
121 |     handleClick (e, tab, i) {
122 |       console.log(e, tab, i)
123 |     },
124 |     handleSearch () {
125 |       let { location } = this
126 |       let label = capitalize(location.split('.').slice(-2)[0])
127 |       let favicon = ''
128 |       if (location.includes('.')) {
129 |         if (!location.startsWith('http://') && !location.startsWith('https://')) {
130 |           location = 'https://' + location
131 |         }
132 |       } else {
133 |         location = `https://www.bing.com/search?q=${encodeURIComponent(location)}`
134 |         label = 'Bing'
135 |         favicon = 'https://bing.com/favicon.ico'
136 |       }
137 | 
138 |       if (!favicon) {
139 |         favicon = location + '/favicon.ico'
140 |       }
141 | 
142 |       let tab = this.getCurrTab()
143 |       tab.label = label
144 |       tab.url = location
145 |       tab.favicon = favicon
146 | 
147 |       // this.tab = key
148 |       this.$refs.location.blur()
149 | 
150 |       this.tabs.splice()
151 |     },
152 |     getCurrTab () {
153 |       return this.tabs.find(item => item.key === this.tab)
154 |     },
155 |     handleNavClick (msg) {
156 |       alert(msg)
157 |     },
158 |     handleCollection () {
159 |       alert('😆')
160 |     },
161 |     handleMore () {
162 |       alert('🤗')
163 |     },
164 |     handleFullscreen () {
165 |       this.$refs.content.requestFullscreen()
166 |     }
167 |   }
168 | }
169 | </script>
170 | 
171 | <style lang="less">
172 | .chrome-ui {
173 |   box-shadow: 2px 2px 5px #ddd;
174 | 
175 |   input[type=search]::-webkit-search-cancel-button{
176 |     -webkit-appearance: none;
177 |   }
178 | 
179 |   .btn-add {
180 |     width: 28px;
181 |     height: 28px;
182 |     border-radius: 50%;
183 |     padding: 0 10px;
184 |     color: #333;
185 |     cursor: pointer;
186 |     display: flex;
187 |     justify-content: center;
188 |     align-items: center;
189 |     transition: background 300ms;
190 | 
191 |     &:hover {
192 |       background-color: rgba(0, 0, 0, .1);
193 |     }
194 |   }
195 | 
196 |   .nav {
197 |     padding: 8px;
198 |     background-color: #fff;
199 |     border-bottom: 1px solid #d5d7db;
200 |     display: flex;
201 |     align-items: center;
202 |     position: relative;
203 |   }
204 | 
205 |   .nav-btns {
206 |     display: flex;
207 |   }
208 | 
209 |   .nav-btn {
210 |     width: 28px;
211 |     height: 28px;
212 |     margin-left: 4px;
213 |     border-radius: 14px;
214 |     color: #666;
215 |     display: flex;
216 |     align-items: center;
217 |     justify-content: center;
218 |     transition: background 300ms;
219 |     cursor: pointer;
220 | 
221 |     &:first-of-type {
222 |       margin-left: 0;
223 |     }
224 | 
225 |     &:hover {
226 |       background-color: rgba(0, 0, 0, .1);
227 |     }
228 |   }
229 | 
230 |   .nav-location {
231 |     flex: 1;
232 |     height: 28px;
233 |     margin: 0 8px;
234 |     position: relative;
235 |   }
236 | 
237 |   .nav-location-input {
238 |     width: 100%;
239 |     height: 100%;
240 |     border: none;
241 |     background-color: #eff1f2;
242 |     border-radius: 14px;
243 |     outline: none;
244 |     padding-left: 16px;
245 |     transition: background 300ms;
246 | 
247 |     &:hover {
248 |       background-color: #e6e8e9;
249 |     }
250 | 
251 |     &:focus {
252 |       box-shadow: 0 0 0 3px Highlight;
253 |       background-color: #fff;
254 |     }
255 |   }
256 | 
257 |   .nav-collection {
258 |     top: 50%;
259 |     right: 2px;
260 |     width: 32px;
261 |     height: 24px;
262 |     border-radius: 12px;
263 |     position: absolute;
264 |     transform: translateY(-50%);
265 |   }
266 | 
267 |   iframe {
268 |     width: 100%;
269 |     min-height: calc(100vh - 90px);
270 |     background-color: #f4f4f4;
271 |   }
272 | }
273 | </style>
274 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-tabs-chrome
  2 | 
  3 | A Vue2 component for Chrome-like tabs.<br>
  4 | Drag-and-drop support provided by Draggabilly by @desandro.
  5 | 
  6 | If you are using Vue3, please see here.
  7 | https://github.com/viewweiwu/vue3-tabs-chrome
  8 | 
  9 | ## Live Demo
 10 | 
 11 | [https://viewweiwu.github.io/vue-tabs-chrome/](https://viewweiwu.github.io/vue-tabs-chrome/)
 12 | 
 13 | ### Code Sandbox Example
 14 | 
 15 | example: https://codesandbox.io/s/kind-wave-00ipv?file=/src/App.vue
 16 | 
 17 | use VueRouter: https://codesandbox.io/s/twilight-forest-mm55be?file=/src/App.vue
 18 | 
 19 | ### CDN
 20 | 
 21 | [https://codepen.io/viewweiwu/pen/GRmKaZZ](https://codepen.io/viewweiwu/pen/GRmKaZZ)
 22 | 
 23 | ## Install
 24 | 
 25 | ```
 26 | npm i vue-tabs-chrome -S
 27 | ```
 28 | 
 29 | ## Usage
 30 | 
 31 | ```html
 32 | <template>
 33 |   <vue-tabs-chrome v-model="tab" :tabs="tabs" />
 34 | </template>
 35 | <script>
 36 |   import Vue from 'vue'
 37 |   import VueTabsChrome from 'vue-tabs-chrome'
 38 | 
 39 |   export default {
 40 |     components: {
 41 |       VueTabsChrome
 42 |     },
 43 |     data() {
 44 |       return {
 45 |         tab: 'google',
 46 |         tabs: [
 47 |           {
 48 |             label: 'google',
 49 |             key: 'google',
 50 |             closable: false,
 51 |             favicon: require('./assets/google.jpg')
 52 |           },
 53 |           {
 54 |             label: 'facebook',
 55 |             key: 'facebook',
 56 |             favicon: require('./assets/fb.jpg')
 57 |           },
 58 |           {
 59 |             label: 'New Tab',
 60 |             key: 'any-string-key',
 61 |             favicon: (h, { tab, index }) => {
 62 |               return h('span', tab.label)
 63 |             }
 64 |           }
 65 |         ]
 66 |       }
 67 |     }
 68 |   }
 69 | </script>
 70 | ```
 71 | 
 72 | ## Attributes
 73 | 
 74 | | Attributes                   | Description                                                                                                                          | Type                      | Default |
 75 | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ------- |
 76 | | tabs                         | tabs configuration. Details are mentioned below.                                                                                     | Array                     | []      |
 77 | | value / v-model              | binding value                                                                                                                        | String                    | -       |
 78 | | props                        | configuration options, Details are mentioned below.                                                                                  |
 79 | | insert-to-after              | Insert to tag's after                                                                                                                | Boolean                   | false   |
 80 | | is-mousedown-active          | set tab is active when mousedown                                                                                                     | Boolean                   | true    |
 81 | | render-label                 | render label                                                                                                                         | Function(tab, index)      | -       |
 82 | | 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     |
 83 | | on-close                     | when tab close btn click. if return false, it cannot be closed.                                                                      | Function(tab, key, index) | -       |
 84 | | tab-close-width              | tab close icon width.                                                                                                                | Number                    | 16      |
 85 | 
 86 | ## Tabs Attributes
 87 | 
 88 | | Attributes | Description                                                                                                                                                     | Type                     | Default |
 89 | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
 90 | | label      | tab label                                                                                                                                                       | String                   | -       |
 91 | | key        | tab key                                                                                                                                                         | String                   | -       |
 92 | | class      | tab class                                                                                                                                                       | String                   | -       |
 93 | | closable   | tab closable                                                                                                                                                    | Boolean                  | true    |
 94 | | dragable   | tab tragable                                                                                                                                                    | Boolean                  | true    |
 95 | | swappable  | tab swappable                                                                                                                                                   | Boolean                  | true    |
 96 | | 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 | -       |
 97 | 
 98 | ## Props Attributes
 99 | 
100 | | Attributes | Description                                                | Type   | Default |
101 | | ---------- | ---------------------------------------------------------- | ------ | ------- |
102 | | label      | specify which key of tab object is used as the tab's label | String | 'label' |
103 | | key        | specify which key of tab object is used as the tab's key   | String | 'key'   |
104 | 
105 | ## Methods
106 | 
107 | | Method    | Description | Parameters                  |
108 | | --------- | ----------- | --------------------------- |
109 | | addTab    | add tab     | (tab1, [, ...tab, ...tabN]) |
110 | | removeTab | remove tab  | (tabKey or index)           |
111 | | getTabs   | get tabs    | -                           |
112 | 
113 | ## Events
114 | 
115 | | Event Name  | Description                                                                                            | Parameters          |
116 | | ----------- | ------------------------------------------------------------------------------------------------------ | ------------------- |
117 | | click       | Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging. | (event, tab, index) |
118 | | swap        | Swap tab                                                                                               | (tab, targetTab)    |
119 | | remove      | Remove tab                                                                                             | (tab, index)        |
120 | | contextmenu | Contextmenu event                                                                                      | (event, tab, index) |
121 | | dragstart   | Tab dragstart event                                                                                    | (event, tab, index) |
122 | | dragging    | Tab dragstart event                                                                                    | (event, tab, index) |
123 | | dragend     | Tab dragend event                                                                                      | (event, tab)        |
124 | 
125 | ## Slots
126 | 
127 | | Attributes | Description    |
128 | | ---------- | -------------- |
129 | | after      | Tab after slot |
130 | | close-icon | Close icon     |
131 | 
132 | ## Change log
133 | 
134 | ## 0.10.0
135 | 
136 | 1. feat: Add Custom Close Button.
137 | 
138 | ## v0.9.2
139 | 
140 | 1. fix: 'v0.9.1' doesn't work
141 | 
142 | ## v0.9.1
143 | 
144 | 1. fix: 'dragable' needs to respond to the 'click' event.
145 | 
146 | ## v0.9.0
147 | 
148 | 1. feat: tab can set dragable.
149 | 2. feat: tab can set swappable.
150 | 3. feat: can be introduced with "Vue.components" instead of "Vue.use".
151 | 4. feat: new example UI.
152 | 5. feat: new 'Chrome UI' example.
153 | 6. feat: new 'swap & drag' example.
154 | 7. remove: remove 'Save to Localstorage' example.
155 | 
156 | ## 2020/9/21
157 | 
158 | fix: tab[key] => tab[this.tabKey]
159 | 
160 | ## 2020/9/21
161 | 
162 | feat: add after slots
163 | feat: add drag events
164 | 
165 | ## 2020/9/7
166 | 
167 | fix: closable not work
168 | feat: auto hidden close tab width
169 | 
170 | ## 2020/8/19
171 | 
172 | add new feature: tab close event listener & tab custom class
173 | 
174 | ## 2020/2/10
175 | 
176 | add new feature: tab closable
177 | 
178 | ## License
179 | 
180 | MIT
181 | 


--------------------------------------------------------------------------------
/packages/vue-tabs-chrome.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .vue-tabs-chrome(:class="theme ? 'theme-' + theme : ''")
  3 |     .tabs-content(ref="content")
  4 |       .tabs-divider(
  5 |         v-for="i in tabs.length"
  6 |         :key="i"
  7 |         :style="{ left: (tabWidth - gap * 2) * i + gap + 'px' }"
  8 |       )
  9 |       .tabs-item(
 10 |         v-for="(tab, i) in tabs"
 11 |         ref="item"
 12 |         :class="[{ active: getKey(tab) === value }, `tab-${getKey(tab)}`, tab.class].filter(item => item)"
 13 |         :key="getKey(tab)"
 14 |         :style="{ width: tabWidth + 'px' }"
 15 |         @contextmenu="e => handleMenu(e, tab, i)"
 16 |       )
 17 |         .tabs-background
 18 |           .tabs-background-content
 19 |           svg.tabs-background-before(width="7" height="7")
 20 |             path(d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z")
 21 |           svg.tabs-background-after(width="7" height="7")
 22 |             path(d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z")
 23 |         .tabs-close(@click.stop="handleDelete(tab, i)" v-show="canShowTabClose(tab)" :style="{ width: tabCloseWidth + 'px' }")
 24 |           slot(name="close-icon" :tab="getTab(tab)" :index="i")
 25 |             svg.tabs-close-icon(width="16" height="16" stroke="#595959")
 26 |               path(d="M 4 4 L 12 12 M 12 4 L 4 12")
 27 |         .tabs-main(:title="tab | tabLabelText(tabLabel, renderLabel)")
 28 |           span.tabs-favicon(v-if="tab.favicon")
 29 |             render-temp(
 30 |               v-if="typeof tab.favicon === 'function'"
 31 |               :render="tab.favicon"
 32 |               :params="{ tab, index: i }"
 33 |             )
 34 |             img(v-else-if="tab.favicon" height="32" width="32" :src="tab.favicon")
 35 |           span.tabs-label(
 36 |             :class="{ 'no-close': !canShowTabClose(tab) }"
 37 |             :style="{ marginRight: canShowTabClose(tab) ? tabCloseWidth + 'px' : 0 }"
 38 |           ) {{ tab | tabLabelText(tabLabel, renderLabel) }}
 39 |       span.tabs-after(
 40 |         ref="after"
 41 |         :style="{ left: (tabWidth - gap * 2) * tabs.length + gap * 2 + 'px' }"
 42 |       )
 43 |         slot(name="after")
 44 |     .tabs-footer
 45 | </template>
 46 | 
 47 | <script>
 48 | import Draggabilly from 'draggabilly'
 49 | import RenderTemp from './render-temp'
 50 | 
 51 | const getInstanceAt = (tabs, tab, tabWidth, tabKey, gap) => {
 52 |   let halfWidth = (tabWidth - gap) / 2
 53 |   let x = tab._instance.position.x
 54 |   for (let i = 0; i < tabs.length; i++) {
 55 |     let targetX = tabs[i]._x - 1
 56 |     if (getKey(tab, tabKey) === getKey(tabs[i], tabKey)) continue
 57 |     // in range
 58 |     if (targetX <= x && x < targetX + halfWidth / 2) {
 59 |       // before range
 60 |       return {
 61 |         direction: 'left',
 62 |         instance: tabs[i]._instance,
 63 |         targetTab: tabs[i]
 64 |       }
 65 |     } else if (targetX + halfWidth / 2 <= x && x < targetX + halfWidth) {
 66 |       // after range
 67 |       return {
 68 |         direction: 'right',
 69 |         instance: tabs[i]._instance,
 70 |         targetTab: tabs[i]
 71 |       }
 72 |     }
 73 |   }
 74 |   return {
 75 |     direction: null,
 76 |     instance: null,
 77 |     targetTab: tab
 78 |   }
 79 | }
 80 | 
 81 | const getParams = (tab, keyStr) => {
 82 |   let keys = keyStr.split('.')
 83 |   let label = tab
 84 |   keys.forEach(key => {
 85 |     label = label[key]
 86 |   })
 87 |   return label
 88 | }
 89 | 
 90 | const getKey = (tab, tabKey) => {
 91 |   return getParams(tab, tabKey)
 92 | }
 93 | 
 94 | export default {
 95 |   name: 'vue-tabs-chrome',
 96 |   components: {
 97 |     RenderTemp
 98 |   },
 99 |   props: {
100 |     value: {
101 |       type: [String, Number],
102 |       default: ''
103 |     },
104 |     tabs: {
105 |       type: Array,
106 |       default: () => []
107 |     },
108 |     props: {
109 |       type: Object,
110 |       default: () => {
111 |         return {}
112 |       }
113 |     },
114 |     minWidth: {
115 |       type: Number,
116 |       default: 40
117 |     },
118 |     autoHiddenCloseIconWidth: {
119 |       type: Number,
120 |       default: 120
121 |     },
122 |     maxWidth: {
123 |       type: Number,
124 |       default: 245
125 |     },
126 |     gap: {
127 |       type: Number,
128 |       default: 7
129 |     },
130 |     insertToAfter: {
131 |       type: Boolean,
132 |       default: false
133 |     },
134 |     theme: {
135 |       type: String,
136 |       default: ''
137 |     },
138 |     isMousedownActive: {
139 |       type: Boolean,
140 |       default: true
141 |     },
142 |     renderLabel: {
143 |       type: Function
144 |     },
145 |     onClose: {
146 |       type: Function
147 |     },
148 |     tabCloseWidth: {
149 |       type: Number,
150 |       default: 16
151 |     }
152 |   },
153 |   data () {
154 |     return {
155 |       tabWidth: null
156 |     }
157 |   },
158 |   filters: {
159 |     tabLabelText (tab, tabLabel = '', renderLabel) {
160 |       return renderLabel ? renderLabel(tab) : getParams(tab, tabLabel)
161 |     }
162 |   },
163 |   computed: {
164 |     tabKey () {
165 |       return this.props.key || 'key'
166 |     },
167 |     tabLabel () {
168 |       return this.props.label || 'label'
169 |     }
170 |   },
171 |   mounted () {
172 |     this.calcTabWidth()
173 |     window.addEventListener('resize', this.handleResize)
174 |     this.setup()
175 |   },
176 |   destroyed () {
177 |     window.removeEventListener('resize', this.handleResize)
178 |   },
179 |   methods: {
180 |     canShowTabClose (tab, tabCloseWidth) {
181 |       if (tab.closable === false) {
182 |         return false
183 |       }
184 | 
185 |       if (tab[this.tabKey] === this.value) {
186 |         return true
187 |       }
188 | 
189 |       if (this.autoHiddenCloseIconWidth > this.tabWidth) {
190 |         return false
191 |       }
192 | 
193 |       return true
194 |     },
195 |     calcTabWidth () {
196 |       let { tabs, maxWidth, minWidth, gap } = this
197 |       let $content = this.$refs.content
198 |       let after = this.$refs.after
199 |       let afterWidth = after.getBoundingClientRect().width
200 |       if (!$content) return Math.max(maxWidth, minWidth)
201 |       let contentWidth = $content.clientWidth - gap * 3 - afterWidth
202 |       let width = contentWidth / tabs.length
203 |       width += gap * 2
204 |       if (width > maxWidth) width = maxWidth
205 |       if (width < minWidth) width = minWidth
206 |       this.tabWidth = width
207 |     },
208 |     setup () {
209 |       let { tabs } = this
210 |       tabs.forEach((tab, i) => {
211 |         this.addInstance(tab, i)
212 |       })
213 |     },
214 |     addInstance (tab, i) {
215 |       let { tabWidth, tabKey, gap } = this
216 |       if (tab._instance) {
217 |         tab._instance.setPosition(tab._x, 0)
218 |         return
219 |       }
220 |       let $content = this.$refs.content
221 |       let $item = this.$refs.item
222 |       let $el = $item.find(el => el.classList.contains(`tab-${getKey(tab, tabKey)}`))
223 |       tab._instance = new Draggabilly($el, { axis: 'x', containment: $content, handle: '.tabs-main' })
224 |       if (tab.dragable === false) {
225 |         tab._instance.disable()
226 |         $el.addEventListener('mousedown', (e) => this.handlePointerDown(e, tab, i))
227 |         $el.addEventListener('click', (e) => this.handleClick(e, tab, i))
228 |       }
229 |       let x = (tabWidth - gap * 2) * i
230 |       tab._x = x
231 |       tab._instance.setPosition(x, 0)
232 |       tab._instance.on('pointerDown', (e) => this.handlePointerDown(e, tab, i))
233 |       tab._instance.on('dragMove', (e) => this.handleDragMove(e, tab, i))
234 |       tab._instance.on('dragEnd', (e) => this.handleDragEnd(e, tab, i))
235 |       tab._instance.on('staticClick', (e) => this.handleClick(e, tab, i))
236 |     },
237 |     addTab (...tabs) {
238 |       let { insertToAfter, value, tabKey } = this
239 |       if (insertToAfter) {
240 |         let i = this.tabs.findIndex(tab => getKey(tab, tabKey) === value)
241 |         this.tabs.splice(i + 1, 0, ...tabs)
242 |       } else {
243 |         this.tabs.push(...tabs)
244 |       }
245 |       this.$nextTick(() => {
246 |         this.setup()
247 |         this.doLayout()
248 |       })
249 |     },
250 |     /**
251 |      * remove tab
252 |      * @param key, tab key or index
253 |      */
254 |     removeTab (key) {
255 |       let { tabKey, tabs } = this
256 |       let index = -1
257 |       let targetTab = null
258 |       // if key is number, that is Array index
259 |       if (typeof tab === 'number') {
260 |         index = key
261 |         targetTab = this.tabs[index]
262 |       } else {
263 |         tabs.forEach((tab, i) => {
264 |           if (getKey(tab, tabKey) === key) {
265 |             index = i
266 |             targetTab = tab
267 |           }
268 |         })
269 |       }
270 |       if (index >= 0 && targetTab) {
271 |         this.handleDelete(targetTab, index)
272 |       }
273 |     },
274 |     /**
275 |      * refresh tabs
276 |      */
277 |     doLayout () {
278 |       this.calcTabWidth()
279 |       let { tabWidth, tabs, gap } = this
280 |       tabs.forEach((tab, i) => {
281 |         let instance = tab._instance
282 |         let _x = (tabWidth - gap * 2) * i
283 |         tab._x = _x
284 |         instance.setPosition(_x, 0)
285 |       })
286 |     },
287 |     /**
288 |      * delete Tab
289 |      * @params tab, should remove tab
290 |      * @params i, tab index
291 |      */
292 |     handleDelete (tab, i) {
293 |       // close test. if onClose return false, blocking close.
294 |       if (typeof this.onClose === 'function' && !this.onClose(tab, tab[this.tabKey], i)) {
295 |         return false
296 |       }
297 |       let { tabKey, tabs, value } = this
298 |       let index = tabs.findIndex(item => getKey(item, tabKey) === value)
299 |       let after, before
300 |       if (i === index) {
301 |         after = tabs[i + 1]
302 |         before = tabs[i - 1]
303 |       }
304 |       if (after) {
305 |         this.$emit('input', getKey(after, tabKey))
306 |       } else if (before) {
307 |         this.$emit('input', getKey(before, tabKey))
308 |       } else if (tabs.length <= 1) {
309 |         this.$emit('input', null)
310 |       }
311 |       tabs.splice(i, 1)
312 |       this.$emit('remove', tab, i)
313 |       this.$nextTick(() => {
314 |         this.doLayout()
315 |       })
316 |     },
317 |     handleResize (e) {
318 |       this.timer && clearTimeout(this.timer)
319 |       this.timer = setTimeout(() => {
320 |         this.doLayout()
321 |       }, 100)
322 |     },
323 |     handlePointerDown (e, tab, i) {
324 |       let { tabKey, isMousedownActive } = this
325 |       isMousedownActive && this.$emit('input', getKey(tab, tabKey))
326 |       this.$emit('dragstart', e, tab, i)
327 |     },
328 |     handleDragMove (e, tab, i) {
329 |       let { tabWidth, tabs, tabKey, gap } = this
330 |       let { instance, targetTab } = getInstanceAt(tabs, tab, tabWidth, tabKey, gap)
331 |       if (instance) {
332 |         this.swapTab(tab, targetTab)
333 |       }
334 |       this.$emit('dragging', e, targetTab, i)
335 |     },
336 |     handleDragEnd (e, tab) {
337 |       let _instance = tab._instance
338 |       if (_instance.position.x < 0) return
339 |       setTimeout(() => {
340 |         _instance.element.classList.add('move')
341 |         _instance.setPosition(tab._x, 0)
342 |       }, 50)
343 |       setTimeout(() => {
344 |         this.$emit('dragend', e, tab)
345 |         _instance.element.classList.remove('move')
346 |       }, 200)
347 |     },
348 |     handleClick (e, tab, index) {
349 |       this.$emit('click', e, tab, index)
350 |     },
351 |     handleMenu (e, tab, index) {
352 |       this.$emit('contextmenu', e, tab, index)
353 |     },
354 |     /**
355 |      * swap tab
356 |      * @param tab, current tab
357 |      * @param swapTab, target tab
358 |      */
359 |     swapTab (tab, swapTab) {
360 |       let { tabKey, tabs } = this
361 |       if (swapTab.swappable === false) {
362 |         return
363 |       }
364 |       let index, targetIndex
365 |       for (let i = 0; i < tabs.length; i++) {
366 |         // get current tab index
367 |         if (getKey(tab, tabKey) === getKey(tabs[i], tabKey)) {
368 |           index = i
369 |         }
370 |         // get swap tab index
371 |         if (getKey(swapTab, tabKey) === getKey(tabs[i], tabKey)) {
372 |           targetIndex = i
373 |         }
374 |       }
375 |       // swap tabs array index
376 |       if (index !== targetIndex) {
377 |         [tabs[index], tabs[targetIndex]] = [tabs[targetIndex], tabs[index]]
378 |       }
379 |       // swap x
380 |       let _x = tab._x
381 |       tab._x = swapTab._x
382 |       swapTab._x = _x
383 | 
384 |       // swap position
385 |       let _instance = swapTab._instance
386 |       setTimeout(() => {
387 |         _instance.element.classList.add('move')
388 |         _instance.setPosition(_x, _instance.position.y)
389 |       }, 50)
390 |       setTimeout(() => {
391 |         _instance.element.classList.remove('move')
392 |         this.$emit('swap', tab, swapTab)
393 |       }, 200)
394 | 
395 |       // refresh tabs
396 |       this.tabs.splice(0, 0)
397 |     },
398 |     getTab (tab) {
399 |       let newTab = {
400 |         ...tab
401 |       }
402 |       delete newTab._instance
403 |       delete newTab._x
404 |       return newTab
405 |     },
406 |     getTabs () {
407 |       return this.tabs.map(tab => {
408 |         let item = {
409 |           ...tab
410 |         }
411 |         delete item._instance
412 |         delete item._x
413 |         return item
414 |       })
415 |     },
416 |     getKey (tab) {
417 |       return getKey(tab, this.tabKey)
418 |     }
419 |   }
420 | }
421 | </script>
422 | 
423 | <style lang="less">
424 | .vue-tabs-chrome {
425 |   @bg: #dee1e6;
426 |   @gap: 7px;
427 |   @divider: #a9adb0;
428 |   @speed: 150ms;
429 | 
430 |   padding-top: 10px;
431 |   background-color: @bg;
432 |   position: relative;
433 | 
434 |   .tabs-content {
435 |     height: 34px;
436 |     position: relative;
437 |     overflow: hidden;
438 |   }
439 |   /* divider */
440 |   .tabs-divider {
441 |     left: 0;
442 |     top: 50%;
443 |     width: 1px;
444 |     height: 20px;
445 |     background-color: @divider;
446 |     position: absolute;
447 |     transform: translateY(-50%);
448 |   }
449 | 
450 |   .tabs-item {
451 |     height: 100%;
452 |     display: flex;
453 |     align-items: center;
454 |     user-select: none;
455 |     box-sizing: border-box;
456 |     transition: width @speed;
457 |     position: absolute;
458 |     // animation: tab-show @speed;
459 |     &:hover {
460 |       .tabs-background-content {
461 |         background-color: #f2f3f5;
462 |       }
463 |       .tabs-background-before,
464 |       .tabs-background-after {
465 |         fill: #f2f3f5;
466 |       }
467 |     }
468 |     &.move {
469 |       transition: @speed;
470 |     }
471 |     &.is-dragging {
472 |       z-index: 3;
473 |       .tabs-background-content {
474 |         background-color: #f2f3f5;
475 |       }
476 |       .tabs-background-before,
477 |       .tabs-background-after {
478 |         fill: #f2f3f5;
479 |       }
480 |     }
481 |     &.active {
482 |       z-index: 2;
483 |       .tabs-background {
484 |         opacity: 1;
485 |       }
486 |       .tabs-background-content {
487 |         background-color: #fff;
488 |       }
489 |       .tabs-background-before,
490 |       .tabs-background-after {
491 |         fill: #fff;
492 |       }
493 |     }
494 |     &:first-of-type {
495 |       .tabs-dividers::before {
496 |         opacity: 0;
497 |       }
498 |     }
499 |     &:last-of-type {
500 |       .tabs-dividers::after {
501 |         opacity: 0;
502 |       }
503 |     }
504 |   }
505 |   .tabs-main {
506 |     height: 100%;
507 |     left: 0;
508 |     right: 0;
509 |     margin: 0 @gap * 2;
510 |     border-top-left-radius: 5px;
511 |     border-top-right-radius: 5px;
512 |     transition: @speed;
513 |     display: flex;
514 |     align-items: center;
515 |     position: absolute;
516 |     box-sizing: border-box;
517 |     overflow: hidden;
518 |   }
519 |   .tabs-close {
520 |     top: 50%;
521 |     right: @gap * 2;
522 |     width: 16px;
523 |     height: 16px;
524 |     z-index: 1;
525 |     position: absolute;
526 |     transform: translateY(-50%);
527 |   }
528 |   .tabs-close-icon {
529 |     width: 100%;
530 |     height: 100%;
531 |     border-radius: 50%;
532 |     &:hover {
533 |       stroke: #000;
534 |       background-color: #e8eaed;
535 |     }
536 |   }
537 |   .tabs-favicon {
538 |     height: 16px;
539 |     width: 16px;
540 |     margin-left: @gap;
541 |     display: flex;
542 |     align-items: center;
543 |     overflow: hidden;
544 |     img {
545 |       height: 100%;
546 |     }
547 |   }
548 |   .tabs-label {
549 |     flex: 1;
550 |     margin-left: @gap;
551 |     margin-right: 16px;
552 |     box-sizing: border-box;
553 |     overflow: hidden;
554 |     white-space: nowrap;
555 |     &.no-close {
556 |       margin-right: @gap;
557 |     }
558 |   }
559 | 
560 |   /* background */
561 |   .tabs-background {
562 |     width: 100%;
563 |     height: 100%;
564 |     padding: 0 @gap - 1px;
565 |     position: absolute;
566 |     transition: opacity @speed * 2;
567 |     box-sizing: border-box;
568 |   }
569 |   .tabs-background-content {
570 |     height: 100%;
571 |     border-top-left-radius: @gap;
572 |     border-top-right-radius: @gap;
573 |     transition: background @speed;
574 |   }
575 |   .tabs-background-before,
576 |   .tabs-background-after {
577 |     bottom: -1px;
578 |     position: absolute;
579 |     fill: transparent;
580 |     transition: background @speed;
581 |   }
582 |   .tabs-background-before {
583 |     left: -1px;
584 |   }
585 |   .tabs-background-after {
586 |     right: -1px;
587 |   }
588 | 
589 |   .tabs-footer {
590 |     height: 4px;
591 |     background-color: #fff;
592 |   }
593 | 
594 |   .tabs-after{
595 |     top: 50%;
596 |     display: flex;
597 |     position: absolute;
598 |     overflow: hidden;
599 |     transform: translateY(-50%);
600 |   }
601 | 
602 |   @keyframes tab-show {
603 |     from {
604 |       transform: scaleX(0);
605 |     }
606 |     to {
607 |       transform: scaleX(1);
608 |     }
609 |   }
610 | }
611 | .theme-dark {
612 |   color: #9ca1a7;
613 |   background-color: #202124;
614 |   .tabs-item {
615 |     &:hover {
616 |       .tabs-background-content {
617 |         background-color: #202124;
618 |       }
619 |       .tabs-background-before,
620 |       .tabs-background-after {
621 |         fill: transparent;
622 |       }
623 |     }
624 |     &.is-dragging {
625 |       .tabs-background-content {
626 |         background-color: #202124;
627 |       }
628 |       .tabs-background-before,
629 |       .tabs-background-after {
630 |         fill: transparent;
631 |       }
632 |     }
633 |     &.active {
634 |       color: #fff;
635 |       .tabs-background-content {
636 |         background-color: #323639;
637 |       }
638 |       .tabs-background-before,
639 |       .tabs-background-after {
640 |         fill: #323639;
641 |       }
642 |     }
643 |     .tabs-close-icon {
644 |       stroke: #81878c;
645 |       &:hover {
646 |         stroke: #cfd1d2;
647 |         background-color: #5f6368;
648 |       }
649 |     }
650 |   }
651 |   .tabs-divider {
652 |     background-color: #4a4d51;
653 |   }
654 |   .tabs-footer {
655 |     background-color: #323639;
656 |   }
657 | }
658 | </style>
659 | 


--------------------------------------------------------------------------------