@dataloop-ai/components 0.17.27 → 0.17.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.27",
+  "version": "0.17.28",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

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: '12px' },
+        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

@@ -123,6 +123,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);
         }

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>

package/src/demos/DlTabsDemo.vue

@@ -16,18 +16,105 @@
                 <h1>{{ item.label }}</h1>
             </dl-tab-panel>
         </dl-tab-panels>
+
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            full-width
+            vertical
+            style="margin-top: 100px"
+            @update:model-value="handleModelValueUpdate"
+        >
+            <template #top-right="props">
+                <div
+                    :style="props.styles"
+                    style="
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                    "
+                >
+                    <dl-button
+                        flat
+                        size="s"
+                        icon="icon-dl-refresh"
+                        label="Refresh"
+                    />
+                    <dl-button
+                        size="s"
+                        icon="icon-dl-pause"
+                        label="Pause"
+                    />
+                </div>
+            </template>
+        </dl-tabs>
+        <div style="height: 4px" />
+        <dl-tab-panels v-model="selectedTab">
+            <dl-tab-panel
+                v-for="item in tabItems"
+                :key="item.name"
+                class="tabpanel"
+                :name="item.name"
+            >
+                <h1>{{ item.label }}</h1>
+            </dl-tab-panel>
+        </dl-tab-panels>
+
+        <dl-tabs
+            v-model="selectedTab"
+            :items="tabItems"
+            style="margin-top: 100px; max-width: 60%"
+            @update:model-value="handleModelValueUpdate"
+        >
+            <template #top-right="props">
+                <div
+                    :style="props.styles"
+                    style="
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                    "
+                >
+                    <dl-button
+                        flat
+                        size="s"
+                        icon="icon-dl-refresh"
+                        label="Refresh"
+                    />
+                    <dl-button
+                        size="s"
+                        icon="icon-dl-pause"
+                        label="Pause"
+                    />
+                </div>
+            </template>
+        </dl-tabs>
+        <div style="height: 4px" />
+        <dl-tab-panels v-model="selectedTab">
+            <dl-tab-panel
+                v-for="item in tabItems"
+                :key="item.name"
+                class="tabpanel"
+                :name="item.name"
+            >
+                <h1>{{ item.label }}</h1>
+            </dl-tab-panel>
+        </dl-tab-panels>
     </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTabs, DlTabPanel, DlTabPanels } from '../components'
+import { DlTabs, DlTabPanel, DlTabPanels, DlButton } from '../components'
 import { DlTabDetails } from '../components/types'
 
 export default defineComponent({
     components: {
         DlTabs,
         DlTabPanel,
-        DlTabPanels
+        DlTabPanels,
+        DlButton
     },
     data() {
         return {

package/src/demos/DlTooltipDemo.vue

@@ -54,11 +54,39 @@
                 />
             </dl-tooltip>
         </div>
+        <div>
+            Tooltip with chip
+            <dl-tooltip style="padding: 0; border-radius: 2px">
+                <DlChip
+                    label="Long Chip Label With Alot Of Text"
+                    max-width="75px"
+                />
+            </dl-tooltip>
+        </div>
+        <div>
+            Tooltip with chip and flex
+            <dl-tooltip>
+                <div style="display: flex; flex-flow: row wrap; gap: 3px">
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                    <DlChip
+                        label="Long Chip Label With Alot Of Text"
+                        max-width="75px"
+                    />
+                </div>
+            </dl-tooltip>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlTooltip, DlLink, DlCard } from '../components'
+import { DlTooltip, DlLink, DlCard, DlChip } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
@@ -66,7 +94,8 @@ export default defineComponent({
     components: {
         DlCard,
         DlTooltip,
-        DlLink
+        DlLink,
+        DlChip
     },
     data() {
         return {