create-juno/templates/vue-example/src/components/Table.vue at main · junobuild/create-juno · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script lang="ts" setup>
import { type Doc, listDocs } from '@junobuild/core'
import { onMounted, onUnmounted, ref } from 'vue'
import type { Note } from '@/types/note'
import Delete from '@/components/Delete.vue'

const items = ref<Doc<Note>[]>([])

const list = async () => {
  const { items: data } = await listDocs<Note>({
    collection: 'notes',
    filter: {},
  })

  items.value = data
}

onMounted(async () => {
  window.addEventListener('reload', list)
  await list()
})

onUnmounted(() => window.removeEventListener('reload', list))
</script>

<template>
  <div class="mt-8 w-full max-w-2xl dark:text-white" role="table">
    <div role="row">
      <span role="columnheader" aria-sort="none"> Entries </span>
    </div>

    <div class="py-2" role="rowgroup">
      <div
        v-bind:key="index"
        class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
        role="row"
        v-for="(item, index) in items"
      >
        <span role="cell" aria-rowindex="{index}" class="align-center flex min-w-max p-1">
          {{ index + 1 }}
        </span>
        <div role="cell" class="line-clamp-3 grow overflow-hidden">{{ item.data.text }}</div>
        <div role="cell" class="flex justify-center gap-2 align-middle">
          <a
            aria-label="Open data"
            rel="noopener noreferrer"
            :href="item.data.url"
            v-if="item.data.url !== undefined"
            target="_blank"
            class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
          >
            <svg
              width="16"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 29 29"
              fill="currentColor"
            >
              <g>
                <rect fill="none" class="opacity-25" width="29" height="29" />
                <path
                  d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
                />
              </g>
            </svg>
          </a>

          <Delete :doc="item" :reload="list" />
        </div>
      </div>
    </div>
  </div>
</template>