diff --git a/src/components/DashboardWidget/DashboardWidget.vue b/src/components/DashboardWidget/DashboardWidget.vue
index 047a3f651e..bc1362ddfc 100644
--- a/src/components/DashboardWidget/DashboardWidget.vue
+++ b/src/components/DashboardWidget/DashboardWidget.vue
@@ -19,6 +19,122 @@
- along with this program. If not, see .
-
-->
+
+
+## Usage
+
+### Simplest example with custom item
+```vue
+
+
+
+ {{ item.title }}
+
+
+
+
+
+```
+
+### Complete example using DashboardWidgetItem
+
+```vue
+
+
+
+
+ Nothing to display
+
+
+
+
+
+```
+
+
+
@@ -90,42 +208,75 @@ export default {
},
props: {
+ /**
+ * An array containing the items to show (specific structure must be respected,
+ * except if you override item rendering in the default slot).
+ */
items: {
type: Array,
default: () => { return [] },
},
+ /**
+ * If this is set, a "show more" text is displayed on the widget's bottom.
+ * It's a link pointing to this URL.
+ */
showMoreUrl: {
type: String,
default: '',
},
+ /**
+ * The type of elements to show more.
+ */
showMoreText: {
type: String,
default: t('items'),
},
+ /**
+ * A boolean to put the widget in a loading state.
+ */
loading: {
type: Boolean,
default: false,
},
+ /**
+ * An object containing context menu entries that will be displayed for each item.
+ */
itemMenu: {
type: Object,
default: () => { return {} },
},
+ /**
+ * Whether both the items and the empty content message are shown.
+ * Usefull for e.g. showing "No mentions" and a list of elements.
+ */
showItemsAndEmptyContent: {
type: Boolean,
default: false,
},
+ /**
+ * The icon to show in the empty content area.
+ */
emptyContentIcon: {
type: String,
default: '',
},
+ /**
+ * The text to show in the empty content area.
+ */
emptyContentMessage: {
type: String,
default: '',
},
+ /**
+ * The icon to show in the half empty content area.
+ */
halfEmptyContentIcon: {
type: String,
default: 'icon-checkmark',
},
+ /**
+ * The text to show in the half empty content area.
+ */
halfEmptyContentMessage: {
type: String,
default: '',
diff --git a/src/components/DashboardWidgetItem/DashboardWidgetItem.vue b/src/components/DashboardWidgetItem/DashboardWidgetItem.vue
index 07cbbdd138..c33849b45b 100644
--- a/src/components/DashboardWidgetItem/DashboardWidgetItem.vue
+++ b/src/components/DashboardWidgetItem/DashboardWidgetItem.vue
@@ -20,6 +20,14 @@
-
-->
+
+
+### General description
+
+This component is meant to be used inside a DashboardWidget component.
+
+
+