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

package/src/components/TableTreeNode.vue

@@ -1,177 +1,177 @@
-<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 && !isLastDepth,
-                'bg-Grey_Lighten-5': isLastDepth,
-                [`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="!isLastDepth && 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="handleExpand(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"
-        @handleExpand="handleExpand"
-        :is-root="false"
-      >
-        <template
-          v-for="column in columns"
-          :key="column.name"
-          #[`body-cell-${column.name}`]="childRow"
-        >
-          <slot :name="`body-cell-${column.name}`" v-bind="childRow"></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 isLastDepth = computed(() => props.row.meta.isLastDepth);
-      const childTableNode = ref(null);
-
-      function handleExpand(row) {
-        emit('handleExpand', row);
-      }
-
-      return {
-        levelClass,
-        isLastDepth,
-        handleExpand,
-        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>
+<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 && !isLastDepth,
+                'bg-Grey_Lighten-5': isLastDepth,
+                [`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="!isLastDepth && 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="handleExpand(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"
+        @handleExpand="handleExpand"
+        :is-root="false"
+      >
+        <template
+          v-for="column in columns"
+          :key="column.name"
+          #[`body-cell-${column.name}`]="childRow"
+        >
+          <slot :name="`body-cell-${column.name}`" v-bind="childRow"></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 isLastDepth = computed(() => props.row.meta.isLastDepth);
+      const childTableNode = ref(null);
+
+      function handleExpand(row) {
+        emit('handleExpand', row);
+      }
+
+      return {
+        levelClass,
+        isLastDepth,
+        handleExpand,
+        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>