Merge pull request #3654 from nextcloud/feat/bread

Breadcrumb: add exact prop and fix style

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -41,8 +41,11 @@ This component is meant to be used inside a Breadcrumbs component.
  @dragleave="dragLeave">
  <element :is="tag"
  v-if="(title || icon) && !$slots.default"
+ :exact="exact"
  :to="to"
- :href="href">
+ :href="href"
+ v-bind="$attrs"
+ v-on="$listeners">
  <!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
  <slot name="icon">
  <span v-if="icon" :class="icon" class="icon" />
@@ -89,42 +92,59 @@ 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,
  },
+
+ /**
+ * Match the complete route attributes (query and hash included)
+ *
+ * @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.
  */
  href: {
  type: String,
  default: undefined,
  },
+
  /**
  * Set a css icon-class to show an icon instead of the title text.
  */
  icon: {
  type: String,
  default: '',
  },
+
  /**
  * Disable dropping on this breadcrumb.
  */
  disableDrop: {
  type: Boolean,
  default: false,
  },
+
  /**
  * Force the actions to display in a three dot menu
  */
  forceMenu: {
  type: Boolean,
  default: false,
  },
+
  /**
  * Open state of the Actions menu
  */
@@ -289,10 +309,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;