fix: render fallback no todos

fix: collection description

src/components/ExampleJson.vue

@@ -30,12 +30,17 @@ const example = `
       >
       </highlightjs>
       <div v-else>
-        <TodoItem
-          v-for="(todo, index) in json.todos"
-          :key="index"
-          :todo="todo"
-          :preview="true"
-        />
+        <template v-if="json.todos.length">
+          <TodoItem
+            v-for="(todo, index) in json.todos"
+            :key="index"
+            :todo="todo"
+            :preview="true"
+          />
+        </template>
+        <template v-else>
+          <p>No Todos</p>
+        </template>
       </div>
     </template>
     <template v-else>

src/composables/useCollection.js

@@ -19,10 +19,6 @@ const collection = ref({
 const collections = ref([]);
 
 const useCollection = () => {
-  const descriptionCollection = computed(() => {
-    return collection.value?.description.replace(/(?:\r\n|\r|\n)/g, "<br>");
-  });
-
   /** @param {Collection} collection */
   const addCollection = (collection) => {
     collections.value.push(collection);
@@ -70,7 +66,6 @@ const useCollection = () => {
   return {
     collections,
     collection,
-    descriptionCollection,
     addCollection,
     getCollections,
     getDetailCollection,

src/pages/collection/id.vue

@@ -12,8 +12,7 @@ import exportCollection from "@/utils/export-collection";
 
 const route = useRoute();
 const router = useRouter();
-const { deleteColllection, collection, descriptionCollection } =
-  useCollection();
+const { deleteColllection, collection } = useCollection();
 const { addTodo, markTodo, editTodo, deleteTodo, doneTodos, todos } = useTodo();
 const { formTodo, isEditing, resetForm: resetFormTodo } = useFormTodo();
 const vFormTodo = useForm({
@@ -131,9 +130,10 @@ onMounted(async () => {
       <hr />
       <p
         v-if="!!collection.description"
-        class="text-lg pb-3"
-        v-html="descriptionCollection"
-      ></p>
+        class="text-lg pb-3 whitespace-pre-line"
+      >
+        {{ collection.description }}
+      </p>
       <p v-else class="text-gray-500 pb-3">no description</p>
       <ProgressBar
         :totalTodos="todos.length"