From d5a9ec20c00858e967fe11c2f1b6dc24a3fe88fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Fri, 13 Jan 2023 16:24:19 +0100 Subject: [PATCH 1/3] feat(Breadcrumb): add exact prop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/components/NcBreadcrumb/NcBreadcrumb.vue | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index a47ae7f80b..79d646d351 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue @@ -41,6 +41,7 @@ This component is meant to be used inside a Breadcrumbs component. @dragleave="dragLeave"> @@ -89,14 +90,25 @@ export default { type: String, required: true, }, + /** - * The router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to) - * If set, the breadcrumbs will be rendered by router-link. + * Route Location the link should navigate to when clicked on. + * @see https://v3.router.vuejs.org/api/#to */ to: { type: [String, Object], default: undefined, }, + + /** + * Route Location the link should navigate to when clicked on. + * @see https://v3.router.vuejs.org/api/#exact + */ + exact: { + type: Boolean, + default: false, + }, + /** * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links. */ @@ -104,6 +116,7 @@ export default { type: String, default: undefined, }, + /** * Set a css icon-class to show an icon instead of the title text. */ @@ -111,6 +124,7 @@ export default { type: String, default: '', }, + /** * Disable dropping on this breadcrumb. */ @@ -118,6 +132,7 @@ export default { type: Boolean, default: false, }, + /** * Force the actions to display in a three dot menu */ @@ -125,6 +140,7 @@ export default { type: Boolean, default: false, }, + /** * Open state of the Actions menu */ From a86b8bd1a3bc6f961bc83d698b9801fdc56adfea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Fri, 13 Jan 2023 16:30:54 +0100 Subject: [PATCH 2/3] fix(Breadcrumb): fix min width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/components/NcBreadcrumb/NcBreadcrumb.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index 79d646d351..03a47757fc 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue @@ -305,10 +305,12 @@ export default { overflow: hidden; color: var(--color-text-maxcontrast); padding: 12px; + min-width: $clickable-area; max-width: 100%; border-radius: var(--border-radius-pill); align-items: center; display: inline-flex; + justify-content: center; > span { overflow: hidden; From 64dd16547e84bcf1bd29e04c9f67b0bc0228d158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Fri, 13 Jan 2023 17:29:44 +0100 Subject: [PATCH 3/3] feat(Breadcrumb): bind attrs and listeners to the link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/components/NcBreadcrumb/NcBreadcrumb.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index 03a47757fc..0d8026ef28 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue @@ -43,7 +43,9 @@ This component is meant to be used inside a Breadcrumbs component. v-if="(title || icon) && !$slots.default" :exact="exact" :to="to" - :href="href"> + :href="href" + v-bind="$attrs" + v-on="$listeners"> @@ -93,6 +95,7 @@ export default { /** * Route Location the link should navigate to when clicked on. + * * @see https://v3.router.vuejs.org/api/#to */ to: { @@ -101,7 +104,8 @@ export default { }, /** - * Route Location the link should navigate to when clicked on. + * Match the complete route attributes (query and hash included) + * * @see https://v3.router.vuejs.org/api/#exact */ exact: {