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

package/src/components/SMarkupTable.vue

@@ -1,142 +1,142 @@
-<template>
-  <q-markup-table
-    flat
-    bordered
-    :separator="separator"
-    class="s-markup-table"
-    :class="{
-      'header-left': header === 'left',
-      'header-top': header === 'top',
-      'tr-no-hover': noHover,
-    }"
-  >
-    <template #loading>
-      <q-inner-loading showing color="positive" size="72px" />
-    </template>
-    <slot>
-      <!-- table head가 왼쪽일 시,
-      thead를 사용하지 않고
-      tbody > tr > th 로 column을 설정해주세요. -->
-    </slot>
-  </q-markup-table>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { QMarkupTable, QInnerLoading } from 'quasar';
-
-export default defineComponent({
-  name: 'SMarkupTable',
-  components: {
-    QMarkupTable, QInnerLoading,
-  },
-  props: {
-    separator: {
-      type: String,
-      default: 'Horizontal',
-    },
-    header: {
-      type: String,
-      default: 'top',
-    },
-    noHover: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup() {
-    return {};
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import "../css/quasar.variables.scss";
-
-.s-markup-table {
-  border-radius: 8px !important;
-  border: 1px solid $Grey_Lighten-3;
-  :deep(>.q-table) {
-    > thead {
-      min-height: 0;
-      > tr {
-        height: $table-tr-height;
-        > 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;
-        height: $table-tr-height;
-        > th {
-          font-size: $default-font;
-        }
-        > td {
-          height: $table-tr-height;
-          padding: $table-td-padding;
-          font-size: $default-font;
-          &:before{
-            background:none;
-          }
-        }
-        &:hover {
-          background-color: $Grey_Lighten-6;
-        }
-      }
-    }
-  }
-}
-.s-markup-table.header-top {
-  :deep(>.q-table) {
-    thead {
-      background: $th-bg;
-    }
-  }
-}
-.s-markup-table.header-left {
-  :deep(>.q-table) {
-    > tbody {
-      > tr {
-        > th {
-          background: $th-bg;
-          font-weight: $font-weight-lg;
-          border-bottom: 1px solid $Grey_Lighten-3;
-          padding: 0 16px;
-          &:not(:first-of-type) {
-            border-left: 1px solid $Grey_Lighten-3;
-          }
-        }
-        > th:not(:first-of-type) {
-          border-left: 1px solid $Grey_Lighten-3;
-        }
-        &:last-of-type {
-          > th {
-            border-bottom: none;
-          }
-        }
-        > td {
-          padding: 0 12px;
-        }
-      }
-    }
-  }
-}
-.s-markup-table.tr-no-hover {
-  :deep(>.q-table) {
-    > tbody {
-      > tr:hover {
-        background-color: transparent;
-        > td:before {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <q-markup-table
+    flat
+    bordered
+    :separator="separator"
+    class="s-markup-table"
+    :class="{
+      'header-left': header === 'left',
+      'header-top': header === 'top',
+      'tr-no-hover': noHover,
+    }"
+  >
+    <template #loading>
+      <q-inner-loading showing color="positive" size="72px" />
+    </template>
+    <slot>
+      <!-- table head가 왼쪽일 시,
+      thead를 사용하지 않고
+      tbody > tr > th 로 column을 설정해주세요. -->
+    </slot>
+  </q-markup-table>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { QMarkupTable, QInnerLoading } from 'quasar';
+
+export default defineComponent({
+  name: 'SMarkupTable',
+  components: {
+    QMarkupTable, QInnerLoading,
+  },
+  props: {
+    separator: {
+      type: String,
+      default: 'Horizontal',
+    },
+    header: {
+      type: String,
+      default: 'top',
+    },
+    noHover: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../css/quasar.variables.scss";
+
+.s-markup-table {
+  border-radius: 8px !important;
+  border: 1px solid $Grey_Lighten-3;
+  :deep(>.q-table) {
+    > thead {
+      min-height: 0;
+      > tr {
+        height: $table-tr-height;
+        > 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;
+        height: $table-tr-height;
+        > th {
+          font-size: $default-font;
+        }
+        > td {
+          height: $table-tr-height;
+          padding: $table-td-padding;
+          font-size: $default-font;
+          &:before{
+            background:none;
+          }
+        }
+        &:hover {
+          background-color: $Grey_Lighten-6;
+        }
+      }
+    }
+  }
+}
+.s-markup-table.header-top {
+  :deep(>.q-table) {
+    thead {
+      background: $th-bg;
+    }
+  }
+}
+.s-markup-table.header-left {
+  :deep(>.q-table) {
+    > tbody {
+      > tr {
+        > th {
+          background: $th-bg;
+          font-weight: $font-weight-lg;
+          border-bottom: 1px solid $Grey_Lighten-3;
+          padding: 0 16px;
+          &:not(:first-of-type) {
+            border-left: 1px solid $Grey_Lighten-3;
+          }
+        }
+        > th:not(:first-of-type) {
+          border-left: 1px solid $Grey_Lighten-3;
+        }
+        &:last-of-type {
+          > th {
+            border-bottom: none;
+          }
+        }
+        > td {
+          padding: 0 12px;
+        }
+      }
+    }
+  }
+}
+.s-markup-table.tr-no-hover {
+  :deep(>.q-table) {
+    > tbody {
+      > tr:hover {
+        background-color: transparent;
+        > td:before {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+}
+</style>