[QTable] change api (#30)

* fix when cell larger than maxWidth prop * add fixed table * change tables height on window resize * add ability to set colors to delimited cols * add groups * add stories * refactoring updated row Co-authored-by: m.novikov <[email protected]>
altai-ui · Jan 11, 2021 · 87363bc · 87363bc
1 parent 42e4a07
commit 87363bc
Show file tree

Hide file tree

Showing 14 changed files with 715 additions and 585 deletions.
diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -8,7 +8,7 @@
       v-if="selectable"
       class="q-table__cell q-table__cell_selectable"
       :class="{
-        'q-table__cell_fixed': fixedColumn.length
+        'q-table__cell_sticky': stickyColumnKey
       }"
       :style="firstTdStyle"
     >
@@ -25,52 +25,48 @@
     <td
       v-for="(column, columnIndex) in columns"
       :key="column.key"
-      :class="getFixedColumnClass(column.key)"
-      :style="getCellStyle(column.key, columnIndex, column.width)"
+      :class="getStickyColumnClass(column.key)"
+      :style="getCellStyle(column, columnIndex)"
+      :align="column.align || 'left'"
       class="q-table__cell"
     >
       <div
-        class="q-table__cell-wrapper"
-        :style="getCellWrapperStyle(column)"
+        v-if="!selectable && canRowExpand(columnIndex)"
+        class="q-table__expand-arrow"
+        :class="openedTreeClass"
+        @click="handleExpandClick"
       >
-        <div
-          v-if="!selectable && canRowExpand(columnIndex)"
-          class="q-table__expand-arrow"
-          :class="openedTreeClass"
-          @click="handleExpandClick"
-        >
-          <span class="q-icon-triangle-right" />
-        </div>
+        <span class="q-icon-triangle-right" />
+      </div>
 
-        <div
-          v-if="column.customCellClass"
-          :class="column.customCellClass"
-        >
-          <slot
-            :row-data="updateRow(row, columnIndex, column.key, column)"
-            name="row"
-          />
+      <div
+        v-if="column.customCellClass"
+        :class="column.customCellClass"
+      >
+        <slot
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
+          name="row"
+        />
 
-          <slot
-            v-if="checkLoader(columnIndex)"
-            :row-data="row"
-            name="loader"
-          />
-        </div>
+        <slot
+          v-if="checkLoader(columnIndex)"
+          :row-data="row"
+          name="loader"
+        />
+      </div>
 
-        <template v-else>
-          <slot
-            :row-data="updateRow(row, columnIndex, column.key, column)"
-            name="row"
-          />
+      <template v-else>
+        <slot
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
+          name="row"
+        />
 
-          <slot
-            v-if="checkLoader(columnIndex)"
-            :row-data="row"
-            name="loader"
-          />
-        </template>
-      </div>
+        <slot
+          v-if="checkLoader(columnIndex)"
+          :row-data="row"
+          name="loader"
+        />
+      </template>
     </td>
   </tr>
 </template>
@@ -98,13 +94,9 @@ export default {
       type: String,
       default: 'children'
     },
