Skip to content

Commit 24bca18

Browse files
caro3801caro3801
committed
feat : add document action entry and document actions
1 parent 7739ab5 commit 24bca18

File tree

6 files changed

+196
-45
lines changed

6 files changed

+196
-45
lines changed

‎components.d.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export {}
77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10+
'(feat': addv document action entry and document actions)
1011
2: typeof import('./src/components/Document/DocumentMetadata/DocumentMetadataActions/DocumentMetadataActionsEntry copy 2.vue')['default']
1112
3: typeof import('./src/components/Document/DocumentLocalSearch/DocumentLocalSearch copy 3.vue')['default']
1213
Api: typeof import('./src/components/Api.vue')['default']
@@ -87,7 +88,6 @@ declare module 'vue' {
8788
ColumnFilterBadge: typeof import('./src/components/ColumnFilterBadge.vue')['default']
8889
ColumnFilterDropdown: typeof import('./src/components/ColumnFilterDropdown.vue')['default']
8990
ContentTypeBadge: typeof import('./src/components/ContentTypeBadge.vue')['default']
90-
copy: typeof import('./src/components/PageTable/PageTableTr copy.vue')['default']
9191
DismissableAlert: typeof import('./src/components/Dismissable/DismissableAlert.vue')['default']
9292
DismissableToastBody: typeof import('./src/components/Dismissable/DismissableToastBody.vue')['default']
9393
DisplayContentLength: typeof import('./src/components/Display/DisplayContentLength.vue')['default']
@@ -101,7 +101,13 @@ declare module 'vue' {
101101
DisplayUser: typeof import('./src/components/Display/DisplayUser.vue')['default']
102102
DisplayVisibility: typeof import('./src/components/Display/DisplayVisibility.vue')['default']
103103
DocumentActionButton: typeof import('./src/components/DocumentActionButton.vue')['default']
104+
DocumentActionLink: typeof import('./src/components/DocumentActionLink.vue')['default']
104105
DocumentActions: typeof import('./src/components/DocumentActions.vue')['default']
106+
DocumentActionsEntry: typeof import('./src/components/DocumentActionsEntry.vue')['default']
107+
DocumentActionsEntryDownload: typeof import('./src/components/DocumentActionsEntryDownload.vue')['default']
108+
DocumentActionsEntryDownloadDropdown: typeof import('./src/components/DocumentActionsEntryDownloadDropdown.vue')['default']
109+
DocumentActionsEntryDownloadPopover: typeof import('./src/components/DocumentActionsEntryDownloadPopover.vue')['default']
110+
DocumentActionsGroup: typeof import('./src/components/DocumentActionsGroup.vue')['default']
105111
DocumentAttachments: typeof import('./src/components/DocumentAttachments.vue')['default']
106112
DocumentCard: typeof import('./src/components/Document/DocumentCard/DocumentCard.vue')['default']
107113
DocumentCardCheckbox: typeof import('./src/components/Document/DocumentCard/DocumentCardCheckbox.vue')['default']
@@ -299,6 +305,7 @@ declare module 'vue' {
299305
WidgetTreeMap: typeof import('./src/components/Widget/WidgetTreeMap.vue')['default']
300306
}
301307
export interface ComponentCustomProperties {
308+
vBModal: typeof import('bootstrap-vue-next')['vBModal']
302309
vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
303310
}
304311
}

‎src/components/DocumentActionButton.vue renamed to ‎src/components/DocumentActionsEntry.vue

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
:id="btnId"
44
:icon-left="iconName"
55
:icon-left-weight="iconWeight"
6-
class="btn"
7-
:class="btnClassDefinition"
8-
:tooltip-placement="tooltipPlacement"
6+
:icon-left-hover-weight="iconHoverWeight"
97
:label="label"
108
hide-label
9+
:tooltipPlacement="tooltipPlacement"
10+
square
11+
variant="outline-tertiary"
12+
class="document-actions-entry border-0 "
13+
:class="{'document-actions-entry--filled': isFilled}"
1114
:disabled="disabled"
1215
/>
1316
</template>
@@ -18,7 +21,7 @@ import uniqueId from 'lodash/uniqueId'
1821
1922
import IconButton from '@/components/IconButton'
2023
21-
defineOptions({ name: 'DocumentActionsButton' })
24+
defineOptions({ name: 'DocumentActionsEntry' })
2225
const props = defineProps({
2326
/**
2427
* Icon name
@@ -39,7 +42,7 @@ const props = defineProps({
3942
*/
4043
btnClass: {
4144
type: String,
42-
default: 'btn-link btn-sm'
45+
default: 'btn-sm'
4346
},
4447
/**
4548
* Button is filled
@@ -50,17 +53,13 @@ const props = defineProps({
5053
/**
5154
* Class to apply to the action button when document is filled
5255
*/
53-
filledBtnClass: {
56+
tooltipPlacement: {
5457
type: String,
55-
default: 'starred'
58+
default: 'bottom'
5659
},
5760
/**
58-
* Class to apply to the action button when document is filled
61+
* Disable button
5962
*/
60-
tooltipPlacement: {
61-
type: String,
62-
default: 'top'
63-
},
6463
disabled: {
6564
type: Boolean,
6665
default: false
@@ -80,4 +79,17 @@ function classAttributeToObject(str) {
8079
}
8180
8281
const iconWeight = computed(() => (props.isFilled ? 'fill' : 'regular'))
82+
const iconHoverWeight = computed(() => (props.isFilled ? 'fill' : 'bold'))
8383
</script>
84+
<style lang="scss" scoped>
85+
86+
.document-actions-entry {
87+
&--filled {
88+
color: $primary;
89+
}
90+
&:hover{
91+
color : $primary;
92+
}
93+
// this will compile to: --pf-primary-color: #000000;
94+
}
95+
</style>

‎src/components/DocumentActionsGroup.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<b-button-group class="document-actions align-items-center" :vertical="vertical" size="sm">
3+
<slot name="selection" v-bind="{document}">
4+
5+
</slot>
6+
<slot name="actions" v-bind="{document}">
7+
<document-actions-entry icon-name="star" label="Star" @click="clickStar" :tooltipPlacement="tooltipPlacement" :isFilled="isStarred"/>
8+
<document-actions-entry icon-name="share" label="Share" @click="clickShare" :tooltipPlacement="tooltipPlacement"/>
9+
<document-actions-entry icon-name="download" :disabled="isDownloadAllowed" @click="clickDownload" :label="downloadLabel" :tooltipPlacement="tooltipPlacement" />
10+
<document-actions-entry icon-name="arrows-out-simple" label="Expand" @click="clickExpand" :tooltipPlacement="tooltipPlacement"/>
11+
</slot>
12+
13+
</b-button-group>
14+
</template>
15+
16+
<script setup>
17+
import { findIndex, uniqueId } from 'lodash'
18+
import { mapState, useStore } from 'vuex'
19+
import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
20+
import { computed } from 'vue'
21+
import { useI18n } from 'vue-i18n'
22+
import RouterLinkPopup from '@/components/RouterLinkPopup'
23+
import DocumentActionsEntry from '@/components/DocumentActionsEntry'
24+
defineProps({
25+
/**
26+
* The selected document
27+
*/
28+
document: {
29+
type: Object
30+
},
31+
/**
32+
* Use a vertical layoutk
33+
*/
34+
vertical: {
35+
type: Boolean
36+
},
37+
/**
38+
* Tooltip's placement on each action using Floating UI: https://floating-ui.com/docs/tutorial#placements
39+
* @values 'auto', 'auto-start', 'auto-end', 'top', 'right', 'bottom', 'left', 'top-start', 'right-start', 'bottom-start', 'left-start', 'top-end', 'right-end', 'bottom-end', 'left-end'
40+
*/
41+
tooltipPlacement: {
42+
type: String,
43+
default: 'top'
44+
},
45+
/**
46+
* True if download is allowed for the document
47+
*/
48+
isDownloadAllowed: {
49+
type: Boolean
50+
},
51+
/**
52+
* True if download is allowed for the document
53+
*/
54+
isStarred: {
55+
type: Boolean
56+
}
57+
})
58+
59+
const { t } = useI18n()
60+
61+
const emit = defineEmits(['click-star','click-download','click-share','click-expand'])
62+
63+
64+
65+
async function clickStar() {
66+
emit("click-star", {id:document.id})
67+
}
68+
async function clickDownload() {
69+
emit("click-download", {id:document.id})
70+
}
71+
async function clickShare() {
72+
emit("click-share", {id:document.id})
73+
}
74+
async function clickExpand() {
75+
emit("click-expand", {id:document.id})
76+
}
77+
78+
</script>
79+
80+
<style lang="scss" scoped>
81+
.document-actions {
82+
.btn-group {
83+
.btn:not(:first-of-type) {
84+
border-top-right-radius: 0;
85+
border-bottom-right-radius: 0;
86+
}
87+
88+
.dropdown:last-of-type {
89+
display: inline-flex;
90+
91+
&:deep(.btn) {
92+
border-top-left-radius: 0;
93+
border-bottom-left-radius: 0;
94+
}
95+
}
96+
}
97+
}
98+
</style>

‎src/stories/components/DocumentActionsButton.stories.js

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/stories/components/DocumentActionsEntry.stories.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import DocumentActionsEntry from '@/components/DocumentActionsEntry'
2+
3+
export default {
4+
components: { DocumentActionsEntry },
5+
title: 'Components/DocumentActionsGroup/Entry',
6+
component: DocumentActionsEntry,
7+
tags: ['autodocs']
8+
}
9+
10+
export const Default = {
11+
args: {
12+
iconName: 'star',
13+
label: 'Star',
14+
tooltipPlacement: 'right',
15+
tooltipLabel: 'Test',
16+
filledBtnClass: 'starred',
17+
isFilled: false
18+
}
19+
}
20+
export const Filled = {
21+
args: {
22+
iconName: 'star',
23+
label: 'Star',
24+
tooltipLabel: 'Test',
25+
tooltipPlacement: 'right',
26+
isFilled: true
27+
}
28+
}
29+

‎src/stories/components/DocumentActionsGroup.stories.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import IconButton from '@/components/IconButton'
2+
import { vueRouter } from 'storybook-vue3-router'
3+
import DocumentActionsGroup from '@/components/DocumentActionsGroup'
4+
const routes = [{ name: 'document-modal',path: '/document-modal' }]
5+
6+
export default {
7+
decorators: [vueRouter(routes)],
8+
components: { DocumentActionsGroup },
9+
title: 'Components/DocumentActionsGroup',
10+
component: IconButton,
11+
tags: ['autodocs'],
12+
render: (args) => ({
13+
components: {
14+
DocumentActionsGroup
15+
},
16+
setup() {
17+
return {
18+
args
19+
}
20+
},
21+
template: `
22+
<document-actions-group v-bind="args" />
23+
`
24+
})
25+
}
26+
27+
export const Default = {
28+
args: {
29+
document: {
30+
id:"test"
31+
},
32+
vertical: false,
33+
tooltipPlacement: 'top',
34+
isStarred: false,
35+
isDownloadAllowed: false
36+
}
37+
}

0 commit comments

Comments
 (0)