quasar-ui-sellmate-ui-kit 3.9.6 → 3.9.7

package/package.json

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

package/src/assets/icons.js

@@ -31,10 +31,6 @@ export const searchIcon = 'M9.16634 3.33325C12.388 3.33325 14.9997 5.94492 14.99
 export const imageUploadFilledIcon = 'M0.5 15V3C0.5 1.61929 1.61929 0.5 3 0.5H15C16.3807 0.5 17.5 1.61929 17.5 3V15C17.5 16.3807 16.3807 17.5 15 17.5H3C1.61929 17.5 0.5 16.3807 0.5 15Z@@fill:#222222&&M11.125 5.28125C11.125 6.16145 11.8385 6.875 12.7188 6.875C13.599 6.875 14.3125 6.16145 14.3125 5.28125C14.3125 4.40105 13.599 3.6875 12.7188 3.6875C11.8385 3.6875 11.125 4.40105 11.125 5.28125Z@@fill:white&&M17.5 9.3993V11.4342L14.4626 14.2184C13.7719 14.8516 12.7052 14.8284 12.0426 14.1659L4.92678 7.05C4.82914 6.95237 4.67085 6.95237 4.57322 7.05L0.5 11.1232V9.0019L3.51256 5.98934C4.19598 5.30592 5.30402 5.30592 5.98744 5.98934L13.1033 13.1052C13.1979 13.1998 13.3503 13.2032 13.449 13.1127L17.5 9.3993Z@@fill:white|0 0 18 18';
 export const clockIcon = 'M12 7V12H17@@fill:none;stroke:currentColor;stroke-width:1.5;&&M12 21C16.9707 21 21 16.9707 21 12C21 7.0293 16.9707 3 12 3C7.0293 3 3 7.0293 3 12C3 16.9707 7.0293 21 12 21Z@@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round|0 0 24 24';
 
-// TODO: icon 변경
-export const tableTreeArrowRight =
-  'M14.75 9.20096C15.75 9.77831 15.75 11.2217 14.75 11.799L8 15.6962C7 16.2735 5.75 15.5518 5.75 14.3971L5.75 6.60288C5.75 5.44818 7 4.7265 8 5.30385L14.75 9.20096Z@fill:currentColor|0 0 20 21';
-export const tableTreeArrowDown =
-  'M10.799 15.75C10.2217 16.75 8.77831 16.75 8.20096 15.75L4.30385 9C3.7265 8 4.44819 6.75 5.60289 6.75L13.3971 6.75C14.5518 6.75 15.2735 8 14.6962 9L10.799 15.75Z@fill:currentColor|0 0 20 21';
-export const path =
-  'M6 1.5V6V8.5C6 9.60457 6.89543 10.5 8 10.5H16@fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round|0 0 20 21';
+
+export const addIcon10 = 'M1.16669 5H8.83335@@stroke:currentColor;stroke-width:0.8;stroke-linecap:round&&M5 1.16669L5 8.83335@@stroke:currentColor;stroke-width:0.8;stroke-linecap:round; | 0 0 10 10'
+export const minusIcon10 = 'M1.16669 5H8.83335@@stroke:currentColor;stroke-width:0.8;stroke-linecap:round; | 0 0 10 10'

package/src/components/STableTree.vue