-    fixedColumn: {
+    stickyColumnKey: {
       type: String,
-      default: ''
-    },
-    fixedColumnWidth: {
-      type: Number,
-      default: 250
+      default: null
     },
     expandable: {
       type: Boolean,
@@ -192,7 +184,7 @@ export default {
       return rowClass;
     },
     openedTreeClass() {
-      return this.row.$isTreeOpened ? 'q-table__expand-arrow_opened' : '';
+      return this.row.isTreeOpened ? 'q-table__expand-arrow_opened' : '';
     },
     getRowStyle() {
       return (
@@ -217,14 +209,14 @@ export default {
       return (
         this.expandable &&
         columnIndex === 0 &&
-        Boolean(this.row[this.childrenKey]?.length)
+        Boolean(this.row.data[this.childrenKey]?.length)
       );
     },
     handleExpandClick() {
       this.$emit('expand-click', this.row);
     },
     getFirstTdStyle() {
-      if (!this.selectable || !this.row[this.childrenKey]?.length) return;
+      if (!this.selectable || !this.row.data[this.childrenKey]?.length) return;
 
       const elm = this.$el?.querySelector('td:first-child');
 
@@ -238,26 +230,12 @@ export default {
         paddingLeft: `${Number(paddingLeft) + this.indent}px`
       };
     },
-    getCellWrapperStyle({ width, minWidth, maxWidth }) {
-      return {
-        width: width ? `${width}px` : '',
-        minWidth: minWidth ? `${minWidth}px` : '',
-        maxWidth: maxWidth ? `${maxWidth}px` : ''
-      };
-    },
-    getCellStyle(key, columnIndex, width) {
-      const style = {};
+    getCellStyle(column, columnIndex) {
+      if (!this.indent) return {};
 
-      if (width) {
-        style.width = `${width}px`;
-      }
+      const style = {};
 
-      if (
-        columnIndex === 0 &&
-        !this.selectable &&
-        this.$el &&
-        this.row[this.childrenKey]?.length
-      ) {
+      if (columnIndex === 0 && !this.selectable && this.$el) {
         const elm = this.$el.querySelector('td:first-child');
 
         if (elm) {
@@ -269,33 +247,25 @@ export default {
         }
       }
 
-      if (this.fixedColumn !== key && key !== 'shadow') return style;
-
-      return {
-        ...style,
-        minWidth: `${this.fixedColumnWidth}px`,
-        maxWidth: `${this.fixedColumnWidth}px`
-      };
+      return style;
     },
-    getFixedColumnClass(key) {
-      return this.fixedColumn && this.fixedColumn === key
-        ? 'q-table__cell_fixed'
-        : '';
+    getStickyColumnClass(key) {
+      return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
-      let value = row.value ?? get(row, key);
+      let value = get(row.data || row, key);
 
       if (column.formatter) {
         value = column.formatter(value, row, column);
       }
 
       return {
-        ...row,
-        $key: key,
-        $index: index,
+        key,
+        index,
         value,
         indent: this.indent,
-        column
+        column,
+        data: row
       };
     }
   }

diff --git a/src/qComponents/QTable/src/hocs/withQTableRow/index.js b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
@@ -3,11 +3,11 @@ const renderedChilds = ({
   childrenKey,
   listeners,
   component,
-  childrens,
+  children,
   props,
   scopedSlots
 }) => {
-  return childrens.reduce((acc, row) => {
+  return children.reduce((acc, row) => {
     const renderingArray = [];
 
     renderingArray.push(
@@ -30,7 +30,7 @@ const renderedChilds = ({
         listeners,
         props,
         scopedSlots,
-        childrens: row[childrenKey]
+        children: row.data[childrenKey]
       };
 
       renderingArray.push(renderedChilds(renderedData));
@@ -51,17 +51,18 @@ const withQTableRow = QTableRow => ({
 
     const renderingArray = [];
 
-    if (row[childrenKey]) {
+    if (row.data[childrenKey]) {
       const renderedData = {
         renderContext,
         childrenKey,
         component: QTableRow,
         listeners,
-        childrens: row[childrenKey],
+        children: row.data[childrenKey],
         props,
         scopedSlots
       };
-      renderingArray.push(renderedChilds(renderedData));
+
+      if (row.isTreeOpened) renderingArray.push(renderedChilds(renderedData));
     }
 
     return [renderContext(QTableRow, { ...data }), ...renderingArray];

diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
@@ -13,10 +13,18 @@
   --custom-box-shadow: -1px -1px 3px rgba(var(--color-rgb-white), 0.25),
     2px 1px 3px rgba(var(--color-rgb-blue), 0.4);
 
+  &__fixed {
+    table-layout: fixed;
+  }
+
   &__expand-arrow {
     display: inline-block;
     font-size: 23px;
     vertical-align: middle;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &__drag-elements {
@@ -101,7 +109,7 @@
     width: 100%;
     height: 100%;
     min-height: 115px;
-    padding-top: 25px;
+    padding-top: 120px;
     background-color: var(--color-tertiary-gray-light);
     opacity: 0;
     transition: height 0.2s, background-color 0.5s, opacity 0.2s 0.6s;
@@ -176,25 +184,15 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+    }
 
-      .q-table__header-cell_right & {
-        flex-direction: row-reverse;
-      }
+    &_align-right .q-table__header-cell-wrapper {
+      flex-direction: row-reverse;
     }
 
     &-content {
       display: flex;
       align-items: center;
-
-      .q-table__draggable {
-        margin-left: 16px;
-      }
-
-      .q-table__header-cell_right & {
-        flex-direction: row-reverse;
-        margin-right: 16px;
-        margin-left: 0;
-      }
     }
 
     .q-context-wrapper {
@@ -224,19 +222,11 @@
       }
     }
 
-    &_left {
-      border-color: var(--color-primary-blue-light);
-    }
-
-    &_right {
-      border-color: var(--color-primary);
-    }
-
     &:first-child {
       padding-left: 16px;
     }
 
-    &.q-table__cell_fixed {
+    &.q-table__cell_sticky {
       background-color: var(--color-tertiary-gray-light);
     }
 
@@ -257,10 +247,6 @@
         .q-table__sort-arrow {
           color: var(--color-primary-blue);
           visibility: visible;
-
-          .q-table__separated & {
-            color: var(--color-primary-black);
-          }
         }
       }
 
@@ -271,19 +257,14 @@
   }
 
   &__cell {
+    height: 64px;
     padding: 12px 24px;
     overflow: hidden;
     font-weight: var(--font-weight-base);
     line-height: 20px;
     background-color: var(--color-tertiary-gray-light);
     box-shadow: var(--custom-box-shadow);
 
-    &-wrapper {
-      display: flex;
-      align-items: center;
-      min-height: 40px;
-    }
-
     &:first-child {
       padding-left: 16px;
     }
@@ -324,7 +305,7 @@
     }
   }
 
-  &__cell_fixed {
+  &__cell_sticky {
     position: sticky;
     left: 0;
     z-index: 1;