vue.in.oxygen.html

vue.in.oxygen.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id='app'>
	<v-app>
		<template>
			<v-container style="max-width: 500px">
				<v-text-field
							  v-model="newTask"
							  label="What are you working on?"
							  solo
							  @keydown.enter="create"
							  >
					<template v-slot:append>
						<v-fade-transition>
							<v-icon
									v-if="newTask"
									@click="create"
									>
								add_circle
							</v-icon>
						</v-fade-transition>
					</template>
				</v-text-field>

				<h2 class="text-h4 success--text pl-4">
					Tasks:&nbsp;
					<v-fade-transition leave-absolute>
						<span :key="`tasks-${tasks.length}`">
							{{ tasks.length }}
						</span>
					</v-fade-transition>
				</h2>

				<v-divider class="mt-4"></v-divider>

				<v-row
					   class="my-1"
					   align="center"
					   >
					<strong class="mx-4 info--text text--darken-2">
						Remaining: {{ remainingTasks }}
					</strong>

					<v-divider vertical></v-divider>

					<strong class="mx-4 success--text text--darken-2">
						Completed: {{ completedTasks }}
					</strong>

					<v-spacer></v-spacer>

					<v-progress-circular
										 :value="progress"
										 class="mr-2"
										 ></v-progress-circular>
				</v-row>

				<v-divider class="mb-4"></v-divider>

				<v-card v-if="tasks.length > 0">
					<v-slide-y-transition
										  class="py-0"
										  group
										  tag="v-list"
										  >
						<template v-for="(task, i) in tasks">
							<v-divider
									   v-if="i !== 0"
									   :key="`${i}-divider`"
									   ></v-divider>

							<v-list-item :key="`${i}-${task.text}`">
								<v-list-item-action>
									<v-checkbox
												v-model="task.done"
												:color="task.done && 'grey' || 'primary'"
												>
										<template v-slot:label>
											<div
												 :class="task.done && 'grey--text' || 'primary--text'"
												 class="ml-4"
												 v-text="task.text"
												 ></div>
										</template>
									</v-checkbox>
								</v-list-item-action>

								<v-spacer></v-spacer>

								<v-scroll-x-transition>
									<v-icon
											v-if="task.done"
											color="success"
											>
										mdi-check
									</v-icon>
								</v-scroll-x-transition>
							</v-list-item>
						</template>
					</v-slide-y-transition>
				</v-card>
			</v-container>
		</template>	
	</v-app>
</div>