moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor selectable-list using list component

This commit is contained in:
taehoon 2019-04-03 23:54:14 -04:00
parent d806038ad3
commit 792ae1697e
3 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/list/list.vue
View File

@ -29,7 +29,6 @@ export default {
.list { .list {
&-item { &-item {
display: flex;
border-bottom: 1px solid; border-bottom: 1px solid;
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);

2
src/components/selectable_list/selectable_list.js
View File

@ -1,7 +1,9 @@
import List from '../list/list.vue'
import Checkbox from '../checkbox/checkbox.js' import Checkbox from '../checkbox/checkbox.js'
const SelectableList = { const SelectableList = {
components: { components: {
List,
Checkbox Checkbox
}, },
props: { props: {

37
src/components/selectable_list/selectable_list.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="selectable-list"> <List class="selectable-list" :items="items" :getKey="getKey">
<div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }"> <template slot="item" scope="p">
<div class="selectable-list-checkbox-wrapper"> <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
<Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" /> <div class="selectable-list-checkbox-wrapper">
<Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
</div>
<slot name="item" :item="p.item" />
</div> </div>
<slot name="item" :item="item" /> </template>
</div> </List>
<div class="selectable-list-empty-content faint" v-if="items.length === 0">
<slot name="empty" />
</div>
</div>
</template> </template>
<script src="./selectable_list.js"></script> <script src="./selectable_list.js"></script>
@ -18,26 +17,18 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.selectable-list { .selectable-list {
&-item { &-item-inner {
display: flex; display: flex;
border-bottom: 1px solid; }
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
&-selected { &-item-selected-inner {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
}
} }
&-checkbox-wrapper { &-checkbox-wrapper {
padding: 10px; padding: 10px;
flex: none; flex: none;
} }
&-empty-content {
text-align: center;
padding: 10px;
}
} }
</style> </style>