Add disabled, min and max options for collections

This commit is contained in:
Samuel Elliott 2018-08-10 14:23:21 +01:00
parent 0aabc72652
commit c8381eb808
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
2 changed files with 14 additions and 8 deletions

View File

@ -23,17 +23,21 @@
align-items: center;
cursor: pointer;
&:hover {
svg {
fill: #FFF;
}
}
svg {
width: 16px;
height: 16px;
fill: #ccc;
}
&:not(.bd-disabled):hover {
svg {
fill: #fff;
}
}
&.bd-disabled {
opacity: 0.5;
}
}
}

View File

@ -12,9 +12,9 @@
<div class="bd-formCollection">
<div v-for="s in setting.items" class="bd-collectionItem">
<Setting :setting="s" :hide-divider="true" :key="s.id" />
<div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
<div class="bd-removeCollectionItem" :class="{'bd-disabled': setting.disabled || setting.min && setting.items.length <= setting.min}" @click="removeItem(s)"><MiMinus/></div>
</div>
<div class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
<div v-if="!setting.disabled && !setting.max || setting.items.length < setting.max" class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
</div>
</template>
@ -29,9 +29,11 @@
},
methods: {
removeItem(item) {
if (this.setting.disabled || this.setting.min && this.setting.items.length <= this.setting.min) return;
this.setting.removeItem(item);
},
addItem() {
if (this.setting.disabled || this.setting.max && this.setting.items.length >= this.setting.max) return;
this.setting.addItem();
}
},