refactor(@dpc-sdp/ripple-ui-core): ♻️ rework breadcrumbs for 4+ terms

dpc-sdp · Aug 16, 2024 · c143343 · c143343
1 parent 22beb71
commit c143343
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.css
@@ -10,9 +10,9 @@
   display: inline-block;
   margin-left: var(--local-horizontal-offset);
   padding-top: calc(var(--rpl-sp-3) - var(--rpl-border-1));
-  padding-right: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+  padding-right: calc(var(--rpl-sp-4) - var(--rpl-border-1));
   padding-bottom: calc(var(--rpl-sp-3) - var(--rpl-border-1));
-  padding-left: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+  padding-left: calc(var(--rpl-sp-4) - var(--rpl-border-1));
   max-width: calc(100% - var(--local-horizontal-offset) * 2);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -21,6 +21,8 @@
   @media (--rpl-bp-m) {
     --local-horizontal-offset: var(--rpl-sp-4);
 
+    padding-right: calc(var(--rpl-sp-5) - var(--rpl-border-1));
+    padding-left: calc(var(--rpl-sp-5) - var(--rpl-border-1));
     height: auto;
     overflow: visible;
     white-space: normal;
@@ -84,6 +86,22 @@
   &--beside-exit {
     --local-width-spacer: 124px;
 
-    max-width: calc(100% - var(--local-horizontal-offset) * 3 - var(--local-width-spacer));
+    max-width: calc(
+      100% - var(--local-horizontal-offset) * 3 - var(--local-width-spacer)
+    );
   }
 }
+
+.rpl-breadcrumbs__collapse-link::before {
+  content: '>';
+  display: inline;
+  padding: 0 var(--rpl-sp-2);
+}
+
+.rpl-breadcrumbs__collapse-link-trigger:hover {
+  text-decoration: underline;
+}
+
+.rpl-breadcrumbs__item--collapsed {
+  display: none;
+}
diff --git a/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue b/packages/ripple-ui-core/src/components/breadcrumbs/RplBreadcrumbs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import RplTextLink from '../text-link/RplTextLink.vue'
 import {
   useRippleEvent,
@@ -38,6 +39,16 @@ const handleClick = (item, index) => {
     { global: true }
   )
 }
+
+const collapseInnerLinks = ref()
+collapseInnerLinks.value = props.items.length > 3
+
+const firstItem = (index: number) => index === 0
+const lastItem = (index: number) => index === props.items.length - 1
+
+const toggleCollapsed = () => {
+  collapseInnerLinks.value = 0
+}
 </script>
 
 <template>
@@ -49,26 +60,49 @@ const handleClick = (item, index) => {
       'rpl-breadcrumbs--beside-exit': props.besideQuickExit
     }"
   >
-    <ol v-if="items.length > 0" class="rpl-breadcrumbs__items rpl-type-p">
+    <ol
+      v-if="items.length > 0"
+      :class="[
+        'rpl-breadcrumbs__items',
+        'rpl-type-p-small',
+        { 'rpl-breadcrumbs__items--collapsed': collapseInnerLinks }
+      ]"
+    >
       <li
         v-for="(item, index) of items"
         :key="index"
-        :class="{
-          'rpl-breadcrumbs__item': true,
-          'rpl-breadcrumbs__item--parent': index === items.length - 2
-        }"
+        :class="[
+          'rpl-breadcrumbs__item',
+          { 'rpl-breadcrumbs__item--parent': index === items.length - 1 },
+          {
+            'rpl-breadcrumbs__item--first':
+              firstItem(index) && collapseInnerLinks
+          },
+          {
+            'rpl-breadcrumbs__item--collapsed':
+              !firstItem(index) && !lastItem(index) && collapseInnerLinks
+          }
+        ]"
       >
         <RplTextLink
-          v-if="index < items.length - 1"
           :url="item.url"
           :theme="false"
           class="rpl-breadcrumbs__item-link"
           @click="() => handleClick(item, index)"
           >{{ item.text }}</RplTextLink
         >
-        <span v-else class="rpl-breadcrumbs__item--current">{{
-          item.text
-        }}</span>
+        <span
+          v-if="firstItem(index) && collapseInnerLinks"
+          class="rpl-breadcrumbs__collapse-link"
+        >
+          <RplTextLink
+            url=""
+            :theme="false"
+            class="rpl-breadcrumbs__collapse-link-trigger"
+            @click.prevent="() => toggleCollapsed()"
+            >&hellip;</RplTextLink
+          >
+        </span>
       </li>
     </ol>
   </nav>