eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Checkboxes: use v-model value prop instead of "checked" prop (#227)

Browse Source 
* Use v-model value prop instead of "checked" prop

* Scope CSS & Rename component

* Mod settings: Update prop & make Owner check all
This commit is contained in:
venashial
2021-05-27 21:00:44 -07:00
committed by GitHub
parent 2c22837d9f
commit 03cbab5267
2 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/ui/Checkbox.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="checkbox-outer" :class="{ disabled }" @click="toggle">
<button class="checkbox" :disabled="disabled" :class="{ border }">
<CheckIcon v-if="checked" />
<CheckIcon v-if="value" />
</button>
<p>{{ label }}</p>
</div>
@@ -11,7 +11,7 @@
import CheckIcon from '~/assets/images/utils/check.svg?inline'
export default {
name: 'SearchCheckbox',
name: 'Checkbox',
components: {
CheckIcon,
},
@@ -28,31 +28,26 @@ export default {
type: Boolean,
default: true,
},
},
data() {
return {
checked: false,
}
value: Boolean,
},
methods: {
toggle() {
if (!this.disabled) {
this.checked = !this.checked
this.$emit('input', this.checked)
this.$emit('input', !this.value)
}
},
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.checkbox-outer {
display: flex;
align-items: center;
cursor: pointer;
&.disabled {
opacity: 0.5;
opacity: 0.6;
cursor: not-allowed;
button {
@@ -65,11 +60,11 @@ export default {
}
}
}
}
p {
padding: 0.2rem 0rem;
margin: 0 0 0 0.5rem;
p {
padding: 0.2rem 0rem;
margin: 0 0 0 0.5rem;
}
}
.checkbox {

40
pages/mod/_id/settings.vue
View File

@@ -105,7 +105,10 @@
<h3>Permissions</h3>
<div class="permissions">
<Checkbox
:checked="(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION"
:value="
(member.permissions & UPLOAD_VERSION) === UPLOAD_VERSION ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -115,7 +118,10 @@
@input="members[index].permissions ^= UPLOAD_VERSION"
/>
<Checkbox
:checked="(member.permissions & DELETE_VERSION) === DELETE_VERSION"
:value="
(member.permissions & DELETE_VERSION) === DELETE_VERSION ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -125,7 +131,10 @@
@input="members[index].permissions ^= DELETE_VERSION"
/>
<Checkbox
:checked="(member.permissions & EDIT_DETAILS) === EDIT_DETAILS"
:value="
(member.permissions & EDIT_DETAILS) === EDIT_DETAILS ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -135,7 +144,10 @@
@input="members[index].permissions ^= EDIT_DETAILS"
/>
<Checkbox
:checked="(member.permissions & EDIT_BODY) === EDIT_BODY"
:value="
(member.permissions & EDIT_BODY) === EDIT_BODY ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -145,7 +157,10 @@
@input="members[index].permissions ^= EDIT_BODY"
/>
<Checkbox
:checked="(member.permissions & MANAGE_INVITES) === MANAGE_INVITES"
:value="
(member.permissions & MANAGE_INVITES) === MANAGE_INVITES ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -155,7 +170,10 @@
@input="members[index].permissions ^= MANAGE_INVITES"
/>
<Checkbox
:checked="(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER"
:value="
(member.permissions & REMOVE_MEMBER) === REMOVE_MEMBER ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||
@@ -165,7 +183,10 @@
@input="members[index].permissions ^= REMOVE_MEMBER"
/>
<Checkbox
:checked="(member.permissions & EDIT_MEMBER) === EDIT_MEMBER"
:value="
(member.permissions & EDIT_MEMBER) === EDIT_MEMBER ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER
@@ -174,7 +195,10 @@
@input="members[index].permissions ^= EDIT_MEMBER"
/>
<Checkbox
:checked="(member.permissions & DELETE_MOD) === DELETE_MOD"
:value="
(member.permissions & DELETE_MOD) === DELETE_MOD ||
member.role === 'Owner'
"
:disabled="
member.role === 'Owner' ||
(currentMember.permissions & EDIT_MEMBER) !== EDIT_MEMBER ||