@dataloop-ai/components 0.20.0 → 0.20.2

package/src/demos/DlDateTimeRangeDemo.vue

@@ -32,7 +32,10 @@
                     class="dl-dtr--option_switch"
                 />
             </div>
-            <div style="margin-top: 10px" class="dl-dtr--option__range">
+            <div
+                style="margin-top: 10px"
+                class="dl-dtr--option__range"
+            >
                 <span class="dl-dtr--option_title">Available Range: </span>
                 <dl-switch
                     v-model="switchState"
@@ -46,7 +49,7 @@
                     value="auto-close"
                     class="dl-dtr--option_switch"
                 />
-                <br />
+                <br>
                 <span>From</span>
                 <input
                     type="date"
@@ -55,7 +58,7 @@
                     class="dl-dtr--range-input"
                     placeholder="from"
                     @input="setRangeFrom"
-                />
+                >
                 <span style="margin-left: 5px">To</span>
                 <input
                     :disabled="!range"
@@ -64,7 +67,7 @@
                     class="dl-dtr--range-input"
                     placeholder="to"
                     @input="setRangeTo"
-                />
+                >
             </div>
         </div>
         <div>
@@ -115,8 +118,8 @@
                     :value="date.from"
                     class="dl-dtr--range-input"
                     placeholder="from"
-                    @input="updateFrom"
-                />
+                    @input="date.from = new Date($event.target.value)"
+                >
 
                 from
                 <input
@@ -125,8 +128,8 @@
                     :value="date.to"
                     class="dl-dtr--range-input"
                     placeholder="from"
-                    @input="updateTo"
-                />
+                    @input="date.to = new Date($event.target.value)"
+                >
             </div>
 
             vmodel date: {{ date }}
