Feat/highlight code

package.json

@@ -10,6 +10,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
     "nanoid": "^5.0.6",
     "vee-validate": "^4.6.2",

src/App.vue

@@ -8,7 +8,7 @@ onMounted(async () => await getCollections());
 </script>
 
 <template>
-  <div class="px-5 mx-auto max-w-4xl">
+  <div class="px-5 mx-auto py-9 max-w-4xl">
     <TitleApp title="Tomodo" />
     <router-view></router-view>
   </div>

src/components/ExampleJson.vue

@@ -1,23 +1,50 @@
 <script setup>
+import { ref } from "vue";
+import Switch from "./Switch.vue";
+
 /** @type {import('@/types').ExampleJsonProp} */
 const { json } = defineProps({
   json: Object,
 });
-</script>
-<template>
-  <pre
-    class="border border-gray-500 border-dashed p-3 rounded-md whitespace-pre-wrap"
-    v-if="json"
-    >{{ json }}
-      </pre
-  >
-  <pre class="border border-gray-500 border-dashed p-3 rounded-md" v-else>
+
+const showJson = ref(true);
+const example = `
 {
   "id": "",
   "name": "",
   "description": "",
   "todos": []
-}
-      </pre
-  >
+}`;
+</script>
+<template>
+  <div>
+    <template v-if="json">
+      <div class="flex gap-3 items-center py-3">
+        <Switch v-model:modelValue="showJson" id="show_json" />
+        <label for="show_json"> Show json format </label>
+      </div>
+      <highlightjs
+        :code="JSON.stringify(json, null, 2)"
+        v-if="showJson"
+        class="border border-gray-500 border-dashed p-3 rounded-md whitespace-pre-wrap"
+      >
+      </highlightjs>
+      <div v-else>
+        <TodoItem
+          v-for="(todo, index) in json.todos"
+          :key="index"
+          :todo="todo"
+          :preview="true"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <highlightjs
+        :code="example"
+        lang="json"
+        class="border border-gray-500 border-dashed p-3 rounded-md whitespace-pre-wrap"
+      >
+      </highlightjs>
+    </template>
+  </div>
 </template>

src/components/Switch.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref, watch, defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  id: {
+    type: String,
+  },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const checked = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    checked.value = newValue;
+  }
+);
+
+const toggle = () => {
+  checked.value = !checked.value;
+  emit("update:modelValue", checked.value);
+};
+</script>
+<template>
+  <label class="relative inline-flex items-center cursor-pointer">
+    <input
+      type="checkbox"
+      class="sr-only"
+      :checked="checked"
+      @change="toggle"
+      :id="props.id"
+    />
+    <div
+      :class="{
+        'bg-[#032836]': checked,
+        'bg-gray-300': !checked,
+      }"
+      class="w-12 h-7 py-1 rounded-full transition-colors duration-300 ease-in-out"
+    >
+      <span
+        :class="{
+          'translate-x-6': checked,
+          'translate-x-1': !checked,
+        }"
+        class="inline-block w-5 h-5 py-1 transform bg-white rounded-full transition-transform"
+      ></span>
+    </div>
+  </label>
+</template>

src/components/TodoItem.vue

@@ -4,16 +4,17 @@
  */
 
 /** @type {TodoItemProp} */
-const { todo, isSelected } = defineProps({
+const { todo, isSelected, preview } = defineProps({
   todo: Object,
   isSelected: Boolean,
+  preview: Boolean,
 });
 </script>
 <template>
   <div
-    class="border rounded-md py-3 my-2 px-2 cursor-pointer"
+    class="border rounded-md py-3 my-2 px-2 cursor-pointer hover:bg-gray-100 transition-colors ease-in duration-150"
     :class="{
-      'line-through': todo.isDone,
+      'line-through': todo.is_done,
       'bg-gray-100': isSelected,
     }"
   >
@@ -28,7 +29,7 @@ const { todo, isSelected } = defineProps({
     >
       <p class="text-xl">{{ todo.name }}</p>
     </div>
-    <div>
+    <div v-if="!preview">
       <button @click="$emit('selectTodo')" class="mr-2">edit</button>
       <button @click="$emit('deleteTodo')">delete</button>
     </div>

src/composables/useFormTodo.js

@@ -13,7 +13,7 @@ const formTodo = ref({
   id: `todo-${nanoid(7)}`,
   name: "",
   priority: "high",
-  isDone: false,
+  is_done: false,
   created_at: new Date(),
 });
 
@@ -23,7 +23,7 @@ const useFormTodo = () => {
       id: `todo-${nanoid(7)}`,
       name: "",
       priority: "high",
-      isDone: false,
+      is_done: false,
       created_at: new Date(),
     };
     isEditing.value = false;

src/composables/useTodo.js

@@ -9,7 +9,7 @@ const { collection, getDetailCollection } = useCollection();
 const useTodo = () => {
   const todos = computed(() => collection.value.todos);
   const doneTodos = computed(() =>
-    collection.value.todos?.filter((todo) => todo.isDone === true)
+    collection.value.todos?.filter((todo) => todo.is_done === true)
   );
 
   /** @param {Todo} todo */
@@ -28,7 +28,7 @@ const useTodo = () => {
   const markTodo = (index) => {
     const todo = collection.value.todos.at(index);
 
-    todo.isDone = !todo.isDone;
+    todo.is_done = !todo.is_done;
     collection.value.todos.splice(index, 1, todo);
 
     const rawCollection = toRaw(collection.value);