layers-design-system 2.4.0 → 2.6.0

package/src/components/LTable/index.vue

@@ -1,961 +0,0 @@
-<template>
-  <div
-    class="l-table-container"
-    ref="container"
-    :style="contentStyle"
-    :class="contentClasses"
-    @scroll="onScroll">
-    
-    <!-- Main table -->
-    <table class="l-table-table" cellspacing="0" cellpadding="0" border="0">
-      <!-- Header -->
-      <LTableHeader
-        :height="headerHeight"
-        :selectable="selectable"
-        :columnSpecs="columnSpecs"
-        :loading="!!fetching"
-        :total="totalCount"
-        :includedIds="includedIds"
-        :excludedIds="excludedIds"
-        :multiselect="multiselect"
-        @selected="changeSelection($event)"
-      />
-
-      <!-- Preceding body that inflates table -->
-      <LTableBodySpacer :height="spacing.top" />
-
-      <!-- Pages to present data -->
-      <LTableBody
-        v-for="page in visiblePages"
-        :key="page.index"
-        :page="page"
-        :perPage="perPage"
-        :pagesCount="pagesCount"
-        :totalCount="totalCount"
-        :selectable="selectable"
-        :clickable="clickable"
-        :columnSpecs="columnSpecs"
-        :includedIds="includedIds"
-        :excludedIds="excludedIds"
-        :multiselect="multiselect"
-        @click-item="$emit('click-item', $event)"
-        @selected="changeSelection($event)"
-      />
-
-
-      <!-- Proceding body that inflates table -->
-      <LTableBodySpacer :height="spacing.bottom"/>
-    </table>
-
-    <!-- Load More -->
-    <LTableLoadMore
-      v-if="isLoadMoreVisible"
-      @click="loadMore(true)"
-      @appeared="loadMore()"
-      :automatic="autoLoadMore"/>
-
-    <!-- Spacer to fill remaining space -->
-    <LTableEndspace/>
-
-    <!-- Error message -->
-    <transition name="scale-up">
-      <LTableReloader v-if="hasVisibleFailedPages" @reload="reloadFailedPages()"/>
-    </transition>
-
-    <!-- Pagination -->
-    <LTablePagination
-      v-if="isPaginationVisible"
-      :currentPage="currentPage"
-      :pagesCount="pagesCount"
-      :totalCount="totalCount"
-      @goto="gotoPage($event)"/>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-console */
-
-import FieldTypes from "./FieldTypes";
-FieldTypes.register();
-
-import LTableBody from "./LTableBody.vue";
-import LTableHeader from "./LTableHeader.vue";
-import LTableEndspace from "./LTableEndspace.vue"
-import LTableLoadMore from "./LTableLoadMore.vue";
-import LTableReloader from "./LTableReloader.vue";
-import LTableBodySpacer from "./LTableBodySpacer.vue";
-import LTablePagination from "./LTablePagination.vue";
-
-import {changeSelection} from './helpers'
-
-const SCROLL_DEBOUNCE_MS = 100;
-const SCROLL_FAST_SCROLL_SPEED = 30000;
-const MAX_PARALEL_RELOADED_PAGES = 3;
-const IS_SMOOTH_SCROLL_SUPPORTED = 'scrollBehavior' in document.documentElement.style;
-
-
-export default {
-  name: "LTable",
-  tagName: "l-table",
-
-  components: {
-      LTableHeader,
-      LTableBody,
-      LTableReloader,
-      LTableLoadMore,
-      LTableEndspace,
-      LTableBodySpacer,
-      LTablePagination,
-  },
-
-  props: {
-    /**
-     * Array of items to display as rows.
-     *
-     * Each row data must be a object and carry a top level field key
-     * named equal to the `primaryKey` parameter (defaults to `id`)
-     */
-    rows: {
-      type: Array
-    },
-
-    /**
-     * Used to identify the key in item elements
-     */
-    primaryKey: {
-      type: String,
-      default: "id"
-    },
-
-    /**
-     * An async method that gets called for every page load,
-     * and should reply with data in form of Array of rows
-     *
-     * It receives only one parameter with an object consisting of:
-     * { page: Number, perPage: Number, columns: Array of Column, primaryKey: String }
-     */
-    fetch: {
-      type: Function
-    },
-
-    /**
-     * Columns that will be presented on the table
-     */
-    columns: {
-      type: Array
-    },
-
-    /**
-     * If it should show pagination or not.
-     *
-     * If display is paged, it will always be paginated regardless of this flag.
-     */
-    pagination: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Display mode of the table:
-     *
-     *   all: Makes scroll have enought space for all rows regardless of being loaded or not.
-     *  more: Makes scroll until last page loaded. More pages get added once they are loaded.
-     * paged: Makes scroll have space for a single page of data. Pagination is shown by default.
-     */
-    display: {
-      type: String,
-      enum: ['all', 'more', 'paged'],
-      default: 'all',
-    },
-
-    /**
-     * Automatic loads more if reached the end on 'more' mode
-     */
-    autoLoadMore: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * If set, columns might have only the identifier of the field in schema
-     * and avoid duplication of data inside the columns field
-     */
-    schema: {
-      type: Object,
-      required: true
-    },
-
-    /**
-     * Allows selection to occur
-     */
-    selectable: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Show cursor pointer on item hover
-     */
-    clickable: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Allows more than one item to be selected
-     */
-    multiselect: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * If enabled, will allow a "inverse" selection to occur, in order to
-     * select huge amounts of unloaded items.
-     */
-    allowInvertedSelection: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * The height in pixels of each line. Must be set to a number that exactly
-     * matches the table.
-     *
-     * If this size differs from actual size in dom, recycling will not work properly
-     */
-    rowHeight: {
-      type: Number,
-      default: 32
-    },
-
-    /**
-     * Tickness of the border rows
-     */
-    borderTick: {
-      type: Number,
-      default: 1
-    },
-
-    /**
-     * Snaps the viewport to the new page being loaded after triggering the loadmore
-     */
-    snapToPageOnMore: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * Forces first left column to be sticky
-     */
-    stickyColumnLeft: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * If possible, will use recycle layout in order to prevent large volumes of rows being rendered
-     */
-    recycle: {
-      type: Boolean,
-      default: true,
-    },
-
-    /**
-     * If set, will load this number of rows at a time
-     */
-    limitPerPage: {
-      type: Number,
-      default: 50,
-    },
-  },
-
-  mounted() {
-    this.computeVisibleRows();
-  },
-
-  data() {
-    return {
-      fetching: 0,
-      headerHeight: 56,
-
-      nonce: 0,
-
-      // Internal identification for hole state of loaded pages
-      id: 0,
-      extraRows: 15,
-
-      lastComputedOffsetY: 0,
-
-      includedIds: [],
-      excludedIds: [],
-
-      scrollAtTop: true,
-      scrollAtLeft: true,
-
-      totalCount: 0,
-      firstPage: null,
-      currentPage: null,
-      lastPage: null,
-
-      loadedPages: []
-    };
-  },
-
-  watch: {
-    totalCount(val) {
-      this.$emit('changeSelection', {
-        includedIds: this.includedIds,
-        excludedIds: this.excludedIds,
-        selectionCount: this.selectionCount,
-        totalCount: val
-      })
-    },
-    somePageIsLoading(val) {
-      this.$emit('loading', val)
-    }
-  },
-
-  computed: {
-
-    perPage() {
-      return this.limitPerPage;
-    },
-
-    pagesCount() {
-      return Math.floor(this.totalCount / this.perPage) + 1;
-    },
-
-    selectionCount() {
-      if (this.includedIds.toString() === "*") {
-        return this.totalCount - this.excludedIds.length;
-      }
-
-      return this.includedIds.length;
-    },
-
-    lastLoadedPage() {
-      return this.loadedPages.length
-    },
-
-    isLoadMoreVisible() {
-      return this.display === 'more' && (this.lastLoadedPage < this.pagesCount)
-    },
-
-    isPaginationVisible() {
-      return (this.display === 'page' || !!this.pagination) && (this.display !== 'more') && this.pagesCount !== null
-    },
-
-    isLeftColumnSticky() {
-      return this.stickyColumnLeft || (this.columns && this.columns[0] && this.columns[0].sticky)
-    },
-
-    usingRecycledLayout() {
-      return this.display !== 'paged' && this.recycle
-    },
-
-    hasVisibleFailedPages() {
-      for (let page = this.firstPageRendered; page <= this.lastPageRendered; page++) {
-        if (this.loadedPages[page] && this.loadedPages[page].failed) {
-          return true
-        }
-      }
-      return false
-    },
-
-    firstPageRendered() {
-      // Render from page 0 if not using recycledLayout
-      if (!this.usingRecycledLayout && this.display !== 'paged') {
-        return 0
-      }
-
-      return this.firstPage
-    },
-
-    lastPageRendered() {
-      // Force one page being rendered on paged mode
-      if (this.display === 'paged') {
-         return this.firstPage
-      }
-
-      // If not using recycled layout, we should limit to the number of currently loadedPages
-      if (!this.usingRecycledLayout) {
-        return Math.max(0, this.lastLoadedPage - 1)
-      }
-
-      return this.lastPage
-    },
-
-    visiblePages() {
-      let pages = [];
-
-      for (let i = this.firstPageRendered; i <= this.lastPageRendered; i++) {
-        let pageData = this.loadedPages[i] || {index: i}
-        pages.push(pageData);
-      }
-
-      return pages;
-    },
-    contentStyle() {
-      return {
-        // General
-        "--l-table-primary-color": "#2F8AF5",
-        "--l-table-warning-color": "#fd3a57",
-        "--l-table-bg-color": "white",
-
-        // Header
-        "--l-table-header-height": `${this.headerHeight}px`,
-        "--l-table-header-text-color": "#232B34",
-        "--l-table-header-border-color": "#E8E8E8",
-
-        // Loader and Skeleton
-        "--l-table-skeleton-height": `${Math.min(this.rowHeight - 8, 8)}px`,
-        "--l-table-loader-height": "3px",
-        "--l-table-loader-color": "var(--l-table-primary-color)",
-        
-        // Rows
-        "--l-table-row-height": `${this.rowHeight}px`,
-        "--l-table-cell-padding": "0 8px",
-        "--l-table-row-hover-color": "#fafbfd",
-        "--l-table-row-selected-color": "#eef5fa",
-        "--l-table-row-selected-hover-color": "#e6f0f8",
-        "--l-table-border-color": "#D3DAE6",
-        "--l-table-border-tick": `${this.borderTick}px`,
-        
-        // Selector
-        "--l-table-selector-width": `${this.selectable ? Math.min(this.headerHeight, this.rowHeight) : 0}px`,
-
-        // Load more
-        "--l-table-loadmore-height": "46px",
-
-        // Pagination
-        '--l-table-pagination-height': '48px',
-        '--l-table-pagination-color': 'var(--l-table-primary-color)',
-        '--l-table-pagination-bg-color': 'white',
-
-        // Reloader
-        '--l-table-reloader-margin': '16px',
-
-        // Endspace
-        '--l-table-endspace-bg-color': '#f5f5f5',
-
-        // Links
-        '--l-table-link-color': 'var(--l-table-primary-color)',
-      };
-    },
-
-    contentClasses() {
-      return {
-        "l-table-at-top": this.scrollAtTop,
-        "l-table-at-left": this.scrollAtLeft,
-        "l-table-sticky-column-left": this.isLeftColumnSticky,
-      };
-    },
-
-    spacing() {
-      let top = 0
-      let bottom = 0
-      let display = this.display
-      let totalCount = this.totalCount
-
-      // Override totalCount on more mode, to make it fill until last loaded page
-      if (display === 'more') {
-        totalCount = this.loadedPages.length * this.perPage
-      }
-
-      if (display === 'all' || display === 'more') {
-        // Add spacing before
-        top = this.firstPageRendered * this.perPage * this.rowHeight
-
-        // Add spacing after
-        bottom = Math.max(0, (totalCount - (this.lastPageRendered + 1) * this.perPage) * this.rowHeight)
-      }
-
-      // console.log({top, bottom, totalCount: this.totalCount, lastPage: this.lastPage, pagesCount: this.pagesCount, perPage: this.perPage})
-      return {
-        top: Math.max(0, top),
-        bottom: Math.max(0, bottom),
-      };
-    },
-
-    // Aggregate of all asked columns and their schema
-    columnSpecs() {
-      if (!this.columns) {
-        return [];
-      }
-
-      return this.columns.map(col => this.buildColumnSpec(col));
-    },
-
-    rect() {
-      return this.$refs.container.getBoundingClientRect();
-    },
-
-    somePageIsLoading() {
-      return this.loadedPages.map(page => page.loading).some(loading => loading)
-    }
-  },
-
-  methods: {
-    itemToId(entity) {
-      if (!entity) return null;
-
-      if (this.primaryKey) return entity[this.primaryKey];
-
-      return entity;
-    },
-
-    scrollTo(offset = 0, smooth) {
-      // Add smooth behavior only if distance to target is not so high
-      let behavior = 'auto'
-      if (smooth) {
-        let scrollTop = this.$refs.container.scrollTop
-        let maxSmoothDistance = this.perPage * this.rowHeight + 1
-        behavior = Math.abs(scrollTop - offset) < maxSmoothDistance ? 'smooth' : 'auto'
-      }
-
-      // Scroll to target
-      this.$refs.container.scrollTo({top: offset, behavior})
-    },
-
-    gotoPage(pageIndex, smooth) {
-      pageIndex = Math.max(0, Math.min(this.pagesCount, pageIndex))
-
-      if (this.display === 'paged') {
-        this.setViewablePages(pageIndex, pageIndex, pageIndex)
-        this.scrollTo(0, true)
-        return
-      }
-      
-      // Set viewable pages depending on display mode
-      if (this.display === 'more') {
-        this.setViewablePages(pageIndex - 1, pageIndex, pageIndex)
-      } else {
-        this.setViewablePages(pageIndex, pageIndex, pageIndex)
-      }
-
-      // Scroll into view
-      let offset = pageIndex * this.rowHeight * this.perPage
-      this.scrollTo(offset, smooth)
-    },
-
-    async loadMore(allowSnap) {
-      // Check if its already loading last page
-      let lastPage = this.loadedPages[this.loadedPages.length - 1]
-
-      if (!lastPage || lastPage.loading) {
-        return false
-      }
-
-      // Trigger load
-      let nextPage = this.loadedPages.length
-
-      this.setViewablePages(this.firstPage, nextPage)
-      if (allowSnap && this.snapToPageOnMore && IS_SMOOTH_SCROLL_SUPPORTED) {
-        setTimeout(() => this.gotoPage(nextPage, true), 100)
-      }
-    },
-
-    reload() {
-      this.id++
-      this.fetching = 0;
-      this.firstPage = null
-      this.lastPage = null
-      this.totalCount = null
-      this.loadedPages = [];
-      this.includedIds = [];
-      this.excludedIds = [];
-      this.gotoPage(0)
-      this.computeVisibleRows();
-    },
-
-    /**
-     * Forces reloading of failed pages that are visible
-     */
-    reloadFailedPages() {
-      // Safe guard to prevent too many reloads
-      let reloadedPages = 0
-
-      // Iterate visible pages and re-fetches
-      for (let page = this.firstPageRendered; page <= this.lastPageRendered; page++) {
-        // If not failed, continue
-        if (!this.loadedPages[page] || !this.loadedPages[page].failed) {
-          continue
-        }
-        
-        // Remove page data
-        this.$set(this.loadedPages, page, null)
-
-        // Re-fetch page
-        this.fetchPage(page)
-
-        // Safe guard
-        if (++reloadedPages >= MAX_PARALEL_RELOADED_PAGES) {
-          break;
-        }
-      }
-    },
-
-    onScroll() {
-      // Paged mode doesnt need scroll events
-      // if (this.display === 'paged') {
-      //   return
-      // }
-
-      // Is it too fast?
-      let scrollSpeed = this.getScrollSpeed();
-      let tooFast = scrollSpeed > SCROLL_FAST_SCROLL_SPEED;
-
-      // Not too fast and is not currently inside a debounce
-      if (!tooFast && !this._scrollDebounce) {
-        return this.computeVisibleRows();
-      }
-
-      // Post compute visible rows if its too fast scrolling
-      clearTimeout(this._scrollDebounce);
-      this._scrollDebounce = setTimeout(() => {
-        this.computeVisibleRows();
-        this._scrollDebounce = null;
-      }, SCROLL_DEBOUNCE_MS);
-    },
-
-    getScrollSpeed() {
-      // Check if is scrolling too fast and postergate computation
-      let lastOffsetY = this._lastOffsetY || 0;
-      let lastOffsetYTime = this._lastOffsetYTime || 0;
-      let offsetY = (this._lastOffsetY = this.$refs.container.scrollTop);
-      let offsetYTime = (this._lastOffsetYTime = Date.now());
-      let speedY = Math.abs(
-        (1000 * (lastOffsetY - offsetY)) / (offsetYTime - lastOffsetYTime)
-      );
-      return speedY;
-    },
-
-    computeVisibleRows() {
-      // Read scroll offset from container
-      let offsetY = this.$refs.container.scrollTop;
-      let offsetX = this.$refs.container.scrollLeft;
-      let lastComputedOffsetY = this.lastComputedOffsetY;
-
-      // Check if is at top/left
-      this.scrollAtTop = offsetY === 0;
-      this.scrollAtLeft = offsetX === 0;
-
-      // Skip computation on small scrolling
-      let deltaY = Math.abs(lastComputedOffsetY - offsetY);
-      if (offsetY > 2 && lastComputedOffsetY > 2 && deltaY < 150) {
-        return;
-      }
-      // Update last offsetY
-      this.lastComputedOffsetY = offsetY;
-
-      // Paged mode doesnt compute visible rows
-      if (this.display === 'paged') {
-        return
-      }
-
-      // Compute and get height of container
-      let rect = this.rect;
-      let height = rect.height - this.headerHeight;
-
-      // Compute the first row index visible in the table
-      let firstRow = Math.max(0, Math.floor(offsetY / this.rowHeight));
-      let visibleRows = Math.ceil(height / this.rowHeight);
-      let lastRow = firstRow + visibleRows;
-
-      // Compute first and last visible page
-      let extraRows = this.extraRows;
-      let perPage = this.perPage;
-      let firstPage = Math.floor((firstRow - extraRows) / this.perPage);
-      let lastPage = Math.floor((lastRow + extraRows) / perPage);
-
-      // Find out best page to set as current
-      let currentPageExtraRows = (lastPage >= this.pagesCount - 1) ? visibleRows : visibleRows / 2
-      let currentPage = Math.floor((firstRow + currentPageExtraRows) / this.perPage);
-
-      // If operating in 'more' mode, limit firstPage and lastPage
-      if (this.display === 'more') {
-        firstPage = Math.min(firstPage, this.lastLoadedPage)
-        while(!this.loadedPages[firstPage] && firstPage > 0) {
-          firstPage--
-        }
-        lastPage = Math.max(lastPage, firstPage)
-        while(!this.loadedPages[lastPage] && lastPage > firstPage && lastPage > 0) {
-          lastPage--
-        }
-      }
-
-      // Updates first and lastPage
-      this.setViewablePages(firstPage, lastPage, currentPage)
-    },
-
-    setViewablePages(firstPage = 0, lastPage = 0, currentPage = 0) {
-      // console.log('setViewablePages', {firstPage, lastPage, pagesCount: this.pagesCount})
-      // If operating in paged mode, lastPage always equals firstPage
-      if (this.display === 'paged') {
-        lastPage = firstPage
-      }
-
-      // Limit first/last page indexes
-      firstPage = Math.min(Math.max(firstPage, 0), this.pagesCount - 1);
-      lastPage = Math.min(Math.max(lastPage, firstPage), this.pagesCount - 1);
-      currentPage = Math.min(lastPage, Math.max(firstPage, currentPage || 0));
-
-      // Check if changed pages
-      let pagesChanged =
-        firstPage !== this.firstPage || lastPage !== this.lastPage;
-
-      // Save pages indexes
-      this.firstPage = firstPage;
-      this.lastPage = lastPage;
-      this.currentPage = currentPage
-
-      // Schedule fetching on change
-      if (pagesChanged) {
-        // console.log('setViewablePages pagesChanged', firstPage, lastPage)
-        this.scheduleFeching();
-      }
-    },
-
-    buildColumnSpec(column) {
-      if (!this.schema.fields) {
-        throw new Error("Missing schema.fields!");
-      }
-      const field = this.schema.fields.find(c => c.path === column.path);
-      if (!field) {
-        throw new Error(`Missing field schema for path ${column.path}`);
-      }
-      const component = this.$L.FieldTypeComponents.get(field, "default");
-
-      return Object.assign({}, field, {
-        width: column.width || null,
-        sortable: field ? field.sortable : false,
-        sticky: (field && field.sticky) || column.sticky || false,
-        align: (field && field.align) || "left",
-        column,
-        field,
-        component
-      });
-    },
-
-    changeSelection({ key, selected }) {
-      const { includedIds, excludedIds } = changeSelection({key, selected}, this)
-      this.includedIds = includedIds
-      this.excludedIds = excludedIds
-
-      this.$nextTick(() => {
-        this.$emit('changeSelection', {
-          includedIds: this.includedIds,
-          excludedIds: this.excludedIds,
-          selectionCount: this.selectionCount,
-          totalCount: this.totalCount
-        })
-      })
-    },
-
-    scheduleFeching() {
-      for (let page = this.firstPage; page <= this.lastPage; page++) {
-        this.fetchPage(page);
-      }
-    },
-
-    async fetchPage(page) {
-      // Check if page is fetched and return same reference
-      let pageData = this.loadedPages[page];
-      if (pageData) {
-        return pageData;
-      }
-
-      // Get current hash of params to know if still the same after fetching
-      pageData = this.$set(this.loadedPages, page, {
-        id: this.id,
-        index: page,
-        startedAt: Date.now(),
-        duration: null,
-        loading: true,
-        loaded: false,
-        failed: false,
-        error: null,
-        data: null
-      });
-
-      // Fetch page data (internal or external)
-      try {
-        // Increment fetching stack
-        this.fetching++
-
-        // Do fetching from remote source or local source
-        const { hits, total } = await this.resolvePageData(page);
-
-        // Update result data and loaded flag
-        Object.assign(pageData, {
-          duration: Date.now() - pageData.startedAt,
-          loading: false,
-          loaded: true,
-          data: hits
-        });
-
-        // Verifies if page data still valid
-        // (might have been replaced due to async task delay)
-        let stillValid = this.loadedPages.indexOf(pageData) >= 0;
-
-        // Update total if set and pageData still recent
-        if (total !== undefined && stillValid) {
-          this.totalCount = total;
-        }
-
-        // console.log("fetching complete", {
-        //   page,
-        //   complete: true,
-        //   total,
-        //   stillValid,
-        //   pageData
-        // });
-      } catch (e) {
-        console.error("LTable", 'Failed to call `fetch` callback', e);
-        Object.assign(pageData, {
-          loading: false,
-          failed: true,
-          error: e.toString()
-        });
-      } finally {
-        // Only decrement fetching stack if id of state matches
-        if (this.id === pageData.id) {
-          this.fetching--
-        }
-      }
-
-      return pageData;
-    },
-
-    async resolvePageData(page) {
-      if (this.rows) {
-        // Slice rows and get page data
-        let perPage = this.perPage;
-        let begin = page * perPage;
-        return {
-          data: this.rows.slice(begin, begin + perPage),
-          total: this.rows.length
-        };
-      } else if (this.fetch) {
-        // Call external fetching and get data
-        return await this.fetch({
-          page,
-          offset: page * this.perPage,
-          limit: this.perPage,
-          schema: this.schema,
-          columns: this.columns,
-          perPage: this.perPage,
-          primaryKey: this.primaryKey
-        });
-      } else {
-        throw new Error(
-          "Cannot discover data. Either `rows` or `fetch` property must be assigned to table"
-        );
-      }
-    }
-  }
-};
-</script>
-
-<style>
-.l-table-container {
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  overflow-x: auto;
-  overscroll-behavior-x: none;
-}
-
-/* Native Table style */
-.l-table-table {
-  flex: 0 0 auto;
-  min-width: 100%;
-  border-spacing: 0;
-  box-sizing: border-box;
-  font-size: 0.875rem;
-}
-
-/* Internal selection column (both header and body)  */
-.l-table-column-selector {
-  padding: 0 !important;
-  text-align: center !important;
-  width: var(--l-table-selector-width);
-  min-width: var(--l-table-selector-width);
-  max-width: var(--l-table-selector-width);
-}
-
-/** 
-  Sticky columns and Shadows
-*/
-.l-table-column-selector {
-  position: sticky;
-  z-index: 2;
-  left: 0;
-  background: inherit;
-}
-
-/* Enables first column on left to to be sticky */
-.l-table-container.l-table-sticky-column-left .l-table-column-selector + .l-table-cell,
-.l-table-container.l-table-sticky-column-left .l-table-cell:not(.l-table-column-selector):first-child,
-.l-table-container.l-table-sticky-column-left .l-table-column-selector + .l-table-header-cell {
-  position: sticky;
-  z-index: 2;
-  left: var(--l-table-selector-width);
-  background: inherit;
-}
-
-/* Let it be over other headers while being dragged/resized */
-.l-table-header-cell:active {
-  z-index: 5;
-}
-
-/* Header sticky cells should be on top of normal ones */
-.l-table-column-selector.l-table-header-cell,
-.l-table-container.l-table-sticky-column-left .l-table-header .l-table-column-selector + .l-table-cell,
-.l-table-container.l-table-sticky-column-left .l-table-header .l-table-cell:not(.l-table-column-selector):first-child,
-.l-table-container.l-table-sticky-column-left .l-table-header .l-table-column-selector + .l-table-header-cell {
-  z-index: 8;
-}
-
-/* Applies shadow to the right of the last sticky column */
-.l-table-container.l-table-sticky-column-left       .l-table-column-selector + .l-table-cell:after,
-.l-table-container.l-table-sticky-column-left       .l-table-cell:not(.l-table-column-selector):first-child:after,
-.l-table-container:not(.l-table-sticky-column-left) .l-table-cell.l-table-column-selector:after
-{
-  opacity: 1;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -4px;
-  width: 4px;
-  background-image: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
-  z-index: 9;
-  pointer-events: none;
-  transition: opacity 0.2s;
-}
-
-/* Hides left shadow if at left of scroll */
-.l-table-container.l-table-sticky-column-left.l-table-at-left .l-table-column-selector + .l-table-cell:after,
-.l-table-container.l-table-sticky-column-left.l-table-at-left .l-table-cell:not(.l-table-column-selector):first-child:after,
-.l-table-container.l-table-at-left:not(.l-table-sticky-column-left) .l-table-cell.l-table-column-selector:after {
-  opacity: 0;
-}
-
-
-/* Bottom widgets Transition */
-.scale-up-enter-active {
-  transition: all .3s ease;
-}
-.scale-up-leave-active {
-  transition: all .3s ease;
-}
-.scale-up-enter, .scale-up-leave-to {
-  transform: rotateX(30deg) translateY(10px);
-  opacity: 0;
-}
-</style>