sling-web-component-table - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/cjs/component/Table.js

@@ -112,10 +112,10 @@ 'use strict';
 
-      this.shadowRoot.innerHTML = '\n      <style>\n        .emd-table {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  border-collapse: collapse;\n  border-radius: 2px;\n  color: #424B54;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 12px;\n  line-height: 18px;\n  width: 100%;\n  background: var(--emd-table-background-color, transparent);\n}\n\n.emd-table__header_hidden {\n  display: none;\n}\n\n.emd-table__title {\n  background: #fafafa;\n  padding: 16px;\n  font-weight: 500;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n  position: sticky;\n  top: 0;\n}\n\n.emd-table__row {\n  background: transparent;\n}\n\n.emd-table_row_success {\n  border-left: 2px #31cd65;\n}\n\n.emd-table_clickablerows .emd-table__row {\n  cursor: pointer;\n}\n\n.emd-table_clickablerows .emd-table__row:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.emd-table__title + .emd-table__title {\n  border-left: none;\n}\n\n.emd-table__cell {\n  padding: 16px;\n  height: 32px;\n  border-top: solid 1px #C3C8D2;\n  font-weight: 400;\n}\n\n.emd-table__cell + .emd-table__cell {\n  border-left: none;\n}\n\n.emd-table__header_hidden + .emd-table__body .emd-table__row:nth-child(1) .emd-table__cell {\n  border-top: solid 1px #C3C8D2;\n}\n\n.emd-table__currency {\n  white-space: nowrap;\n}\n\n.emd-table__value_negative {\n  color: #E2001E;\n}\n\n.emd-table__symbol {\n  padding-right: 8px;\n  color: #96A0AF;\n  font-size: 10px;\n  line-height: 12px;\n  text-align: left;\n}\n\n.emd-table__content_secondary {\n  color: #96A0AF;\n  display: block;\n  font-size: 10px;\n  line-height: 12px;\n  text-align: left;\n  white-space: nowrap;\n}\n\n.bullet__status {\n  position: relative;\n  padding-left: 10px;\n}\n\n.bullet__status:before {\n  content: \'\u2022\';\n  position: absolute;\n  font-size: 1.6em;\n  left: -6px;\n}\n\n.bullet__status_1 {\n  color: var(--calendar-status-1-color, #F9BF09);\n}\n\n.bullet__status_2 {\n  color: var(--calendar-status-2-color, #B9C3CC);\n}\n\n.bullet__status_3 {\n  color: var(--calendar-status-3-color, #C7352E);\n}\n\n.bullet__status_4 {\n  color: var(--calendar-status-4-color, #31CD65);\n}\n\n.bullet__status_secondary {\n  padding-left: 10px;\n}\n\n:host {\n  display: block;\n  border: 1px solid #C3C8D2;\n}\n\n/* for compatibility */\n\nsling-table {\n  display: block;\n  border: 1px solid #C3C8D2;\n}\n\n      </style>\n      <table class="emd-table' + (clickableRows ? ' emd-table_clickablerows' : '') + '">\n        <colgroup>\n          ' + columns.map(function (item) {
+      this.shadowRoot.innerHTML = '\n      <style>\n        .emd-table {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  border-collapse: collapse;\n  border-radius: 2px;\n  color: #424B54;\n  font-family: \'Heebo\', sans-serif;\n  font-size: 12px;\n  line-height: 18px;\n  width: 100%;\n  background: var(--emd-table-background-color, transparent);\n}\n\n.emd-table__header_hidden {\n  display: none;\n}\n\n.emd-table__title {\n  background: #fafafa;\n  padding: 16px;\n  font-weight: 500;\n  letter-spacing: 0.025em;\n  white-space: nowrap;\n  position: sticky;\n  top: 0;\n}\n\n.emd-table__row {\n  background: transparent;\n}\n\n.emd-table_row_success {\n  border-left: 2px #31cd65;\n}\n\n.emd-table_clickablerows .emd-table__row {\n  cursor: pointer;\n}\n\n.emd-table_clickablerows .emd-table__row:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.emd-table__title + .emd-table__title {\n  border-left: none;\n}\n\n.emd-table__cell {\n  padding: 16px;\n  height: 32px;\n  border-top: solid 1px #C3C8D2;\n  font-weight: 400;\n}\n\n.emd-table__cell + .emd-table__cell {\n  border-left: none;\n}\n\n.emd-table__header_hidden + .emd-table__body .emd-table__row:nth-child(1) .emd-table__cell {\n  border-top: solid 1px #C3C8D2;\n}\n\n.emd-table__currency {\n  white-space: nowrap;\n}\n\n.emd-table__value_negative {\n  color: #E2001E;\n}\n\n.emd-table__symbol {\n  padding-right: 8px;\n  color: #96A0AF;\n  font-size: 10px;\n  line-height: 12px;\n  text-align: left;\n}\n\n.emd-table__content_secondary {\n  color: #96A0AF;\n  display: block;\n  font-size: 10px;\n  line-height: 12px;\n  text-align: left;\n  white-space: nowrap;\n}\n\n.bullet__status {\n  position: relative;\n  padding-left: 10px;\n}\n\n.bullet__status:before {\n  content: \'\u2022\';\n  position: absolute;\n  font-size: 1.6em;\n  left: -6px;\n}\n\n.bullet__status_1 {\n  color: var(--calendar-status-1-color, #F9BF09);\n}\n\n.bullet__status_2 {\n  color: var(--calendar-status-2-color, #B9C3CC);\n}\n\n.bullet__status_3 {\n  color: var(--calendar-status-3-color, #C7352E);\n}\n\n.bullet__status_4 {\n  color: var(--calendar-status-4-color, #31CD65);\n}\n\n.bullet__status_secondary {\n  padding-left: 10px;\n}\n\n.emd-table__icon {\n  width: 30px;\n  text-align: center;\n}\n\n.edit-icon {\n  fill: #ced6dc;\n}\n\n:host {\n  display: block;\n  border: 1px solid #C3C8D2;\n}\n\n/* for compatibility */\n\nsling-table {\n  display: block;\n  border: 1px solid #C3C8D2;\n}\n\n      </style>\n      <table class="emd-table' + (clickableRows ? ' emd-table_clickablerows' : '') + '">\n        <colgroup>\n          ' + columns.map(function (item) {
         return '<col style="width: ' + (item.width || 'auto') + ';"></col>';
-      }).join('') + '\n        </colgroup>\n        <thead class="emd-table__header' + (noHeader ? ' emd-table__header_hidden' : '') + '">\n          <tr>\n            ' + columns.map(function (item) {
+      }).join('') + '\n          ' + (this.editable ? '<col></col>' : '') + '\n        </colgroup>\n        <thead class="emd-table__header' + (noHeader ? ' emd-table__header_hidden' : '') + '">\n          <tr>\n            ' + columns.map(function (item) {
         return '<th\n              class="emd-table__title"\n              style="text-align: ' + (item.align || 'left') + ';">\n              ' + item.title + '\n            </th>';
-      }).join('') + '\n          </tr>\n        </thead>\n        <tbody class="emd-table__body">\n          ' + dataSource.map(function (item, index) {
+      }).join('') + '\n            ' + (this.editable ? '<th class="emd-table__title"></th>' : '') + '\n          </tr>\n        </thead>\n        <tbody class="emd-table__body">\n          ' + dataSource.map(function (item, index) {
         return '\n            <tr data-index="' + index + '" class="emd-table__row emd-table_row_success">\n              ' + columns.map(function (header) {
           return '<td\n                class="emd-table__cell"\n                style="text-align: ' + (header.align || 'left') + ';">\n                <span class="emd-table__content emd-table__content_primary">\n                ' + _this4.constructor.tableCellInfoFormatter(item, header, false) + '\n                </span>\n                ' + (header.secondaryField ? '\n                  <span\n                    class="emd-table__content emd-table__content_secondary">\n                    ' + _this4.constructor.tableCellInfoFormatter(item, header, true) + '\n                  </span>\n                ' : '') + '\n              </td>';
-        }).join('') + '\n            </tr>\n          ';
+        }).join('') + '\n              ' + (_this4.editable ? _this4.constructor.getEditCell() : '') + '\n            </tr>\n          ';
       }).join('') + '\n        </tbody>\n      </table>\n    ';
