Merge pull request #50 from Sysvale/hotfix/break-line-on-checklist

Hotfix/break line on checklist
Sysvale · Aug 24, 2021 · e1ed4e1 · e1ed4e1
2 parents 1d182c6 + 9231436
commit e1ed4e1
Showing 1 changed file with 31 additions and 18 deletions.
diff --git a/resources/js/modules/board/components/ChecklistForm.vue b/resources/js/modules/board/components/ChecklistForm.vue
@@ -6,23 +6,23 @@
 		>
 			Ainda não há nenhum item na sua checklist.
 		</div>
+
 		<v-list flat>
 			<v-list-item-group>
 				<v-list-item
 					v-for="(item, i) in value"
 					:key="i"
 				>
-					<template #default="{ active, toggle }">
+					<template #default="{ toggle }">
 						<v-list-item-action v-if="!editMode || selectedIndex !== i">
-							<v-checkbox v-model="item.done" @click="toggle"></v-checkbox>
+							<v-checkbox
+								v-model="item.done"
+								@click="toggle"
+							/>
 						</v-list-item-action>
 
 						<v-list-item-content>
-							<v-list-item-title
-								:class="{
-									'done': item.done
-								}"
-							>
+							<v-list-item-title :class="{ 'done': item.done }">
 								<span v-if="editMode && selectedIndex === i">
 									<v-text-field
 										v-model="editItem"
@@ -38,18 +38,21 @@
 										@blur="finishEdit(i)"
 									/>
 								</span>
+
 								<span v-else>
 									{{ item.description }}
 								</span>
 							</v-list-item-title>
 						</v-list-item-content>
+
 						<v-btn
 							v-if="!item.done && (!editMode || selectedIndex !== i)"
 							icon
 							@click="handleEdit(i)"
 						>
 							<v-icon>edit</v-icon>
 						</v-btn>
+
 						<v-btn
 							v-if="!editMode || selectedIndex !== i"
 							icon
@@ -61,6 +64,7 @@
 				</v-list-item>
 			</v-list-item-group>
 		</v-list>
+
 		<div class="d-flex mt-2">
 			<v-text-field
 				v-model="newItem"
@@ -70,6 +74,7 @@
 				class="mr-2"
 				@keydown.enter="handleAdd"
 			/>
+
 			<v-btn
 				@click="handleAdd"
 			>
@@ -78,6 +83,7 @@
 		</div>
 	</div>
 </template>
+
 <script>
 export default {
 	props: {
@@ -93,18 +99,18 @@ export default {
 			editItem: null,
 			editMode: false,
 			selectedIndex: -1,
-		}
+		};
 	},
 
 	computed: {
 		addButtonText() {
 			return 'Adicionar';
-		}
+		},
 	},
 
 	methods: {
 		handleAdd() {
-			if(this.newItem === null || this.newItem.trim() === '' ) return;
+			if (this.newItem === null || this.newItem.trim() === '') return;
 			this.$emit('input', [...(this.value || []), {
 				description: this.newItem,
 			}]);
@@ -113,19 +119,20 @@ export default {
 
 		handleRemove(index) {
 			this.$emit('input', [
-				...this.value.filter((_, i) => index !== i)
+				...this.value.filter((_, i) => index !== i),
 			]);
 		},
 
 		handleToggle(index) {
 			this.$emit('input', [
 				...this.value.map((item, i) => {
-					if(index === i) {
-						item.done = !!!item.done;
+					if (index === i) {
+						item.done = !item.done;
 					}
+
 					return item;
-				})
-			])
+				}),
+			]);
 		},
 
 		handleEdit(index) {
@@ -137,7 +144,7 @@ export default {
 		finishEdit(index) {
 			this.$emit('input', [
 				...this.value.map((item, i) => {
-					if(index === i) {
+					if (index === i) {
 						item.description = this.editItem;
 					}
 					return item;
@@ -147,12 +154,18 @@ export default {
 			this.selectedIndex = -1;
 			this.editItem = null;
 		},
-	}
-}
+	},
+};
 </script>
+
 <style scoped>
 .done {
 	text-decoration: line-through;
 	opacity: 0.3;
 }
+
+.v-list-item__subtitle, .v-list-item__title {
+	flex: 1 1 100%;
+	white-space: normal !important;
+}
 </style>