Giter Site home page Giter Site logo

kien5436 / vue-nav-tab Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 402 KB

Tab components for Vue.js project

Home Page: https://kien5436.github.io/vue-nav-tab/

License: MIT License

JavaScript 7.61% Vue 50.11% CSS 3.89% TypeScript 33.83% HTML 4.56%
vue tabs

vue-nav-tab's Introduction

vue-nav-tab

Tab components for Vue.js project

Build status

Build status npm

Features

  • Built with Vue 3's Composition API
  • Zero dependency
  • Create horizontal or vertical tabs
  • Open, close or refresh tabs programatically
  • Drag'n'drop tabs
  • Easily customizing tabs and page view

Installation

yarn add vue-nav-tab
# or
npm i vue-nav-tab

Browser support

Chrome Firefox IE Opera Safari
51+ 54+ 15+ 38+ 10+

Live demo

Usage

Please refer to documentation

Contribution

If you want to contribute for this project, feel free to create pull request but please follow the guide:

  • Comply with eslint
  • Choose dev branch for developing and merging

To test this library locally:

# build
yarn build

# create portable module
yarn pack

# copy the vue-nav-tab-<version>.tgz file to the root of consumer project and add it as dependency
"dependencies": {
  "vue-nav-tab": "file:vue-nav-tab-<version>.tgz"
}

# install it
yarn

License

MIT

vue-nav-tab's People

Contributors

kien5436 avatar

Stargazers

avatar avatar avatar

Watchers

avatar

Forkers

nagulv

vue-nav-tab's Issues

Could you add some instructions on how to build this as a local module?

Could you help me understand how to create a distributable version of this module locally?
I would like to test my changes more extensively, but I can't seem to use this as a local dependency due to tailwindcss. I'm not sure what step I need with respect to tailwindcss or creating the dist.

The steps I followed:

  1. yarn install

  2. yarn run build

vue-nav-tab>yarn run build
yarn run v1.22.17
$ cross-env NODE_ENV=production rollup -c

./lib/index.ts → dist/index.common.js, dist/vue-nav-tab.umd.js, dist/index.es.js...
(!) Unused external imports
guardReactiveProps imported from external module "vue" but never used in "lib\components\VTabs.vue?vue&type=template&id=138fb040&lang.js", "lib\components\HTabs.vue?vue&type=template&id=5dd2fb8a&lang.js", "lib\components\TabView.vue?vue&type=template&id=86baaafe&lang.js", "lib\components\TabView.vue?vue&type=script&lang.ts", "lib\use-contextmenu.ts", "lib\components\BlankTabView.vue?vue&type=script&lang.ts", "lib\components\BlankTabView.vue?vue&type=template&id=3c8eff7e&lang.js", "lib\operations.ts", "lib\components\Tab.vue?vue&type=template&id=5bed0980&lang.js", "lib\components\Tab.vue?vue&type=script&lang.ts", "lib\components\HTabs.vue?vue&type=script&lang.ts", "lib\components\ContextMenu.vue?vue&type=template&id=c0612772&lang.js", "lib\components\ContextMenu.vue?vue&type=script&lang.ts" and "lib\components\VTabs.vue?vue&type=script&lang.ts"
created dist/index.common.js, dist/vue-nav-tab.umd.js, dist/index.es.js in 2.8s
Done in 3.55s.
  1. include the directory into my app as: npm install --save ..\vue-nav-tab

When I then run the app I see this:


C:\dev\webgui\test-app>npm run serve
 ERROR  Failed to compile with 1 error                                                                                                                                                                            17:24:10

 error  in ../vue-nav-tab/dist/vue-nav-tab.css

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss'
Require stack:
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\utils.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\index.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\cjs.js
- C:\dev\webgui\test-app\node_modules\webpack\lib\ProgressPlugin.js
- C:\dev\webgui\test-app\node_modules\progress-webpack-plugin\index.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\commands\serve.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\Service.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\bin\vue-cli-service.js

(@C:\dev\webgui\vue-nav-tab\dist\vue-nav-tab.css)

ERROR in ../vue-nav-tab/dist/vue-nav-tab.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!../vue-nav-tab/dist/vue-nav-tab.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss'
Require stack:
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\utils.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\index.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\cjs.js
- C:\dev\webgui\test-app\node_modules\webpack\lib\ProgressPlugin.js
- C:\dev\webgui\test-app\node_modules\progress-webpack-plugin\index.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\commands\serve.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\Service.js
 ERROR  Failed to compile with 1 error                                                                                                                                                                            17:24:10

 error  in ../vue-nav-tab/dist/vue-nav-tab.css

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss'
Require stack:
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\utils.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\index.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\cjs.js
- C:\dev\webgui\test-app\node_modules\webpack\lib\ProgressPlugin.js
- C:\dev\webgui\test-app\node_modules\progress-webpack-plugin\index.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\commands\serve.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\Service.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\bin\vue-cli-service.js

(@C:\dev\webgui\vue-nav-tab\dist\vue-nav-tab.css)

ERROR in ../vue-nav-tab/dist/vue-nav-tab.css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!../vue-nav-tab/dist/vue-nav-tab.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "tailwindcss" plugin failed: Cannot find module 'tailwindcss'
Require stack:
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\utils.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\index.js
- C:\dev\webgui\test-app\node_modules\postcss-loader\dist\cjs.js
- C:\dev\webgui\test-app\node_modules\webpack\lib\ProgressPlugin.js
- C:\dev\webgui\test-app\node_modules\progress-webpack-plugin\index.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\commands\serve.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\lib\Service.js
- C:\dev\webgui\test-app\node_modules\@vue\cli-service\bin\vue-cli-service.js

(@C:\dev\webgui\vue-nav-tab\dist\vue-nav-tab.css)
 @ ../vue-nav-tab/dist/vue-nav-tab.css 4:14-212 15:3-20:5 16:22-220
 @ ./src/main.js 2:0-42

webpack compiled with 1 error

Appreciate any help.

Thanks

checklist

  • Cross browser scrollbar for long tabslist
  • Tab leave confirm
  • Tab changes events: active, inactive or closed
  • Drag n drop
  • i18n
  • Open, close tabs
  • Refresh tabs
  • Do operation via context menu

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.