@@ -144,2 +144,15 @@
   }, {
+    key: 'editable',
+    get: function get() {
+      return this.hasAttribute('editable');
+    },
+    set: function set(value) {
+      if (value != null && value !== false) {
+        this.setAttribute('editable', '');
+      } else {
+        this.removeAttribute('editable');
+      }
+      this.render();
+    }
+  }, {
     key: 'noheader',
@@ -150,3 +163,3 @@ get: function get() {
     set: function set(value) {
-      if (value != null) {
+      if (value != null && value !== false) {
         this.setAttribute('noheader', '');
@@ -164,3 +177,3 @@ } else {
     set: function set(value) {
-      if (value != null) {
+      if (value != null && value !== false) {
         this.setAttribute('clickablerows', '');
@@ -242,2 +255,10 @@ } else {
             }
+          case 'phone':
+            {
+              var phoneMask = _cjs.imask.createMask({
+                mask: '(00)00000-0000'
+              });
+              cell = phoneMask.resolve(fieldItem);
+              break;
+            }
           default:
@@ -251,2 +272,7 @@ {
     }
+  }, {
+    key: 'getEditCell',
+    value: function getEditCell() {
+      return '\n    <td class="emd-table__cell emd-table__icon">\n      <svg width="18px" height="18px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"\n        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n        viewBox="20.5 20.60000228881836 55 54.89999771118164"\n        style="enable-background:new 0 0 96 96;" xml:space="preserve">\n        <g id="XMLID_2_">\n          <path id="XMLID_6_" class="edit-icon" d="M20.5,64v11.5H32l33.8-33.8L54.3,30.2L20.5,64z M74.6,32.9c1.2-1.2,1.2-3.1,0-4.3l-7.1-7.1\n            c-1.2-1.2-3.1-1.2-4.3,0L57.6,27L69,38.4L74.6,32.9z"></path>\n        </g>\n      </svg>\n    </td>\n    ';
+    }
   }]);
@@ -253,0 +279,0 @@

dist/es/component/Table.js

@@ -31,2 +31,15 @@ import { imask, globalFormatters } from 'sling-web-helpers/dist/es';
 
+  get editable() {
+    return this.hasAttribute('editable');
+  }
+
+  set editable(value) {
+    if (value != null && value !== false) {
+      this.setAttribute('editable', '');
+    } else {
+      this.removeAttribute('editable');
+    }
+    this.render();
+  }
+
   get noheader() {
@@ -37,3 +50,3 @@ return this.hasAttribute('noheader');
   set noheader(value) {
-    if (value != null) {
+    if (value != null && value !== false) {
       this.setAttribute('noheader', '');
@@ -51,3 +64,3 @@ } else {
   set clickablerows(value) {
-    if (value != null) {
+    if (value != null && value !== false) {
       this.setAttribute('clickablerows', '');
@@ -137,2 +150,10 @@ } else {
           }
+        case 'phone':
+          {
+            const phoneMask = imask.createMask({
+              mask: '(00)00000-0000'
+            });
+            cell = phoneMask.resolve(fieldItem);
+            break;
+          }
         default:
@@ -198,2 +219,18 @@ {
 
+  static getEditCell() {
+    return `
+    <td class="emd-table__cell emd-table__icon">
+      <svg width="18px" height="18px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="20.5 20.60000228881836 55 54.89999771118164"
+        style="enable-background:new 0 0 96 96;" xml:space="preserve">
+        <g id="XMLID_2_">
+          <path id="XMLID_6_" class="edit-icon" d="M20.5,64v11.5H32l33.8-33.8L54.3,30.2L20.5,64z M74.6,32.9c1.2-1.2,1.2-3.1,0-4.3l-7.1-7.1
+            c-1.2-1.2-3.1-1.2-4.3,0L57.6,27L69,38.4L74.6,32.9z"></path>
+        </g>
+      </svg>
+    </td>
+    `;
+  }
+
   render() {
@@ -328,2 +365,11 @@ const {
 
+.emd-table__icon {
+  width: 30px;
+  text-align: center;
+}
+
+.edit-icon {
+  fill: #ced6dc;
+}
+
 :host {
@@ -345,2 +391,3 @@ display: block;
           ${columns.map(item => `<col style="width: ${item.width || 'auto'};"></col>`).join('')}
+          ${this.editable ? '<col></col>' : ''}
         </colgroup>
@@ -354,2 +401,3 @@ <thead class="emd-table__header${noHeader ? ' emd-table__header_hidden' : ''}">
             </th>`).join('')}
+            ${this.editable ? '<th class="emd-table__title"></th>' : ''}
           </tr>
@@ -373,2 +421,3 @@ </thead>
               </td>`).join('')}
+              ${this.editable ? this.constructor.getEditCell() : ''}
             </tr>
@@ -375,0 +424,0 @@ `).join('')}

package.json

 {
   "name": "sling-web-component-table",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Sling Table component",
@@ -28,6 +28,6 @@ "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-web-component-brand-icon": "^0.3.2",
-    "sling-web-framework": "^0.3.2",
-    "sling-web-helpers": "^0.2.34"
+    "sling-web-component-brand-icon": "^0.3.3",
+    "sling-web-framework": "^0.3.3",
+    "sling-web-helpers": "^0.3.3"
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32009

increased by10.89%

Lines of code

629

increased by13.13%

Dependency changes

• - Removedsling-web-helpers@0.2.34(transitive)

• Updatedsling-web-component-brand-icon@^0.3.3

• Updatedsling-web-framework@^0.3.3

• Updatedsling-web-helpers@^0.3.3