@@ -0,0 +1,468 @@
+<template>
+  <div
+    class="s-table-tree"
+    :class="{
+      'sticky-table-tree': isStickyFirstColumn,
+      'loading-table-tree': loading,
+      'no-data-table-tree': !rows.length,
+    }"
+    ref="sTableTreeRef"
+  >
+    <slot name="loading" v-if="loading">
+      <q-inner-loading showing color="positive" size="72px" />
+    </slot>
+
+    <div class="s-table-tree__inner" ref="scrollLocationRef" @scroll="handleScroll" >
+      <table>
+        <thead>
+          <tr>
+            <th
+              v-for="(column, idx) in columns"
+              :key="column.name"
+              :class="`td-${idx + 1} text-${column.align}`"
+              :style="`width: ${column.width}px`"
+            >
+              <slot :name="`header-cell-${column.name}`">
+                {{ column.label }}
+              </slot>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody v-if="!rows.length">
+          <tr>
+            <td :colspan="columns.length">
+              <div>
+                <slot name="no-data">
+                  {{ noDataLabel }}
+                </slot>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+
+        <tbody v-else>
+          <slot name="body">
+            <tr v-if="rows.length > 0">
+              <td :colspan="columns.length" class="body-td">
+                <table-tree-node
+                  v-for="(row, i) in treeDataSource"
+                  :key="i"
+                  :nodeName="`root_node_${i}`"
+                  :row="row"
+                  :columns="columns"
+                  :colspan="columns.length"
+                  :resizedWidths="resizedWidths"
+                  ref="childTableNode"
+                  @handlerExpand="handlerExpand"
+                >
+                  <template
+                    v-for="column in columns"
+                    :key="column.name"
+                    #[`body-cell-${column.name}`]="props"
+                  >
+                    <slot :name="`body-cell-${column.name}`" v-bind="props"></slot>
+                  </template>
+                </table-tree-node>
+              </td>
+            </tr>
+          </slot>
+        </tbody>
+
+        <tfoot v-if="foots.length > 0 && rows.length > 0">
+          <slot name="tfoot">
+            <tr v-for="(f, i) in foots" :key="i" :class="`tr-${i + 1}`">
+              <td
+                v-for="(col, colIdx) in columns"
+                :key="col.name"
+                :class="`td-${colIdx + 1} text-${col.align}`"
+              >
+                <slot :name="`body-cell-${col.name}`">
+                  <span v-if="col.prefix" class="q-mr-xs">{{ col.prefix }}</span>
+                  {{ f[col.name] }}
+                  <span v-if="col.suffix" class="q-ml-xs">{{ col.suffix }}</span>
+                </slot>
+              </td>
+            </tr>
+          </slot>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref, onMounted, nextTick } 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`;
+              }
+          }
+      });
+    });
+  }
+
+  export default defineComponent({
+    name: 'STableTree',
+    components: { TableTreeNode, QInnerLoading },
+    props: {
+      columns: {
+        type: Array,
+        default: () => [],
+      },
+      rows: {
+        type: Array,
+        default: () => [],
+      },
+      foots: {
+        type: Array,
+        default: () => [],
+      },
+      noDataLabel: {
+        type: String,
+        default: '데이터 조회가 필요합니다',
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      isStickyFirstColumn: {
+        tpye: Boolean,
+        default: true,
+      },
+      resizable: {
+        type: Boolean,
+        default: false,
+      },
+      stickyResizable: {
+        type: [Array, Number],
+        required: false,
+      },
+    },
+    setup(props) {
+      const treeDataSource = ref([]);
+      const sTableTreeRef = ref(null);
+      const resizedWidths = ref({});
+      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() {
+        const tempData = JSON.parse(JSON.stringify(props.rows));
+        const reduceDataFunc = (data, level) => {
+          data.forEach(m => {
+            m.isExpand = m.isExpand || false;
+            m.children = m.children || [];
+            m.level = level;
+            m.leftPadding = level === 1 ? 20 : (level - 1) * 28 + 20;
+            if (m.children.length > 0) {
+              reduceDataFunc(m.children, level + 1);
+            }
+
+            nextTick(() => {
+              setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
+            });
+          });
+        };
+        reduceDataFunc(tempData, 1);
+        treeDataSource.value = tempData;
+      }
+
+      function handlerExpand(row) {
+        row.isExpand = !row.isExpand;
+  
+        nextTick(() => {
+          setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
+        });      
+      };
+
+      onMounted(() => {
+        const { addResizable } = useResizableTree();
+        if (props.resizable || props.isStickyFirstColumn) {
+          resizedWidths.value = addResizable(sTableTreeRef.value, props.columns);
+        }
+        scrollLocationRef.value.classList.add('no-before');
+      });
+
+      initTreeData();
+
+      return {
+        treeDataSource,
+        handlerExpand,
+        handleScroll,
+        sTableTreeRef,
+        scrollLocationRef,
+        resizedWidths,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-table-tree {
+    border: 1px solid $Grey_Lighten-2;
+    border-radius: 8px !important;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    color: $Grey_Darken-5;
+    .q-inner-loading {
+      z-index: 1;
+    }
+    .s-table-tree__inner {
+      overflow: auto;
+      td, th {
+        width: 100%;
+        &:not(:first-of-type){
+          word-break: keep-all;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        table-layout: fixed;
+        thead {
+          background: $th-bg;
+          tr {
+            height: 36px;
+            th {
+              border-bottom: 1px solid $Grey-Lighten-3;
+              padding: 0 16px;
+              font-weight: 500;
+              color: rgba(34, 34, 34, 1);
+            }
+          }
+        }
+        tbody {
+          > tr {
+              td{
+                height: 44px;
+              }
+            > .body-td {
+              padding: 0;
+            }
+          }
+        }
+        tfoot {
+          border-top: 2px solid $Grey_Lighten-3 !important;
+          tr {
+            &:last-of-type{
+              background: rgba(245, 250, 255, 1);
+              .td-1{
+                color: $Blue_B_Lighten-2;
+              }
+            }
+            td {
+              border-top: 1px solid $Grey_Lighten-3 !important;
+              height: 52px;
+              padding: 0 16px;
+              &.td-1 {
+                padding: 0 20px;
+                font-weight: 700;
+                color: $Blue_C_Darken-1;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.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;
+          }
+        }
+        table {
+          border-collapse: collapse !important;
+          thead {
+            tr {
+              th {
+                &:first-of-type {
+                  position: sticky;
+                  left: 0;
+                  background: $th-bg;
+                  z-index: 10;
+                  &:before {
+                    content: '';
+                    position: absolute;
+                    width: 20px;
+                    height: 100%;
+                    right: -20px;
+                    top: 0;
+                    box-shadow: inset 17px 0 26px -29px rgba(0, 0, 0, 0.2);
+                    background: none !important;
+                  }
+                }
+              }
+            }
+          }
+          > tbody {
+            > tr {
+              > td {
+                :deep(.table-tree-node) {
+                  table {
+                    tr {
+                      td {
+                        &:first-of-type {
+                          position: sticky;
+                          left: 0;
+                          &:before {
+                            content: '';
+                            position: absolute;
+                            width: 20px;
+                            height: 100%;
+                            right: -20px;
+                            top: 0;
+                            box-shadow: inset 17px 0 26px -29px rgba(0, 0, 0, 0.3);
+                            background: none !important;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          tfoot {
+            border-top: 2px solid $Grey_Lighten-3 !important;
+            tr {
+              td {
+                &:first-of-type {
+                  position: sticky;
+                  left: 0;
+                  background: white;
+                  &:before {
+                    content: '';
+                    position: absolute;
+                    width: 20px;
+                    height: 100%;
+                    right: -20px;
+                    top: 0;
+                    box-shadow: inset 17px 0 26px -29px rgba(0, 0, 0, 0.3);
+                    background: none !important;
+                  }
+                }
+              }
+              &:last-of-type{
+                background: rgba(245, 250, 255, 1);
+                .td-1{
+                  color:  $Blue_B_Lighten-2;
+                  background: rgba(245, 250, 255, 1);
+                }
+              }
+            }
+          }
+        }
+        &.no-before {
+          table {
+            thead {
+              tr {
+                th {
+                  &:first-of-type {
+                    &::before {
+                      display: none; 
+                    }
+                  }
+                }
+              }
+            }
+            > tbody {
+              > tr {
+                > td {
+                  :deep(.table-tree-node) {
+                    table {
+                      tr {
+                        td {
+                          &:first-of-type {
+                            &::before{
+                              display: none; 
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            tfoot {
+              tr {
+                td {
+                  &:first-of-type {
+                    &::before {
+                      display: none; 
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.no-data-table-tree {
+      .s-table-tree__inner {
+        overflow: hidden;
+        table {
+          thead {
+            opacity: 0.4;
+          }
+          tbody {
+            tr {
+              td {
+                height: 240px;
+                padding: 0;
+                > div {
+                  padding-top: 80px;
+                  height: 240px;
+                  text-align: center;
+                  position: absolute;
+                  width: 100%;
+                  top: 36px;
+                  left: 0;
+                  color: $Grey_Default;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/TableTreeNode.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="table-tree-node" :class="nodeName" ref="childTableNode">
+    <table>
+      <tbody>
+        <tr class="level" :class="levelClass">
+          <template v-for="(column, i) in columns" :key="i">
+            <td
+              :class="{
+                'bg-white': i === 0 && hasChildren,
+                '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`
+              ]"
+            >
+              <slot :name="`body-cell-${column.name}`">
+                <div>
+                  <s-button
+                    v-if="hasChildren && i === 0"
+                    :icon="row.isExpand ? minusIcon10 : addIcon10"
+                    outline
+                    round
+                    :color="row.isExpand ? 'Blue_C_Lighten-3' : 'Grey_Default'"
+                    class="expand-btn q-mr-sm"
+                    :class="{ 'not-expand-btn': !row.isExpand }"
+                    @click="handlerExpand(row)"
+                  />
+
+                  <span
+                    class="cell-content"
+                    :class="{'is-root': isRoot}"
+                  >
+                    <span v-if="column.prefix" class="q-mr-xs">{{ column.prefix }}</span>
+                    {{ row[column.name] }} 
+                    <span v-if="column.suffix" class="q-ml-xs">{{ column.suffix }}</span>
+                  </span>
+                </div>
+              </slot>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-if="row.isExpand">
+      <table-tree-node
+        v-for="(childRow, childRowIdx) in row.children"
+        :key="`child_node${childRowIdx}`"
+        :nodeName="`child_node${childRowIdx}`"
+        :row="childRow"
+        :columns="columns"
+        :colspan="colspan"
+        :resizedWidths="resizedWidths"
+        @handlerExpand="handlerExpand"
+        :is-root="false"
+      >
+        <template
+          v-for="column in columns"
+          :key="column.name"
+          #[`body-cell-${column.name}`]="props"
+        >
+          <slot :name="`body-cell-${column.name}`" v-bind="props"></slot>
+        </template>
+      </table-tree-node>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, computed, ref } from 'vue';
+  import { addIcon10, minusIcon10 } from '../assets/icons';
+
+  export default defineComponent({
+    name: 'TableTreeNode',
+    props: {
+      row: Object,
+      nodeName: String,
+      columns: {
+        type: Array,
+        default: () => [],
+      },
+      isRoot:{
+        type: Boolean,
+        default: true
+      },
+      colspan: Number,
+      resizedWidths: Object,
+    },
+    setup(props, { emit }) {
+      const levelClass = computed(() => `level-${props.row.level}` || '');
+      const hasChildren = computed(() => props.row.children && props.row.children.length > 0);
+      const childTableNode = ref(null);
+
+      function handlerExpand(row) {;      
+        emit('handlerExpand', row);
+      }
+
+      return {
+        levelClass,
+        hasChildren,
+        handlerExpand,
+        childTableNode,
+        addIcon10,
+        minusIcon10
+      };
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .table-tree-node {
+    border-top: 1px solid $Grey_Lighten-3 !important;
+    box-sizing: border-box;
+
+    &.root_node_0 {
+      border-top: 0 !important;
+    }
+    .tr {
+      vertical-align: middle;
+      td {
+        height: 48px;
+        padding: 0 16px;
+      }
+    }
+    td,th{
+      width: 100%;
+      &:not(:first-of-type){
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    table {
+      width: 100%;
+      table-layout: fixed;
+      border-collapse: collapse;
+      tbody {
+        tr {
+          td {
+            height: 44px;
+            padding: 0 16px;
+            font-weight: 400;
+            
+            .expand-btn {
+              min-width: 20px;
+              min-height: 20px;
+              padding: 0 !important;
+              &.not-expand-btn {
+                &:before {
+                  border-color: $Grey_Lighten-3;
+                }
+              }
+              &.s-button-sm.q-btn {
+                height: 20px;
+              }
+              :deep(.q-btn__content) {
+                .q-icon {
+                  font-size: 12px;
+                }
+              }
+            }
+            .cell-content {
+              display: inline-block;
+            }
+          }
+        }
+      }
+      .td-1 .is-root {
+        font-weight: 700;
+      }
+      .td-1 :not(.is-root) {
+        font-weight: 400; 
+      }
+    }
+  }
+</style>