@dataloop-ai/components 0.16.45 → 0.16.47

package/src/components/compound/DlTable/DlTable.vue

@@ -58,12 +58,13 @@
             v-if="hasVirtScroll"
             ref="virtScrollRef"
             :class="tableClass"
+            :draggable-classes="additionalClasses"
             :style="tableStyle"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
-            :on-virtual-scroll="onVScroll"
             :table-colspan="computedColspan"
             v-bind="virtProps"
+            @virtual-scroll="onVScroll"
         >
             <template #before>
                 <thead>
@@ -144,16 +145,18 @@
                 <DlTr
                     :key="getRowKey(props.item)"
                     :class="
-                        isRowSelected(getRowKey(row))
+                        isRowSelected(getRowKey(props.item))
                             ? 'selected'
                             : hasAnyAction
                                 ? ' cursor-pointer'
                                 : ''
                     "
                     :no-hover="noHover"
-                    @click="onTrClick($event, row, pageIndex)"
-                    @dblclick="onTrDblClick($event, row, pageIndex)"
-                    @contextmenu="onTrContextMenu($event, row, pageIndex)"
+                    @click="onTrClick($event, props.item, pageIndex)"
+                    @dblclick="onTrDblClick($event, props.item, pageIndex)"
+                    @contextmenu="
+                        onTrContextMenu($event, props.item, pageIndex)
+                    "
                 >
                     <td v-if="hasDraggableRows">
                         <dl-icon
@@ -302,7 +305,7 @@
                         </tr>
                     </slot>
                 </thead>
-                <tbody>
+                <tbody id="draggable">
                     <slot
                         name="top-row"
                         :cols="computedCols"
