fix(tabs): Better handling of active tab and transitions #903

tmorehouse · 2017-08-21T06:06:17Z

Better handling of tabs with active state (issue #868)

Incorporates transition fixes from #901

Child tabs now sniff parent lazy and fade props

tmorehouse · 2017-08-21T06:14:21Z

lib/components/tabs.vue

            },

            /**
             * Move to previous tab
             */
            previousTab() {
-                this.setTab(this.currentTab, false, -1);
+                this.setTab(this.currentTab - 1, false, -1);


I refactored how set tab works with the offset direction value (3rd argument to set tab), which specifies a direction to move if the requested tab is disabled (skipping over disabled looking for a non-disabled tab)

Ok, i think i get it )

Also, this removes the need for people to call previous and next methods directly during external control. They can now just increment the value and it will look for the next tab if available.,

but as i recall.. v-model changing tabs works earlier... but i'm not sure )

It did, but it couldn't handle wrapping around properly, and skipping disabled tabs

mosinve · 2017-08-21T06:18:58Z

lib/components/tabs.vue


                // Prevent setting same tab!
-                if (!force && (index + offset) === this.currentTab) {
+                if (!force && index === this.currentTab) {


index === this.currentTab but this part is never fired... because index = this.currentTab+[1|-1]

Not any more ;-)

and we have this expression at fact:
if (!force && (this.currentTab+[1|-1] === this.currentTab)) {

Index is now the requested tab, and offset (which is now called direction) is a direction to move if the requested tab is disabled.

is there a reason to leave this in code then?

the variable offset doesn't exist anymore.

If the tab is already active, we can save some processing power. But maybe it might be safer to always run the code below, just to make sure only one tab is ever active at a time.

Which would also remove the need for the force 2nd parameter to setTab

codecov-io · 2017-08-21T06:31:48Z

Codecov Report

Merging #903 into 1.x will increase coverage by 0.01%.
The diff coverage is 22.72%.

@@            Coverage Diff             @@
##              1.x     #903      +/-   ##
==========================================
+ Coverage   41.19%   41.21%   +0.01%     
==========================================
  Files          91       91              
  Lines        2282     2281       -1     
  Branches      658      660       +2     
==========================================
  Hits          940      940              
+ Misses       1186     1185       -1     
  Partials      156      156

Impacted Files	Coverage Δ
lib/components/tab.vue	`33.33% <20%> (-13.34%)`	⬇️
lib/components/tabs.vue	`10.76% <25%> (+1.04%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d84af70...35513fc. Read the comment docs.

@md

* fix(alert): Fix auto-dimissing alert "bug" (#897) * fix(alert): Fix edgecase where dismissable alert couldnt be re-shown * Update README.md * [alert] add slot for dimiss button content * Update meta.json * [alert] remove deprecated state prop * fix(carousel): Handle older opera oTransitionEnd event (#899) * Fix(navbar-item) typo misspelled safeId function * fix(tabs): Better handling of active tab and transitions (#903) * [tab] Sniff parent fro fade and lazy vals * Update tabs.vue * Update tabs.vue * [tabs] fix keyboard navigation * Update tabs.vue * [tabs] ARIA tweaks * update dependencies rollup configs updated * small typos * docs: remove alert * update nav bar * m-alert * update readme * fix(link): default href to null By explictly setting it to # ssr rendered links will overriden to # even if they hav to prop * fix(link): if nothing is provided default href to # * fix(link): ensure target is vue component before #emit * chore(docs): Update navbar examples * chore(release): 1.0.0-beta.5 * update edit link * nuxt rc6 * feat(readme): add package quality badge (#907) * fix(progress-bar): Minor adjutment to style calculation Use raw percentage for setting width to prevent multiple bars from overflowing outer container * feat(col): BS4 column component (#906) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * chore(README.md): Update version number * chore(docs): fix header/footer-bg-variants in some card examples * chore(docs): card minor example updates * fix(dropdown): hover/focus shading for active items * fix(nav-item-dropdown): hover/focus shading for active items * fix(scrollspy): Make work with new nav-link functional component (#909) * fix(scrollspy): Make work with new nav-link functional component Before, elements with class `.nav-link` had a compoent VM on their parent element, but `nav-link`s no longer have associated VMs, so we set the `active` class directly on them. * Update scrollspy.js * Update README.md * Update README.md * [scrollspy] get $root from vnode context * Update README.md * fix(tabs): Show first tab when set to active (#912) * fix(tabs): Show first tab when set to active * fix(tabs): minor logic update * chore(docs): Update dropdown docs * feat(table): use computedFields for easier usage * feat(table): Scoped slots for fixed top/bottom rows (#908) * [table] add fixed top and bottom row soped slots * Update meta.json * fix(progress-bar): aria-valuenow fix * Update progress-bar.vue * fix(progress-bar): remove unessesary this in template * fix(alert) dismiss event broken after PR #897 * fix(alert) countdown event test (#916) * fix(alert): show dismiss button when dismissible is true * fix(dropdowns): Migration to popper.js positioning (#913) * update dropdown.vue * Update nav-item-dropdown.vue * [dropdown.js mixin]: Incorporate popper.js * Update README.md * First stab at updaing documentation * docs(progress): Updated first example to include multi bars * fix(form-textarea): Fix value reactivity * docs update and typos fix * fix(dropdowns): Allow gracefull fallback if Popper.js not defined (#920) * fix(dropdowns): Allow gracefull fallback if Popper not defined * Warn on mount that Popper.js not available * ESLint * fix typos * feat(table) refactor to formatter feature * refactor * chore(carousel): Add text shadow to carousel example Add a text shadow style to carousel example to make text on slides easier to read * fix(docs): feedback doc in form group (#934) * feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * feat(col): restore .offset-* col classes 🍾 * feat(test): added b-col test suite * [b-col] Update to docs * feat(b-row): New functional component * Make b-row component available * docs:(componentvdoc.vue): Handle pages that don't have a main component * Rename docs page * Rename docs/components/col/README.md to docs/components/grid/README.md * Rename docs/components/col/index.js to docs/components/grid/index.js * Rename docs/components/col/meta.json to docs/components/grid/meta.json * Update index.js * Update README.md * feat(b-conatiner): new functional component b-container component that supports optional fluid prop * make b-container available * [b-container]: ESLint * Update meta.json * Update README.md * [b-row] Add no-cgutters prop * Update README.md * Update README.md * Rename docs/components/grid/README.md to docs/components/layout/README.md * Rename docs/components/grid/index.js to docs/components/layout/index.js * Rename docs/components/grid/meta.json to docs/components/layout/meta.json * rename /docs/grid to /docs/layout * Update meta.json * Update meta.json * [b-row]: demo.html fixture * [b-row] demo.js * Update demo.html * [b-row] Tests * [b-container] demo.html * [b-container] demo.js * [b-container] tests * Update container.spec.js * docs typo * fix(jumbotron): continer wrapper only needed in fluid mode * fix(jumbotron): minor update * revert(jumbotron): Wrong branch :p * fix(docs): toggle navbar @md to keep content from wrapping * feat(docs): add BS4 docs to Layout page * feat(jumbotron): Convert to functional component (#932) * feat(jumbotron): Convert to functional component * Use FC version of jumbotron * ESLint * Delete jumbotron.vue * typo fix * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Update jumbotron.spec.js * Merge dev into branch (#935) * fix(docs): feedback doc in form group (#934) * feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929) * feat(col): BS4 column component * feat(col): getting column working * fixed index.js from merge * feat(col): restore .offset-* col classes 🍾 * feat(test): added b-col test suite * [b-col] Update to docs * feat(b-row): New functional component * Make b-row component available * docs:(componentvdoc.vue): Handle pages that don't have a main component * Rename docs page * Rename docs/components/col/README.md to docs/components/grid/README.md * Rename docs/components/col/index.js to docs/components/grid/index.js * Rename docs/components/col/meta.json to docs/components/grid/meta.json * Update index.js * Update README.md * feat(b-conatiner): new functional component b-container component that supports optional fluid prop * make b-container available * [b-container]: ESLint * Update meta.json * Update README.md * [b-row] Add no-cgutters prop * Update README.md * Update README.md * Rename docs/components/grid/README.md to docs/components/layout/README.md * Rename docs/components/grid/index.js to docs/components/layout/index.js * Rename docs/components/grid/meta.json to docs/components/layout/meta.json * rename /docs/grid to /docs/layout * Update meta.json * Update meta.json * [b-row]: demo.html fixture * [b-row] demo.js * Update demo.html * [b-row] Tests * [b-container] demo.html * [b-container] demo.js * [b-container] tests * Update container.spec.js * docs typo * fix(jumbotron): continer wrapper only needed in fluid mode * fix(jumbotron): minor update * revert(jumbotron): Wrong branch :p * fix(docs): toggle navbar @md to keep content from wrapping * feat(docs): add BS4 docs to Layout page * Update jumbotron.js * Update jumbotron.js * Update jumbotron.spec.js * Update demo.html * Update jumbotron.spec.js * Update jumbotron.spec.js * Attempt last part of tests * Update demo.html * Final tests * docs: Fix typo in Form Checkbox page (#939) Fix typo * feat(layout): alignment utilities 🛠 (#941) * feat(b-img): New component (#933) * feat(b-img): New functional component Support many options, plus the ability to create blank images of any size * [b-img] Support solid/transparent color blank image * make b-img component avilalable * Create meta.json * Create index.js * Create README.md * Add b-img docs * Create demo.html * Create demo.js * Create img.spec.js * feat: New popper.js based tooltip/popover directives and components (#923) * Create tooltip.js * Warn on mount that Popper.js not available * Update index.js * Create README.md * [tooltip] Create shared class * [popover] Common shared class * Fix template compiler * [popover] v-b-popover directive * Remove tether dependency * [tooltip.js class] Code optimizations * create classes index * force tip template recompile on next show, in case template changes * [tooltip class] Add comments as to which methods PopOver overwrites * new tooltip.vue component * New popover.vue component * Make new popover.vue and tooltip.vue components available * Update README.md * Allow reactive components in b-popover content * b-popover: callback hooks for events * b-tooltip: callback hooks for events * [tooltip class]: add callback hooks * popover meta.json: document events * b-tooltip meta.json: document events * [tooltip class] Allow reactive content in title element * [popover class] Allow reactive content in title and content * [BvEvent]: add relatedTarget descriptor * [tooltip.js class] Better callback handling + cancelable hide & show events Better callback handling, and allow hide & show callback to cancel hide or show of tooltip/popover * [b-popover]: Enable canclable show and hide events * [b-tooltip]: Add cancelable show and hide events * [tooltip class]: Emit events on $root * [tooltip popover] namespace events emitted on $root Root events are emitted with namespaced event name. i.e. `bv:tooltip::show` and `bv:popover::hidden` * [tooltip class] Prepare for future bv:modal:hidden $root event name * Update rollup.config.js * Update webpack.config.js * fix: include popper.js in dist bundle * refactor(eslint): remove semicolons to placate eslint * refactor: rm semicolons in classes & add BvEvent to class dir * [tooltip.js] Optimise isWithContent() * Fixes to Popover & Tooltip Components Docs Fix to ToolTip component * [popover.js] Optimise isWithContent() * feat(popover): import fix * fix(popove): tooltip import

tmorehouse added 9 commits August 20, 2017 23:48

[tab] Sniff parent fro fade and lazy vals

bbfd590

Update tabs.vue

8400e6c

Update tabs.vue

e65cb17

Update tab.vue

9759dfc

Update tab.vue

f337b11

Update tab.vue

103e422

Update tab.vue

b6e92c7

Update tabs.vue

d9b5f8d

Update README.md

a677b29

tmorehouse added the v1.x label Aug 21, 2017

tmorehouse added this to the v1.0.0 milestone Aug 21, 2017

tmorehouse requested a review from mosinve August 21, 2017 06:06

tmorehouse commented Aug 21, 2017

View reviewed changes

mosinve reviewed Aug 21, 2017

View reviewed changes

Update tabs.vue

806eec6

tmorehouse added 4 commits August 21, 2017 03:45

[tabs] fix keyboard navigation

f203fd4

Update tabs.vue

3e62c33

[tabs] ARIA tweaks

ace2fad

Update tabs.vue

35513fc

mosinve approved these changes Aug 21, 2017

View reviewed changes

tmorehouse merged commit d5b81dd into 1.x Aug 21, 2017

tmorehouse deleted the tmorehouse/tabs branch August 21, 2017 15:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tabs): Better handling of active tab and transitions #903

fix(tabs): Better handling of active tab and transitions #903

tmorehouse commented Aug 21, 2017

tmorehouse Aug 21, 2017 •

edited

mosinve Aug 21, 2017

tmorehouse Aug 21, 2017

tmorehouse Aug 21, 2017 •

edited

mosinve Aug 21, 2017

tmorehouse Aug 21, 2017

mosinve Aug 21, 2017

tmorehouse Aug 21, 2017

mosinve Aug 21, 2017

tmorehouse Aug 21, 2017

mosinve Aug 21, 2017 •

edited

tmorehouse Aug 21, 2017 •

edited

codecov-io commented Aug 21, 2017 •

edited

fix(tabs): Better handling of active tab and transitions #903

fix(tabs): Better handling of active tab and transitions #903

Conversation

tmorehouse commented Aug 21, 2017

tmorehouse Aug 21, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmorehouse Aug 21, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mosinve Aug 21, 2017 • edited

Choose a reason for hiding this comment

tmorehouse Aug 21, 2017 • edited

Choose a reason for hiding this comment

codecov-io commented Aug 21, 2017 • edited

Codecov Report

tmorehouse Aug 21, 2017 •

edited

tmorehouse Aug 21, 2017 •

edited

mosinve Aug 21, 2017 •

edited

tmorehouse Aug 21, 2017 •

edited

codecov-io commented Aug 21, 2017 •

edited