@itfin/components 1.3.96 → 2.0.1

package/src/components/table/TableRow.vue

@@ -1,221 +0,0 @@
-<template>
-
-  <div
-    class="table-row-template flex items-stretch" view-settings="[object Object]">
-    <div accept-group="items" class="table-view-body-space"
-    ></div>
-    <div class="bg-light dark:bg-light-invert shadow-area">
-      <div class="toggler-wrapper"><!----></div>
-      <div class="handle-wrapper hover-only"><a
-        href="" class="context-menu-toggle table-item-options-menu"
-      >
-        <div class="v-popper--has-tooltip drag-handle"><i
-          data-test="table-item-options"
-          class="ic-drag"></i>
-        </div> <!----></a></div>
-    </div>
-    <div class="indicator">
-      <div class="fill on-rest table-view-row-count"><span
-      >1</span></div>
-      <div class="fill on-hover"><a
-        href=""
-        data-test="table-item-expand"><i
-        class="ic-expand"></i></a>
-        <div class="top"><a
-          data-test="table-row-generator" href=""><i
-          class="ic-plus"></i></a>
-        </div>
-        <div class=""><a
-          data-test="table-row-generator"
-          href=""><i
-          class="ic-plus"></i></a></div>
-      </div>
-    </div>
-    <div accept-group="items" class="hbox table-item-inner">
-      <div data-column="0" class="sticky last-sticky-column"
-           style="width: 240px; left: 83px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        >
-          <div
-            class="flex-auto flex gap-2 items-start p-3 show-hidden-hover overflow-hidden">
-            <a href=""
-               class="context-menu-toggle h-full line-overflow cursor-pointer flex-auto"><span>
-                Jun 30th
-            </span> <!----></a> <!---->
-            <div class="flex items-center justify-end hover-show"><a href="" tabindex="0"
-                                                                     class="text-sm p-2 ic-exit"></a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div data-column="1" class="" style="width: 400px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        ><textarea
-          data-test="table-text-value" rows="2" type="text"
-          wrap="hard"
-          class="h-full px-3 input-inline text-value w-full hide-scrollbar !leading-[35px] whitespace-nowrap"></textarea>
-        </div>
-      </div>
-      <div data-column="2" class="" style="width: 240px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        >
-          <div
-            class="flex-auto flex gap-2 items-start p-3 show-hidden-hover overflow-hidden">
-            <a href=""
-               class="context-menu-toggle h-full line-overflow cursor-pointer flex-auto"><span>
-                Jul 13th
-            </span> <!----></a> <!---->
-            <div class="flex items-center justify-end hover-show"><a href="" tabindex="0"
-                                                                     class="text-sm p-2 ic-exit"></a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div data-column="3" class="" style="width: 120px;">
-        <div
-          class="table-view-item-value flex relative h-full border-b border-r border-gray bg-white dark:bg-white-invert dark:border-gray-invert hover:bg-light dark:hover:bg-gray-invert items-stretch"
-        ><a href=""
-            class="context-menu-toggle table-value-label flex flex-auto p-3 w-full"><span
-          class="table-value-label-selected w-full h-full vbox"><span
-          class="flex gap-2 hide-scrollbar overflow-auto"><span
-          title="Upcoming"
-          class="label-value"
-          style="--label-color: #A7E6FF; --label-text: #4C4E69;">
-    Upcoming
-          <!----></span></span></span> <!----></a></div>
-      </div>
-      <div
-        class="extra border-b border-r border-gray dark:border-gray-invert"></div>
-      <div class="boundary top"></div>
-      <div class="boundary right"></div>
-      <div class="boundary bottom"></div>
-      <div class="boundary left"></div> <!----></div>
-  </div>
-
-</template>
-<script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
-import itfButton from '../button/Button.vue';
-import itfIcon from '../icon/Icon.vue';
-
-export default @Component({
-  name: 'itfTable',
-  components: {
-    itfButton,
-    itfIcon,
-  }
-})
-class itfTable extends Vue {
-  @PropSync('sorting', { type: Object, default: () => ({}) }) sortedColumns;
-  @Prop({ required: true, type: Array }) columns;
-  @Prop({ required: true, type: Array }) rows;
-  @Prop({ default: false, type: Boolean }) stickyHeader;
-  @Prop({ default: false, type: Boolean }) stickyColumn;
-  @Prop({ default: false, type: Boolean }) stickyLastColumn;
-  @Prop({ default: false, type: Boolean }) loading;
-  @Prop({ default: false, type: Boolean }) striped;
-  @Prop({ default: false, type: Boolean }) hoverable;
-  @Prop({ default: false, type: Boolean }) small;
-
-  sortDirection = 'asc';
-  scrolledX = false;
-  scrolledEnd = false;
-  scrolledY = false;
-  stickyObserver = null;
-
-  scrollFunc = null;
-
-  mounted() {
-    if (this.$refs.scrollContainer && this.$refs.scrollContainer2) {
-      this.scrollFunc = initSyncScroll(this.$refs.scrollContainer, this.$refs.scrollContainer2, (isEnd) => {
-        this.scrolledX = true;
-        this.scrolledEnd = isEnd;
-      }, () => {
-        this.scrolledX = false;
-      });
-    } else {
-      setTimeout(() => {
-        this.scrollFunc = initSyncScroll(this.$refs.scrollContainer, this.$refs.scrollContainer2, (isEnd) => {
-          this.scrolledX = true;
-          this.scrolledEnd = isEnd;
-        }, () => {
-          this.scrolledX = false;
-        });
-      }, 1000);
-    }
-
-    if (this.$refs.stickyHeader) {
-      this.stickyObserver = new IntersectionObserver(([e]) => {
-        return this.scrolledY = e.intersectionRatio < 1;
-      }, {
-        rootMargin: `-${this.$refs.stickyHeader.offsetHeight + 5}px 0px 0px 0px`,
-        threshold: [1]
-      });
-      this.stickyObserver.observe(this.$refs.stickyHeader);
-    }
-    function initSyncScroll(el1, el2, stuck, unstuck) {
-      function isScrolledEnd(el) {
-        return el.scrollWidth === el.getBoundingClientRect().width // якщо контейнер менший ширини екрану
-          || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
-      }
-
-      function func1() {
-        el2.scrollLeft = el1.scrollLeft;
-        if (el1.scrollLeft > 0) {
-          stuck(isScrolledEnd(el1));
-        } else {
-          unstuck();
-        }
-      }
-
-      function func2() {
-        el1.scrollLeft = el2.scrollLeft;
-        if (el2.scrollLeft > 0) {
-          stuck(isScrolledEnd(el2));
-        } else {
-          unstuck();
-        }
-      }
-
-      if (isScrolledEnd(el1)) {
-        stuck(true);
-        unstuck();
-      }
-
-      el1.addEventListener('scroll', func1);
-      el2.addEventListener('scroll', func2);
-
-      return [func1, func2];
-    }
-  }
-
-  beforeDestroy() {
-    if (this.scrollFunc) {
-      const [func1, func2] = this.scrollFunc;
-      this.$refs.scrollContainer.removeEventListener('scroll', func1);
-      this.$refs.scrollContainer2.removeEventListener('scroll', func2);
-    }
-  }
-
-  get columnsGridStyle() {
-    return this.columns.map((column) => {
-      if (column.min) {
-        return `minmax(${column.min}px, ${column.max ? `${column.max}px` : 'auto'})`;
-      }
-      return `${column.fraction || 1}fr`;
-    }).join(' ');
-  }
-
-  sortBy(column, index) {
-    if (!column.sortable) {
-      return;
-    }
-    const { name } = this.columns[index];
-    const direction = this.sortedColumns[name] === 'asc' ? 'desc' : 'asc';
-    this.sortedColumns = { [name]: direction };
-  }
-}
-</script>