@@ -723,7 +726,7 @@ export default defineComponent({
 
         onMounted(() => {
             tableEl = (rootRef.value as HTMLDivElement).querySelector(
-                '.dl-table'
+                'table.dl-table'
             ) as HTMLTableElement
             resizableManager = new ResizableManager()
 
@@ -753,7 +756,7 @@ export default defineComponent({
             hasVirtScroll,
             () => {
                 tableEl = (rootRef.value as HTMLDivElement).querySelector(
-                    '.dl-table'
+                    'table.dl-table'
                 ) as HTMLTableElement
 
                 if (props.resizable) {
@@ -1049,8 +1052,8 @@ export default defineComponent({
                 acc[p] = (props as Record<string, any>)[p]
             })
 
-            if (acc.virtualScrollItemSize === void 0) {
-                acc.virtualScrollItemSize = props.dense === true ? 28 : 48
+            if (!acc.virtualScrollItemSize) {
+                acc.virtualScrollItemSize = props.dense === true ? 30 : 40
             }
 
             return acc

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

@@ -21,9 +21,11 @@
   }
 
   /* this is when the loading indicator appears */
-  &.dl-table--loading thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 40px;
+  &--loading {
+    thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 38px;
+    }
   }
 
   th:first-child,
@@ -371,6 +373,7 @@
  */
 
 .dl-table--dense {
+
   .dl-table__top {
     position: relative;
     padding: 5px 16px;
@@ -385,6 +388,8 @@
     font-size: 80%;
   }
 
+
+
   .dl-table {
 
     th {
@@ -423,6 +428,13 @@
   }
 }
 
+.dl-table--dense.dl-table--loading {
+  thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 32px;
+  }
+}
+
 /*
  * Separators
  */
@@ -463,4 +475,4 @@
     position: relative;
     border-bottom: 1px solid var(--dl-color-separator);
   }
-}
+}

package/src/components/compound/DlToggleButton/DlToggleButton.vue

@@ -0,0 +1,109 @@
+<template>
+    <div
+        :style="{ width }"
+        class="container"
+    >
+        <dl-button
+            v-for="(btn, idx) in toggleButtons"
+            :key="idx"
+            :styles="
+                getStyles(btn.value === scopedValue, hoverBtn === btn.value)
+            "
+            data-test="button"
+            fluid
+            @mouseenter="hoverBtn = btn.value"
+            @mouseleave="hoverBtn = null"
+            @click="value = btn.value"
+        >
+            <span v-if="!$slots.button && !$slots[`button-${idx}`]">
+                {{ btn.label }}
+            </span>
+            <slot
+                :label="btn.label"
+                :name="`button-${idx}`"
+            />
+            <slot
+                :label="btn.label"
+                name="button"
+            />
+        </dl-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlToggleButtonOption } from './types'
+import { DlButton } from '../../basic'
+import { ButtonsStyles } from './config'
+
+export default defineComponent({
+    name: 'DlToggleButton',
+    components: { DlButton },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        options: {
+            type: Array as () => DlToggleButtonOption[],
+            required: true
+        }
+    },
+    emits: ['update:modelValue', 'change'],
+    data: () => ({
+        scopedValue: null as string | number,
+        hoverBtn: null as string | number
+    }),
+    computed: {
+        value: {
+            get(): string | number | null {
+                return this.modelValue
+            },
+            set(value: string | number) {
+                this.$emit('change', value)
+                let buttonValue
+                if (this.scopedValue !== value) {
+                    buttonValue = value
+                } else {
+                    buttonValue = null
+                }
+                this.scopedValue = buttonValue
+                this.$emit('update:modelValue', buttonValue)
+            }
+        },
+        toggleButtons(): DlToggleButtonOption[] {
+            return this.options.slice(0, 3)
+        }
+    },
+    created() {
+        this.scopedValue = this.value
+    },
+    methods: {
+        getStyles(activeBtn: boolean, hovered: boolean) {
+            if (activeBtn) {
+                return ButtonsStyles.activeStyles
+            } else if (hovered) {
+                return ButtonsStyles.hoverStyles
+            } else {
+                return ButtonsStyles.nonActiveStyles
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+    display: inline-flex;
+    border-radius: 2px;
+    overflow: hidden;
+}
+</style>

package/src/components/compound/DlToggleButton/config.ts

@@ -0,0 +1,27 @@
+const generalStyles = {
+    padding: '7px 10px',
+    height: '28px',
+    fontSize: 'var(--dl-font-size-body)',
+    borderRadius: '0'
+}
+
+export const ButtonsStyles = Object.freeze({
+    nonActiveStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-darker)',
+        borderColor: 'var(--dl-color-separator)',
+        background: 'var(--dl-color-bg)'
+    },
+    activeStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-secondary)',
+        borderColor: 'var(--dl-color-secondary)',
+        background: 'var(--dl-color-secondary-opaque)'
+    },
+    hoverStyles: {
+        ...generalStyles,
+        color: 'var(--dl-color-hover)',
+        borderColor: 'var(--dl-color-hover)',
+        background: 'var(--dl-color-bg)'
+    }
+})

package/src/components/compound/DlToggleButton/index.ts

@@ -0,0 +1,3 @@
+import DlToggleButton from './DlToggleButton.vue'
+
+export { DlToggleButton }

package/src/components/compound/DlToggleButton/types.ts

@@ -0,0 +1,4 @@
+export interface DlToggleButtonOption {
+    label: string
+    value: string | number
+}

package/src/components/compound/index.ts

@@ -16,3 +16,4 @@ export * from './DlTabPanels'
 export * from './DlTabs'
 export * from './DlToast'
 export * from './DlDialogBox'
+export * from './DlToggleButton'

package/src/components/compound/types.ts

@@ -8,3 +8,4 @@ export * from './DlToast/types'
 export * from './DlDialogBox/types'
 export * from './DlOptionGroup/types'
 export * from './DlTable/types'
+export * from './DlToggleButton/types'

package/src/components/essential/DlColorPicker/DlColorPicker.vue

@@ -287,8 +287,9 @@ export default defineComponent({
 .hu-color-picker {
     width: 180px;
     padding: 10px;
-    background: var(--dl-color-shadow);
+    background: var(--dl-color-panel-background);
     border-radius: 2px;
+    border: 1px solid var(--dl-color-separator);
     box-shadow: 0px 3px 6px 0px rgba(16, 30, 115, 0.15);
     z-index: 1;
     text-align: left;
@@ -301,6 +302,8 @@ export default defineComponent({
     .color-show {
         margin-top: 11px;
         display: flex;
+        border: 1px solid var(--dl-color-separator);
+        overflow: hidden;
     }
 }
 </style>

package/src/components/essential/DlColorPicker/components/DlColors.vue

@@ -13,7 +13,7 @@
                 />
                 <div
                     :style="{ background: `${item}` }"
-                    :class="getColorClasses(`${item}`)"
+                    class="color"
                 />
             </li>
         </ul>
@@ -33,7 +33,7 @@
                 />
                 <div
                     :style="{ background: `${item}` }"
-                    :class="getColorClasses(`${item}`)"
+                    class="color"
                 />
             </li>
         </ul>
@@ -125,11 +125,7 @@ export default defineComponent({
             position: absolute;
             left: 0;
             top: 0;
-            width: 100%;
-            height: 100%;
             border-radius: 3px;
-        }
-        .color-white {
             border: 1px solid var(--dl-color-separator);
             width: calc(100% - 2px);
             height: calc(100% - 2px);

package/src/components/essential/DlIcon/DlIcon.vue

@@ -2,7 +2,7 @@
     <div
         v-if="!svg"
         :id="uuid"
-        :style="inlineStyles"
+        :style="[inlineStyles, styles]"
         @click="$emit('click', $event)"
     >
         <i
@@ -48,6 +48,10 @@ export default defineComponent({
             type: String,
             default: '12px'
         },
+        styles: {
+            type: [Array, String, Object],
+            default: null
+        },
         svg: {
             type: Boolean,
             default: false

package/src/components/essential/DlMenu/DlMenu.vue

@@ -79,6 +79,7 @@ import {
 } from './utils'
 import { isMobileOrTablet } from '../../../utils'
 import { v4 } from 'uuid'
+import { useArrowNavigation } from '../../../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlMenu',
@@ -140,10 +141,20 @@ export default defineComponent({
         menuClass: {
             type: String,
             default: ''
+        },
+        arrowNavItems: {
+            type: [String, Array, Object],
+            default: () => [] as any[]
         }
     },
 
-    emits: [...useModelToggleEmits, 'click', 'escape-key'],
+    emits: [
+        ...useModelToggleEmits,
+        'click',
+        'escape-key',
+        'highlightedIndex',
+        'handleSelectedItem'
+    ],
 
     setup(props, { attrs }) {
         const vm = getCurrentInstance()
@@ -242,6 +253,7 @@ export default defineComponent({
         const isMobile = computed(() => isMobileOrTablet())
 
         function handleShow(evt: MouseEvent | TouchEvent) {
+            isMenuOpen.value = true
             removeTick()
             removeTimeout()
 
@@ -290,6 +302,7 @@ export default defineComponent({
         }
 
         function handleHide(evt: ClickOutsideEvent) {
+            isMenuOpen.value = false
             removeTick()
             removeTimeout()
             hidePortal()
@@ -396,6 +409,19 @@ export default defineComponent({
         // expose public methods
         Object.assign(proxy, { focus, updatePosition })
 
+        const isMenuOpen = ref(false)
+        const navItems = computed(() => props.arrowNavItems)
+        const { selectedItem, highlightedIndex } = useArrowNavigation(
+            navItems,
+            isMenuOpen
+        )
+        watch(selectedItem, (value: any) => {
+            emit('handleSelectedItem', value)
+        })
+        watch(highlightedIndex, (value: any) => {
+            emit('highlightedIndex', value)
+        })
+
         return {
             uuid: `dl-menu-${v4()}`,
             onClick,
@@ -406,7 +432,9 @@ export default defineComponent({
             portalEl: isVue2 ? '[data-test-id="portal"]' : portalEl,
             portalIsActive,
             classes: 'dl-menu dl-position-engine scroll' + classes.value,
-            styles: [attrs.style, transitionStyle.value] as any
+            styles: [attrs.style, transitionStyle.value] as any,
+            selectedItem,
+            highlightedIndex
         }
     }
 })

package/src/components/essential/DlSeparator/DlSeparator.vue

@@ -0,0 +1,66 @@
+<template>
+    <div :style="styles" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue-demi'
+import { includes } from '../../../utils'
+
+export default defineComponent({
+    name: 'DlSeparator',
+    props: {
+        color: {
+            type: String,
+            default: 'var(--dl-color-separator)'
+        },
+        type: {
+            type: String,
+            default: 'horizontal',
+            validator: (value: string) =>
+                includes(['horizontal', 'vertical'], value)
+        },
+        width: {
+            type: String,
+            default: null
+        },
+        height: {
+            type: String,
+            default: null
+        },
+        indent: {
+            type: String,
+            default: '10px'
+        }
+    },
+    setup(props) {
+        const { color, height, type, indent, width } = props
+        const styles = computed(() => {
+            let styles
+            switch (type) {
+                case 'horizontal':
+                    styles = {
+                        backgroundColor: color,
+                        width: width ?? '300px',
+                        height: height ?? '1px',
+                        marginTop: indent,
+                        marginBottom: indent
+                    }
+                    break
+                case 'vertical':
+                    styles = {
+                        backgroundColor: color,
+                        width: width ?? '1px',
+                        height: height ?? '300px',
+                        marginLeft: indent,
+                        marginRight: indent
+                    }
+                    break
+                default:
+                    styles = {}
+            }
+            return styles
+        })
+        return { styles }
+    }
+})
+</script>

package/src/components/essential/DlSeparator/index.ts

@@ -0,0 +1,2 @@
+import DlSeparator from './DlSeparator.vue'
+export { DlSeparator }