vue-bulma / tabs Goto Github PK

View Code? Open in Web Editor NEW

41.0 2.0 38.0 18 KB

Tabs Component for Vue Bulma

License: MIT License

Vue 98.49% JavaScript 1.51%

tabs's People

Contributors

Stargazers

Watchers

tabs's Issues

Watch tab change

There has to be a way to watch which tab is selected.

How to know which tab is selected?

Smooth tabs content height change

Currently height change is 0-1 - very aggressive.
This is especially visible when 2 tabs side by side have large difference in content height.
Any chance to tweek it a little?

data sync not working

If I dynamically generate some tab-panes like:

<tabs layout="left" :only-fade="false">
  <tab-pane v-for="item in items" :label.sync="item.header">
    {{item.description}}
  </tab-pane>
</tabs>

and then later refresh items array using Ajax - the components do not get updated (in fact the content all disappears).

If I empty the contents of items (this.$set('items', [])) before refreshing with Ajax the component refreshes successfully as expected.

Any ideas?

Thanks!

Tabs Style overwrittes CodeMirror styles

.CodeMirror-gutters styles are overwritten

Error while compiling - "ParseError: 'import' and 'export' may appear only with 'sourceType: module'"

Hi there. I'm new to Vue and need help.
I'm trying to use vue-bulma-tabs in my project. I've install them via browserify, wrote all dependencies. But when i'm trying to run browserify it says "import Tabs from './Tabs'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module' "

here is my package.json