@@ -174,10 +177,10 @@ export default defineComponent({
         }
     },
     computed: {
-        type(): 'month' | 'day' {
+        type(): string {
             return this.switchState.includes('type') ? 'month' : 'day'
         },
-        mode(): 'multi' | 'single' {
+        mode(): string {
             return this.switchState.includes('mode') ? 'multi' : 'single'
         },
         showTime(): boolean {
@@ -212,26 +215,20 @@ export default defineComponent({
                 this.switchState.push('type')
             }
         },
-        setRangeFrom({ target }: any) {
+        setRangeFrom({ target }: { target: HTMLInputElement }) {
             this.availableRange = {
                 from: target.value ? new Date(target.value) : null,
                 to: this.availableRange?.to
             }
         },
-        setRangeTo({ target }: any) {
+        setRangeTo({ target }: { target: HTMLInputElement }) {
             this.availableRange = {
                 to: target.value ? new Date(target.value) : null,
                 from: this.availableRange?.from
             }
         },
-        handleRange({ target }: any) {
+        handleRange({ target }: { target: HTMLInputElement }) {
             if (!target.checked) this.availableRange = null
-        },
-        updateTo({ target }: any) {
-            this.date.to = new Date(target.value)
-        },
-        updateFrom({ target }: any) {
-            this.date.from = new Date(target.value)
         }
     }
 })

package/src/demos/DlLabelPickerDemo.vue

@@ -3,7 +3,10 @@
         <div>Label picker component</div>
         <DlLabelPicker
             :items="items"
-            :empty-state-props="emptyStateProps"
+            :empty-state-props="{
+                title: '',
+                icon: ''
+            }"
             hide-bottom
             hide-no-data
             @selected-label="setSelectedEvent"
@@ -16,12 +19,6 @@
 import { DlLabelPicker } from '../components'
 import { defineComponent, ref } from 'vue-demi'
 import { DlLabelPickerItem } from '../types'
-
-const emptyStateProps: any = {
-    title: '',
-    icon: ''
-}
-
 const rows: DlLabelPickerItem[] = [
     {
         identifier: 'a',
@@ -79,7 +76,7 @@ export default defineComponent({
         const setSelectedEvent = (item: DlLabelPickerItem) => {
             lastSelected.value = item
         }
-        return { items, lastSelected, setSelectedEvent, emptyStateProps }
+        return { items, lastSelected, setSelectedEvent }
     }
 })
 </script>

package/src/demos/DlMenuDemo.vue

@@ -517,7 +517,7 @@ export default defineComponent({
     setup() {
         const showing = ref(false)
         const isMenuOpen = ref(false)
-        const arrowNavigationLabel = ref<string>('Arrow Navigation Label')
+        const arrowNavigationLabel = ref<ItemType>('Arrow Navigation Label')
         const isOpen = ref(false)
 
         const listItems = ref([
@@ -645,7 +645,7 @@ export default defineComponent({
         )
 
         watch(selectedItem, (value: ItemType | string) => {
-            arrowNavigationLabel.value = value as any
+            arrowNavigationLabel.value = value
         })
 
         onMounted(() => {

package/src/demos/DlSelectDemo.vue

@@ -632,15 +632,15 @@
 import { cloneDeep } from 'lodash'
 import { defineComponent } from 'vue-demi'
 import { DlChip, DlSelect, DlIcon, DlBadge, DlButton } from '../components'
-import { DlSelectOption } from '../components/types'
+import { DlSelectOptionType } from '../components/types'
 
-const defaultOptions: DlSelectOption[] = [
+const defaultOptions = [
     { label: 'Contributor 1', value: 'c1' },
     { label: 'Contributor 2', value: 'c2' },
     { label: 'Contributor 3', value: 'c3' }
 ]
 
-const treeOptions: DlSelectOption[] = [
+const treeOptions = [
     {
         label: 'root',
         value: 'root',
@@ -729,7 +729,7 @@ const treeOptions: DlSelectOption[] = [
     }
 ]
 
-const treeOptionsWithReadonly: DlSelectOption[] = [
+const treeOptionsWithReadonly = [
     {
         label: 'Without children',
         value: 'r0',
@@ -790,7 +790,7 @@ const treeOptionsWithReadonly: DlSelectOption[] = [
     }
 ]
 
-const treeOptionsExpanded: DlSelectOption[] = [
+const treeOptionsExpanded: DlSelectOptionType[] = [
     {
         label: 'Readonly option with children & readonly child',
         value: 'r6',
@@ -899,7 +899,7 @@ export default defineComponent({
             // @ts-ignore
             return defaultOptions.includes(this.selectedBySearch as any)
         },
-        alotOfOptions(): DlSelectOption[] {
+        alotOfOptions(): DlSelectOptionType[] {
             const arr = [] as any[]
 
             for (let i = 0; i < 1000; ++i) {
@@ -914,7 +914,7 @@ export default defineComponent({
 
             return arr
         },
-        someOptions(): DlSelectOption[] {
+        someOptions(): DlSelectOptionType[] {
             const arr = [] as any[]
 
             for (let i = 0; i < 10; ++i) {
@@ -929,7 +929,7 @@ export default defineComponent({
 
             return arr
         },
-        alotOfOptionsExpanded(): DlSelectOption[] {
+        alotOfOptionsExpanded(): DlSelectOptionType[] {
             const arr = cloneDeep(this.alotOfOptions)
             arr.push(treeOptionsExpanded[0])
             return arr
@@ -941,8 +941,8 @@ export default defineComponent({
         },
         filterFn(val: string) {
             this.searchOptions = defaultOptions.filter(
-                (v: DlSelectOption) =>
-                    v.value.toLowerCase().indexOf(val.toLowerCase()) > -1
+                (v: { label: string; value: string } | undefined) =>
+                    v.label.toLowerCase().indexOf(val.toLowerCase()) > -1
             )
             this.showAllOption =
                 this.searchOptions.length === defaultOptions.length

package/src/demos/DlSliderDemo.vue

@@ -5,7 +5,7 @@
             width="500px"
             text="slider"
             :step="1"
-            :min="-100"
+            :min="50"
             :max="100"
             :slim="slim"
             :readonly="readonly"

package/src/demos/DlStepperDemo/steps/GeneralStep.vue

@@ -16,7 +16,10 @@
                 label="Error"
                 @click="$emit('error-click')"
             />
-            <dl-button label="Reset" @click="$emit('reset-click')" />
+            <dl-button
+                label="Reset"
+                @click="$emit('reset-click')"
+            />
         </div>
         <div class="inputs-container">
             <dl-input
@@ -81,13 +84,7 @@ export default defineComponent({
         DlInput,
         DlSelect
     },
-    emits: [
-        'reset-click',
-        'error-click',
-        'complete-click',
-        'warning-click',
-        'set-subtitle'
-    ],
+    emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],
     data() {
         return {
             owner: 'Rotem Shaham',

package/src/demos/DlStudioLayoutDemo/components/StudioLeftDrawer.vue

@@ -36,7 +36,7 @@
                 size="12px"
                 style="text-align: center"
             >
-                For more ontology settings <br />
+                For more ontology settings <br>
                 <a href="https://google.com/">go to receipe</a>
             </dl-typography>
         </div>
@@ -53,7 +53,7 @@
                 @selectedOption="handleOption"
             />
         </div>
-        <hr />
+        <hr>
         <div>
             <div>
                 <dl-button
@@ -82,7 +82,7 @@
                 </dl-button>
             </div>
         </div>
-        <hr />
+        <hr>
         <div
             style="
                 display: flex;
@@ -226,19 +226,13 @@ export default defineComponent({
             selectedIconMenu.value = iconMenu
         }
 
-        const autoNextItem = ref(false)
-
         return {
             listAutocomleteItems,
             handleOption,
             selectedItem,
             iconsMenu,
             selectedIconMenu,
-            handleSelectedIconMenu,
-            logValue: (value: any) => {
-                console.log('log value: ', value)
-            },
-            autoNextItem
+            handleSelectedIconMenu
         }
     }
 })

package/src/demos/DlStudioLayoutDemo/components/StudioTabsMenu.vue

@@ -1,12 +1,19 @@
 <template>
-    <div class="tabs-menu" :style="cssVars">
+    <div
+        class="tabs-menu"
+        :style="cssVars"
+    >
         <dl-tabs
             v-model="selectedTab"
             :items="tabItems"
             @update:model-value="handleSelectedOption"
         />
         <div class="tabs-menu__border-icon">
-            <dl-button flat :icon="expandIcon" @click="onToggle" />
+            <dl-button
+                flat
+                :icon="expandIcon"
+                @click="onToggle"
+            />
         </div>
         <component :is="tabs" />
     </div>
@@ -36,6 +43,7 @@ export default defineComponent({
         DlButton,
         DlIcon
     },
+    props: {},
     setup() {
         const LARGE_WIDTH = '250px'
         const SMALL_WIDTH = '0px'

package/src/demos/DlTextInputDemo.vue

@@ -12,11 +12,11 @@
             top-message="Pariatur consequat non sit aliqua labore ad reprehenderit deserunt ullamco incididunt non irure laborum deserunt."
             info-message="Ipsum amet quis velit amet. Anim consectetur nostrud sunt eu non non consequat sint eu amet."
             :auto-suggest-items="[
-                { suggestion: 'foo' },
-                { suggestion: 'bar' },
-                { suggestion: 'foobar' },
-                { suggestion: 'barfoo' },
-                { suggestion: 'foo bar foobarv' }
+                'foo',
+                'bar',
+                'foobar',
+                'barfoo',
+                'foo bar foobarv'
             ]"
             show-counter
             :max-length="20"

package/src/demos/DlThDemo.vue

@@ -1,10 +1,12 @@
 <template>
     <div>
         <DlTh> Table Th component </DlTh>
-        <DlTh :auto-width="true"> Table Th component auto width </DlTh>
+        <DlTh :auto-width="true">
+            Table Th component auto width
+        </DlTh>
         <DlTh
             :props="{
-                sort: sort,
+                sort: (el) => log(el),
                 col: { sortable: true, align: 'left' }
             }"
         >
@@ -24,9 +26,6 @@ export default defineComponent({
     methods: {
         log(e: Event) {
             console.log(e)
-        },
-        sort(el: any) {
-            console.log(el)
         }
     }
 })

package/src/demos/DlTooltipDemo.vue

@@ -145,7 +145,7 @@ export default defineComponent({
                     title: 'Developers',
                     icon: 'icon-dl-code'
                 }
-            ] as any
+            ]
         }
     },
     template: 'dl-tooltip-demo'

package/src/demos/DlTreeTableDemo.vue

@@ -57,7 +57,10 @@
                 </div>
 
                 <div class="right-panel">
-                    <button class="btn" @click="addRowPerPage">
+                    <button
+                        class="btn"
+                        @click="addRowPerPage"
+                    >
                         Add Rows/Page
                     </button>
 
@@ -203,9 +206,7 @@
                     :rows="tableRows"
                     :columns="tableColumns"
                     title="Editable Columns"
-                    :visible-columns="
-                        tableColumns.slice(0, -1).map((c) => c.name)
-                    "
+                    :visible-columns="tableColumns.slice(0, -1)"
                 />
             </div>
             <div>
@@ -267,7 +268,7 @@ import {
 import { defineComponent, ref, computed, nextTick, watch } from 'vue-demi'
 import { times, cloneDeep } from 'lodash'
 import { v4 } from 'uuid'
-import { DlTableColumn, DlTableRow } from '../types'
+import { DlTableRow } from '../types'
 
 const columns = [
     {
@@ -576,7 +577,7 @@ export default defineComponent({
         const tableRows = ref(rows)
         const tableRowsVS = ref(cloneDeep(rows))
         const draggable = ref('both')
-        const tableColumns = ref<DlTableColumn[]>(columns as any)
+        const tableColumns = ref(columns)
         const rowsPerPageOptions = ref([10, 12, 14, 16])
 
         const infiniteLoading = ref(false)

package/src/demos/DlTypographyDemo.vue

@@ -1,9 +1,12 @@
 <template>
     <div>
-        <div v-for="(item, index) in typographyTypes" :key="index">
+        <div
+            v-for="(item, index) in typographyTypes"
+            :key="index"
+        >
             <DlTypography
                 :color="item.color"
-                :size="getItemSize(item)"
+                :size="item.size || item.variant"
                 :variant="item.variant"
             >
                 Typography {{ item ? item.variant : item }}
@@ -20,8 +23,8 @@
                 Typography Bold
             </dl-typography>
         </DlButton>
-        <br />
-        <br />
+        <br>
+        <br>
         <DlButton>
             <dl-typography
                 color="dl-color-tooltip-text"
@@ -38,7 +41,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlButton, DlTypography } from '../components'
-import { DlTypographyVariant } from '../types'
 
 export default defineComponent({
     name: 'DlTypographyDemo',
@@ -46,7 +48,7 @@ export default defineComponent({
         DlTypography,
         DlButton
     },
-    data(): { typographyTypes: Record<string, any>[] } {
+    data() {
         return {
             typographyTypes: [
                 {
@@ -85,11 +87,6 @@ export default defineComponent({
                 }
             ]
         }
-    },
-    methods: {
-        getItemSize(item: Record<string, string>): string {
-            return item.size || item.variant
-        }
     }
 })
 </script>

package/src/demos/DlVirtualScrollDemo.vue

@@ -10,7 +10,10 @@
             >
                 <dl-tr :key="index">
                     <dl-td>#{{ index }}</dl-td>
-                    <dl-td v-for="col in columns" :key="index + '-' + col">
+                    <dl-td
+                        v-for="col in columns"
+                        :key="index + '-' + col"
+                    >
                         {{ row[col] }}
                     </dl-td>
                 </dl-tr>
@@ -24,7 +27,10 @@
                 :items="horizontalList"
                 virtual-scroll-horizontal
             >
-                <div :key="index" :class="item.class">
+                <div
+                    :key="index"
+                    :class="item.class"
+                >
                     #{{ index }} - {{ item.label }}
                 </div>
             </dl-virtual-scroll>
@@ -38,7 +44,10 @@
                 separator
                 @virtual-scroll="log"
             >
-                <dl-list-item :key="index" dense>
+                <dl-list-item
+                    :key="index"
+                    dense
+                >
                     <dl-item-section>
                         #{{ index }} - {{ item.label }}
                     </dl-item-section>
@@ -262,10 +271,7 @@ export default defineComponent({
             horizontalList,
             customList,
             columns,
-            cardData,
-            log: () => {
-                console.log('hi')
-            }
+            cardData
         }
     }
 })

package/tsconfig.json

@@ -38,6 +38,6 @@
         "experimentalDisableTemplateSupport": true
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-    "exclude": ["node_modules", "**/*.stories.ts", "**/*.temp.vue", "**/*.temp.ts"],
+    "exclude": ["node_modules", "**/*.stories.ts"],
     "references": [{ "path": "./tsconfig.node.json" }]
 }

package/vite.config.ts

@@ -11,6 +11,9 @@ export default defineConfig({
         deps: {
             inline: ['vitest-canvas-mock']
         },
+        coverage: {
+            reporter: ['lcovonly', 'text']
+        },
         exclude: [
             'node_modules/**/*.spec.js',
             'node_modules/**/*.spec.ts',

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

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

package/tsconfig.vue.json

@@ -1,4 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "exclude": ["node_modules", "dist", "src/demos", "src/stories"]
-}