diff --git a/src/frontend/src/components/UI/Checkbox.vue b/src/frontend/src/components/UI/Checkbox.vue index 9cf701b..ac246cb 100644 --- a/src/frontend/src/components/UI/Checkbox.vue +++ b/src/frontend/src/components/UI/Checkbox.vue @@ -5,9 +5,11 @@ type="checkbox" :checked="isChecked" :disabled="disabled" + :indeterminate.prop="isIndeterminate" v-model="isChecked" + ref="checkboxInput" > - + @@ -26,12 +28,18 @@ export default{ type: Boolean, default: false, required: false + }, + indeterminate: { + type: Boolean, + default: false, + required: false } }, name: "Checkbox", data() { return { internalChecked: this.checked, + internalIndeterminate: this.indeterminate, } }, computed: { @@ -42,20 +50,36 @@ export default{ set(value) { if (this.disabled) return; // Prevent changes when disabled this.internalChecked = value; + this.internalIndeterminate = false; this.$emit('checkbox-changed', value); } + }, + isIndeterminate() { + return this.internalIndeterminate && !this.internalChecked; } }, watch: { checked(newVal) { this.internalChecked = newVal; + this.updateIndeterminateState(this.internalIndeterminate); + }, + indeterminate(newVal) { + this.internalIndeterminate = newVal; + this.updateIndeterminateState(newVal); } }, + mounted() { + this.updateIndeterminateState(this.isIndeterminate); + }, methods: { setFilter(event) { - if (this.disabled) return; // Prevent action when disabled - // The computed setter will handle the emit + if (this.disabled) return; this.isChecked = event.target.checked; + }, + updateIndeterminateState(value) { + if (this.$refs.checkboxInput) { + this.$refs.checkboxInput.indeterminate = value; + } } } } @@ -130,6 +154,16 @@ export default{ border-color: #6b7280; } +.checkmark.indeterminate { + background-color: #002F54; + border-color: #002F54; +} + +.checkbox-item.disabled .checkmark.indeterminate { + background-color: #6b7280; + border-color: #6b7280; +} + .checkmark::after { content: ""; position: absolute; @@ -148,10 +182,26 @@ export default{ display: block; } +.checkmark.indeterminate::after { + display: block; + width: 1rem; + height: 0; + border-width: 0 0 0.2rem 0; + transform: rotate(0deg); + top: 50%; + left: 50%; + margin-left: -0.5rem; + margin-top: -0.1rem; +} + .checkbox-item:not(.disabled):hover input:checked ~ .checkmark::after { border-color: #8DB3FE; } +.checkbox-item:not(.disabled):hover .checkmark.indeterminate::after { + border-color: #8DB3FE; +} + .checkbox-label { color: #002F54; font-size: 1.4rem; diff --git a/src/frontend/src/components/UI/ListEdit.vue b/src/frontend/src/components/UI/ListEdit.vue index 1e3569d..3da5019 100644 --- a/src/frontend/src/components/UI/ListEdit.vue +++ b/src/frontend/src/components/UI/ListEdit.vue @@ -5,29 +5,39 @@ class="list-edit-container" > -
- - - - - - -
+
+
+ + {{ selectCount }}
+ + Edit + Delete + Archive + Cancel + + +