quasar-ui-sellmate-ui-kit 3.11.1 → 3.11.2

package/src/components/STableTree.vue

@@ -1,502 +1,502 @@
-<template>
-  <div
-    class="s-table-tree bg-white"
-    :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"
-                  @handleExpand="node => handleExpand(row, node)"
-                >
-                  <template
-                    v-for="column in columns"
-                    :key="column.name"
-                    #[`body-cell-${column.name}`]="row"
-                  >
-                    <slot :name="`body-cell-${column.name}`" v-bind="row"></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, 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`;
-          }
-        }
-      });
-    });
-  }
-
-  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, { emit }) {
-      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 = 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;
-            m.meta = {
-              isLastDepth: m.meta.isLastDepth || false,
-            };
-            if (m.children.length > 0) {
-              reduceDataFunc(m.children, level + 1);
-            }
-
-            nextTick(() => {
-              setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
-            });
-          });
-        };
-        reduceDataFunc(tempData, 1);
-        treeDataSource.value = tempData;
-      }
-      initTreeData();
-
-      function handleExpand(parentRow, row) {
-        row.isExpand = !row.isExpand;
-        if (row.isExpand) emit('handleExpand', parentRow, row);
-
-        nextTick(() => {
-          setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
-        });
-      }
-
-      const { addResizable } = useResizableTree();
-      function handleColumnResizable() {
-        if (props.resizable || props.isStickyFirstColumn) {
-          resizedWidths.value = addResizable(sTableTreeRef.value, props.columns);
-        }
-      }
-
-      onMounted(() => {
-        handleColumnResizable();
-        scrollLocationRef.value.classList.add('no-before');
-      });
-
-      watch(
-        () => props.columns,
-        () => {
-          nextTick(() => {
-            handleColumnResizable();
-          });
-        },
-        { deep: true },
-      );
-
-      watch(
-        () => props.rows,
-        () => {
-          initTreeData();
-        },
-        { deep: true },
-      );
-
-      watch(
-        () => treeDataSource.value,
-        () => {
-          emit('update:model-value', treeDataSource.value);
-        },
-        { deep: true },
-      );
-
-      return {
-        treeDataSource,
-        handleExpand,
-        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>
+<template>
+  <div
+    class="s-table-tree bg-white"
+    :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"
+                  @handleExpand="node => handleExpand(row, node)"
+                >
+                  <template
+                    v-for="column in columns"
+                    :key="column.name"
+                    #[`body-cell-${column.name}`]="row"
+                  >
+                    <slot :name="`body-cell-${column.name}`" v-bind="row"></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, 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`;
+          }
+        }
+      });
+    });
+  }
+
+  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, { emit }) {
+      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 = 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;
+            m.meta = {
+              isLastDepth: m.meta.isLastDepth || false,
+            };
+            if (m.children.length > 0) {
+              reduceDataFunc(m.children, level + 1);
+            }
+
+            nextTick(() => {
+              setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
+            });
+          });
+        };
+        reduceDataFunc(tempData, 1);
+        treeDataSource.value = tempData;
+      }
+      initTreeData();
+
+      function handleExpand(parentRow, row) {
+        row.isExpand = !row.isExpand;
+        if (row.isExpand) emit('handleExpand', parentRow, row);
+
+        nextTick(() => {
+          setWidthForExpand(sTableTreeRef.value, resizedWidths.value);
+        });
+      }
+
+      const { addResizable } = useResizableTree();
+      function handleColumnResizable() {
+        if (props.resizable || props.isStickyFirstColumn) {
+          resizedWidths.value = addResizable(sTableTreeRef.value, props.columns);
+        }
+      }
+
+      onMounted(() => {
+        handleColumnResizable();
+        scrollLocationRef.value.classList.add('no-before');
+      });
+
+      watch(
+        () => props.columns,
+        () => {
+          nextTick(() => {
+            handleColumnResizable();
+          });
+        },
+        { deep: true },
+      );
+
+      watch(
+        () => props.rows,
+        () => {
+          initTreeData();
+        },
+        { deep: true },
+      );
+
+      watch(
+        () => treeDataSource.value,
+        () => {
+          emit('update:model-value', treeDataSource.value);
+        },
+        { deep: true },
+      );
+
+      return {
+        treeDataSource,
+        handleExpand,
+        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>