Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-16 11:13:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add edit button and inline select

Browse source
This commit is contained in:
Marcos Moura 2016-10-31 01:38:29 -02:00
parent cc5a9a80ea
commit c220d92aa7
4 changed files with 123 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
docs/src/pages/components/Table.vue
View file

@ -2,6 +2,28 @@
<demo-page label="Components - Table">
<div slot="examples">
<demo-example label="Default">
<md-table md-sort="calories">
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
<md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>
<md-table-head md-sort-by="sodium" md-numeric>Sodium (mg)</md-table-head>
<md-table-head md-sort-by="calcium" md-numeric>Calcium (%)</md-table-head>
<md-table-head md-sort-by="iron" md-numeric>Iron (%)</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 7" :key="index" md-numeric>10</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-table-card>
<md-toolbar>
<h1 class="md-title">Nutrition</h1>
@ -15,25 +37,33 @@
</md-toolbar>
<md-table md-row-selection md-sort="calories">
<thead>
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
<md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>
<md-table-head md-sort-by="sodium" md-numeric>Sodium (mg)</md-table-head>
<md-table-head md-sort-by="calcium" md-numeric>Calcium (%)</md-table-head>
<md-table-head md-sort-by="iron" md-numeric>Iron (%)</md-table-head>
<md-table-head>
<md-icon>message</md-icon>
<span>Comments</span>
</md-table-head>
</md-table-row>
</thead>
</md-table-header>
<tbody>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index" md-auto-select>
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 7" :key="index" md-numeric>10</md-table-cell>
<md-table-cell v-for="(col, index) in 3" :key="index" md-numeric>10</md-table-cell>
<md-table-cell>
<md-table-edit
v-model="comment"
:md-name="comment + index"
:md-id="comment + index"
md-placeholder="Add a comment"
md-maxlength="120"></md-table-edit>
</md-table-cell>
</md-table-row>
</tbody>
</md-table-body>
</md-table>
</md-table-card>
@ -50,9 +80,10 @@
</md-toolbar>
<md-table md-row-selection md-sort="calories">
<thead>
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="type" width="100px">Type</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
@ -61,22 +92,27 @@
<span>Comments</span>
</md-table-head>
</md-table-row>
</thead>
</md-table-header>
<tbody>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell>
<md-select placeholder="Type" :name="'type' + index" :id="'type' + index" v-model="type">
<md-option value="Ice Cream">Ice Cream</md-option>
<md-option value="Pastry">Pastry</md-option>
<md-option value="Other">Other</md-option>
</md-select>
</md-table-cell>
<md-table-cell v-for="(col, index) in 3" :key="index" md-numeric>10</md-table-cell>
<md-table-cell>
<md-table-edit
v-model="comment"
:md-name="comment + index"
:md-id="comment + index"
md-placeholder="Add a comment"
md-maxlength="120"></md-table-edit>
<span>Super tasty</span>
<md-button class="md-icon-button">
<md-icon>edit</md-icon>
</md-button>
</md-table-cell>
</md-table-row>
</tbody>
</md-table-body>
</md-table>
</md-table-card>
</demo-example>
@ -93,6 +129,7 @@
</template>
<style lang="scss" scoped>
.md-table + .md-table-card,
.md-table-card + .md-table-card {
margin-top: 24px;
}
@ -102,7 +139,8 @@
export default {
data() {
return {
comment: null
comment: null,
type: null
};
}
};

12
src/components/mdTable/index.js
View file

@ -8,6 +8,18 @@ import mdTableTheme from './mdTable.theme';
export default function install(Vue) {
Vue.component('md-table', Vue.extend(mdTable));
Vue.component('md-table-header', {
functional: true,
render: (h, scope) => h('thead', {
staticClass: 'md-table-header'
}, scope.children)
});
Vue.component('md-table-body', {
functional: true,
render: (h, scope) => h('tbody', {
staticClass: 'md-table-body'
}, scope.children)
});
Vue.component('md-table-row', Vue.extend(mdTableRow));
Vue.component('md-table-head', Vue.extend(mdTableHead));
Vue.component('md-table-cell', Vue.extend(mdTableCell));

60
src/components/mdTable/mdTable.scss
View file

@ -148,12 +148,42 @@
padding-right: 24px;
}
.md-table-cell-container {
padding: 0 32px 0 24px;
&.md-numeric {
.md-table-cell-container {
justify-content: flex-end;
}
}
&.md-numeric {
text-align: right;
.md-table-cell-container {
padding: 0 32px 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.md-button {
$size: 36px;
width: $size;
min-width: $size;
height: $size;
min-height: $size;
&:last-child {
margin: 0 -10px 0 0;
}
.md-icon {
$size: 18px;
width: $size;
min-width: $size;
height: $size;
min-height: $size;
margin: 0;
color: rgba(#000, .54);
font-size: $size;
}
}
}
@ -175,12 +205,13 @@
}
.md-checkbox {
margin: 3px 0 0;
margin: 0;
}
.md-checkbox-container {
width: 18px;
height: 18px;
margin-top: 1px;
&:after {
top: -1px;
@ -188,6 +219,15 @@
}
}
}
.md-select {
min-width: 84px;
}
.md-select-value,
.md-option {
font-size: 13px;
}
}
.md-table-edit-trigger {
@ -236,10 +276,14 @@
.md-input-container {
margin-top: 0;
margin-bottom: 16px;
}
input {
font-size: 13px;
&.md-input-placeholder input {
font-size: 13px;
&::-webkit-input-placeholder {
font-size: 13px;
}
}
}
.md-char-counter {

1
src/components/mdTable/mdTableEdit.vue
View file

@ -12,6 +12,7 @@
:name="mdName"
:maxlength="mdMaxlength"
:value="value"
:placeholder="mdPlaceholder"
@keydown.enter.native="confirmDialog"></md-input>
</md-input-container>
</div>