Skip to content

Commit

Permalink
new commits
Browse files Browse the repository at this point in the history
  • Loading branch information
@shruti862
shruti862 committed Dec 12, 2024
1 parent cd730f1 commit 77c86a0
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 74 deletions.
171 changes: 115 additions & 56 deletions lib/KBreadcrumbs.vue
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,66 @@
<template>

<KListWithOverflow
overflowDirection="start"
:items="preparedCrumbs"
>
<!-- Render individual breadcrumb items -->
<template #item="{ item }">
<li>
<KRouterLink
v-if="item.link"
:text="item.text"
:to="item.link"
>
<div class="breadcrumbs">
<KListWithOverflow
overflowDirection="start"
:items="preparedCrumbs"
>
<!-- Render individual breadcrumb items -->
<template #item="{ item }">
<li>
<KRouterLink
v-if="item.link"
:text="item.text"
:to="item.link"
>

<template #text="{ text }">
<span class="breadcrumbs-crumb-text">{{ text }}</span>
</template>
</KRouterLink>
<span v-else>{{ item.text }}</span>
</li>
</template>


<template #text="{ text }">
<span class="breadcrumbs-crumb-text">{{ text }}</span>
<template #divider>
<span class="breadcrumbs-divider">›</span>
</template>


<template #more="{ overflowItems }">
<KIconButton
size="small"
icon="chevronDown"
appearance="raised-button"
>
<template #menu>
<KDropdownMenu
:options="overflowItems
.filter(item => item.type !== 'divider')
.map(item => ({
label: item.text,
link: item.link ? item.link : null
}))"
>
<template #option="{ option }">
<template v-if="option.link">
<a :href="option.link" class="dropdown-link" target="_blank" rel="noopener noreferrer">
{{ option.label }}
</a>
</template>
<template v-else>
<span class="dropdown-text">{{ option.label }}</span>
</template>
</template>
</KDropdownMenu>
</template>
</KRouterLink>
<span v-else>{{ item.text }}</span>
</li>
</template>

<!-- Render the separator between items -->
<!-- issue :: but right now it is not placing separators between items of list -->
<template #divider>
<span class="breadcrumbs-divider">›</span>
</template>

<!-- Render the "more" overflow dropdown and its separator -->
<template #more="{ overflowItems }">
<KIconButton
size="small"
icon="chevronDown"
appearance="raised-button"
>
<template #menu>
<!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->
<KDropdownMenu
:options="overflowItems
.filter(item => item.type !== 'separator') // Filter out separators
.map(item => ({
label: item.text, // Display 'text' in the menu
link: item.link ? item.link : null
}))"
/>
</template>
</KIconButton>
<span class="breadcrumbs-divider">›</span>
</template>
</KListWithOverflow>
</KIconButton>

</template>
</KListWithOverflow>

</div>

</template>

Expand All @@ -71,29 +83,76 @@
if (!this.showSingleItem && crumbs.length <= 1) {
return [];
}
// Add separators between items
return crumbs.flatMap((item, index) =>
index > 0 ? [{ type: 'separator' }, item] : [item]
);
// Add dividers between items
return crumbs.flatMap((item, index) => (index > 0 ? [{ type: 'divider' }, item] : [item]));
},
},
mounted() {
console.log('Prepared Crumbs on Mount:', this.preparedCrumbs);
},
};
</script>

<style scoped>
.breadcrumbs-divider {
margin: 0 10px;
color: black; /* Adjust color for the ">" separator */
<style scoped lang="scss">
$crumb-max-width: 300px;
.breadcrumbs {
height: 32px;
margin-top: 8px;
margin-bottom: 8px;
overflow: visible;
font-size: 16px;
font-weight: bold;
line-height: 32px;
white-space: nowrap;
}
.breadcrumbs-crumb-text {
color: #007aff; /* Link color */
display: inline-block;
width: 100%;
max-width: $crumb-max-width;
overflow: hidden;
font-weight: bold;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.breadcrumbs-divider {
margin-right: 8px;
margin-left: 8px;
color: #000000;
}
.breadcrumbs-crumb-text {
font-weight: bold;
color: #007aff;
text-decoration: none;
}
li {
position: static;
display: inline;
}
.dropdown-link {
display: inline-block;
padding: 16px;
font-size: 16px;
font-weight: bold;
color: #4368f5;
text-decoration: underline;
cursor: pointer;
background-color: transparent;
}
/* Dropdown text styles (non-clickable items) */
.dropdown-text {
display: inline-block;
padding: 16px;
font-size: 16px;
color: #000000;
background-color: transparent;
}
</style>
11 changes: 5 additions & 6 deletions lib/KDropdownMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,11 @@
>
<!-- Slot to set a header to the dropdown menu -->
<slot name="header"></slot>
<UiMenu
ref="menu"
:options="options"
:hasIcons="hasIcons"
@select="handleSelection"
/>
<UiMenu ref="menu" :options="options" :hasIcons="hasIcons" @select="handleSelection">
<template #option="{ option }">
<slot name="option" :option="option"></slot>
</template>
</UiMenu>
</UiPopover>
</div>

Expand Down
36 changes: 24 additions & 12 deletions lib/KListWithOverflow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,45 @@
class="list-wrapper"
:style="appearanceOverrides"
>
<!-- Render More Button Before List for 'start' Direction -->
<div
v-if="overflowDirection === 'start'"
ref="moreButtonWrapper"
class="more-button-wrapper"
>
<slot
v-if="isMoreButtonVisible"
name="more"
:overflowItems="overflowItems"
></slot>
</div>

<div
ref="list"
class="list"
>
<template v-for="(item) in items">
<!-- @slot Slot for rendering divider items -->
<!-- Divider Slot -->
<slot
v-if="isDivider(item)"
name="divider"
:divider="item"
>
</slot>
<!-- @slot Slot responsible of rendering each item in the visible list -->
></slot>
<!-- Item Slot -->
<slot
v-else
name="item"
:item="item"
></slot>
</template>
</div>

<!-- Render More Button After List for 'end' Direction -->
<div
v-if="overflowDirection === 'end'"
ref="moreButtonWrapper"
class="more-button-wrapper"
:class="{ 'start-button': overflowDirection === 'start' }"
>
<!-- @slot Slot responsible of rendering the "see more" button. This slot receives as prop a list `overflowItems` with items that dont fit into the visible list.-->
<slot
v-if="isMoreButtonVisible"
name="more"
Expand All @@ -42,6 +55,7 @@
</template>



<script>
import throttle from 'lodash/throttle';
Expand Down Expand Up @@ -73,7 +87,7 @@
},
overflowDirection: {
type: String,
default: 'end',
default: 'start',
validator(value) {
return ['start', 'end'].includes(value);
},
Expand Down Expand Up @@ -156,7 +170,6 @@
const itemsSizes = [];
// Collect the sizes of all items
for (let i = 0; i < list.children.length; i++) {
const item = list.children[i];
const itemSize = this.getSize(item);
Expand Down Expand Up @@ -266,15 +279,15 @@
<style scoped>
.list-wrapper {
display: flex;
justify-content: space-between;
justify-content:flex-start;
width: 100%;
}
.list {
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items: center;
}
Expand All @@ -285,12 +298,11 @@
.more-button-wrapper {
visibility: visible;
order: 0; /* Ensure it remains in its original position for keyboard navigation */
}
/* When the 'start-button' class is added, position visually at the start */
.more-button-wrapper.start-button {
order: -1; /* Moves visually to the start */
order:-1;
z-index: 1; /* Ensure it's in front if needed */
}
Expand Down

0 comments on commit 77c86a0

Please sign in to comment.