wikijs-fork/client/components/common/criterias.vue

174 lines
3.6 KiB
Vue
Raw Normal View History

2018-03-31 05:48:04 +00:00
<template lang="pug">
.criterias
transition-group(name='criterias-group', tag='div')
.criterias-group(v-for='(group, g) in groups', :key='g')
transition-group(name='criterias-item', tag='div')
criterias-item(v-for='(item, i) in group', :key='i', :item='item', :group-index='g', :item-index='i', @update='updateItem', @remove='removeItem')
.criterias-item-more
v-btn.ml-0(@click='addItem(group)', small, color='blue-grey lighten-2', dark, depressed)
v-icon(color='white', left) add
| Add condition
.criterias-group-more
v-btn(@click='addGroup', small, color='blue-grey lighten-1', dark, depressed)
v-icon(color='white', left) add
| Add condition group
</template>
<script>
import CriteriasItem from './criterias-item.vue'
export default {
components: {
CriteriasItem
},
props: {
value: {
type: Array,
default() { return [] }
},
types: {
type: Array,
default() {
return ['country', 'path', 'date', 'time', 'group']
}
}
},
provide () {
return {
allowedCriteriaTypes: this.types
}
},
data() {
return {
dataGroups: this.value || []
}
},
computed: {
groups: {
get() { return this.dataGroups },
set(grp) {
this.dataGroups = grp
}
}
},
watch: {
dataGroups(newValue, oldValue) {
if (newValue !== oldValue) {
this.$emit('input', newValue)
}
}
},
methods: {
addGroup() {
this.dataGroups.push([{}])
},
addItem(group) {
group.push({})
},
updateItem(groupIndex, itemIndex, item) {
console.info(item)
this.$set(this.dataGroups[groupIndex], itemIndex, item)
},
removeItem(groupIndex, itemIndex) {
this.dataGroups[groupIndex].splice(itemIndex, 1)
if (this.dataGroups[groupIndex].length < 1) {
this.dataGroups.splice(groupIndex, 1)
}
}
}
}
</script>
<style lang="scss">
.criterias {
&-group {
background-color: mc('blue-grey', '100');
border-radius: 4px;
padding: 1rem;
position: relative;
&-enter-active, &-leave-active {
transition: all .5s ease;
}
&-enter, &-leave-to {
opacity: 0;
}
& + .criterias-group {
margin-top: 1rem;
&::before {
content: 'OR';
position: absolute;
display: inline-flex;
padding: 0 2rem;
top: -1.25rem;
left: 2rem;
background-color: mc('blue-grey', '100');
color: mc('blue-grey', '700');
font-weight: 600;
font-size: .9rem;
}
}
&-more {
margin: .5rem 0 0 .4rem;
}
}
&-item {
display: flex;
background-color: mc('blue-grey', '200');
border-radius: 4px;
padding: .5rem;
&-enter-active, &-leave-active {
transition: all .5s ease;
}
&-enter, &-leave-to {
opacity: 0;
}
& + .criterias-item {
margin-top: .5rem;
position: relative;
&::before {
content: 'AND';
position: absolute;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
color: mc('blue-grey', '700');
font-size: .7rem;
background-color: mc('blue-grey', '100');
left: -2rem;
top: -1.3rem;
}
}
.input-group {
&:nth-child(1) {
flex: 0 1 350px;
}
&:nth-child(2) {
flex: 0 1 250px;
}
& + * {
margin-left: .5rem;
}
}
&-more {
margin-top: .15rem;
}
}
}
</style>