list.vue 1.34 KB
Newer Older
1
<template>
2
  <q-list class="item-content">
3
4
5
6
7
8
9
10
11
12
13
14
    <q-item
      v-for="annotation in configuredAnnotations"
      :id="'list' + annotation.strippedId"
      :key="annotation.strippedId"
      class="q-pa-sm q-pl-xs q-mb-xs"
      clickable
      padding="xs"
      @click="toggle(annotation); statusCheck();"
    >
      <q-item-section
        avatar
        class="q-mr-none"
15
      >
16
17
18
19
20
        <q-icon
          :name="getIcon(annotation.body['x-content-type'])"
          size="16px"
        />
      </q-item-section>
21

22
23
24
25
26
      <q-item-section>
        <AnnotationUrls :content="annotation.body.value" />
      </q-item-section>
    </q-item>
  </q-list>
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
</template>

<script>
import AnnotationUrls from '@/components/urls.vue';

export default {
  name: 'AnnotationList',
  components: {
    AnnotationUrls,
  },
  props: {
    getIcon: {
      type: Function,
      default: () => null,
    },
42
    configuredAnnotations: {
43
44
45
46
47
48
49
50
51
52
53
54
55
56
      type: Array,
      default: () => [],
    },
    toggle: {
      type: Function,
      default: () => null,
    },
    statusCheck: {
      type: Function,
      default: () => null,
    },
  },
};
</script>
57
58
59
60
61
62
63
64
65

<style lang="scss" scoped>
.q-item__section--avatar {
  min-width: 24px;
}

.q-item__section--side {
  padding-right: unset;
}
66
67
68
69
70
71
72
73
74
75

.q-item {
  min-height: unset;
}

.item-content {
  height: 100vh;
  overflow: auto;
  padding: 8px;
}
76
</style>