feat: create BaseCheckbox

cypress/e2e/list/list-view-table.spec.ts

@@ -20,10 +20,10 @@ describe('List View Table', () => {
 		cy.get('.list-table .filter-container .items .button')
 			.contains('Columns')
 			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .label')
 			.contains('Priority')
 			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .label')
 			.contains('Done')
 			.click()
 

cypress/e2e/task/task.spec.ts

@@ -59,7 +59,7 @@ describe('Task', () => {
 		TaskFactory.create(1)
 
 		cy.visit('/lists/1/list')
-		cy.get('.tasks .task .fancycheckbox label.check')
+		cy.get('.tasks .task .fancycheckbox .label')
 			.first()
 			.click()
 		cy.get('.global-notification')

src/assets/checkbox.svg

@@ -0,0 +1,4 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18">
+	<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+	<polyline points="1 9 7 14 15 4"></polyline>
+</svg>

src/components/base/BaseCheckbox.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="base-checkbox" v-cy="'checkbox'">
+		<input
+			type="checkbox"
+			:id="checkboxId"
+			class="is-sr-only"
+			:checked="modelValue"
+			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+			:disabled="disabled || undefined"
+		/>
+		<slot :checkboxId="checkboxId" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {createRandomID} from '@/helpers/randomId'
+
+defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const checkboxId = ref(`fancycheckbox_${createRandomID()}`)
+</script>

src/components/input/fancycheckbox.vue

@@ -1,65 +1,44 @@
 <template>
-	<div :class="{'is-disabled': disabled}" class="fancycheckbox">
-		<input
-			:checked="checked"
-			:disabled="disabled || undefined"
-			:id="checkBoxId"
-			@change="(event) => updateData(event.target.checked)"
-			type="checkbox"/>
-		<label :for="checkBoxId" class="check">
-			<svg height="18px" viewBox="0 0 18 18" width="18px">
-				<path
-					d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
-				<polyline points="1 9 7 14 15 4"></polyline>
-			</svg>
+	<BaseCheckbox
+		class="fancycheckbox checkbox"
+		:class="{
+			'is-disabled': disabled,
+			'is-block': isBlock,
+		}"
+		:model-value="modelValue"
+		@update:model-value="value => emit('update:modelValue', value)"
+		#default="{checkboxId}"
+	>
+		<label :for="checkboxId" class="label">
+			<CheckboxImg />
 			<span>
-				<slot></slot>
+				<slot/>
 			</span>
 		</label>
-	</div>
+	</BaseCheckbox>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import CheckboxImg from '@/assets/checkbox.svg?component'
 
-import {createRandomID} from '@/helpers/randomId'
+import BaseCheckbox from '@/components/base/BaseCheckbox.vue'
 
-export default defineComponent({
-	name: 'fancycheckbox',
-	data() {
-		return {
-			checked: false,
-			checkBoxId: `fancycheckbox_${createRandomID()}`,
-		}
+defineProps({
+	modelValue: {
+		type: Boolean,
 	},
-	props: {
-		modelValue: {
-			required: false,
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
+	disabled: {
+		type: Boolean,
 	},
-	emits: ['update:modelValue', 'change'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.checked = modelValue
-
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		updateData(checked: boolean) {
-			this.checked = checked
-			this.$emit('update:modelValue', checked)
-			this.$emit('change', checked)
-		},
+	isBlock: {
+		type: Boolean,
+		default: false,
 	},
 })
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
 </script>
 
 
@@ -75,11 +54,7 @@ export default defineComponent({
 	}
 }
 
-input[type=checkbox] {
-	display: none;
-}
-
-.check {
+.label {
 	cursor: pointer;
 	position: relative;
 	margin: auto;
@@ -107,11 +82,11 @@ svg {
 	transition: all 0.2s ease;
 }
 
-.check:hover svg {
+.label:hover svg {
 	stroke: var(--primary);
 }
 
-.is-disabled .check:hover svg {
+.checkbox:checked .label:hover svg {
 	stroke: #c8ccd4;
 }
 
@@ -125,7 +100,7 @@ polyline {
 	stroke-dashoffset: 66;
 }
 
-input[type=checkbox]:checked + .check {
+.checkbox:checked + .label {
 	svg {
 		stroke: var(--primary);
 	}

src/components/list/partials/filters.vue

@@ -6,11 +6,11 @@
 			</fancycheckbox>
 			<fancycheckbox
 				v-model="filters.requireAllFilters"
-				@change="setFilterConcat()"
+				@update:model-value="setFilterConcat()"
 			>
 				{{ $t('filters.attributes.requireAll') }}
 			</fancycheckbox>
-			<fancycheckbox @change="setDoneFilter" v-model="filters.done">
+			<fancycheckbox @update:model-value="setDoneFilter" v-model="filters.done">
 				{{ $t('filters.attributes.showDoneTasks') }}
 			</fancycheckbox>
 			<fancycheckbox
@@ -42,7 +42,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				>
 					{{ $t('filters.attributes.enablePriority') }}
 				</fancycheckbox>
@@ -58,7 +58,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePercentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
 				</fancycheckbox>

src/components/tasks/partials/singleTaskInList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
-		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
+		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @update:model-value="markAsDone" v-model="task.done"/>
 		<span
 			v-if="showListColor && listColor !== ''"
 			:style="{backgroundColor: listColor }"

src/views/list/ListGantt.vue

@@ -2,7 +2,7 @@
 	<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
 		<template #header>
 			<card class="gantt-options">
-				<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
+				<fancycheckbox is-block v-model="showTaskswithoutDates">
 					{{ $t('list.gantt.showTasksWithoutDates') }}
 				</fancycheckbox>
 				<div class="range-picker">

src/views/list/ListTable.vue

@@ -197,7 +197,7 @@ import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
 import {useTaskList} from '@/composables/taskList'
-import type { ITask } from '@/models/task'
+import type { ITask } from '@/modelTypes/ITask'
 
 const ACTIVE_COLUMNS_DEFAULT = {
 	id: true,

src/views/namespaces/ListNamespaces.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'namespaces-list'">
 		<header class="namespace-header">
-			<fancycheckbox v-model="showArchived" @change="saveShowArchivedState" v-cy="'show-archived-check'">
+			<fancycheckbox v-model="showArchived" @update:model-value="saveShowArchivedState" v-cy="'show-archived-check'">
 				{{ $t('namespace.showArchived') }}
 			</fancycheckbox>
 

src/views/tasks/ShowTasks.vue

@@ -11,10 +11,10 @@
 					</x-button>
 				</template>
 			</datepicker-with-range>
-			<fancycheckbox @change="setShowNulls" class="mr-2">
+			<fancycheckbox @update:model-value="setShowNulls" class="mr-2">
 				{{ $t('task.show.noDates') }}
 			</fancycheckbox>
-			<fancycheckbox @change="setShowOverdue">
+			<fancycheckbox @update:model-value="setShowOverdue">
 				{{ $t('task.show.overdue') }}
 			</fancycheckbox>
 		</p>
@@ -58,7 +58,7 @@ import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import LlamaCool from '@/assets/llama-cool.svg?component'
-import type { ITask } from '@/models/task'
+import type { ITask } from '@/modelTypes/ITask'
 
 const store = useStore()
 const route = useRoute()