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"
>
-
-
-
-
-
-
-
-
+
+
+
+
Edit
+
Delete
+
Archive
+
Cancel
+
+
+