ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/components/table/StyledTable.js

@@ -0,0 +1,47 @@
+import 'sticky-kit/dist/sticky-kit';
+import _ from 'lodash';
+
+import Navigation from 'vj/components/navigation';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+export default class StyledTable extends DOMAttachedObject {
+  static DOMAttachKey = 'vjStyledTableInstance';
+
+  static DOMAttachSelector = '.data-table';
+
+  constructor($dom) {
+    if ($dom.closest('.section__body').length === 0) {
+      super(null);
+      return;
+    }
+
+    super($dom);
+
+    this.$container = $('<div>').addClass('section__table-container');
+    this.$container.insertBefore(this.$dom);
+
+    this.$header = $('<table>');
+    this.$header.attr('class', `${this.$dom.attr('class')} section__table-header`);
+
+    this.$container
+      .append(this.$header)
+      .append(this.$dom);
+
+    this.$header.empty();
+    this.$dom.children('colgroup').clone().appendTo(this.$header);
+    this.$dom.children('thead').appendTo(this.$header);
+
+    const stickyOptions = {
+      parent: this.$container,
+      offset_top: Navigation.instance.getHeight(),
+    };
+    _.defer(() => this.$header.stick_in_parent(stickyOptions));
+  }
+
+  detach() {
+    super.detach();
+    this.$header.trigger('sticky_kit:detach');
+  }
+}
+
+_.assign(StyledTable, DOMAttachedObject);

packages/ui-default/components/table/styledTable.page.js

@@ -0,0 +1,8 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import StyledTable from './StyledTable';
+
+const styledTablePage = new AutoloadPage('styledTablePage', () => {
+  StyledTable.registerLifeCycleHooks();
+});
+
+export default styledTablePage;

packages/ui-default/components/table/table.page.styl

@@ -0,0 +1,72 @@
+.data-table
+  width: 100%
+  table-layout: fixed
+  white-space: nowrap
+  font-size: rem($font-size-small)
+  font-weight: normal
+
+  th
+    font-size: rem($font-size-secondary)
+
+  tr
+    border-top: 1px solid $table-border-color
+    border-bottom: 1px solid $table-border-color
+
+    &:nth-child(even)
+      background: $table-alternate-bg-color
+
+    &.highlight
+      background: lighten($highlight-color, 85%)
+
+  &.is--full-row tr
+    cursor: pointer
+
+    &:hover
+      background: lighten($primary-color, 85%)
+
+  thead > tr
+    color: #888
+    border-top: 0
+    border-bottom: 1px solid $table-border-color
+
+  td, th
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    line-height: rem($table-lh)
+
+  td
+    padding: rem(5px $table-padding-h)
+
+  th
+    padding: rem(13px $table-padding-h)
+
+  .empty-row
+    color: #AAA
+    font-size: rem($font-size-small)
+
+.section__table-container
+  overflow: hidden
+
+.section__table-header
+  background: $table-header-bg-color
+  box-shadow: $table-header-shadow
+  position: relative
+  z-index: 100
+  transition: box-shadow .2s linear
+
+  thead > tr
+    border-bottom: 0
+
+  &.is_stuck
+    box-shadow: $table-header-shadow-floating
+
+.section__table-container,
+.section__body
+  & > .data-table
+    td, th
+      &:first-child
+        padding-left: rem($section-gap-h)
+
+      &:last-child
+        padding-right: rem($section-gap-h)