quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/STable.vue

@@ -1,425 +1,425 @@
-<template>
-  <q-table
-    flat
-    bordered
-    hide-pagination
-    hide-selected-banner
-    v-bind="$attrs"
-    :columns="columns"
-    :rows="rows"
-    :pagination="tablePagination"
-    :no-data-label="noDataLabel"
-    class="s-table"
-    :class="{
-      's-select-table': $attrs.selection,
-      'resizable-table': resizable,
-      'sticky-resizable-table': stickyResizable,
-      'sticky-header': stickyHeader,
-      'before-search': !rows.length,
-    }"
-    @selection="updateSelected"
-    ref="sTableRef"
-    @request="
-      props => {
-        $emit('request', props);
-      }
-    "
-  >
-    <template #no-data="props">
-      <slot name="noData" v-bind="props">
-        <div class="full-width text-center">
-          {{ noDataLabel }}
-        </div>
-      </slot>
-    </template>
-    <template #loading>
-      <q-inner-loading showing color="positive" size="72px" />
-    </template>
-    <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
-      <q-td
-        v-if="navigator"
-        :class="{
-          focused: isFocused(props),
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [props.col.classes]: props.col.classes,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-            ? props.row.class
-            : '']: true,
-        }"
-        :style="props.col.style"
-        @click.stop="focusCell(props)"
-      >
-        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
-          <s-input
-            ref="inputRef"
-            v-model="inputData"
-            v-if="props.col.editable && editing && isFocused(props)"
-            @blur="closeInput"
-            v-bind="inputOptions"
-          />
-          <span v-else class="s-table-edited-td"
-            >{{ props.value }}
-            <q-icon
-              size="16px"
-              :name="editIcon"
-              color="Blue_B_Lighten-1"
-              class="q-ml-xs"
-              v-if="props.col.editable"
-            />
-          </span>
-        </slot>
-      </q-td>
-      <q-td
-        v-else
-        v-bind="props"
-        :class="{
-          'text-center': props.col.align === 'center',
-          'text-right': props.col.align === 'right',
-          [props.col.classes]: props.col.classes,
-          [typeof props.row.class === 'function'
-            ? props.row.class(props.row)
-            : typeof props.row.class === 'string'
-            ? props.row.class
-            : '']: true,
-        }"
-        :style="props.col.style"
-      >
-        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
-          {{ props.value }}
-        </slot>
-      </q-td>
-    </template>
-    <template v-for="(_, slotName, index) in $slots" :key="index" #[slotName]="data">
-      <slot :name="slotName" v-bind="data"> </slot>
-    </template>
-  </q-table>
-  <s-pagination
-    v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
-    v-model="paginationModel.page"
-    :lastPage="pagesNumber"
-    class="q-mt-md"
-    @update:modelValue="updatePagination"
-  />
-</template>
-
-<script>
-  import { QTable, QInnerLoading, QTd, QIcon } from 'quasar';
-  import { defineComponent, onMounted, ref, computed, watch } from 'vue';
-  import { useResizable } from '../composables/table/use-resizable';
-  import { useNavigator } from '../composables/table/use-navigator';
-
-  export default defineComponent({
-    name: 'STable',
-    emits: ['update:page', 'update:focused', 'field-updated', 'request'],
-    components: {
-      QTable,
-      QInnerLoading,
-      QTd,
-      QIcon,
-    },
-    props: {
-      pagination: {
-        type: Object,
-        default: () => ({
-          page: 1,
-          rowsPerPage: 50,
-        }),
-      },
-      hideBottom: {
-        type: Boolean,
-        default: false,
-      },
-      showBottom: {
-        type: Boolean,
-        default: false,
-      },
-      noDataLabel: {
-        type: String,
-        default: '데이터 조회가 필요합니다',
-      },
-      columns: {
-        type: Array,
-        default: () => [],
-      },
-      rows: {
-        type: Array,
-        default: () => [],
-      },
-      resizable: {
-        type: Boolean,
-        default: false,
-      },
-      stickyHeader: {
-        type: Boolean,
-        default: false,
-      },
-      stickyResizable: {
-        type: [Array, Number],
-        required: false,
-      },
-      navigator: {
-        type: Boolean,
-        default: false,
-      },
-      inputOptions: {
-        type: Object,
-        default: () => ({ type: 'number' }),
-      },
-      focused: {
-        type: Object,
-      },
-    },
-    setup(props, { emit, attrs }) {
-      const tablePagination = ref(props.pagination);
-      const paginationModel = ref(props.pagination);
-      watch(
-        () => props.pagination,
-        newValue => {
-          paginationModel.value = { ...newValue };
-          tablePagination.value = { ...newValue };
-          if (props.pagination.lastPage) tablePagination.value.page = 1;
-        },
-        { deep: true },
-      );
-
-      function updatePagination(val) {
-        emit('update:page', val);
-        if (!props.pagination.lastPage) {
-          tablePagination.value.page = val;
-        }
-      }
-
-      const sTableRef = ref(null);
-      const {
-        focusCell,
-        isFocused,
-        editing,
-        inputRef,
-        inputData,
-        closeInput,
-        editIcon,
-      } = useNavigator(props, attrs, emit);
-      function updateSelected(details) {
-        if (details.added && details.evt && details.evt.shiftKey) {
-          const idx = props.rows.findIndex(r => r === details.rows[0]);
-          const lastIdx = attrs.selected
-            .map(x => props.rows.findIndex(y => y === x))
-            .filter(v => v < idx)
-            .reduce((a, b) => (Math.abs(b - idx) < Math.abs(a - idx) ? b : a));
-          for (let i = lastIdx + 1; i < idx; i++) {
-            attrs.selected.push(props.rows[i]);
-          }
-        }
-      }
-      function sort(col) {
-        sTableRef.value.sort(col);
-      }
-      onMounted(() => {
-        const { addResizable, addStickyResizable } = useResizable();
-        if (props.resizable) {
-          addResizable(sTableRef.value.$el);
-        }
-        if (props.stickyResizable) {
-          addStickyResizable(sTableRef.value.$el, props.stickyResizable);
-        }
-      });
-      return {
-        sTableRef,
-        focusCell,
-        isFocused,
-        editing,
-        inputRef,
-        inputData,
-        closeInput,
-        editIcon,
-        updateSelected,
-        tablePagination,
-        paginationModel,
-        pagesNumber: computed(
-          () => props.pagination.lastPage
-            || Math.ceil(props.rows.length / paginationModel.value.rowsPerPage),
-        ),
-        updatePagination,
-        sort,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-table {
-    border-radius: 8px !important;
-    border: 1px solid $Grey_Lighten-3;
-    .q-table__middle {
-      .q-table {
-        overflow: auto;
-        thead {
-          background: $th-bg;
-          min-height: 0;
-          tr {
-            height: 36px;
-            th {
-              padding: $table-th-padding;
-              font-size: $default-font;
-              font-weight: $font-weight-md;
-              word-break: keep-all;
-              white-space: nowrap;
-            }
-          }
-        }
-        tbody {
-          tr {
-            min-height: 0px;
-            td {
-              padding: $table-th-padding;
-              font-size: $default-font;
-              word-break: keep-all;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-
-              &:before {
-                background: none;
-              }
-              .s-table-edited-td {
-                display: inline-flex;
-                align-items: center;
-              }
-            }
-            .focused {
-              border: 1px solid $positive !important;
-            }
-            &:hover {
-              background-color: $Grey_Lighten-6;
-            }
-            &:last-child > td {
-              border-bottom-width: 1px;
-            }
-          }
-        }
-      }
-    }
-    .q-table__bottom {
-      min-height: 0;
-      padding: 0;
-      border: none;
-      &--nodata {
-        height: 240px;
-        color: $Grey_Default;
-        font-size: $default-font;
-        line-height: $default-line-height;
-        display: block;
-        padding-top: 80px;
-      }
-    }
-  }
-  .s-select-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th {
-              &:first-of-type {
-                padding: 0 8px 0 24px;
-                line-height: 100%;
-                > .q-checkbox {
-                  @extend %checkbox;
-                }
-              }
-            }
-          }
-        }
-        tbody {
-          tr {
-            td {
-              &:first-of-type {
-                padding: 0 8px 0 24px;
-                line-height: 100%;
-                > .q-checkbox {
-                  @extend %checkbox;
-                }
-              }
-              &:after {
-                background: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th:last-of-type {
-              .resiable-right {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .s-select-table.resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th:first-of-type {
-              > .resiable-right {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  .sticky-resizable-table {
-    .q-table__middle {
-      .q-table {
-        thead {
-          th:first-of-type {
-            > .resiable-left {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-  }
-  .sticky-header {
-    .q-table__middle {
-      .q-table {
-        thead {
-          tr {
-            th {
-              background: $th-bg;
-              position: sticky;
-              top: 0;
-              z-index: 100;
-            }
-          }
-        }
-      }
-    }
-  }
-  .before-search {
-    .q-table__middle {
-      .q-table {
-        thead {
-          opacity: 0.4;
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-table
+    flat
+    bordered
+    hide-pagination
+    hide-selected-banner
+    v-bind="$attrs"
+    :columns="columns"
+    :rows="rows"
+    :pagination="tablePagination"
+    :no-data-label="noDataLabel"
+    class="s-table"
+    :class="{
+      's-select-table': $attrs.selection,
+      'resizable-table': resizable,
+      'sticky-resizable-table': stickyResizable,
+      'sticky-header': stickyHeader,
+      'before-search': !rows.length,
+    }"
+    @selection="updateSelected"
+    ref="sTableRef"
+    @request="
+      props => {
+        $emit('request', props);
+      }
+    "
+  >
+    <template #no-data="props">
+      <slot name="noData" v-bind="props">
+        <div class="full-width text-center">
+          {{ noDataLabel }}
+        </div>
+      </slot>
+    </template>
+    <template #loading>
+      <q-inner-loading showing color="positive" size="72px" />
+    </template>
+    <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
+      <q-td
+        v-if="navigator"
+        :class="{
+          focused: isFocused(props),
+          'text-center': props.col.align === 'center',
+          'text-right': props.col.align === 'right',
+          [props.col.classes]: props.col.classes,
+          [typeof props.row.class === 'function'
+            ? props.row.class(props.row)
+            : typeof props.row.class === 'string'
+            ? props.row.class
+            : '']: true,
+        }"
+        :style="props.col.style"
+        @click.stop="focusCell(props)"
+      >
+        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
+          <s-input
+            ref="inputRef"
+            v-model="inputData"
+            v-if="props.col.editable && editing && isFocused(props)"
+            @blur="closeInput"
+            v-bind="inputOptions"
+          />
+          <span v-else class="s-table-edited-td"
+            >{{ props.value }}
+            <q-icon
+              size="16px"
+              :name="editIcon"
+              color="Blue_B_Lighten-1"
+              class="q-ml-xs"
+              v-if="props.col.editable"
+            />
+          </span>
+        </slot>
+      </q-td>
+      <q-td
+        v-else
+        v-bind="props"
+        :class="{
+          'text-center': props.col.align === 'center',
+          'text-right': props.col.align === 'right',
+          [props.col.classes]: props.col.classes,
+          [typeof props.row.class === 'function'
+            ? props.row.class(props.row)
+            : typeof props.row.class === 'string'
+            ? props.row.class
+            : '']: true,
+        }"
+        :style="props.col.style"
+      >
+        <slot :name="`body-cell-${column.name}-content`" v-bind="props">
+          {{ props.value }}
+        </slot>
+      </q-td>
+    </template>
+    <template v-for="(_, slotName, index) in $slots" :key="index" #[slotName]="data">
+      <slot :name="slotName" v-bind="data"> </slot>
+    </template>
+  </q-table>
+  <s-pagination
+    v-if="paginationModel.rowsPerPage !== 0 && ((!hideBottom && pagesNumber > 1) || showBottom)"
+    v-model="paginationModel.page"
+    :lastPage="pagesNumber"
+    class="q-mt-md"
+    @update:modelValue="updatePagination"
+  />
+</template>
+
+<script>
+  import { QTable, QInnerLoading, QTd, QIcon } from 'quasar';
+  import { defineComponent, onMounted, ref, computed, watch } from 'vue';
+  import { useResizable } from '../composables/table/use-resizable';
+  import { useNavigator } from '../composables/table/use-navigator';
+
+  export default defineComponent({
+    name: 'STable',
+    emits: ['update:page', 'update:focused', 'field-updated', 'request'],
+    components: {
+      QTable,
+      QInnerLoading,
+      QTd,
+      QIcon,
+    },
+    props: {
+      pagination: {
+        type: Object,
+        default: () => ({
+          page: 1,
+          rowsPerPage: 50,
+        }),
+      },
+      hideBottom: {
+        type: Boolean,
+        default: false,
+      },
+      showBottom: {
+        type: Boolean,
+        default: false,
+      },
+      noDataLabel: {
+        type: String,
+        default: '데이터 조회가 필요합니다',
+      },
+      columns: {
+        type: Array,
+        default: () => [],
+      },
+      rows: {
+        type: Array,
+        default: () => [],
+      },
+      resizable: {
+        type: Boolean,
+        default: false,
+      },
+      stickyHeader: {
+        type: Boolean,
+        default: false,
+      },
+      stickyResizable: {
+        type: [Array, Number],
+        required: false,
+      },
+      navigator: {
+        type: Boolean,
+        default: false,
+      },
+      inputOptions: {
+        type: Object,
+        default: () => ({ type: 'number' }),
+      },
+      focused: {
+        type: Object,
+      },
+    },
+    setup(props, { emit, attrs }) {
+      const tablePagination = ref(props.pagination);
+      const paginationModel = ref(props.pagination);
+      watch(
+        () => props.pagination,
+        newValue => {
+          paginationModel.value = { ...newValue };
+          tablePagination.value = { ...newValue };
+          if (props.pagination.lastPage) tablePagination.value.page = 1;
+        },
+        { deep: true },
+      );
+
+      function updatePagination(val) {
+        emit('update:page', val);
+        if (!props.pagination.lastPage) {
+          tablePagination.value.page = val;
+        }
+      }
+
+      const sTableRef = ref(null);
+      const {
+        focusCell,
+        isFocused,
+        editing,
+        inputRef,
+        inputData,
+        closeInput,
+        editIcon,
+      } = useNavigator(props, attrs, emit);
+      function updateSelected(details) {
+        if (details.added && details.evt && details.evt.shiftKey) {
+          const idx = props.rows.findIndex(r => r === details.rows[0]);
+          const lastIdx = attrs.selected
+            .map(x => props.rows.findIndex(y => y === x))
+            .filter(v => v < idx)
+            .reduce((a, b) => (Math.abs(b - idx) < Math.abs(a - idx) ? b : a));
+          for (let i = lastIdx + 1; i < idx; i++) {
+            attrs.selected.push(props.rows[i]);
+          }
+        }
+      }
+      function sort(col) {
+        sTableRef.value.sort(col);
+      }
+      onMounted(() => {
+        const { addResizable, addStickyResizable } = useResizable();
+        if (props.resizable) {
+          addResizable(sTableRef.value.$el);
+        }
+        if (props.stickyResizable) {
+          addStickyResizable(sTableRef.value.$el, props.stickyResizable);
+        }
+      });
+      return {
+        sTableRef,
+        focusCell,
+        isFocused,
+        editing,
+        inputRef,
+        inputData,
+        closeInput,
+        editIcon,
+        updateSelected,
+        tablePagination,
+        paginationModel,
+        pagesNumber: computed(
+          () => props.pagination.lastPage
+            || Math.ceil(props.rows.length / paginationModel.value.rowsPerPage),
+        ),
+        updatePagination,
+        sort,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-table {
+    border-radius: 8px !important;
+    border: 1px solid $Grey_Lighten-3;
+    .q-table__middle {
+      .q-table {
+        overflow: auto;
+        thead {
+          background: $th-bg;
+          min-height: 0;
+          tr {
+            height: 36px;
+            th {
+              padding: $table-th-padding;
+              font-size: $default-font;
+              font-weight: $font-weight-md;
+              word-break: keep-all;
+              white-space: nowrap;
+            }
+          }
+        }
+        tbody {
+          tr {
+            min-height: 0px;
+            td {
+              padding: $table-th-padding;
+              font-size: $default-font;
+              word-break: keep-all;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+
+              &:before {
+                background: none;
+              }
+              .s-table-edited-td {
+                display: inline-flex;
+                align-items: center;
+              }
+            }
+            .focused {
+              border: 1px solid $positive !important;
+            }
+            &:hover {
+              background-color: $Grey_Lighten-6;
+            }
+            &:last-child > td {
+              border-bottom-width: 1px;
+            }
+          }
+        }
+      }
+    }
+    .q-table__bottom {
+      min-height: 0;
+      padding: 0;
+      border: none;
+      &--nodata {
+        height: 240px;
+        color: $Grey_Default;
+        font-size: $default-font;
+        line-height: $default-line-height;
+        display: block;
+        padding-top: 80px;
+      }
+    }
+  }
+  .s-select-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th {
+              &:first-of-type {
+                padding: 0 8px 0 24px;
+                line-height: 100%;
+                > .q-checkbox {
+                  @extend %checkbox;
+                }
+              }
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              &:first-of-type {
+                padding: 0 8px 0 24px;
+                line-height: 100%;
+                > .q-checkbox {
+                  @extend %checkbox;
+                }
+              }
+              &:after {
+                background: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th:last-of-type {
+              .resiable-right {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .s-select-table.resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th:first-of-type {
+              > .resiable-right {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .sticky-resizable-table {
+    .q-table__middle {
+      .q-table {
+        thead {
+          th:first-of-type {
+            > .resiable-left {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  .sticky-header {
+    .q-table__middle {
+      .q-table {
+        thead {
+          tr {
+            th {
+              background: $th-bg;
+              position: sticky;
+              top: 0;
+              z-index: 100;
+            }
+          }
+        }
+      }
+    }
+  }
+  .before-search {
+    .q-table__middle {
+      .q-table {
+        thead {
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+</style>