diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue index 8e84b26..9715725 100644 --- a/src/components/mdSelect/mdSelect.vue +++ b/src/components/mdSelect/mdSelect.vue @@ -3,13 +3,18 @@ class="md-select" :class="classes" :tabindex="disabled ? null : '0'"> - {{ value }} + {{ value }}
@@ -50,16 +55,17 @@ } }, methods: { - show() { - this.$refs.menu.focus(); + open() { this.active = true; document.addEventListener('click', this.closeOnOffClick); + this.$refs.menu.focus(); }, close() { if (this.active) { this.$refs.menu.blur(); this.active = false; document.removeEventListener('click', this.closeOnOffClick); + this.$refs.value.focus(); } }, closeOnOffClick(event) { @@ -70,6 +76,8 @@ highlightOption(factor) { if (factor >= 1 && factor <= this.optionsAmount) { this.highlighted = factor; + } else { + this.highlighted = 1; } }, selectOption(value) { diff --git a/src/components/mdTabs/mdTabs.scss b/src/components/mdTabs/mdTabs.scss index 302c013..c4e34a5 100644 --- a/src/components/mdTabs/mdTabs.scss +++ b/src/components/mdTabs/mdTabs.scss @@ -56,8 +56,8 @@ $tab-max-width: 264px; background: none; transition: $swift-ease-out; color: rgba(#fff, .7); - font-size: inherit; font-family: inherit; + font-size: 14px; font-weight: 500; text-transform: uppercase; diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue index 742a295..4ca3106 100644 --- a/src/components/mdTabs/mdTabs.vue +++ b/src/components/mdTabs/mdTabs.vue @@ -85,6 +85,7 @@ this.calculateIndicatorPos(); this.calculateTabPos(this.tabs[this.activeTab].ref, this.activeTab); this.setVisibleTab(this.tabs[index].ref); + this.$emit('change', index); }, registerTab(options) { this.tabs.push(options); diff --git a/src/docs/components/demo.vue b/src/docs/components/demo.vue index 18e81a9..f8ce67f 100644 --- a/src/docs/components/demo.vue +++ b/src/docs/components/demo.vue @@ -39,6 +39,24 @@ > .md-tabs-content { overflow-y: auto; } + + .md-tab { + max-width: 960px; + font-size: 16px; + line-height: 1.6em; + } + + code:not(.highlight) { + margin-left: 1px; + margin-right: 1px; + padding: 1px 5px; + background-color: rgba(#3f51b5, .12); + border-radius: 2px; + color: #3f51b5; + font-family: Hack, Menlo, "Liberation Mono", "Operator Mono", Monaco, Consolas, monospace; + letter-spacing: .010em; + line-height: 1.5em; + } } diff --git a/src/docs/pages/Tabs.vue b/src/docs/pages/Tabs.vue index 5baa9f0..465e283 100644 --- a/src/docs/pages/Tabs.vue +++ b/src/docs/pages/Tabs.vue @@ -115,8 +115,11 @@
-

Code

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.

+

+ To use Tabs you must wrap all <md-tab> in a <md-tabs> as a direct parent. + The <md-tabs> can accept some parameters to modify his styles, like md-fixed and md-centered for example. + Each single tab accept a md-label and/or md-icon. You can set the active tab by setting a parameter md-active. +

diff --git a/src/docs/pages/Toolbar.vue b/src/docs/pages/Toolbar.vue index df4ddbd..d532f71 100644 --- a/src/docs/pages/Toolbar.vue +++ b/src/docs/pages/Toolbar.vue @@ -24,7 +24,7 @@
- + menu @@ -36,7 +36,7 @@ - + menu @@ -47,7 +47,7 @@ Remove - + menu @@ -58,7 +58,7 @@ Remove - +
menu