sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseTableRow.vue

@@ -1,198 +1,198 @@
-<template>
-  <tr
-    ref="trRef"
-    :class="classes"
-    :style="{
-      height: height ? `${height}px` : undefined,
-    }"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
-  >
-    <slot v-if="visible" />  
-    <td
-      v-else
-      :class="cellClass"
-    >
-      .
-    </td>
-  </tr> 
-</template>
-
-<script lang="ts" setup>
-import { ClassNameValue, twMerge } from 'tailwind-merge';
-import { RouteLocationRaw } from 'vue-router';
-import { cellClasses } from '../services/table/classes';
-import { CellConfig, TableProps } from '../services/table/types';
-import { ComputedRef, Ref } from 'vue';
-import { debounce } from 'lodash';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const baseTable = inject('table:props') as ComputedRef<TableProps> | undefined;
-const baseTableHead = inject('tableHead:props', undefined);
-if (!baseTable) {
-  throw new Error('baseTable must be used within a BaseTable.');
-}
-
-const isHead = computed(() => baseTableHead !== undefined);
-
-// Virtual scrolling
-
-const trRef = ref<HTMLTableRowElement | null>(null);
-const inViewport = ref(false);
-const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
-
-const baseTableVirtualScrollingDefaultRowHeight = inject('table:virtualScrollingDefaultRowHeight', undefined) as ComputedRef<number> | undefined;
-const setVirtualScrollingDefaultRowHeight = inject('table:setVirtualScrollingDefaultRowHeight', undefined) as ((height: number) => void) | undefined;
-
-const onScrollDebounce = debounce(onScroll, 10);
-
-window.addEventListener('scroll', onScrollDebounce);
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScrollDebounce);
-});
-
-onMounted(() => {
-  onScroll();
-});
-
-
-function onScroll() {
-
-  if (isHead.value) {
-    return;
-  }
-
-  if (!baseTable?.value?.virtualScrolling) {
-    return;
-  }
-
-  const isInViewport = isElementInViewport();
-
-  inViewport.value = isInViewport;
-
-  if (isInViewport) {
-    nextTick(() => {
-      trRenderedHeight.value = trRef.value?.offsetHeight;
-
-      if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
-        setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
-      }
-    });
-  }
-}
-
-function isElementInViewport() {
-
-  if (!trRef.value) {
-    return false;
-  }
-
-  const rect = trRef.value.getBoundingClientRect();
-
-  const offsetY = 500;
-
-  return (
-    rect.top >= -offsetY &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetY
-  );
-}
-
-const height = computed(() => {
-  if (isHead.value) {
-    return undefined;
-  }
-
-  if (trRenderedHeight.value) {
-    return trRenderedHeight.value;
-  }
-
-  return baseTableVirtualScrollingDefaultRowHeight?.value ?? undefined;
-});
-
-const visible = computed(() => {
-  if (isHead.value) {
-    return true;
-  }
-
-  if (baseTable.value.virtualScrolling) {
-    return inViewport.value;
-  }
-
-  return true;
-});
-
-const cellConfig = computed<CellConfig>(() => {
-  return {
-    size: baseTable?.value?.size,
-    flush: baseTable?.value?.flush,
-    head: false,
-  }
-});
-
-const cellClass = computed(() => {
-  return cellClasses(cellConfig.value) + ' text-white border-t border-gray-200';
-});
-
-// Emit
-
-const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);
-
-const props = withDefaults(defineProps<{
-  href?: string,
-  to?: RouteLocationRaw,
-  target?: '_blank' | '_self' | '_parent' | '_top',
-  title?: string,
-  class?: ClassNameValue,
-  selected?: boolean,
-  onClick?: (e: MouseEvent) => void,
-}>(), {
-  href: undefined,
-  to: undefined,
-  target: undefined,
-  title: undefined,
-  class: undefined,
-  selected: false,
-  onClick: undefined,
-});
-
-const classes = computed(() => {
-  const base = 'group/row';
-
-  if (!props.class) {
-    return base;
-  }
-
-  return twMerge(
-    base,
-    props.class,
-  );
-});
-
-const hover = ref(false);
-const hoverForFullRow = ref(false);
-
-function setHoverForFullRow(active: boolean) {
-  hoverForFullRow.value = active;
-}
-
-function onMouseEnter() {
-  emit('mouseenter');
-  hover.value = true;
-}
-
-function onMouseLeave() {
-  emit('mouseleave');
-  hover.value = false;
-}
-
-provide('tableRow:props', computed(() => props));
-provide('tableRow:hover', computed(() => hover.value));
-provide('tableRow:selected', computed(() => props.selected));
-provide('tableRow:setHoverForFullRow', setHoverForFullRow);
-provide('tableRow:hoverForFullRow', computed(() => hoverForFullRow.value));
-
+<template>
+  <tr
+    ref="trRef"
+    :class="classes"
+    :style="{
+      height: height ? `${height}px` : undefined,
+    }"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <slot v-if="visible" />  
+    <td
+      v-else
+      :class="cellClass"
+    >
+      .
+    </td>
+  </tr> 
+</template>
+
+<script lang="ts" setup>
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+import { RouteLocationRaw } from 'vue-router';
+import { cellClasses } from '../services/table/classes';
+import { CellConfig, TableProps } from '../services/table/types';
+import { ComputedRef, Ref } from 'vue';
+import { debounce } from 'lodash';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const baseTable = inject('table:props') as ComputedRef<TableProps> | undefined;
+const baseTableHead = inject('tableHead:props', undefined);
+if (!baseTable) {
+  throw new Error('baseTable must be used within a BaseTable.');
+}
+
+const isHead = computed(() => baseTableHead !== undefined);
+
+// Virtual scrolling
+
+const trRef = ref<HTMLTableRowElement | null>(null);
+const inViewport = ref(false);
+const trRenderedHeight = ref(undefined) as Ref<number | undefined>;
+
+const baseTableVirtualScrollingDefaultRowHeight = inject('table:virtualScrollingDefaultRowHeight', undefined) as ComputedRef<number> | undefined;
+const setVirtualScrollingDefaultRowHeight = inject('table:setVirtualScrollingDefaultRowHeight', undefined) as ((height: number) => void) | undefined;
+
+const onScrollDebounce = debounce(onScroll, 10);
+
+window.addEventListener('scroll', onScrollDebounce);
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScrollDebounce);
+});
+
+onMounted(() => {
+  onScroll();
+});
+
+
+function onScroll() {
+
+  if (isHead.value) {
+    return;
+  }
+
+  if (!baseTable?.value?.virtualScrolling) {
+    return;
+  }
+
+  const isInViewport = isElementInViewport();
+
+  inViewport.value = isInViewport;
+
+  if (isInViewport) {
+    nextTick(() => {
+      trRenderedHeight.value = trRef.value?.offsetHeight;
+
+      if (trRenderedHeight.value && setVirtualScrollingDefaultRowHeight) {
+        setVirtualScrollingDefaultRowHeight(trRenderedHeight.value);
+      }
+    });
+  }
+}
+
+function isElementInViewport() {
+
+  if (!trRef.value) {
+    return false;
+  }
+
+  const rect = trRef.value.getBoundingClientRect();
+
+  const offsetY = 500;
+
+  return (
+    rect.top >= -offsetY &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offsetY
+  );
+}
+
+const height = computed(() => {
+  if (isHead.value) {
+    return undefined;
+  }
+
+  if (trRenderedHeight.value) {
+    return trRenderedHeight.value;
+  }
+
+  return baseTableVirtualScrollingDefaultRowHeight?.value ?? undefined;
+});
+
+const visible = computed(() => {
+  if (isHead.value) {
+    return true;
+  }
+
+  if (baseTable.value.virtualScrolling) {
+    return inViewport.value;
+  }
+
+  return true;
+});
+
+const cellConfig = computed<CellConfig>(() => {
+  return {
+    size: baseTable?.value?.size,
+    flush: baseTable?.value?.flush,
+    head: false,
+  }
+});
+
+const cellClass = computed(() => {
+  return cellClasses(cellConfig.value) + ' text-white border-t border-gray-200';
+});
+
+// Emit
+
+const emit = defineEmits(['click', 'mouseenter', 'mouseleave']);
+
+const props = withDefaults(defineProps<{
+  href?: string,
+  to?: RouteLocationRaw,
+  target?: '_blank' | '_self' | '_parent' | '_top',
+  title?: string,
+  class?: ClassNameValue,
+  selected?: boolean,
+  onClick?: (e: MouseEvent) => void,
+}>(), {
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  title: undefined,
+  class: undefined,
+  selected: false,
+  onClick: undefined,
+});
+
+const classes = computed(() => {
+  const base = 'group/row';
+
+  if (!props.class) {
+    return base;
+  }
+
+  return twMerge(
+    base,
+    props.class,
+  );
+});
+
+const hover = ref(false);
+const hoverForFullRow = ref(false);
+
+function setHoverForFullRow(active: boolean) {
+  hoverForFullRow.value = active;
+}
+
+function onMouseEnter() {
+  emit('mouseenter');
+  hover.value = true;
+}
+
+function onMouseLeave() {
+  emit('mouseleave');
+  hover.value = false;
+}
+
+provide('tableRow:props', computed(() => props));
+provide('tableRow:hover', computed(() => hover.value));
+provide('tableRow:selected', computed(() => props.selected));
+provide('tableRow:setHoverForFullRow', setHoverForFullRow);
+provide('tableRow:hoverForFullRow', computed(() => hoverForFullRow.value));
+
 </script>