layers-design-system 2.4.0 → 2.6.0

package/src/components/LTable/LTablePagination.vue

@@ -1,174 +0,0 @@
-<template>
-  <div class="l-table-pagination">
-    <!-- <div class="l-table-pagination-pages"> -->
-    <transition-group tag="div" class="l-table-pagination-pages" name="l-table-pagination-transition">
-      <span
-        class="l-table-pagination-page-item"
-        v-for="page in visiblePages"
-        :key="page"
-        :class="{active: page == currentPage}"
-        @click="clicked(page)">
-        <template v-if="page === '<'">
-          <l-icon size="20">uil-angle-left</l-icon>
-        </template>
-        <template v-else-if="page === '>'">
-          <l-icon size="20">uil-angle-right</l-icon>
-        </template>
-        <template v-else-if="page === '...1' || page === '...2'">
-          <!-- <l-icon size="20">uil-ellipsis-h</l-icon> -->
-          ...
-        </template>
-        <template v-else>
-          {{page + 1}}
-        </template>
-      </span>
-    </transition-group>
-  </div>
-</template>
-
-<script>
-
-import {diggStylePagination} from './helpers'
-
-export default {
-  name: 'LTablePagination',
-  props: {
-    pagesCount: Number,
-    totalCount: Number,
-    currentPage: {
-      type: Number,
-      default: 2,
-    },
-  },
-
-  computed: {
-    visiblePages() {
-      if (!this.totalCount) {
-        return ['...1']
-      }
-
-      return diggStylePagination({
-        pagesCount: this.pagesCount,
-        currentPage: this.currentPage,
-        adjacents: 1,
-        endingAdjacents: 1,
-        fixedWidth: true,
-      })
-    }
-  },
-
-  methods: {
-    clicked(page) {
-      if (typeof page === 'number') {
-        this.goto(parseInt(page))
-      } else if (page === '<') {
-        this.goto(this.currentPage - 1)
-      } else if (page === '>') {
-        this.goto(this.currentPage + 1)
-      } else if (page === '<<') {
-        this.goto(0)
-      } else if (page === '>>') {
-        this.goto(this.pagesCount - 1)
-      }
-    },
-
-    goto(pageIndex) {
-      // Avoid forcing change index if didnt change
-      if (this.currentPage == pageIndex) {
-        return
-      }
-
-      // Limit page index
-      pageIndex = Math.max(0, Math.min(pageIndex, this.pagesCount - 1))
-
-      // Emit event to parent
-      this.$emit('goto', pageIndex)
-    }
-  }
-}
-</script>
-
-<style>
-.l-table-pagination {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-
-  position: sticky;
-  z-index: 10;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0px 12px;
-  
-  height: var(--l-table-pagination-height);
-  background: var(--l-table-pagination-bg-color);
-}
-
-.l-table-pagination:after {
-  content: ' ';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -4px;
-  height: 4px;
-  background-image: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
-}
-
-.l-table-pagination-pages {
-  
-}
-
-/* List of page buttons */
-.l-table-pagination-page-item {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  padding: 6px 6px;
-  color: #232B34;
-
-  font-size: 12px;
-  min-width: 26px;
-  text-align: center;
-
-  cursor: pointer;
-  background: inherit;
-  user-select: none;
-
-  /* transition: all 1s; */
-  transition: transform 0.2s;
-}
-
-.l-table-pagination-page-item:hover,
-.l-table-pagination-page-item.active {
-  color: var(--l-table-pagination-color);
-}
-
-.l-table-pagination-page-item.active:before {
-  background: var(--l-table-pagination-color);
-  opacity: 0.08;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 4px;
-}
-
-/* Transition Group of list items */
-.l-table-pagination-transition-enter,
-.l-table-pagination-transition-leave-to {
-  opacity: 0;
-  transform: translateY(0px);
-}
-
-.l-table-pagination-transition-leave {
-  transition: none;
-  opacity: 0;
-}
-
-.l-table-pagination-transition-leave-active {
-  position: absolute;
-}
-</style>

package/src/components/LTable/LTableReloader.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="l-table-reloader">
-    <div class="l-table-reloader-content">
-      <l-icon size="22">uil-cloud-exclamation</l-icon>
-      <span style="margin-left: 8px; flex: 1 1;">Algumas informações não puderam ser carregadas.</span>
-      <l-button size="mini" @click="reload()">Recarregar</l-button>
-    </div>
-  </div>
-</template>
-
-<script>
-const RELOAD_TIMEOUT_GUARD = 2000
-export default {
-  name: 'LTableReloader',
-  
-  data() {
-    return {
-      canReload: true,
-    }
-  },
-  
-  methods: {
-    reload() {
-      // Create guard
-      this.canReload = false
-
-      this.$emit('reload')
-
-      // Clear guard
-      setTimeout(() => this.canReload = true, RELOAD_TIMEOUT_GUARD)
-    }
-  },
-}
-</script>
-
-<style>
-.l-table-reloader {
-  flex: 0 0 auto;
-  position: sticky;
-  left: 0;
-  right: 0;
-  bottom: var(--l-table-pagination-height);
-
-  z-index: 10;
-  padding: var(--l-table-reloader-margin);
-}
-
-.l-table-reloader > .l-table-reloader-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  font-size: 14px;
-  padding: 8px 16px;
-  border-radius: 4px;
-
-  color: white;
-  background-color: var(--l-table-warning-color);
-}
-
-</style>

package/src/components/LTable/ListAdapter.js

@@ -1,74 +0,0 @@
-import Axios from "axios";
-
-export default class ListAdapter {
-  constructor() {
-    this.setParams({});
-    this.pages = [];
-    this.total = 0;
-    this.limit = 100;
-  }
-
-  setParams(params) {
-    this.params = params;
-    this.hash = JSON.stringify(this.params);
-  }
-
-  isLoaded(page) {
-    return Array.isArray(this.pages[page]);
-  }
-
-  setPage(page, data) {
-    return (this.pages[page] = data);
-  }
-
-  async getPage(page) {
-    if (this.isLoaded(page)) {
-      return this.pages[page];
-    }
-
-    return await this.fetchPage(page);
-  }
-
-  async fetchPage(page) {
-    let hash = this.hash;
-    let params = this.params;
-
-    // Check hash matches and there is an ongoing request
-    let ongoingRequest = this.getPage(page);
-    if (ongoingRequest) {
-      //
-    }
-
-    // Build page object
-    let doc = {
-      hash,
-      data: null,
-      loading: true,
-      failed: false
-    };
-
-    // Check if any page with same hash exists
-    this.setPage(page, doc);
-
-    try {
-      const { data } = Axios.get("/url", { params });
-
-      // Check hash matches
-      if (hash !== this.hash) {
-        return;
-      }
-
-      // Update limit
-      this.setLimit(data.total);
-
-      // Update page
-      Object.assign(doc, {
-        loading: false,
-        data: data.items
-      });
-      return this.setPage(page, doc);
-    } catch (e) {
-      return null;
-    }
-  }
-}

package/src/components/LTable/docs.vue

@@ -1,111 +0,0 @@
-<template>
-  <div id="app">
-    <h1>Table</h1>
-    <div>
-      <l-button @click="scrollToTop">Scroll to top</l-button>
-      <l-select v-model="display">
-        <l-option value="all" label="Todos (all)"></l-option>
-        <l-option value="more" label="Carregar mais (more)"></l-option>
-        <l-option value="paged" label="Paginado (paged)"></l-option>
-      </l-select>
-      <l-select v-model="recycle">
-        <l-option :value="true" label="Reciclavel"></l-option>
-        <l-option :value="false" label="Sem reciclar"></l-option>
-      </l-select>
-    </div>
-
-    <l-table
-      ref="table"
-      style="flex: 1 1 auto; margin: 32px; border: 1px solid var(--l-table-border-color); border-radius: 6px;"
-      :display="display"
-      :loading="loading"
-      :fetch="fetch"
-      :schema="schema"
-      :columns="columns"
-      :recycle="recycle"
-      :rowHeight="rowHeight"
-      :allowInvertedSelection="allowInvertedSelection"
-      :multiple="multiple"
-      :borderTick="borderTick ? 1 : 0"
-      :selectable="selectable"
-      :autoLoadMore="false"
-      pagination
-      limitPerPage="10"
-      :style="{'--l-table-primary-color': 'var(--color-aqua)'}"
-    />
-  </div>
-</template>
-
-<script>
-
-const sleep = ms => new Promise(res => setTimeout(res, ms))
-
-export default {
-  name: "Table",
-  data() {
-    return {
-      display: 'all',
-      recycle: true,
-      loading: false,
-      multiple: true,
-      selectable: true,
-      rowHeight: 46,
-      borderTick: true,
-      allowInvertedSelection: true,
-      schema: this.$L.Schemas.get('payable'),
-      columns: [
-        {
-          path: "code",
-          sticky: true,
-        },
-        {
-          path: "customer.name",
-        },
-        {
-          path: "dueAt",
-        },
-        {
-          path: "price.amount",
-        },
-        {
-          path: "status",
-        },
-      ]
-    };
-  },
-
-  methods: {
-    scrollToTop() {
-      this.$refs.table.reload()
-    },
-
-    // eslint-disable-next-line no-unused-vars
-    async fetch({ page, offset, limit }) {
-      window['console'].log('Fetch', page)
-      if (page > 1 && Math.random() < 0.1) {
-        await sleep(1000)
-        throw new Error('Failure example')
-      }
-
-      const total = 451
-
-      var items = [];
-      for (var i = offset; i < offset + Math.min(total - offset, limit); i++) {
-        items.push({ id: i, code: "#" + (i + 1), "dueAt": new Date(), price: {amount: i * 50}, customer: {name: "Teste da Silva"}, status: "paid" });
-      }
-
-      await sleep(3000)
-      return {
-        hits: items,
-        total
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-#app {
-  height: 100vh;
-}
-</style>

package/src/components/LTable/helpers.js

@@ -1,194 +0,0 @@
-import flatten from "lodash/flatten";
-import uniq from "lodash/uniq";
-
-export function changeSelection({ key, selected }, tableComponent) {
-  let { loadedPages, allowInvertedSelection, includedIds, excludedIds, multiselect, itemToId = (id) => id } = tableComponent
-
-  // Skip invalid values
-  if (!key === undefined || key === null) {
-    return {
-      includedIds,
-      excludedIds
-    }
-  }
-
-  if (key === "*") {
-    includedIds.splice(0, includedIds.length);
-    excludedIds.splice(0, excludedIds.length);
-
-    if (selected && multiselect && allowInvertedSelection) {
-      includedIds.push("*");
-    }
-
-    if (selected && multiselect && !allowInvertedSelection) {
-      let allItems = flatten(loadedPages.filter(page => page.data).map(page => page.data));
-      let allIds = uniq(allItems.map(item => itemToId(item)));
-      includedIds = allIds;
-    }
-    return {
-      includedIds,
-      excludedIds
-    }
-  }
-
-  let excluding = includedIds.includes("*");
-  let included = includedIds.includes(key);
-  let excluded = excludedIds.includes(key);
-
-  // If its single selection, clear all selections
-  if (!multiselect) {
-    includedIds.splice(0, includedIds.length);
-    excludedIds.splice(0, excludedIds.length);
-  }
-
-  if (excluding && multiselect) {
-    // Remove from excluded set
-    if (selected && excluded) {
-      let index = excludedIds.indexOf(key);
-      excludedIds.splice(index, 1);
-    }
-
-    // Add to excluded set
-    if (!selected && !excluded && multiselect) {
-      excludedIds.push(key);
-    }
-  } else {
-    // Add selection
-    if (selected && !included) {
-      if (multiselect) {
-        // If its multiselect, add to set
-        includedIds.push(key);
-      } else {
-        // Or fully swap value of set
-        includedIds = [key];
-      }
-    }
-
-    // Remove from set
-    if (!selected && included) {
-      let index = includedIds.indexOf(key);
-      includedIds.splice(index, 1);
-    }
-  }
-
-  return {
-    includedIds,
-    excludedIds
-  }
-}
-
-/**
- * Creates a pagination from the given state parameters
- */
-export function diggStylePagination({
-  pagesCount,
-  currentPage,
-  endingAdjacents = 1,
-  adjacents = 2,
-  next = true,
-  previous = true,
-  last = false,
-  first = false,
-  fixedWidth = true,
-}) {
-  const pages = []
-
-  if (!pagesCount) {
-    return pages
-  }
-  
-  const filledMaximum = fixedWidth ? endingAdjacents * 2 + adjacents * 2 + 3 : endingAdjacents * 2 + 1
-
-  if (pagesCount <= filledMaximum) {
-    // Show all pages since its small number of pages
-    for (let p = 0; p < pagesCount; p++)
-      pages.push(p)
-  } else {
-    let curr = 0
-
-    // Fill with start
-    for (let p = 0; p < Math.min(endingAdjacents, pagesCount); p++) {
-      pages.push(curr = p)
-    }
-    
-    // Compute extra padding
-    let minimumPadding = (endingAdjacents + adjacents * 2)
-    let adjacentsStart = adjacents
-    let adjacentsEnd = adjacents
-    if (fixedWidth && currentPage < minimumPadding) {
-      adjacentsEnd += minimumPadding - currentPage
-    }
-    if (fixedWidth && pagesCount - currentPage - 1 < minimumPadding) {
-      adjacentsStart += minimumPadding - (pagesCount - currentPage - 1)
-    }
-    
-    // Fill middle
-    for (let p = Math.max(curr + 1, currentPage - adjacentsStart); p < Math.min(currentPage + adjacentsEnd + 1, pagesCount); p++) {
-      if (curr + 2 === p) {
-        // Fill with single page between last and current
-        pages.push(curr = curr + 1)
-      }
-      if (curr + 1 !== p) {
-        // Add ellipsis if pages are not sequential
-        pages.push('...1')
-      }
-      // window['console'].log('add middle', p, Math.min(currentPage + adjacents, pagesCount))
-      pages.push(curr = p)
-    }
-
-    // Fill with end
-    for (let p = Math.max(curr + 1, pagesCount - endingAdjacents); p < pagesCount; p++) {
-      if (curr + 2 === p) {
-        // Fill with single page between last and current
-        pages.push(curr = curr + 1)
-      }
-      if (curr + 1 !== p) {
-        // Add ellipsis if pages are not sequential
-        pages.push('...2')
-      }
-
-      pages.push(curr = p)
-    }
-  }
-
-  if (previous) {
-    pages.unshift('<')
-  }
-  if (next) {
-    pages.push('>')
-  }
-  if (first) {
-    pages.unshift('<<')
-  }
-  if (last) {
-    pages.push('>>')
-  }
-
-  return pages
-}
-
-
-// export function testDiggStylePagination() {
-//   // const state1 = {pagesCount: 1}
-//   // let tests = [
-//   // ]
-
-//   for (let pagesCount = 0; pagesCount < 15; pagesCount++) {
-//     let results = []
-//     for (let currentPage = 0; currentPage < pagesCount; currentPage++) {
-//       results.push(diggStylePagination({
-//         pagesCount,
-//         currentPage,
-//         fixedWidth: true,
-//         adjacents: 2,
-//         endingAdjacents: 1,
-//       }))
-
-//       // window['console'].log(pagesCount, currentPage, result)
-//     }
-//     // window['console'].log({pagesCount})
-//     window['console'].table(results, {title: 'Current Page of ' + pagesCount})
-//   }
-// }
-
-// testDiggStylePagination()