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

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

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