feat: add DocumentUserActions

components.d.ts

@@ -133,6 +133,8 @@ declare module 'vue' {
     DocumentThumbnail: typeof import('./src/components/Document/DocumentThumbnail.vue')['default']
     DocumentTranslatedContent: typeof import('./src/components/DocumentTranslatedContent.vue')['default']
     DocumentTypeCard: typeof import('./src/components/DocumentTypeCard.vue')['default']
+    DocumentUserActions: typeof import('./src/components/Document/DocumentUserActions/DocumentUserActions.vue')['default']
+    DocumentUserActionsEntry: typeof import('./src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue')['default']
     DocumentViewerAudio: typeof import('./src/components/Document/DocumentViewer/DocumentViewerAudio.vue')['default']
     DocumentViewerImage: typeof import('./src/components/Document/DocumentViewer/DocumentViewerImage.vue')['default']
     DocumentViewerJson: typeof import('./src/components/Document/DocumentViewer/DocumentViewerJson.vue')['default']

src/components/Document/DocumentUserActions/DocumentUserActions.vue

@@ -0,0 +1,51 @@
+<template>
+  <b-button-group class="document-user-actions">
+    <document-user-actions-entry v-if="showTags" :hide-label="hideLabels" icon="tag" label="Tags" value="3+" />
+    <document-user-actions-entry
+      v-if="showComments"
+      :hide-label="hideLabels"
+      icon="chats-teardrop"
+      label="Comments"
+      value="3+"
+    />
+    <document-user-actions-entry
+      v-if="showRecommended"
+      :hide-label="hideLabels"
+      icon="user-gear"
+      label="Recommended by"
+      value="3+"
+    />
+    <document-user-actions-entry v-if="showFolders" :hide-label="hideLabels" icon="folder" label="Folder" value="3+" />
+    <document-user-actions-entry v-if="showNotes" :hide-label="hideLabels" icon="note-blank" label="Notes" value="3+" />
+  </b-button-group>
+</template>
+<script setup>
+import DocumentUserActionsEntry from '@/components/Document/DocumentUserActions/DocumentUserActionsEntry'
+defineOptions({ name: 'DocumentUserActions' })
+defineProps({
+  showTags: {
+    type: Boolean,
+    default: true
+  },
+  showComments: {
+    type: Boolean,
+    default: false
+  },
+  showRecommended: {
+    type: Boolean,
+    default: false
+  },
+  showFolders: {
+    type: Boolean,
+    default: false
+  },
+  showNotes: {
+    type: Boolean,
+    default: false
+  },
+  hideLabels: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

src/components/Document/DocumentUserActions/DocumentUserActionsEntry.vue

@@ -0,0 +1,21 @@
+<template>
+  <icon-button
+    class="document-user-actions-entry bg-action-subtle text-action border-0"
+    variant="outline-action"
+    :icon-left="icon"
+    :label="value"
+    :aria-describedby="label"
+  />
+</template>
+<script setup>
+import IconButton from '@/components/IconButton'
+defineOptions({ name: 'DocumentUserActionsEntry' })
+defineProps({
+  label: { type: String, required: true },
+  value: { type: String, required: true },
+  icon: { type: String, required: true },
+  first: { type: Boolean }
+})
+</script>
+
+<style lang="scss" scoped></style>

src/stories/components/Document/DocumentUserActions/DocumentUserActions.stories.js

@@ -0,0 +1,26 @@
+import DocumentUserActions from '@/components/Document/DocumentUserActions/DocumentUserActions'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserActions',
+  tags: ['autodocs'],
+  component: DocumentUserActions,
+  args: {
+    showTags: true,
+    showComments: false,
+    showRecommended: false,
+    showFolders: false,
+    showNotes: false,
+    hideLabels: false
+  }
+}
+
+export const Default = {}
+export const Complete = {
+  args: {
+    showTags: true,
+    showComments: true,
+    showRecommended: true,
+    showFolders: true,
+    showNotes: true
+  }
+}

src/stories/components/Document/DocumentUserActions/DocumentUserActionsEntry.stories.js

@@ -0,0 +1,12 @@
+import DocumentUserActionsEntry from '@/components/Document/DocumentUserActions/DocumentUserActionsEntry'
+
+export default {
+  title: 'Components/Document/DocumentUserActions/DocumentUserActionsEntry',
+  tags: ['autodocs'],
+  component: DocumentUserActionsEntry,
+  args: {}
+}
+
+export const Default = {
+  args: { icon: 'tag', label: 'Tag', value: '3' }
+}