"scripts": { "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", "sass-compiler": "node-sass -w sass/ -o ./css/", "dev": "npm-run-all --parallel watchify sass-compiler", "build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" }, "dependencies": { "vue": "^2.0.1" }, "devDependencies": { "babel-core": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babelify": "^7.2.0", "browserify": "^13.0.1", "browserify-hmr": "^0.3.1", "cross-env": "^1.0.6", "envify": "^3.4.1", "http-server": "^0.9.0", "npm-run-all": "^2.1.2", "uglify-js": "^2.5.0", "vueify": "^9.1.0", "watchify": "^3.4.0", "node-sass": "^3.4.0", "vue-bulma": "0.0.35", "vue-bulma-modal": "^1.0.1", "vue-bulma-tabs": "^1.1.1" }, "browserify": { "transform": [ "vueify", "babelify" ] }

in my component file i'm doing

import {Tabs, TabPane} from "vue-bulma-tabs"

export default {
    name: "tabs",
    components: {
        Tabs,
        TabPane
    }
}

Including a modal inside a tab-pane crops the background

When a Bulma modal is included inside a tab-pane, the background is cropped and the model is centred in the tab-pane, and not the fill window. Also, the modal is stuck to the top of the cropped area.

.tabs shouldnt contain content

http://bulma.io/documentation/components/tabs/

If content is inside in the .tabs class, it messes with styles.
especially the size-modifier is-small is-medium and is-large.

How to use custom values?

Now to use this component I need to something like this:

<tabs v-on:tab-selected="changeTab" animation="slide" :only-fade="false">
  <tab-pane label="Day">Day Tab</tab-pane>
  <tab-pane label="Month">Month Tab</tab-pane>
  <tab-pane label="Year">Year Tab</tab-pane>
</tabs>

methods: {
  changeTab: function (tabNumber) {
    switch (tabNumber) {
      case 0:
        this.periodType = 'day'
        break

      case 1:
        this.periodType = 'month'
        break

      case 2:
        this.periodType = 'year'
        break

      default:
        this.periodType = 'day'
    }
  }
},

Is there any more convenient and flexible method to do it? For example, something like this:

<tabs v-model="periodType" animation="slide" :only-fade="false">
  <tab-pane label="Day" value="day">Day Tab</tab-pane>
  <tab-pane label="Month" value="month">Month Tab</tab-pane>
  <tab-pane label="Year" value="year">Year Tab</tab-pane>
</tabs>

Unexpected token import

hi it see seems can not run
the chrome said that

Unexpected token import

how to use it?
I am new with vue ,sorry to asked this stupid question

Click-to-copy don`t work when a table in the panel

 <tabs>
            <tab-pane label="panel-title">
              <table class="table">
                <thead>
                  <tr>
                    <th>h1</th>
                    <th>h2</th>
                    <th>h3</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>data1</td>
                    <td>data2</td>
                    <td>data3</td>
                  </tr>
                </tbody>
              </table>
            </tab-pane>
</tabs>

data1 or data2 or data3 can`t be selected by double-click or single-click .

Make content scrollable not tabs

Is there an easy way to make content scrollable and tabs non scrollable/fixed? Now when scrolling, tabs are moving and I would like to have them static, so that only content inside is scrolling when using window scrollbar.

I tried using position fixed, but it did not solve the problem.

Any suggestions?

How to change tabs programmatically?

Hi!

I have to create a wizard like form, and I'd like to know how to change the current tab index.

Changing the selected-index prop doesn't work as the realSelectedIndex doesn't get updated.

How to change the class of tabs to 'is-boxed'?

Hello!

I'm not sure that this module has this feature if no so maybe you can add is-boxed and is-toggle modifiers as it's used in Bulma.

Thank you!

Why failed to install?

Installation：

├── UNMET PEER DEPENDENCY bulma@>=0.2
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

npm WARN [email protected] requires a peer of sinon@^2.1.0 but none was installed.
npm WARN [email protected] requires a peer of bulma@>=0.2 but none was installed.

HTML

<tabs animation="slide" :only-fade="false">
	<tab-pane label="Pictures" v-for="(item, index) in category" :key="index" >{{item.name}}</tab-pane>
</tabs>

import { Tabs, TabPane } from 'vue-bulma-tabs'
export default {
	components: {
    	 Tabs, TabPane
	},
}

Use

@ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/
vue-loader/lib/style-compiler?{"id":"data-v-ce47699c","scoped":false,"hasInlineC
onfig":true}!../~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vux-loader/s
rc/style-loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bu
lma-tabs/src/Tabs.vue 4:14-383 13:3-17:5 14:22-391
 @ ./~/vue-bulma-tabs/src/Tabs.vue
 @ ./~/vue-bulma-tabs/src/index.js
 @ ./~/babel-loader/lib!./~/vux-loader/src/script-loader.js!./~/vue-loader/lib/s
elector.js?type=script&index=0!./src/views/activities/index.vue
 @ ./src/views/activities/index.vue
 @ ./src/routes/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

My Package

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "fastclick": "^1.0.6",
    "vue": "^2.2.2",
    "vue-backtop": "0.0.3",
    "vue-bulma-tabs": "^1.1.2",
    "vue-router": "^2.2.0",
    "vue-scroller": "^2.2.2",
    "vue-wechat-title": "^2.0.4",
    "vue-ydui": "^0.8.0",
    "vuex": "^2.1.1",
    "vuex-i18n": "^1.3.1",
    "vux": "^2.2.1"
  },

Why failed to install?

incompatible version with bulma

ERROR in ./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-0a3f9cc3","scoped":false,"hasInlineConfig":true}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-tabs/src/Tabs.vue
Module build failed:
@import '~bulma/sass/utilities/initial-variables';
^
      File to import not found or unreadable: ~bulma/sass/utilities/initial-variables.
      in /Users/admin/workspace/hw/vue-admin/node_modules/vue-bulma-tabs/src/Tabs.vue (line 114, column 1)
 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-compiler?{"id":"data-v-0a3f9cc3","scoped":false,"hasInlineConfig":true}!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/vue-bulma-tabs/src/Tabs.vue 4:14-264 13:3-17:5 14:22-272
 @ ./~/vue-bulma-tabs/src/Tabs.vue
 @ ./~/vue-bulma-tabs/src/index.js
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./client/views/components/Tabs.vue
 @ ./client/views/components/Tabs.vue
 @ ./client/views lazy ^\.\/.*\.vue$
 @ ./client/store/modules/menu/lazyLoading.js
 @ ./client/store/modules/menu/index.js
 @ ./client/store/index.js
 @ ./client/app.js
 @ ./client/index.js
 @ multi ./build/dev-client ./client/index.js

Module not found: Error: Can't resolve when using Gulp.js WebPack

I am using Gulp.js via Laravel Elixir and Webpack

{ [Error: ./~/vue-bulma-tabs/src/index.js
Module not found: Error: Can't resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
  using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
    using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src/Tabs)
      as directory

Ability to add event to tabs to know which is open

Hi there - is there an easy way of tracking which tab is open? Id like to get the tab label when one is clicked - for GA tracking - is there a way to do that?