fix-dropdown
commit
d417945427
@ -0,0 +1,52 @@
|
||||
const debounceMilliseconds = 500
|
||||
|
||||
export default {
|
||||
props: {
|
||||
query: { // function to query results and return a promise
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
filter: { // function to filter results in real time
|
||||
type: Function
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Search...'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
term: '',
|
||||
timeout: null,
|
||||
results: [],
|
||||
resultsVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filtered () {
|
||||
return this.filter ? this.filter(this.results) : this.results
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
term (val) {
|
||||
this.fetchResults(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchResults (term) {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(() => {
|
||||
this.results = []
|
||||
if (term) {
|
||||
this.query(term).then((results) => { this.results = results })
|
||||
}
|
||||
}, debounceMilliseconds)
|
||||
},
|
||||
onInputClick () {
|
||||
this.resultsVisible = true
|
||||
},
|
||||
onClickOutside () {
|
||||
this.resultsVisible = false
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="autosuggest" v-click-outside="onClickOutside">
|
||||
<input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
|
||||
<div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
|
||||
<slot v-for="item in filtered" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./autosuggest.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.autosuggest {
|
||||
position: relative;
|
||||
|
||||
&-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-results {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
max-height: 400px;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--lightBg, $fallback--lightBg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: var(--panelShadow);
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div v-for="item in items" class="list-item" :key="getKey(item)">
|
||||
<slot name="item" :item="item" />
|
||||
</div>
|
||||
<div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
|
||||
<slot name="empty" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
getKey: {
|
||||
type: Function,
|
||||
default: item => item.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list {
|
||||
&-item:not(:last-child) {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: $fallback--border;
|
||||
border-bottom-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
&-empty-content {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<button :disabled="progress || disabled" @click="onClick">
|
||||
<template v-if="progress">
|
||||
<slot name="progress" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot />
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean
|
||||
},
|
||||
click: { // click event handler. Must return a promise
|
||||
type: Function,
|
||||
default: () => Promise.resolve()
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
progress: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
this.progress = true
|
||||
this.click().then(() => { this.progress = false })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -0,0 +1,66 @@
|
||||
import List from '../list/list.vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
|
||||
const SelectableList = {
|
||||
components: {
|
||||
List,
|
||||
Checkbox
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
getKey: {
|
||||
type: Function,
|
||||
default: item => item.id
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selected: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allKeys () {
|
||||
return this.items.map(this.getKey)
|
||||
},
|
||||
filteredSelected () {
|
||||
return this.allKeys.filter(key => this.selected.indexOf(key) !== -1)
|
||||
},
|
||||
allSelected () {
|
||||
return this.filteredSelected.length === this.items.length
|
||||
},
|
||||
noneSelected () {
|
||||
return this.filteredSelected.length === 0
|
||||
},
|
||||
someSelected () {
|
||||
return !this.allSelected && !this.noneSelected
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isSelected (item) {
|
||||
return this.filteredSelected.indexOf(this.getKey(item)) !== -1
|
||||
},
|
||||
toggle (checked, item) {
|
||||
const key = this.getKey(item)
|
||||
const oldChecked = this.isSelected(key)
|
||||
if (checked !== oldChecked) {
|
||||
if (checked) {
|
||||
this.selected.push(key)
|
||||
} else {
|
||||
this.selected.splice(this.selected.indexOf(key), 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleAll (value) {
|
||||
if (value) {
|
||||
this.selected = this.allKeys.slice(0)
|
||||
} else {
|
||||
this.selected = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default SelectableList
|
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="selectable-list">
|
||||
<div class="selectable-list-header" v-if="items.length > 0">
|
||||
<div class="selectable-list-checkbox-wrapper">
|
||||
<Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
|
||||
</div>
|
||||
<div class="selectable-list-header-actions">
|
||||
<slot name="header" :selected="filteredSelected" />
|
||||
</div>
|
||||
</div>
|
||||
<List :items="items" :getKey="getKey">
|
||||
<template slot="item" slot-scope="{item}">
|
||||
<div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }">
|
||||
<div class="selectable-list-checkbox-wrapper">
|
||||
<Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
|
||||
</div>
|
||||
<slot name="item" :item="item" />
|
||||
</div>
|
||||
</template>
|
||||
<template slot="empty"><slot name="empty" /></template>
|
||||
</List>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./selectable_list.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.selectable-list {
|
||||
&-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-item-selected-inner {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--lightBg, $fallback--lightBg);
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.6em 0;
|
||||
border-bottom: 2px solid;
|
||||
border-bottom-color: $fallback--border;
|
||||
border-bottom-color: var(--border, $fallback--border);
|
||||
|
||||
&-actions {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-checkbox-wrapper {
|
||||
padding: 0 10px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,40 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import map from 'lodash/map'
|
||||
import isEmpty from 'lodash/isEmpty'
|
||||
import './with_list.scss'
|
||||
|
||||
const defaultEntryPropsGetter = entry => ({ entry })
|
||||
const defaultKeyGetter = entry => entry.id
|
||||
|
||||
const withList = ({
|
||||
getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component
|
||||
getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
|
||||
}) => (ItemComponent) => (
|
||||
Vue.component('withList', {
|
||||
props: [
|
||||
'entries', // array of entry
|
||||
'entryProps', // additional props to be passed into each entry
|
||||
'entryListeners' // additional event listeners to be passed into each entry
|
||||
],
|
||||
render (createElement) {
|
||||
return (
|
||||
<div class="with-list">
|
||||
{map(this.entries, (entry, index) => {
|
||||
const props = {
|
||||
key: getKey(entry, index),
|
||||
props: {
|
||||
...this.$props.entryProps,
|
||||
...getEntryProps(entry, index)
|
||||
},
|
||||
on: this.$props.entryListeners
|
||||
}
|
||||
return <ItemComponent {...props} />
|
||||
})}
|
||||
{isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
export default withList
|
@ -1,6 +0,0 @@
|
||||
.with-list {
|
||||
&-empty-content {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
@ -1,10 +1,16 @@
|
||||
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.with-load-more {
|
||||
&-footer {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-top: 1px solid;
|
||||
border-top-color: $fallback--border;
|
||||
border-top-color: var(--border, $fallback--border);
|
||||
|
||||
.error {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
Binary file not shown.
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue