layers-design-system 2.4.0 → 2.6.0

package/src/components/LTable/LTableHeader.vue

@@ -1,155 +0,0 @@
-<template>
-  <thead class="l-table-header">
-    <tr>
-      <th v-if="selectable" class="l-table-header-cell l-table-cell l-table-column-selector">
-        <l-checkbox
-          v-if="multiselect"
-          class="l-table-selector"
-          type="checkbox"
-          :value="selectedEverything"
-          :indeterminate="selectedSomethings"
-          @change="changeSelection($event)"
-        />
-      </th>
-      <LTableHeaderCell
-        v-for="(spec, idx) in columnSpecs"
-        :key="idx"
-        :spec="spec"
-        @sort="changeSpecSort(spec, $event)"
-        ref="headers"
-      />
-    </tr>
-
-    <!-- Horizontal Loader and Shadows container -->
-    <tr class="l-table-header-extras">
-      <td colspan="999">
-        <LTableHeaderLoader :loading="loading"/>
-        <div class="l-table-header-shadow-top"></div>
-      </td>
-    </tr>
-  </thead>
-</template>
-
-<script>
-import LTableHeaderCell from "./LTableHeaderCell.vue";
-import LTableHeaderLoader from "./LTableHeaderLoader.vue";
-
-export default {
-  components: { LTableHeaderCell, LTableHeaderLoader },
-  props: {
-    columnSpecs: {
-      type: Array
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    includedIds: {
-      type: Array
-    },
-    excludedIds: {
-      type: Array
-    },
-    total: {
-      type: Number
-    },
-    selectable: {
-      type: Boolean
-    },
-    multiselect: {
-      type: Boolean
-    }
-    // scrollAtTop: Boolean,
-    // scrollAtLeft: Boolean
-  },
-
-  computed: {
-    selectedEverything() {
-      let allSelectedManual =
-        this.includedIds.length === this.total && this.total > 0;
-      let allSelectedVirtual =
-        this.includedIds.toString() === "*" && this.excludedIds.length == 0;
-      return allSelectedManual || allSelectedVirtual;
-    },
-    selectedNothing() {
-      return this.includedIds.length === 0;
-    },
-    selectedSomethings() {
-      return !this.selectedNothing && !this.selectedEverything;
-    },
-  },
-
-  methods: {
-    changeSpecSort(spec, { direction, cumulative }) {
-      // Erase all direction sortings if not cumulative
-      if (cumulative) {
-        let lastOrder = this.columnSpecs.reduce(
-          (prev, curr) => Math.max(prev, curr.column.sortOrder),
-          0
-        );
-        let newOrder = lastOrder + 1;
-        this.$set(spec.column, "sortDirection", direction);
-        this.$set(spec.column, "sortOrder", newOrder);
-      } else {
-        for (let spec of this.columnSpecs) {
-          this.$set(spec.column, "sortDirection", null);
-          this.$set(spec.column, "sortOrder", null);
-        }
-        this.$set(spec.column, "sortDirection", direction);
-        this.$set(spec.column, "sortOrder", 1);
-      }
-    },
-
-    changeSelection(allChecked) {
-      this.$emit("selected", { key: "*", selected: allChecked });
-    }
-  }
-};
-</script>
-
-
-<style>
-.l-table-header > tr{
-  background-color: var(--l-table-bg-color);
-}
-
-/* Scroll Shadows */
-.l-table-header-extras > td {
-  z-index: 9;
-  position: sticky;
-  top: var(--l-table-header-height);
-  height: 0;
-}
-
-/* Overrides positioning of the loader on the header */
-.l-table-header-extras .l-table-header-loader {
-  z-index: 9;
-  position: absolute;
-  width: 100%;
-  left: 0;
-  right: 0;
-  top: calc(-1 * var(--l-table-loader-height));
-  height: var(--l-table-loader-height);
-}
-
-/* Top shadows */
-.l-table-header-shadow-top {
-  opacity: 1;
-  transition: opacity 0.4s;
-  position: absolute;
-  pointer-events: none;
-}
-
-.l-table-at-top .l-table-header-shadow-top {
-  opacity: 0;
-}
-
-/* Creates top shadow positioning and style */
-.l-table-header-shadow-top {
-  left: 0;
-  top: 0;
-  height: 4px;
-  width: 100%;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
-}
-</style>

package/src/components/LTable/LTableHeaderCell.vue

@@ -1,188 +0,0 @@
-<template>
-  <th
-    class="l-table-header-cell l-table-cell"
-    :style="{'--l-table-col-width': spec.column.width ? `${spec.column.width}px` : 'auto'}">
-    <!-- Sortable link -->
-    <a
-      v-if="spec.sortable"
-      href="#"
-      class="l-table-header-cell-content"
-      :class="[spec.column.sortDirection ? 'active' : null, `l-table-header-align-${spec.align}`]"
-      @click.prevent="toggleSorting()">
-      <l-tooltip
-        key="tooltip"
-        :disabled="!spec.description"
-        :content="spec.description"
-        placement="top"
-        :open-delay="600"
-        :offset="0">
-        <!-- Title -->
-        <span>
-          <l-icon v-if="icon" class="l-table-header-icon">{{ icon }}</l-icon>
-          &nbsp;
-          {{spec.title}}
-        </span>
-      </l-tooltip>
-
-      <!-- Direction to sort -->
-      <i
-        class="l-table-sorter-icon uil uil-arrow-down"
-        :class="`l-table-sorter-${spec.column.sortDirection || 'default'}`"
-      ></i>
-    </a>
-
-    <!-- Not sortable -->
-    <span v-else class="l-table-header-cell-content">
-      <l-tooltip
-        :disabled="!spec.description"
-        :content="spec.description"
-        placement="top"
-        :open-delay="600"
-        :offset="0">
-        <!-- Title -->
-        <span>
-          <l-icon v-if="icon" class="l-table-header-icon">{{ icon }}</l-icon>
-          &nbsp;
-          {{spec.title}}
-        </span>
-      </l-tooltip>
-    </span>
-
-    <!-- Spacer -->
-    <span style="width: 12px;" />
-
-    <!-- Resizer -->
-    <LTableHeaderResizer v-if="resizable" @resize="resizeColumn(spec.column, $event)" />
-  </th>
-</template>
-
-<script>
-import LTableHeaderResizer from "./LTableHeaderResizer.vue";
-
-export default {
-  components: { LTableHeaderResizer },
-  props: {
-    spec: {
-      type: Object
-    },
-  },
-
-  computed: {
-    resizable() {
-      return this.spec.field && this.spec.field.resizable;
-    },
-
-    reordable() {
-      return true;
-    },
-
-    icon() {
-      return this.$L.Icons.get(this.spec.field);
-    },
-  },
-
-  methods: {
-    resizeColumn(column, newSize) {
-      this.$set(column, "width", newSize);
-    },
-
-    toggleSorting(cumulative) {
-      let currentSort = this.spec.column.sortDirection;
-      let newSortDirection = "asc";
-      if (!currentSort) {
-        newSortDirection = "asc";
-      } else if (currentSort.toLowerCase() === "asc") {
-        newSortDirection = "desc";
-      }
-
-      this.$emit("sort", { direction: newSortDirection, cumulative });
-    }
-  }
-};
-</script>
-
-
-<style>
-.l-table-header-cell {
-  z-index: 4;
-  position: sticky;
-  top: 0;
-
-  padding: var(--l-table-cell-padding);
-  height: var(--l-table-header-height);
-
-  background: var(--l-table-bg-color);
-  box-sizing: border-box;
-
-  width: var(--l-table-col-width);
-  min-width: var(--l-table-col-width);
-  max-width: var(--l-table-col-width);
-
-  color: var(--l-table-header-text-color);
-
-  white-space: nowrap;
-  font-weight: bold;
-  text-align: left;
-  font-size: 12px;
-}
-
-.l-table-header-cell a {
-  color: inherit;
-  outline: none !important;
-  text-decoration: none;
-}
-
-.l-table-header-cell a:hover,
-.l-table-header-cell a:focus {
-  color: var(--l-table-link-color);
-}
-
-/* Cell Icon */
-.l-table-header-icon {
-  margin: 0;
-  font-size: 14px;
-}
-
-/* Content of header */
-.l-table-header-cell-content {
-  /* height: 100%; */
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.l-table-header-align-left {
-  flex-direction: row;
-}
-
-.l-table-header-align-right {
-  flex-direction: row-reverse;
-}
-
-.l-table-header-align-center {
-  justify-content: center;
-}
-
-/* Sorter */
-.l-table-sorter-icon {
-  font-size: 20px;
-  transition: transform 0.3s, opacity 0.2s;
-  transform: rotateX(0deg);
-}
-
-.l-table-sorter-default {
-  opacity: 0;
-}
-
-.l-table-header-cell-sortable:hover .l-table-sorter-default {
-  opacity: 0.3;
-}
-
-.l-table-sorter-asc,
-.l-table-sorter-desc {
-  opacity: 1;
-}
-.l-table-sorter-desc {
-  transform: rotateX(180deg);
-}
-</style>

package/src/components/LTable/LTableHeaderLoader.vue

@@ -1,62 +0,0 @@
-<template functional>
-  <div class="l-table-header-loader" :class="{loading: props.loading}"></div>
-</template>
-
-<script>
-export default {
-  props: ["loading"]
-};
-</script>
-
-
-<style>
-/* Loader */
-.l-table-header-loader {
-  opacity: 0;
-  overflow: hidden;
-  background: white;
-  pointer-events: none;
-  transition: 0.4s opacity;
-}
-.l-table-header-loader.loading {
-  opacity: 1;
-}
-
-.l-table-header-loader:before,
-.l-table-header-loader:after {
-  content: ' ';
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.l-table-header-loader:before {
-  opacity: 0.2;
-  background: var(--l-table-loader-color);
-}
-.l-table-header-loader:after {
-  transition: transform 1s, animation 1s;
-  transform: translateX(-100%);
-  transform-origin: left center;
-  background: var(--l-table-loader-color);
-}
-.l-table-header-loader.loading:after {
-  animation: l-table-horizontal-loader-anim 30s 0.5s ease-in-out forwards;
-}
-
-@keyframes l-table-horizontal-loader-anim {
-  0% { transform: translateX(-100%) }
-  5% { transform: translateX(-80%) }
-  15% { transform: translateX(-10%) }
-  25% { transform: translateX(-10%) }
-  30% { transform: translateX(-7%) }
-  45% { transform: translateX(-7%) }
-  50% { transform: translateX(-5%) }
-  65% { transform: translateX(-5%) }
-  70% { transform: translateX(-3%) }
-  95% { transform: translateX(-3%) }
-  100% { transform: translateX(-2%) }
-}
-</style>

package/src/components/LTable/LTableHeaderResizer.vue

@@ -1,162 +0,0 @@
-<template>
-  <!-- <div class="mt-header" > -->
-  <!-- {{title}} {{dragging}} {{deltaX}} -->
-  <div
-    class="mt-handle"
-    :class="dragging ? 'dragging' : ''"
-    :style="handleStyle"
-    @dblclick="resize(null)"
-    @mousedown="dragStart"
-  ></div>
-  <!-- </div> -->
-</template>
-
-<script>
-/* eslint-disable no-console */
-
-export default {
-  props: {
-    title: String,
-    maxWidth: {
-      type: Number,
-      default: null
-    },
-    minWidth: {
-      type: Number,
-      default: 50
-    }
-  },
-
-  data() {
-    return {
-      dragging: false,
-      deltaX: 0
-    };
-  },
-
-  computed: {
-    handleStyle() {
-      return this.dragging
-        ? {
-            transform: `translateX(${this.deltaX}px)`
-          }
-        : null;
-    }
-  },
-
-  methods: {
-    currentWidth() {
-      return this.$el.parentElement.getBoundingClientRect().width;
-    },
-    limitDeltaX(deltaX) {
-      let headerWidth = this.currentWidth();
-      let newWidth = this.limitWidth(headerWidth + deltaX);
-      return newWidth - headerWidth;
-    },
-
-    limitWidth(width) {
-      if (!width) {
-        return null;
-      }
-
-      if (this.maxWidth && this.maxWidth < width) {
-        return this.maxWidth;
-      }
-
-      if (this.minWidth && this.minWidth > width) {
-        return this.minWidth;
-      }
-
-      return width;
-    },
-
-    // Emits a resize envent to parent filtering the width to its limits
-    resize(width) {
-      this.$emit("resize", this.limitWidth(width));
-    },
-    drag(evt) {
-      // In case something got dirty, force unregistering
-      if (!this.dragging) this.unregisterDocumentHandlers();
-
-      // Compute the delta X in pixels from the right of the header
-      let deltaX = evt.clientX - this.dragStartClientX;
-      this.deltaX = this.limitDeltaX(deltaX);
-      console.log("drag", this.deltaX);
-    },
-    dragStart(evt) {
-      this.registerDocumentHandlers();
-      this.deltaX = 0;
-      this.dragging = true;
-      this.dragStartClientX = evt.clientX;
-      console.log("dragStart", evt);
-    },
-    dragEnd(evt) {
-      // Check if did some resize
-      if (this.deltaX) {
-        let newWidth = this.currentWidth() + this.deltaX;
-        this.resize(newWidth);
-      }
-
-      this.unregisterDocumentHandlers();
-      this.deltaX = 0;
-      this.dragging = false;
-      this.dragStartClientX = 0;
-      console.log("dragEnd", evt);
-    },
-    registerDocumentHandlers() {
-      this.unregisterDocumentHandlers();
-      this._documentMouseMove = evt => this.drag(evt);
-      this._documentMouseUp = evt => this.dragEnd(evt);
-      document.body.style.cursor = "col-resize";
-      document.addEventListener("mousemove", this._documentMouseMove);
-      document.addEventListener("mouseup", this._documentMouseUp);
-      document.onselectstart = () => false;
-      document.ondragstart = () => false;
-    },
-    unregisterDocumentHandlers() {
-      document.removeEventListener("mousemove", this._documentMouseMove);
-      document.removeEventListener("mouseup", this._documentMouseUp);
-      document.body.style.cursor = "";
-      document.onselectstart = null;
-      document.ondragstart = null;
-    }
-  }
-};
-</script>
-
-<style>
-.mt-handle {
-  content: " ";
-  background: transparent;
-  position: absolute;
-  top: 0;
-  right: 0px;
-  bottom: 0;
-  width: 5px;
-  z-index: 1;
-}
-
-*:hover > .mt-handle {
-  background: grey;
-}
-
-/* .mt-header.dragging {
-  z-index: 3;
-} */
-
-.mt-handle:hover,
-.mt-handle.dragging {
-  background: cornflowerblue;
-  cursor: col-resize;
-}
-
-.mt-handle.dragging:before {
-  content: " ";
-  background: inherit;
-  position: absolute;
-  top: 0;
-  left: 2px;
-  width: 1px;
-  height: 100vh;
-}
-</style>

package/src/components/LTable/LTableLoadMore.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="l-table-loadmore" :class="{loading}" @click="$emit('click')">
-      <a href="#" class="l-table-loadmore-link">Carregar mais</a>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    loading: Boolean,
-    automatic: Boolean,
-  },
-
-  mounted() {
-    // Create observer
-    this.intersectionObserver = new IntersectionObserver(([evt]) => {
-      if (evt && evt.isIntersecting && this.automatic) {
-        this.$emit('appeared')
-      }
-    })
-
-    // Starts listening to root element
-    this.intersectionObserver.observe(this.$el)
-  },
-
-  destroyed() {
-    // Remove observer from elements
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect()
-    }
-  },
-};
-</script>
-
-
-<style>
-.l-table-loadmore {
-  flex: 0 0 auto;
-  position: sticky;
-  left: 0;
-  right: 0;
-  border-top: var(--l-table-border-tick) solid var(--l-table-border-color);
-  height: var(--l-table-loadmore-height);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.l-table-loadmore-link {
-  font-weight: 600;
-  font-size: 12px;
-  color: #2F8AF5;
-  text-decoration: none;
-}
-</style>