diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 589d7813b..99ff4ebdd 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,301 +1,164 @@
-
-
-
-
-
-
-
- -
-
-
- {{ text }}
-
-
- {{ crumb.text }}
-
-
- -
+ {{ item.text }}
+
+
+
+ {{ item.text }}
+
+
+
+
+ ›
+
+
+
+
+
+
-
- {{ crumb.text }}
-
-
-
-
-
-
+
+
+
+
+
+ {{ option.label }}
+
+
+
+ {{ option.label }}
+
+
+
+
+
+
›
+
+
+
+
+
-
+
-
+ >
+
+
@@ -72,6 +88,24 @@
type: [Object, String],
default: null,
},
+ overflowDirection: {
+ type: String,
+ default: 'end',
+ validator(value) {
+ return ['start', 'end'].includes(value);
+ },
+ },
+ showAtLeastOne: {
+ type: Boolean,
+ default: false,
+ },
+ /*listElement: {
+ type:String,
+ default :" ",
+ validator(value){
+ return ['', 'ol', 'ul'].includes(value);
+ }
+ }*/
},
data() {
return {
@@ -122,7 +156,15 @@
if (!element) {
return { width: 0, height: 0 };
}
- const { width, height } = element.getBoundingClientRect();
+ let { width, height } = element.getBoundingClientRect();
+
+ const style = element.currentStyle || window.getComputedStyle(element);
+ const marginX = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+ const marginY = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+
+ width += marginX;
+ height += marginY;
+
return { width, height };
},
/**
@@ -131,6 +173,7 @@
*/
setOverflowItems() {
const { list, listWrapper, moreButtonWrapper } = this.$refs;
+
if (!this.mounted || !listWrapper || !list) {
this.overflowItems = [];
return;
@@ -153,12 +196,13 @@
const itemSize = this.getSize(item);
itemsSizes.push(itemSize);
}
-
+ const indexSequence = [...Array(list.children.length).keys()];
+ const directionIndexes =
+ this.overflowDirection === 'start' ? indexSequence.reverse() : indexSequence;
const overflowItemsIdx = [];
- for (let i = 0; i < list.children.length; i++) {
- const item = list.children[i];
+ directionIndexes.forEach(i => {
const itemWidth = itemsSizes[i].width;
-
+ const item = list.children[i];
// If the item dont fit in the available space or if we have already
// overflowed items, we hide it. This means that once one item overflows,
// all the following items will be hidden.
@@ -176,7 +220,7 @@
maxHeight = itemHeight;
}
}
- }
+ });
// check if overflowed items would fit if the moreButton were not visible
const overflowedWidth = overflowItemsIdx.reduce(
@@ -188,10 +232,19 @@
const idx = overflowItemsIdx.pop();
const item = list.children[idx];
item.style.visibility = 'visible';
+ item.style.position = 'unset';
maxWidth += itemsSizes[idx].width;
+ maxHeight = Math.max(maxHeight, itemsSizes[idx].height);
}
}
-
+ if (this.showAtLeastOne && overflowItemsIdx.length === itemsSizes.length) {
+ const firstHiddenIdx = overflowItemsIdx.shift();
+ const firstHiddenItem = list.children[firstHiddenIdx];
+ firstHiddenItem.style.visibility = 'visible';
+ firstHiddenItem.style.position = 'unset';
+ maxWidth = availableWidth;
+ maxHeight = Math.max(maxHeight, itemsSizes[firstHiddenIdx].height);
+ }
const removedDividerWidth = this.fixDividersVisibility(overflowItemsIdx, itemsSizes);
if (removedDividerWidth) {
maxWidth -= removedDividerWidth;
@@ -203,6 +256,8 @@
list.style.maxWidth = `${maxWidth}px`;
list.style.maxHeight = `${maxHeight}px`;
},
+
+
/**
* Fixes the visibility of the dividers that are shown and hidden when the list overflows.
* The visible list should not end with a divider, and the overflowed items should not
@@ -217,16 +272,27 @@
}
const { list } = this.$refs;
+
const [firstOverflowedIdx] = overflowItemsIdx;
if (this.isDivider(this.items[firstOverflowedIdx])) {
overflowItemsIdx.shift();
}
- const lastVisibleIdx = firstOverflowedIdx - 1;
- if (this.isDivider(this.items[lastVisibleIdx])) {
- const dividerNode = list.children[lastVisibleIdx];
- dividerNode.style.visibility = 'hidden';
- return itemsSizes[lastVisibleIdx].width;
+ if (this.overflowDirection === 'start') {
+ const firstVisibleIdx = firstOverflowedIdx + 1;
+ if (this.isDivider(this.items[firstVisibleIdx])) {
+ const dividerNode = list.children[firstVisibleIdx];
+ dividerNode.style.visibility = 'hidden';
+ dividerNode.style.position = 'absolute';
+ return itemsSizes[firstVisibleIdx].width;
+ }
+ } else {
+ const lastVisibleIdx = firstOverflowedIdx - 1;
+ if (this.isDivider(this.items[lastVisibleIdx])) {
+ const dividerNode = list.children[lastVisibleIdx];
+ dividerNode.style.visibility = 'hidden';
+ return itemsSizes[lastVisibleIdx].width;
+ }
}
},
/**
@@ -259,20 +325,21 @@
.list-wrapper {
display: flex;
- justify-content: space-between;
+ justify-content: flex-start;
width: 100%;
}
.list {
position: relative;
display: flex;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
align-items: center;
- overflow: visible;
+ overflow: hidden;
}
.list > * {
flex-shrink: 0;
+ min-width: 0;
visibility: hidden;
}