@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlTable/hooks/tableSort.ts

@@ -4,6 +4,7 @@ import { sortDate } from '../../../../utils/sort'
 import { isNumber, isDate, isObject } from '../../../../utils/is'
 import { DlTableProps, DlTableColumn, DlTableSortMethod } from '../types'
 import { TablePagination } from './tablePagination'
+import { isUndefined } from 'lodash'
 
 export const useTableSortProps = {
     sortMethod: Function,
@@ -29,52 +30,56 @@ export function useTableSort(
             : null
     })
 
-    const computedSortMethod = computed(() =>
-        props.sortMethod !== void 0
-            ? props.sortMethod
-            : (((data, sortBy, descending) => {
-                  const col = colList.value.find((def) => def.name === sortBy)
-                  if (col === void 0 || col.field === void 0) {
-                      return data
-                  }
-
-                  const dir = descending === true ? -1 : 1
-                  const val =
-                      typeof col.field === 'function'
-                          ? (v: string) => (col.field as Function)(v)
-                          : (v: Record<string, any>) => v[col.field as string]
-
-                  return data.sort((a: any, b: any) => {
-                      let A = val(a)
-                      let B = val(b)
-
-                      if (A === null || A === void 0) {
-                          return -1 * dir
-                      }
-                      if (B === null || B === void 0) {
-                          return 1 * dir
-                      }
-                      if (col.sort !== void 0) {
-                          return col.sort(A, B, a, b) * dir
-                      }
-                      if (isNumber(A) === true && isNumber(B) === true) {
-                          return (A - B) * dir
-                      }
-                      if (isDate(A) === true && isDate(B) === true) {
-                          return sortDate(A, B) * dir
-                      }
-                      if (typeof A === 'boolean' && typeof B === 'boolean') {
-                          return (Number(A) - Number(B)) * dir
-                      }
-
-                      [A, B] = [A, B].map((s) =>
-                          (s + '').toLocaleString().toLowerCase()
-                      )
-
-                      return A < B ? -1 * dir : A === B ? 0 : dir
-                  })
-              }) as DlTableSortMethod)
-    )
+    const computedSortMethod = computed(() => {
+        if (props.sortMethod) {
+            return props.sortMethod
+        }
+
+        const sortMethod: DlTableSortMethod = (data, sortBy, descending) => {
+            const col = colList.value.find((def) => def.name === sortBy)
+            if (isUndefined(col) || isUndefined(col.field)) {
+                return data
+            }
+
+            const dir = descending === true ? -1 : 1
+            const val =
+                typeof col.field === 'function'
+                    ? (v: string) => (col.field as Function)(v)
+                    : (v: Record<string, any>) => v[col.field as string]
+
+            return data.sort((a: any, b: any) => {
+                let A = val(a)
+                let B = val(b)
+
+                if (A === null || isUndefined(A)) {
+                    return -1 * dir
+                }
+                if (B === null || isUndefined(B)) {
+                    return 1 * dir
+                }
+                if (col.sort) {
+                    return col.sort(A, B, a, b) * dir
+                }
+                if (isNumber(A) === true && isNumber(B) === true) {
+                    return (A - B) * dir
+                }
+                if (isDate(A) === true && isDate(B) === true) {
+                    return sortDate(A, B) * dir
+                }
+                if (typeof A === 'boolean' && typeof B === 'boolean') {
+                    return (Number(A) - Number(B)) * dir
+                }
+
+                [A, B] = [A, B].map((s) =>
+                    (s + '').toLocaleString().toLowerCase()
+                )
+
+                return A < B ? -1 * dir : A === B ? 0 : dir
+            })
+        }
+
+        return sortMethod
+    })
 
     function sort(col: string | DlTableColumn) {
         let sortOrder: DlTableProps['columnSortOrder'] = props.columnSortOrder
@@ -87,7 +92,7 @@ export function useTableSort(
             col = (col as DlTableColumn).name
         } else {
             const def = colList.value.find((def) => def.name === col)
-            if (def !== void 0 && def.sortOrder) {
+            if (def && def.sortOrder) {
                 sortOrder = def.sortOrder
             }
         }

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -8,6 +8,11 @@
   border-collapse: separate;
   border-spacing: 0;
 
+  &__drag-icon > div {
+    transition: all ease-in 0.1s;
+      opacity: 0;
+  }
+
   //markup-table 
 
   &__card {
@@ -66,6 +71,9 @@
     height: 40px;
 
     &:not(.dl-tr--no-hover):hover {
+      .dl-table__drag-icon > div {
+        opacity: 1;
+      }
       td:not(.dl-td--no-hover) {
         background-color: var(--dl-color-fill-hover);
       }

package/src/components/compound/DlTabs/DlTabs.vue

@@ -1,35 +1,47 @@
 <template>
-    <tabs-wrapper
-        :id="uuid"
-        :is-scrollable="isOverflowing"
-        :is-at-end="isAtEnd"
-        :is-at-start="isAtStart"
-        :is-vertical="vertical"
-        @left-arrow-click="handleLeft"
-        @right-arrow-click="handleRight"
+    <div
+        class="dl-tabs-wrapper"
+        :class="{ 'full-width': fullWidth }"
+        :style="cssVars"
     >
-        <div
-            ref="dlTabsRef"
-            class="dl-tabs-container"
-            :class="{ 'full-width': fullWidth }"
-            role="tablist"
+        <tabs-wrapper
+            :id="uuid"
+            :is-scrollable="isOverflowing"
+            :is-at-end="isAtEnd"
+            :is-at-start="isAtStart"
+            class="dl-tabs-root"
+            :is-vertical="vertical"
+            @left-arrow-click="handleLeft"
+            @right-arrow-click="handleRight"
         >
-            <dl-tab
-                v-for="(item, index) in items"
-                :key="index"
-                :name="item.name"
-                :vertical="vertical"
-                :label="item.label"
-                :show-tooltip="item.showTooltip"
-                :tooltip="item.tooltip"
-                :disabled="disabled || item.disabled"
-                :no-caps="item.noCaps"
-                :is-active="modelValue === item.name"
-                :font-size="fontSize"
-                @click="handleTabClick"
-            />
-        </div>
-    </tabs-wrapper>
+            <div
+                ref="dlTabsRef"
+                class="dl-tabs-container"
+                :class="{ 'full-width': fullWidth }"
+                role="tablist"
+            >
+                <dl-tab
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :name="item.name"
+                    :vertical="vertical"
+                    :label="item.label"
+                    :show-tooltip="item.showTooltip"
+                    :tooltip="item.tooltip"
+                    :disabled="disabled || item.disabled"
+                    :no-caps="item.noCaps"
+                    :is-active="modelValue === item.name"
+                    :font-size="fontSize"
+                    @click="handleTabClick"
+                />
+            </div>
+        </tabs-wrapper>
+        <div class="empty-space" />
+        <slot
+            name="top-right"
+            :styles="topRightSlotStyles"
+        />
+    </div>
 </template>
 
 <script lang="ts">
@@ -56,7 +68,8 @@ export default defineComponent({
         fullWidth: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
         modelValue: { type: String, required: true },
-        fontSize: { type: String, default: '12px' }
+        fontSize: { type: String, default: '18px' },
+        gap: { type: String, default: '40px' }
     },
     emits: ['update:model-value'],
     data() {
@@ -67,10 +80,28 @@ export default defineComponent({
             isAtEnd: false,
             children: [] as HTMLElement[],
             invisibleLeftIndex: 0,
-            invisibleRightIndex: 0
+            invisibleRightIndex: 0,
+            topRightSlotWidth: 0
         }
     },
     computed: {
+        topRightSlotStyles(): string {
+            return `border-bottom: ${
+                this.vertical
+                    ? 'inherit'
+                    : '1px solid var(--dl-color-separator)'
+            };
+            padding-left: ${this.topRightSlotWidth ? this.gap : '0px'};
+            `
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-tabs-top-right-slot-width': this.topRightSlotWidth + 'px',
+                '--dl-empty-space-border': this.vertical
+                    ? 'inherit'
+                    : '1px solid var(--dl-color-separator)'
+            }
+        },
         // @ts-ignore
         resizeObserver(): ResizeObserver | undefined {
             // @ts-ignore
@@ -96,6 +127,9 @@ export default defineComponent({
         const element = this.$refs.dlTabsRef as HTMLElement
         this.resizeObserver?.observe(element)
         element?.addEventListener('scroll', this.updatePosition)
+        this.topRightSlotWidth =
+            (this.$refs.dlTabsRef as HTMLElement)?.parentNode?.parentNode
+                ?.children?.[2]?.clientWidth || 0
     },
     unmounted() {
         this.unsubscribeListeners()
@@ -172,6 +206,24 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.dl-tabs-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    max-width: 100%;
+}
+
+.dl-tabs-root {
+    max-width: calc(100% - var(--dl-tabs-top-right-slot-width));
+}
+
+.empty-space {
+    display: flex;
+    flex-grow: 1;
+    border-bottom: var(--dl-empty-space-border);
+    max-height: calc(100% - 1px);
+}
+
 .dl-tabs-container {
     position: relative;
     text-align: center;

package/src/components/compound/DlTabs/components/DlTab.vue

@@ -14,9 +14,11 @@
         <span>
             <dl-icon
                 v-if="showTooltip"
-                size="12px"
+                :size="iconSize"
+                :inline="false"
                 icon="icon-dl-info"
                 class="info-icon"
+                color="dl-color-lighter"
             />
             <dl-tooltip v-if="showTooltip === true">
                 {{ tooltip }}
@@ -25,7 +27,8 @@
     </div>
 </template>
 <script lang="ts">
-import { DlTooltip, DlIcon } from '../../../essential'
+import { DlTooltip } from '../../../shared'
+import { DlIcon } from '../../../essential'
 import { defineComponent } from 'vue-demi'
 import { stopAndPrevent } from '../../../../utils'
 import { v4 } from 'uuid'
@@ -46,7 +49,7 @@ export default defineComponent({
         showTooltip: { type: Boolean, default: false },
         tooltip: { type: String, default: null },
         tabindex: { type: String, default: '0' },
-        fontSize: { type: String, default: '12px' }
+        fontSize: { type: String, default: '18px' }
     },
     emits: ['click'],
     data() {
@@ -55,6 +58,10 @@ export default defineComponent({
         }
     },
     computed: {
+        iconSize(): string {
+            const fontSize = parseInt(this.fontSize)
+            return `${fontSize - 2 < 0 ? 0 : fontSize - 6}px`
+        },
         cssFontSize(): Record<string, string> {
             return {
                 '--dl-tab-font-size': this.fontSize
@@ -106,7 +113,6 @@ export default defineComponent({
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 5px;
     &--active {
         color: var(--dl-color-secondary);
         border-color: var(--dl-color-secondary) !important;
@@ -123,6 +129,7 @@ export default defineComponent({
         padding: 5px 10px;
         font-size: var(--dl-tab-font-size);
         line-height: 14px;
+        border-color: var(--dl-color-separator) !important;
         &:not(:last-child) {
             border-right: 1px solid var(--dl-color-separator);
         }
@@ -142,4 +149,7 @@ export default defineComponent({
     cursor: pointer;
     flex-grow: 1;
 }
+.info-icon {
+    margin: 0px 5px;
+}
 </style>

package/src/components/compound/DlTabs/components/TabsWrapper.vue

@@ -1,12 +1,10 @@
 <template>
-    <div
-        :class="['tabs-wrapper', { scrollable: isScrollable }]"
-        :style="cssVars"
-    >
+    <div :class="['tabs-wrapper', { scrollable: isScrollable }]">
         <dl-button
             v-if="isScrollable"
-            size="l"
+            :size="buttonSize"
             flat
+            padding="0"
             :disabled="isAtStart"
             data-qa="left-arrow-button"
             class="arrow-button"
@@ -21,12 +19,13 @@
         <slot class="tabs" />
         <dl-button
             v-if="isScrollable"
-            size="l"
+            :size="buttonSize"
             data-qa="right-arrow-button"
             text-color="dl-color-darker"
             flat
+            padding="0"
             :disabled="isAtEnd"
-            class="arrow-button"
+            :class="rightArrowClass"
             @click="handleRightArrowClick"
         >
             <dl-icon
@@ -54,10 +53,17 @@ export default defineComponent({
     },
     emits: ['left-arrow-click', 'right-arrow-click'],
     computed: {
-        cssVars(): string {
-            return `
-                --dl-tabs-arrows-size: ${this.isVertical ? '24px' : '40px'}
-            `
+        buttonSize(): string {
+            return this.isVertical ? 's' : 'm'
+        },
+        hasTopRightSlot(): boolean {
+            return !!this.$parent.$slots['top-right']
+        },
+        rightArrowClass(): string {
+            if (this.hasTopRightSlot && !this.isVertical) {
+                return 'arrow-button--right'
+            }
+            return 'arrow-button'
         }
     },
     methods: {
@@ -81,24 +87,23 @@ export default defineComponent({
     align-items: center;
 }
 
-.tabs {
-    flex-grow: 1;
-}
-
-::v-deep .dl-button {
-    padding: 0px;
-
-    &:disabled {
-        pointer-events: none;
+.arrow-button {
+    &--right {
+        border-bottom: 1px solid var(--dl-color-separator);
+        height: calc(100% - 1px);
+        display: flex;
     }
 }
 
-::v-deep .dl-button-content {
-    padding-top: 1px;
-    min-height: var(--dl-tabs-arrows-size);
-    width: var(--dl-tabs-arrows-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.tabs {
+    flex-grow: 1;
+    ::v-deep .dl-button-content {
+        padding-top: 1px;
+        min-height: var(--dl-tabs-arrows-size);
+        width: var(--dl-tabs-arrows-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 </style>