@dataloop-ai/components 0.19.284 → 0.20.0

package/src/components/compound/DlSelect/components/DlSelectOption.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        :id="uuid"
-        :class="identifierClass"
-        style="width: 100%"
-    >
+    <div :id="uuid" :class="identifierClass" style="width: 100%">
         <div
             v-if="readonly"
             :class="[{ 'readonly-option': true }, { capitalized }]"
@@ -22,10 +18,7 @@
             style="width: 100%"
             @click="handleClick"
         >
-            <dl-item-section
-                :color="color"
-                style="width: 100%"
-            >
+            <dl-item-section :color="color" style="width: 100%">
                 <span
                     v-if="multiselect"
                     class="multiselect-option"
@@ -58,15 +51,9 @@
                             }}
                         </slot>
                     </dl-checkbox>
-                    <span
-                        v-if="count"
-                        class="counter"
-                    > ({{ count }}) </span>
+                    <span v-if="count" class="counter"> ({{ count }}) </span>
                 </span>
-                <div
-                    v-else
-                    :class="{ capitalized }"
-                >
+                <div v-else :class="{ capitalized }">
                     <slot>
                         {{
                             capitalized
@@ -130,8 +117,12 @@ import { DlItemSection } from '../../../shared'
 import { v4 } from 'uuid'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../../StateManager'
-import { DlSelectOptionType, getCaseInsensitiveInput, getLabel } from '../utils'
-import { DlSelectedValueType, DlSelectOption } from '../../types'
+import { getCaseInsensitiveInput, getLabel } from '../utils'
+import {
+    DlSelectedValueType,
+    DlSelectOption,
+    DlSelectOptionType
+} from '../../types'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
@@ -240,7 +231,7 @@ export default defineComponent({
         getOptionLabel(option: any) {
             return getLabel(option) ?? this.getOptionValue(option)
         },
-        getOptionHtml(option: DlSelectOptionType) {
+        getOptionHtml(option: DlSelectOptionType | DlSelectedValueType) {
             const label = `${this.getOptionLabel(option)}`
             let highlightedHtml = label
 
@@ -412,7 +403,9 @@ export default defineComponent({
     display: flex !important;
     justify-content: center !important;
     color: var(--dl-color-medium);
-    transition-property: transform, -webkit-transform;
+    transition-property:
+        transform,
+        -webkit-transform;
     transition-duration: 0.28s, 0.28s;
     transition-timing-function: ease, ease;
     transition-delay: 0s, 0s;

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

@@ -1,4 +1,5 @@
-export interface DlSelectOption {
+type Dictionary = { [key: string]: any }
+export interface DlSelectOption extends Dictionary {
     label: string
     value: any
     key?: string
@@ -6,3 +7,5 @@ export interface DlSelectOption {
     children?: DlSelectOption[]
     readonly?: boolean
 }
+
+export type DlSelectOptionType = string | number | DlSelectOption

package/src/components/compound/DlSelect/utils.ts

@@ -1,7 +1,5 @@
 import { TInputSizes } from '../../../utils/input-sizes'
-import { DlSelectOption } from './types'
-
-export type DlSelectOptionType = string | number | DlSelectOption
+import { DlSelectOptionType } from './types'
 
 export const getLabel = (option: any) => {
     if (typeof option === 'object' && 'label' in option) {

package/src/components/compound/DlSlider/useSlider.ts

@@ -53,7 +53,10 @@ export const dragType = {
 }
 
 export const useSliderProps = {
-    ...useFormProps,
+    name: {
+        type: String,
+        default: null as string
+    },
     text: {
         type: String,
         default: ''

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

@@ -147,9 +147,10 @@ export default defineComponent({
                 thClasses: null,
                 isSortable: false,
                 hasEllipsis: false,
-                onClick: onClickFn,
+                onClick: onClickFn as any as (payload: MouseEvent) => void,
                 hasHint,
-                isDense
+                isDense,
+                computedSortIcon: ''
             }
         }
 
@@ -178,7 +179,9 @@ export default defineComponent({
             onClickFn(evt, column.value.name)
         }
 
-        const onClick = !hasOptionalProps.value ? onClickFn : handleClick
+        const onClick: (payload: MouseEvent) => void = !hasOptionalProps.value
+            ? (onClickFn as any as (payload: MouseEvent) => void)
+            : (handleClick as any as (payload: MouseEvent) => void)
 
         return {
             hasHint,

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

@@ -8,12 +8,7 @@
     >
         <slot />
     </component>
-    <component
-        :is="$props.tag"
-        v-else
-        v-bind="props"
-        :class="$props.class"
-    >
+    <component :is="$props.tag" v-else v-bind="props" :class="$props.class">
         <slot />
     </component>
 </template>
@@ -24,10 +19,10 @@ import { useSortable, useSortableProps, emits } from '../hooks/use-sortable'
 export default defineComponent({
     props: useSortableProps,
     emits,
-    setup() {
+    setup(props) {
         const vm = getCurrentInstance()
         const { getKey, rootRef } = useSortable(vm)
-        return { getKey, rootRef }
+        return { getKey, rootRef, props: props as { [key: string]: any } }
     }
 })
 </script>

package/src/components/compound/DlThumbnailGallery/DlThumbnailGallery.vue

@@ -1,9 +1,6 @@
 <template>
     <div class="slider-wrapper">
-        <div
-            :style="imageContainerStyles"
-            class="slider"
-        >
+        <div :style="imageContainerStyles" class="slider">
             <div class="slider__arrow">
                 <div
                     :class="getChevronClass('left')"
@@ -18,10 +15,7 @@
                 </div>
             </div>
 
-            <div
-                ref="images"
-                class="slider__images"
-            >
+            <div ref="images" class="slider__images">
                 <div
                     v-for="image in currentImages"
                     :key="image.src"
@@ -37,10 +31,7 @@
                             :icon="getStatusIcon(image.status)"
                         />
                     </div>
-                    <img
-                        :src="image.src"
-                        @error="handleImageError"
-                    >
+                    <img :src="image.src" @error="handleImageError" />
                     <dl-tooltip>{{ image.name }}</dl-tooltip>
                 </div>
             </div>
@@ -89,7 +80,7 @@ export default defineComponent({
          */
         images: {
             type: Array as PropType<DlThumbnail[]>,
-            default: (): DlThumbnail[] => []
+            default: (): DlThumbnail[] => [] as DlThumbnail[]
         },
         /**
          * The number of thumbnails visible at once
@@ -127,7 +118,7 @@ export default defineComponent({
         }
     },
     computed: {
-        imageContainerStyles(): object {
+        imageContainerStyles(): Record<string, any> {
             return {
                 '--thumbnail-size': `${100 / this.visibleThumbnails}%`,
                 '--img-object-fit':
@@ -145,7 +136,7 @@ export default defineComponent({
             return this.images.slice(
                 this.currentList.first,
                 this.currentList.last
-            )
+            ) as DlThumbnail[]
         }
     },
     methods: {
@@ -157,8 +148,8 @@ export default defineComponent({
             this.currentList.first -= this.visibleThumbnails
             this.currentList.last -= this.visibleThumbnails
         },
-        handleImageError(e: ErrorEvent) {
-            (e.target as HTMLImageElement).src = this.invalidImage
+        handleImageError(e: any) {
+            ;(e.target as HTMLImageElement).src = this.invalidImage
         },
         getImageOutline(image: string) {
             return {
@@ -185,7 +176,7 @@ export default defineComponent({
                 ? 'slider__arrow--icon'
                 : 'slider__arrow--icon--invisible'
         },
-        handleThumbnailMousedown(image: string) {
+        handleThumbnailMousedown(image: DlThumbnail) {
             this.$emit('update:model-value', image)
             this.$emit('selected', image)
         }

package/src/components/essential/DlTypography/DlTypography.vue

@@ -1,10 +1,5 @@
 <template>
-    <component
-        :is="variant"
-        :id="uuid"
-        :class="classes"
-        :style="styles"
-    >
+    <component :is="variant" :id="uuid" :class="classes" :style="styles">
         <slot />
     </component>
 </template>
@@ -13,16 +8,13 @@ import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { getColor } from '../../../utils'
 import { DlTextTransformOptions } from '../../shared/types'
-
-type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div'
-
-const sizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'small']
+import { DlTypographyVariant, DlTypographySizes } from './types'
 
 export default defineComponent({
     name: 'DlTypography',
     props: {
         variant: {
-            type: String as PropType<Variant>,
+            type: String as PropType<DlTypographyVariant>,
             required: false,
             default: 'p'
         },
@@ -56,7 +48,7 @@ export default defineComponent({
                 fontWeight: this.bold ? 'bold' : 400
             }
 
-            if (this.size && !sizes.includes(this.size)) {
+            if (this.size && !DlTypographySizes.includes(this.size)) {
                 styles.fontSize = this.size as string
             }
 
@@ -72,11 +64,11 @@ export default defineComponent({
             const classes = [`dl-typography`]
 
             if (this.size) {
-                if (sizes.includes(this.size)) {
+                if (DlTypographySizes.includes(this.size)) {
                     classes.push(`dl-typography--${this.size}`)
                 }
             } else {
-                if (sizes.includes(this.variant)) {
+                if (DlTypographySizes.includes(this.variant)) {
                     classes.push(`dl-typography--${this.variant}`)
                 } else {
                     classes.push(`dl-typography--body`)

package/src/components/essential/DlTypography/types.ts

@@ -0,0 +1,19 @@
+export type DlTypographyVariant =
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'div'
+export const DlTypographySizes = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'body',
+    'small'
+]

package/src/components/essential/types.ts

@@ -1,2 +1,3 @@
 export * from './DlColorPicker/types'
 export * from './DlSpinner/types'
+export * from './DlTypography/types'

package/src/demos/DlChipDemo.vue

@@ -1,18 +1,9 @@
 <template>
     <div style="width: 800px">
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip label="Lorem ipsum dolor" />
-            <DlChip
-                outlined
-                label="Chip outlined"
-            />
-            <DlChip
-                disabled
-                label="Chip disabled"
-            />
+            <DlChip outlined label="Chip outlined" />
+            <DlChip disabled label="Chip disabled" />
             <DlChip label="Ellipsed Chip with a multiple words" />
             <DlChip
                 label="Ellipsed Chip with a multiple words"
@@ -25,15 +16,8 @@
             />
         </div>
         <h4>Removable Chips</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
-            <DlChip
-                removable
-                label="Chip filled"
-                @remove="log('removable')"
-            />
+        <div class="col" style="margin-bottom: 30px">
+            <DlChip removable label="Chip filled" @remove="log('removable')" />
             <DlChip
                 removable
                 outlined
@@ -59,21 +43,14 @@
             />
         </div>
         <h4>Removable Chips with icon</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip
                 removable
                 icon="icon-dl-search"
                 label="chip filled"
                 @remove="log('test')"
             />
-            <DlChip
-                removable
-                icon="icon-dl-search"
-                @remove="log('test')"
-            />
+            <DlChip removable icon="icon-dl-search" @remove="log('test')" />
             <DlChip
                 removable
                 icon="icon-dl-search"
@@ -103,30 +80,13 @@
             />
         </div>
         <h4>Removable Chips without icon and label</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
-            <DlChip
-                removable
-                @remove="log('test')"
-            />
-            <DlChip
-                removable
-                outlined
-                @remove="log('test')"
-            />
-            <DlChip
-                removable
-                disabled
-                @remove="log('test')"
-            />
+        <div class="col" style="margin-bottom: 30px">
+            <DlChip removable @remove="log('test')" />
+            <DlChip removable outlined @remove="log('test')" />
+            <DlChip removable disabled @remove="log('test')" />
         </div>
         <h4>Chips with label slot</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip
                 ref="removableChip"
                 removable
@@ -134,41 +94,23 @@
             />
         </div>
         <h4>Chips with no text transform</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip
                 label="ellipsed Chip with a multiple words"
-                transform="none"
+                :transform="noneOption"
             />
         </div>
         <div class="col">
-            <DlButton
-                label="remove chip"
-                @click="removeChip"
-            />
+            <DlButton label="remove chip" @click="removeChip" />
         </div>
         <h4>Chips with icon and without label</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip icon="icon-dl-search" />
-            <DlChip
-                icon="icon-dl-search"
-                outlined
-            />
-            <DlChip
-                icon="icon-dl-search"
-                disabled
-            />
+            <DlChip icon="icon-dl-search" outlined />
+            <DlChip icon="icon-dl-search" disabled />
         </div>
         <h4>Chips with overflow</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip
                 label="Long Chip Label With Alot Of Text"
                 max-width="75px"
@@ -176,10 +118,7 @@
             />
         </div>
         <h4>Chips with Fit</h4>
-        <div
-            class="col"
-            style="margin-bottom: 30px"
-        >
+        <div class="col" style="margin-bottom: 30px">
             <DlChip
                 label="Long Chip Label With Alot Of Text"
                 fit
@@ -193,6 +132,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlChip, DlButton } from '../components'
+import { DlTextTransformOptions } from '../types'
 export default defineComponent({
     name: 'DlChipDemo',
     components: {
@@ -200,13 +140,13 @@ export default defineComponent({
         DlButton
     },
     setup() {
-        const log = (e: Event) => console.log(e)
+        const log = (e: any) => console.log(e)
         const removableValue = ref(true)
-        return { log, removableValue }
+        return { log, removableValue, noneOption: DlTextTransformOptions.NONE }
     },
     methods: {
         removeChip() {
-            (this.$refs.removableChip as any).remove()
+            ;(this.$refs.removableChip as any).remove()
         }
     }
 })

package/src/demos/DlCounterDemo.vue

@@ -49,7 +49,7 @@
                         'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
                 },
                 {
-                    value: '154h:35m:20s',
+                    value: 1610015720,
                     text: 'ipsum lorem',
                     subtext:
                         'Cupidatat est labore et nisi do culpa veniam reprehenderit anim consectetur dolor mollit.',

package/src/demos/DlDatasetBrowserLayoutDemo/components/MainContent/ActionsMenu.vue

@@ -9,10 +9,7 @@
         size="s"
         text-color="dl-color-darker"
     >
-        <dl-list
-            bordered
-            separator
-        >
+        <dl-list bordered separator>
             <dl-list-item
                 v-for="item in items"
                 :key="item.id"
@@ -31,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, PropType } from 'vue-demi'
 import {
     DlDropdownButton,
     DlList,
@@ -49,13 +46,13 @@ export default defineComponent({
     },
     props: {
         items: {
-            type: Array,
+            type: Array as PropType<Record<string, any>[]>,
             default: () => [] as Record<string, any>[]
         }
     },
     emits: ['onChange'],
     setup(props, context) {
-        const handleOption = (event: Event) => {
+        const handleOption = (event: any) => {
             console.log('click: ', event)
             context.emit('onChange', event)
         }

package/src/demos/DlDatasetBrowserLayoutDemo/components/MainContent/AutomationMenu.vue

@@ -8,10 +8,7 @@
         size="s"
         text-color="dl-color-darker"
     >
-        <dl-list
-            bordered
-            separator
-        >
+        <dl-list bordered separator>
             <dl-list-item
                 v-for="item in items"
                 :key="item.id"
@@ -24,10 +21,7 @@
                 <dl-item-section :color="item.labelColor">
                     {{ item.label }}
                 </dl-item-section>
-                <dl-item-section
-                    v-if="item.children"
-                    side
-                >
+                <dl-item-section v-if="item.children" side>
                     <dl-icon icon="icon-dl-right-chevron" />
                 </dl-item-section>
                 <dl-menu
@@ -36,10 +30,7 @@
                     anchor="top end"
                     self="top start"
                 >
-                    <dl-list
-                        bordered
-                        separator
-                    >
+                    <dl-list bordered separator>
                         <dl-list-item
                             v-for="itemChildren in item.children"
                             :key="itemChildren.id"
@@ -49,10 +40,7 @@
                             <dl-item-section>
                                 {{ itemChildren.label }}
                             </dl-item-section>
-                            <dl-item-section
-                                v-if="itemChildren.icon"
-                                side
-                            >
+                            <dl-item-section v-if="itemChildren.icon" side>
                                 <dl-icon :icon="itemChildren.icon" />
                             </dl-item-section>
                         </dl-list-item>
@@ -64,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, PropType } from 'vue-demi'
 import {
     DlList,
     DlMenu,
@@ -85,13 +73,13 @@ export default defineComponent({
     },
     props: {
         items: {
-            type: Array,
+            type: Array as PropType<Record<string, any>[]>,
             default: () => [] as Record<string, any>[]
         }
     },
     emits: ['onChange'],
     setup(props, context) {
-        const handleOption = (event: Event) => {
+        const handleOption = (event: any) => {
             console.log('click: ', event)
             context.emit('onChange', event)
         }

package/src/demos/DlDatasetBrowserLayoutDemo/components/MainContent/CardView.vue

@@ -16,10 +16,7 @@
             }"
             description="text"
             title="title"
-            :links="{
-                title: 'title',
-                href: image.url
-            }"
+            :links="getLinks(image)"
             :tags="[
                 {
                     label: 'A',
@@ -56,6 +53,7 @@
 import { defineComponent, PropType } from 'vue-demi'
 import { ImageMetadata } from '../types/imageMetadata'
 import { DlCard } from '../../../../components'
+import { DlCardLinkType } from '../../../../types'
 
 export default defineComponent({
     name: 'CardView',
@@ -64,8 +62,8 @@ export default defineComponent({
     },
     props: {
         items: {
-            type: Array,
-            default: () => Array as PropType<ImageMetadata[]>
+            type: Array as PropType<ImageMetadata[]>,
+            default: (): ImageMetadata[] => [] as ImageMetadata[]
         }
     },
     setup() {
@@ -82,7 +80,15 @@ export default defineComponent({
         }
 
         return {
-            imageStyles
+            imageStyles,
+            getLinks: (image: ImageMetadata): DlCardLinkType[] => {
+                return [
+                    {
+                        title: 'title',
+                        href: image.url
+                    }
+                ] as DlCardLinkType[]
+            }
         }
     }
 })