akkoma-fe/src/components/selectable_list/selectable_list.vue

95 lines
2.2 KiB
Vue
Raw Normal View History

2019-04-04 01:43:24 +00:00
<template>
<div class="selectable-list">
2019-07-05 07:17:44 +00:00
<div
v-if="items.length > 0"
class="selectable-list-header"
>
<div class="selectable-list-checkbox-wrapper">
2019-07-05 07:17:44 +00:00
<Checkbox
2022-03-29 12:35:18 +00:00
:model-value="allSelected"
2019-07-05 07:17:44 +00:00
:indeterminate="someSelected"
@update:model-value="toggleAll"
2019-07-05 07:17:44 +00:00
>
{{ $t('selectable_list.select_all') }}
</Checkbox>
</div>
2019-04-04 08:39:16 +00:00
<div class="selectable-list-header-actions">
2019-07-05 07:17:44 +00:00
<slot
name="header"
:selected="filteredSelected"
/>
2019-04-04 08:39:16 +00:00
</div>
</div>
2019-07-05 07:17:44 +00:00
<List
:items="items"
:get-key="getKey"
>
2021-04-07 19:42:34 +00:00
<template v-slot:item="{item}">
2019-07-05 07:17:44 +00:00
<div
class="selectable-list-item-inner"
:class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
>
<div class="selectable-list-checkbox-wrapper">
2019-07-05 07:17:44 +00:00
<Checkbox
2022-03-29 12:35:18 +00:00
:model-value="isSelected(item)"
@update:model-value="checked => toggle(checked, item)"
2019-07-05 07:17:44 +00:00
/>
</div>
2019-07-05 07:17:44 +00:00
<slot
name="item"
:item="item"
/>
</div>
</template>
2021-04-07 19:42:34 +00:00
<template v-slot:empty>
2019-07-05 07:17:44 +00:00
<slot name="empty" />
</template>
</List>
</div>
2019-04-04 01:43:24 +00:00
</template>
<script src="./selectable_list.js"></script>
2019-04-04 01:43:24 +00:00
<style lang="scss">
@import '../../_variables.scss';
.selectable-list {
&-item-inner {
display: flex;
align-items: center;
2019-04-29 17:57:44 +00:00
> * {
min-width: 0;
}
}
&-item-selected-inner {
background-color: $fallback--lightBg;
2020-01-13 18:40:16 +00:00
background-color: var(--selectedMenu, $fallback--lightBg);
color: var(--selectedMenuText, $fallback--text);
--faint: var(--selectedMenuFaintText, $fallback--faint);
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
2020-01-23 22:36:32 +00:00
--lightText: var(--selectedMenuLightText, $fallback--lightText);
2020-01-13 18:40:16 +00:00
--icon: var(--selectedMenuIcon, $fallback--icon);
}
&-header {
display: flex;
align-items: center;
padding: 0.6em 0;
2019-04-04 17:31:20 +00:00
border-bottom: 2px solid;
2019-04-04 08:40:25 +00:00
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
2019-04-04 08:39:16 +00:00
&-actions {
flex: 1;
}
}
&-checkbox-wrapper {
padding: 0 10px;
flex: none;
}
}
2019-04-04 01:43:24 +00:00
</style>