|
@@ -22,19 +22,23 @@
|
|
|
-->
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
- <table>
|
|
|
|
|
|
|
+ <table class="hue-table">
|
|
|
<thead>
|
|
<thead>
|
|
|
- <tr>
|
|
|
|
|
- <th v-for="(column, colIndex) in columns" :key="colIndex">{{ column.label }}</th>
|
|
|
|
|
|
|
+ <tr class="header-row">
|
|
|
|
|
+ <th v-for="(column, colIndex) in columns" :key="colIndex">
|
|
|
|
|
+ <div class="cell-content">{{ column.label }}</div>
|
|
|
|
|
+ </th>
|
|
|
</tr>
|
|
</tr>
|
|
|
</thead>
|
|
</thead>
|
|
|
<tbody>
|
|
<tbody>
|
|
|
<tr v-for="(row, rowIndex) in rows" :key="rowIndex" @click="$emit('row-clicked', row)">
|
|
<tr v-for="(row, rowIndex) in rows" :key="rowIndex" @click="$emit('row-clicked', row)">
|
|
|
<td v-for="(column, colIndex) in columns" :key="colIndex">
|
|
<td v-for="(column, colIndex) in columns" :key="colIndex">
|
|
|
- <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
|
|
|
|
|
- <template v-else>
|
|
|
|
|
- {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ <div class="cell-content" :class="{ small: column.small }">
|
|
|
|
|
+ <slot v-if="hasCellSlot(column)" :name="cellSlotName(column)" v-bind="row" />
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ {{ column.adapter ? column.adapter(column.key, row) : row[column.key] }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
</td>
|
|
</td>
|
|
|
</tr>
|
|
</tr>
|
|
|
</tbody>
|
|
</tbody>
|
|
@@ -64,4 +68,86 @@
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+ @import './styles/colors';
|
|
|
|
|
+ @import './styles/mixins';
|
|
|
|
|
+
|
|
|
|
|
+ .hue-table {
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ margin: 0 0 15px 0;
|
|
|
|
|
+ border-radius: $hue-panel-border-radius;
|
|
|
|
|
+ border-spacing: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ line-height: 14px;
|
|
|
|
|
+ vertical-align: baseline;
|
|
|
|
|
+
|
|
|
|
|
+ * {
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ thead,
|
|
|
|
|
+ tbody {
|
|
|
|
|
+ tr {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ background: none;
|
|
|
|
|
+
|
|
|
|
|
+ th,
|
|
|
|
|
+ td {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ vertical-align: middle;
|
|
|
|
|
+
|
|
|
|
|
+ .cell-content {
|
|
|
|
|
+ min-height: 41px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 5px;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+
|
|
|
|
|
+ &.small {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ thead {
|
|
|
|
|
+ tr {
|
|
|
|
|
+ border-bottom: 1px solid $fluid-gray-300;
|
|
|
|
|
+
|
|
|
|
|
+ th {
|
|
|
|
|
+ color: $fluid-gray-700;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ .sort-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ letter-spacing: normal;
|
|
|
|
|
+ outline: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ tbody {
|
|
|
|
|
+ tr {
|
|
|
|
|
+ border-bottom: 1px solid $fluid-gray-200;
|
|
|
|
|
+
|
|
|
|
|
+ td {
|
|
|
|
|
+ color: $fluid-gray-900;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-of-type {
|
|
|
|
|
+ padding-right: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|