quasar-ui-sellmate-ui-kit 3.9.7 → 3.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/STableTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="s-table-tree"
+    class="s-table-tree bg-white"
     :class="{
       'sticky-table-tree': isStickyFirstColumn,
       'loading-table-tree': loading,
@@ -12,7 +12,7 @@
       <q-inner-loading showing color="positive" size="72px" />
     </slot>
 
-    <div class="s-table-tree__inner" ref="scrollLocationRef" @scroll="handleScroll" >
+    <div class="s-table-tree__inner" ref="scrollLocationRef" @scroll="handleScroll">
       <table>
         <thead>
           <tr>
@@ -54,7 +54,7 @@
                   :colspan="columns.length"
                   :resizedWidths="resizedWidths"
                   ref="childTableNode"
-                  @handlerExpand="handlerExpand"
+                  @handleExpand="handleExpand"
                 >
                   <template
                     v-for="column in columns"
@@ -92,24 +92,24 @@
 </template>
 
 <script>
-  import { defineComponent, ref, onMounted, nextTick } from 'vue';
+  import { defineComponent, ref, onMounted, nextTick, watch } from 'vue';
   import { QInnerLoading } from 'quasar';
   import TableTreeNode from './TableTreeNode.vue';
   import { useResizableTree } from '../composables/table/use-resizable-tree';
 
   function setWidthForExpand(tableNodeRef, resizedWidths) {
     const tableElements = tableNodeRef.querySelectorAll('table');
-    
+
     tableElements.forEach(tableElement => {
-        const rows = tableElement.querySelectorAll('tr');
-        rows.forEach(row => {
-            const cols = row.children;
-            for (let i = 0; i < cols.length; i++) {
-                if (resizedWidths[i] !== undefined) {
-                    cols[i].style.minWidth = `${resizedWidths[i]}px`;
-                    cols[i].style.width = `${resizedWidths[i]}px`;
-              }
+      const rows = tableElement.querySelectorAll('tr');
+      rows.forEach(row => {
+        const cols = row.children;
+        for (let i = 0; i < cols.length; i++) {
+          if (resizedWidths[i] !== undefined) {
+            cols[i].style.minWidth = `${resizedWidths[i]}px`;
+            cols[i].style.width = `${resizedWidths[i]}px`;
           }
+        }
       });
     });
   }
@@ -151,21 +151,20 @@
         required: false,
       },
     },
-    setup(props) {
+    setup(props, { emit }) {
       const treeDataSource = ref([]);
       const sTableTreeRef = ref(null);
       const resizedWidths = ref({});
-      const scrollLocationRef = ref(null)
+      const scrollLocationRef = ref(null);
 
       function handleScroll() {
         const { scrollLeft } = scrollLocationRef.value;
-        
+
         if (scrollLeft === 0) {
           scrollLocationRef.value.classList.add('no-before');
         } else {
           scrollLocationRef.value.classList.remove('no-before');
         }
-        
       }
 
       function initTreeData() {
@@ -188,14 +187,16 @@
         reduceDataFunc(tempData, 1);
         treeDataSource.value = tempData;
       }
+      initTreeData();
 
-      function handlerExpand(row) {
+      function handleExpand(row) {
         row.isExpand = !row.isExpand;
-  
+        if (row.isExpand) emit('handleExpand', row);
+
         nextTick(() => {
           setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
-        });      
-      };
+        });
+      }
 
       onMounted(() => {
         const { addResizable } = useResizableTree();
@@ -205,11 +206,16 @@
         scrollLocationRef.value.classList.add('no-before');
       });
 
-      initTreeData();
+      watch(
+        () => props.rows,
+        () => {
+          initTreeData();
+        },
+      );
 
       return {
         treeDataSource,
-        handlerExpand,
+        handleExpand,
         handleScroll,
         sTableTreeRef,
         scrollLocationRef,
@@ -235,9 +241,10 @@
     }
     .s-table-tree__inner {
       overflow: auto;
-      td, th {
+      td,
+      th {
         width: 100%;
-        &:not(:first-of-type){
+        &:not(:first-of-type) {
           word-break: keep-all;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -263,9 +270,9 @@
         }
         tbody {
           > tr {
-              td{
-                height: 44px;
-              }
+            td {
+              height: 44px;
+            }
             > .body-td {
               padding: 0;
             }
@@ -274,9 +281,9 @@
         tfoot {
           border-top: 2px solid $Grey_Lighten-3 !important;
           tr {
-            &:last-of-type{
+            &:last-of-type {
               background: rgba(245, 250, 255, 1);
-              .td-1{
+              .td-1 {
                 color: $Blue_B_Lighten-2;
               }
             }
@@ -297,13 +304,14 @@
 
     &.sticky-table-tree {
       .s-table-tree__inner {
-        td, th {
-        width: 100%;
-        &:not(:first-of-type){
-          word-break: keep-all;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
+        td,
+        th {
+          width: 100%;
+          &:not(:first-of-type) {
+            word-break: keep-all;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
           }
         }
         table {
@@ -378,10 +386,10 @@
                   }
                 }
               }
-              &:last-of-type{
+              &:last-of-type {
                 background: rgba(245, 250, 255, 1);
-                .td-1{
-                  color:  $Blue_B_Lighten-2;
+                .td-1 {
+                  color: $Blue_B_Lighten-2;
                   background: rgba(245, 250, 255, 1);
                 }
               }
@@ -395,7 +403,7 @@
                 th {
                   &:first-of-type {
                     &::before {
-                      display: none; 
+                      display: none;
                     }
                   }
                 }
@@ -409,8 +417,8 @@
                       tr {
                         td {
                           &:first-of-type {
-                            &::before{
-                              display: none; 
+                            &::before {
+                              display: none;
                             }
                           }
                         }
@@ -425,7 +433,7 @@
                 td {
                   &:first-of-type {
                     &::before {
-                      display: none; 
+                      display: none;
                     }
                   }
                 }

package/src/components/TableTreeNode.vue

@@ -10,10 +10,7 @@
                 'bg-Grey_Lighten-5': !hasChildren,
                 [`td-${i + 1} text-${column.align}`]: i >= 0,
               }"
-              :style="[
-                i === 0 && `padding-left: ${row.leftPadding}px`,
-                `width: ${column.width}px`
-              ]"
+              :style="[i === 0 && `padding-left: ${row.leftPadding}px`, `width: ${column.width}px`]"
             >
               <slot :name="`body-cell-${column.name}`">
                 <div>
@@ -25,15 +22,12 @@
                     :color="row.isExpand ? 'Blue_C_Lighten-3' : 'Grey_Default'"
                     class="expand-btn q-mr-sm"
                     :class="{ 'not-expand-btn': !row.isExpand }"
-                    @click="handlerExpand(row)"
+                    @click="handleExpand(row)"
                   />
 
-                  <span
-                    class="cell-content"
-                    :class="{'is-root': isRoot}"
-                  >
+                  <span class="cell-content" :class="{ 'is-root': isRoot }">
                     <span v-if="column.prefix" class="q-mr-xs">{{ column.prefix }}</span>
-                    {{ row[column.name] }} 
+                    {{ row[column.name] }}
                     <span v-if="column.suffix" class="q-ml-xs">{{ column.suffix }}</span>
                   </span>
                 </div>
@@ -53,7 +47,7 @@
         :columns="columns"
         :colspan="colspan"
         :resizedWidths="resizedWidths"
-        @handlerExpand="handlerExpand"
+        @handleExpand="handleExpand"
         :is-root="false"
       >
         <template
@@ -81,9 +75,9 @@
         type: Array,
         default: () => [],
       },
-      isRoot:{
+      isRoot: {
         type: Boolean,
-        default: true
+        default: true,
       },
       colspan: Number,
       resizedWidths: Object,
@@ -93,17 +87,17 @@
       const hasChildren = computed(() => props.row.children && props.row.children.length > 0);
       const childTableNode = ref(null);
 
-      function handlerExpand(row) {;      
-        emit('handlerExpand', row);
+      function handleExpand(row) {
+        emit('handleExpand', row);
       }
 
       return {
         levelClass,
         hasChildren,
-        handlerExpand,
+        handleExpand,
         childTableNode,
         addIcon10,
-        minusIcon10
+        minusIcon10,
       };
     },
   });
@@ -127,9 +121,10 @@
         padding: 0 16px;
       }
     }
-    td,th{
+    td,
+    th {
       width: 100%;
-      &:not(:first-of-type){
+      &:not(:first-of-type) {
         word-break: keep-all;
         white-space: nowrap;
         overflow: hidden;
@@ -146,7 +141,7 @@
             height: 44px;
             padding: 0 16px;
             font-weight: 400;
-            
+
             .expand-btn {
               min-width: 20px;
               min-height: 20px;
@@ -175,7 +170,7 @@
         font-weight: 700;
       }
       .td-1 :not(.is-root) {
-        font-weight: 400; 
+        font-weight: 400;
       }
     }
   }