@britecore/bc-design-system 3.32.1 → 3.32.2

package/packages/breadcrumb/src/breadcrumb.vue

@@ -1,9 +1,10 @@
-<template>
-  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
-    <slot></slot>
-  </div>
-</template>
 <script>
+  import { get } from 'lodash';
+
+  const ITEMS_AFTER_TRUNCATION = 3; // items are partitioned in the format [0], [rest of the items - ITEMS_AFTER_TRUNCATION], [ITEMS_AFTER_TRUNCATION]
+
+  const isBreadcrumbItem = node => get(node, 'componentOptions.tag') === 'el-breadcrumb-item';
+
   export default {
     name: 'ElBreadcrumb',
 
@@ -18,6 +19,48 @@
       if (items.length) {
         items[items.length - 1].setAttribute('aria-current', 'page');
       }
+    },
+
+    render() {
+      const breadcrumbItems = this.$slots.default && this.$slots.default.length
+        ? this.$slots.default.filter(vnode => isBreadcrumbItem(vnode))
+        : [];
+      const [itemsBeforeTruncation, itemsBeingTruncated, itemsAfterTruncation] = [[], [], []];
+
+      // partition the passed items into arrays of lengths
+      // `1`, `length - 1 - ITEMS_AFTER_TRUNCATION`  and `ITEMS_AFTER_TRUNCATION` respectively
+      for (let item of breadcrumbItems) {
+        if (itemsBeforeTruncation.length < 1) itemsBeforeTruncation.push(item);
+        else if (itemsAfterTruncation.length < ITEMS_AFTER_TRUNCATION) itemsAfterTruncation.push(item);
+        else {
+          itemsBeingTruncated.push(itemsAfterTruncation.shift());
+          itemsAfterTruncation.push(item);
+        }
+      }
+
+      // no need to add the dropdown if only a single item is being truncated
+      const truncatedItemsComponent = itemsBeingTruncated.length > 1 ? (
+        <el-breadcrumb-item>
+          <el-dropdown placement="bottom">
+            <a class="el-dropdown-link">
+              &nbsp;<fa-icon icon={['far', 'ellipsis-h']}></fa-icon>&nbsp;
+            </a>
+            <el-dropdown-menu class="el-breadcrumb__truncation-dropdown" slot="dropdown">
+              {itemsBeingTruncated.map(item => (
+                <el-dropdown-item>{item}</el-dropdown-item>
+              ))}
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-breadcrumb-item>
+      ) : itemsBeingTruncated;
+
+      return (
+        <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
+          { itemsBeforeTruncation }
+          { truncatedItemsComponent }
+          { itemsAfterTruncation }
+        </div>
+      );
     }
   };
 </script>

package/packages/data-table/src/DataTable.vue

@@ -741,7 +741,9 @@ export default {
       },
       set: function(val) {
         this.paginatedRows.forEach(row => {
+          if (row.$selected === val) return;
           row.$selected = val;
+          this.handleRowSelected(row);
         });
       }
     },

package/packages/theme-chalk/lib/breadcrumb.css

@@ -1 +1 @@
-:export{xsOnly:(max-width: 767px);smOnly:(min-width: 768px) and (max-width: 991px);smAndDown:(max-width: 991px);smAndUp:(min-width: 768px);mdOnly:(min-width: 992px) and (max-width: 1199px);mdAndDown:(max-width: 1199px);mdAndUp:(min-width: 992px);lgOnly:(min-width: 1200px) and (max-width: 1919px);lgAndDown:(max-width: 1919px);lgAndUp:(min-width: 1200px);xlOnly:(min-width: 1920px)}.el-breadcrumb{font-size:14px;line-height:1}.el-breadcrumb::after,.el-breadcrumb::before{display:table;content:""}.el-breadcrumb::after{clear:both}.el-breadcrumb__separator{margin:auto 9px;font-weight:700;color:#82a9b0}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#2b4145;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__inner{color:#2b4145;margin-top:auto;margin-bottom:auto}.el-breadcrumb__inner a,.el-breadcrumb__inner.is-link{font-weight:700;text-decoration:none;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#182426}.el-breadcrumb__inner a:hover,.el-breadcrumb__inner.is-link:hover{color:#08859b;cursor:pointer}
+:export{xsOnly:(max-width: 767px);smOnly:(min-width: 768px) and (max-width: 991px);smAndDown:(max-width: 991px);smAndUp:(min-width: 768px);mdOnly:(min-width: 992px) and (max-width: 1199px);mdAndDown:(max-width: 1199px);mdAndUp:(min-width: 992px);lgOnly:(min-width: 1200px) and (max-width: 1919px);lgAndDown:(max-width: 1919px);lgAndUp:(min-width: 1200px);xlOnly:(min-width: 1920px)}.el-breadcrumb{font-size:15px;line-height:1}.el-breadcrumb::after,.el-breadcrumb::before{display:table;content:""}.el-breadcrumb::after{clear:both}.el-breadcrumb__separator{margin:auto 9px;font-weight:700;color:#82a9b0}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#2b4145;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__truncation-dropdown .el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__truncation-dropdown .el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__truncation-dropdown .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__truncation-dropdown .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{cursor:pointer}.el-breadcrumb__inner{color:#2b4145;margin-top:auto;margin-bottom:auto}.el-breadcrumb__inner a,.el-breadcrumb__inner.is-link{font-weight:700;text-decoration:none;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#182426}.el-breadcrumb__inner a:hover,.el-breadcrumb__inner.is-link:hover{color:#08859b;cursor:pointer}