mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-12 17:23:11 +00:00
Merge remote-tracking branch 'origin/develop' into components/mdSnackbar
* origin/develop: fix tooltip not being removed. fix #156 fix disabled selects being selectable. fix #159 resize textarea when a value change fix #160 revert dialog example add scrollbar behaviour in dialog content fix #161 start improvement over huge dialog content create custom tags in whiteframe component (#170) fix undefined object.values method and emit @change event (#167) add reference of currentPage in mdTablePagination (#166) add code sample to switch (#158) update prompt code example to be a prompt (#151)
This commit is contained in:
Marcos Moura
commit
9e482dd8f7
13 changed files with 198 additions and 83 deletions
|
|
@ -1,31 +1,33 @@
|
|||
<template>
|
||||
<page-content page-title="Introduction">
|
||||
<div class="main-content">
|
||||
<div class="button-actions">
|
||||
<div class="example">
|
||||
<img src="assets/vue-material-example.png" alt="Material Design">
|
||||
<div class="introduction">
|
||||
<div class="button-actions">
|
||||
<div class="example">
|
||||
<img src="assets/vue-material-example.png" alt="Material Design">
|
||||
</div>
|
||||
|
||||
<div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
|
||||
|
||||
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
|
||||
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
|
||||
</div>
|
||||
|
||||
<div class="introduction">Build well-crafted apps with Material Design and Vue 2</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Material Design</h2>
|
||||
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
|
||||
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Full-featured</h2>
|
||||
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Material Design</h2>
|
||||
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Full-featured</h2>
|
||||
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Compatible</h2>
|
||||
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Compatible</h2>
|
||||
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
.introduction {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -528,17 +528,16 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-dialog-confirm
|
||||
:md-title="confirm.title"
|
||||
:md-content-html="confirm.contentHtml"
|
||||
:md-ok-text="confirm.ok"
|
||||
:md-cancel-text="confirm.cancel"
|
||||
<md-dialog-prompt
|
||||
:md-title="prompt.title"
|
||||
:md-ok-text="prompt.ok"
|
||||
:md-cancel-text="prompt.cancel"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
ref="dialog5">
|
||||
</md-dialog-confirm>
|
||||
ref="dialog6">
|
||||
</md-dialog-prompt>
|
||||
|
||||
<md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
|
||||
<md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
|
|
|
|||
|
|
@ -96,7 +96,21 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div>
|
||||
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
|
||||
</div>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -112,7 +126,11 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-switch v-model="checked8" id="my-test8" name="my-test8">Default</md-switch>
|
||||
|
||||
<form @click.stop.prevent="submit">
|
||||
<md-switch type="submit" v-model="checked9" id="my-test9" name="my-test9" class="md-primary">Submit</md-switch>
|
||||
</form>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -138,7 +156,22 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'light-blue'">
|
||||
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
</div>
|
||||
</div>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-tag</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The generated html tag <br>Default: <code>div</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
|
|
@ -30,7 +36,7 @@
|
|||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<div slot="demo">
|
||||
<md-whiteframe>1dp</md-whiteframe>
|
||||
<md-whiteframe md-tag="section">1dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
|
||||
|
|
@ -58,7 +64,7 @@
|
|||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-whiteframe>1dp</md-whiteframe>
|
||||
<md-whiteframe md-tag="section">1dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@
|
|||
min-width: 280px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
|
|
@ -67,6 +69,14 @@
|
|||
|
||||
.md-dialog-content {
|
||||
padding: 0 24px 24px;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
background: linear-gradient(to bottom, #fff 0, #fff 1px, transparent 1px),
|
||||
linear-gradient(to top, #fff 0, #fff 3px, transparent 3px),
|
||||
linear-gradient(to bottom, rgba(#000, .12) 0, rgba(#000, .12) 1px, transparent 1px),
|
||||
linear-gradient(to top, rgba(#000, .2) 1px, rgba(#000, .2) 2px, transparent 2px);
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 24px;
|
||||
|
|
@ -91,8 +101,19 @@
|
|||
min-height: 52px;
|
||||
padding: 8px 8px 8px 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.md-button {
|
||||
min-width: 64px;
|
||||
|
|
|
|||
|
|
@ -62,8 +62,8 @@ $input-size: 32px;
|
|||
min-height: 32px;
|
||||
max-height: 230px;
|
||||
padding: 5px 0;
|
||||
line-height: 1.3em;
|
||||
resize: none;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.md-error {
|
||||
|
|
@ -193,7 +193,7 @@ $input-size: 32px;
|
|||
}
|
||||
|
||||
&.md-has-select:hover {
|
||||
.md-select:after {
|
||||
.md-select:not(.md-disabled):after {
|
||||
color: rgba(#000, .87);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,13 @@
|
|||
|
||||
export default {
|
||||
mixins: [common],
|
||||
watch: {
|
||||
value() {
|
||||
this.$nextTick(() => {
|
||||
autosize.update(this.$el);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@ $select-height: 32px;
|
|||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
user-drag: none;
|
||||
|
||||
&:after {
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<select :name="name" :id="id" :required="required" tabindex="-1">
|
||||
<select :name="name" :id="id" :required="required" :disabled="disabled" tabindex="-1">
|
||||
<option :value="value">{{ value }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -43,6 +43,8 @@
|
|||
},
|
||||
computed: {
|
||||
classes() {
|
||||
console.log(this.disabled);
|
||||
|
||||
return {
|
||||
'md-disabled': this.disabled
|
||||
};
|
||||
|
|
@ -58,9 +60,27 @@
|
|||
watch: {
|
||||
value(value) {
|
||||
this.setTextAndValue(value);
|
||||
},
|
||||
disabled() {
|
||||
this.setParentDisabled();
|
||||
},
|
||||
required() {
|
||||
this.setParentRequired();
|
||||
},
|
||||
placeholder() {
|
||||
this.setParentPlaceholder();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setParentDisabled() {
|
||||
this.parentContainer.isDisabled = this.disabled;
|
||||
},
|
||||
setParentRequired() {
|
||||
this.parentContainer.isRequired = this.required;
|
||||
},
|
||||
setParentPlaceholder() {
|
||||
this.parentContainer.hasPlaceholder = !!this.placeholder;
|
||||
},
|
||||
getSingleValue(value) {
|
||||
let output = {};
|
||||
|
||||
|
|
@ -144,6 +164,9 @@
|
|||
this.setTextAndValue(this.value);
|
||||
|
||||
if (this.parentContainer) {
|
||||
this.setParentDisabled();
|
||||
this.setParentRequired();
|
||||
this.setParentPlaceholder();
|
||||
this.parentContainer.setValue(this.value);
|
||||
this.parentContainer.hasSelect = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
<md-option v-for="amount in mdPageOptions" :value="amount">{{ amount }}</md-option>
|
||||
</md-select>
|
||||
|
||||
<span>{{ (currentSize - currentSize + 1) * currentPage }}-{{ currentSize }} {{ mdSeparator }} {{ mdTotal }}</span>
|
||||
<span>{{ ((currentPage - 1) * currentSize) + 1 }}-{{ subTotal }} {{ mdSeparator }} {{ totalItems }}</span>
|
||||
|
||||
<md-button class="md-icon-button md-table-pagination-previous" @click="changePage" :disabled="currentPage === 1">
|
||||
<md-button class="md-icon-button md-table-pagination-previous" @click="previousPage" :disabled="currentPage === 1">
|
||||
<md-icon>keyboard_arrow_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-table-pagination-next" @click="changePage" :disabled="currentSize * currentPage >= totalItems">
|
||||
<md-button class="md-icon-button md-table-pagination-next" @click="nextPage" :disabled="currentSize * currentPage >= totalItems">
|
||||
<md-icon>keyboard_arrow_right</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
|
@ -45,6 +45,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
subTotal: 0,
|
||||
currentSize: parseInt(this.mdSize, 10),
|
||||
currentPage: parseInt(this.mdPage, 10),
|
||||
totalItems: !isNaN(this.mdTotal) && Number.MAX_SAFE_INTEGER
|
||||
|
|
@ -58,6 +59,9 @@
|
|||
methods: {
|
||||
emitPaginationEvent() {
|
||||
if (this.canFireEvents) {
|
||||
const sub = this.currentPage * this.currentSize;
|
||||
|
||||
this.subTotal = sub > this.mdTotal ? this.mdTotal : sub;
|
||||
this.$emit('pagination', {
|
||||
size: this.currentSize,
|
||||
page: this.currentPage
|
||||
|
|
@ -70,8 +74,16 @@
|
|||
this.emitPaginationEvent();
|
||||
}
|
||||
},
|
||||
changePage() {
|
||||
previousPage() {
|
||||
if (this.canFireEvents) {
|
||||
this.currentPage--;
|
||||
this.$emit('page', this.currentPage);
|
||||
this.emitPaginationEvent();
|
||||
}
|
||||
},
|
||||
nextPage() {
|
||||
if (this.canFireEvents) {
|
||||
this.currentPage++;
|
||||
this.$emit('page', this.currentPage);
|
||||
this.emitPaginationEvent();
|
||||
}
|
||||
|
|
@ -79,6 +91,7 @@
|
|||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.subTotal = this.currentPage * this.currentSize;
|
||||
this.mdPageOptions = this.mdPageOptions || [10, 25, 50, 100];
|
||||
this.currentSize = this.mdPageOptions[0];
|
||||
this.canFireEvents = true;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
<template>
|
||||
<div class="md-tabs" :class="tabClasses">
|
||||
<md-whiteframe :md-elevation="mdElevation">
|
||||
<div class="md-tabs-navigation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
:key="header.id"
|
||||
type="button"
|
||||
class="md-tab-header"
|
||||
:class="getHeaderClass(header)"
|
||||
:disabled="header.disabled"
|
||||
@click="setActiveTab(header)"
|
||||
ref="tabHeader">
|
||||
<md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
|
||||
<div class="md-tab-header-container">
|
||||
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
|
||||
<span v-if="header.label">{{ header.label }}</span>
|
||||
</div>
|
||||
</button>
|
||||
<md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
|
||||
<button
|
||||
v-for="header in tabList"
|
||||
:key="header.id"
|
||||
type="button"
|
||||
class="md-tab-header"
|
||||
:class="getHeaderClass(header)"
|
||||
:disabled="header.disabled"
|
||||
@click="setActiveTab(header)"
|
||||
ref="tabHeader">
|
||||
<md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
|
||||
<div class="md-tab-header-container">
|
||||
<md-icon v-if="header.icon">{{ header.icon }}</md-icon>
|
||||
<span v-if="header.label">{{ header.label }}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
|
||||
</div>
|
||||
<span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
|
||||
|
|
@ -128,7 +126,7 @@
|
|||
attributeOldValue: true,
|
||||
characterDataOldValue: true
|
||||
});
|
||||
this.navigationObserver.observe(this.$refs.tabNavigation, {
|
||||
this.navigationObserver.observe(this.$refs.tabNavigation.$el, {
|
||||
attributes: true
|
||||
});
|
||||
},
|
||||
|
|
@ -151,10 +149,15 @@
|
|||
|
||||
this.contentWidth = width * this.activeTabNumber + 'px';
|
||||
|
||||
Object.values(this.tabList).forEach((tab, index) => {
|
||||
let index = 0;
|
||||
|
||||
for (const tabId in this.tabList) {
|
||||
let tab = this.tabList[tabId];
|
||||
|
||||
tab.ref.width = width + 'px';
|
||||
tab.ref.left = width * index + 'px';
|
||||
});
|
||||
index++;
|
||||
}
|
||||
},
|
||||
calculateContentHeight() {
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -188,6 +191,7 @@
|
|||
this.activeTab = tabData.id;
|
||||
this.activeTabNumber = this.getTabIndex(this.activeTab);
|
||||
this.calculatePosition();
|
||||
this.$emit('change', this.activeTabNumber);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -59,11 +59,11 @@
|
|||
},
|
||||
methods: {
|
||||
removeTooltips() {
|
||||
const tooltips = [...document.querySelectorAll('.md-tooltip')];
|
||||
const tooltips = [...this.rootElement.querySelectorAll('.md-tooltip')];
|
||||
|
||||
tooltips.forEach((tooltip) => {
|
||||
if (tooltip.parentNode) {
|
||||
this.rootElement.removeChild(tooltip);
|
||||
tooltip.parentNode.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,37 @@
|
|||
<template>
|
||||
<div class="md-whiteframe" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdWhiteframe.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdElevation: [String, Number]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mdElevation() {
|
||||
this.elevation = this.mdElevation;
|
||||
mdElevation: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
},
|
||||
mdTag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
let numberedElevation = parseInt(this.elevation, 10);
|
||||
let numberedElevation = parseInt(this.mdElevation, 10);
|
||||
let elevationClass = 'md-whiteframe-';
|
||||
|
||||
if (!isNaN(numberedElevation) && typeof numberedElevation === 'number') {
|
||||
elevationClass += numberedElevation;
|
||||
elevationClass += 'dp';
|
||||
} else if (this.elevation.indexOf('dp') > -1) {
|
||||
elevationClass += this.elevation;
|
||||
} else if (this.mdElevation.indexOf('dp') > -1) {
|
||||
elevationClass += this.mdElevation;
|
||||
}
|
||||
|
||||
return elevationClass;
|
||||
}
|
||||
},
|
||||
render(createElement) {
|
||||
return createElement(this.mdTag, {
|
||||
staticClass: 'md-whiteframe',
|
||||
class: this.classes
|
||||
}, this.$slots.default);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue