@dataloop-ai/components 0.15.7 → 0.16.0

package/src/components/{DlCounters.vue → compound/DlCounters/DlCounters.vue}

@@ -11,25 +11,17 @@
                 class="item"
             >
                 <div :class="computeClass('item-content')">
-                    <p :class="computeClass('item-value')">
-                        {{
-                            abbreviateNumbers
-                                ? abbreviateNumber(item.value)
-                                : item.value
-                        }}
-                    </p>
-                    <p
-                        v-show="item.text"
-                        class="item-text"
-                    >
-                        {{ capitalize(item.text) }}
-                    </p>
-                    <p
-                        v-show="item.subtext"
-                        class="item-subtext"
-                    >
-                        {{ item.subtext && capitalize(item.subtext) }}
-                    </p>
+                    <dl-kpi
+                        :counter="item.value"
+                        counter-font-size="30px"
+                        :title="capitalize(item.text)"
+                        title-font-size="16px"
+                        :subtitle="item.subtext && capitalize(item.subtext)"
+                        subtitle-font-size="12px"
+                        :info-message="null"
+                        :progress="null"
+                        :is-small="small"
+                    />
                 </div>
                 <div class="divider" />
             </li>
@@ -40,7 +32,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
-import { abbreviateToString } from '../utils/abbreviate-to-string'
+import { DlKpi } from '../../basic'
 
 interface CounterItem {
     value?: number
@@ -50,6 +42,9 @@ interface CounterItem {
 
 export default defineComponent({
     name: 'DlCounters',
+    components: {
+        DlKpi
+    },
     props: {
         small: {
             type: Boolean,
@@ -87,12 +82,6 @@ export default defineComponent({
         capitalize(value: string): string {
             return value[0].toUpperCase() + value.slice(1)
         },
-        abbreviateNumber(nr: number) {
-            if (typeof nr === 'number') {
-                return abbreviateToString(nr)
-            }
-            return nr
-        },
         computeClass(value: string): (string | boolean)[] {
             return [value, this.small && `${value}--small`]
         }

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

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

package/src/components/{DlDatePicker → compound/DlDateTime/DlDatePicker}/DlDatePicker.vue

@@ -72,10 +72,9 @@
     </div>
 </template>
 <script lang="ts">
-import DlCalendar from './DlCalendar.vue'
-import DlMonthCalendar from './DlMonthCalendar.vue'
-import { Calendar } from './classes/Calendar'
-import { CalendarDate } from './classes/CalendarDate'
+import DlCalendar from './components/DlCalendar.vue'
+import DlMonthCalendar from './components/DlMonthCalendar.vue'
+import { CalendarDate, Calendar } from './models'
 import { defineComponent, PropType } from 'vue-demi'
 import { DateInterval } from './types'
 import { v4 } from 'uuid'

package/src/components/{DlDatePicker → compound/DlDateTime/DlDatePicker/components}/DlCalendar.vue

@@ -58,13 +58,11 @@
     </div>
 </template>
 <script lang="ts">
-import DlIcon from '../DlIcon.vue'
-import { CalendarDate } from './classes/CalendarDate'
+import { DlIcon } from '../../../../essential'
+import { CalendarDate, CustomDate } from '../models'
 import { defineComponent, PropType } from 'vue-demi'
-import { getWeekDayNames } from './utils'
-import { DateInterval } from './types'
-import { CustomDate } from './classes/CustomDate'
-import { isInRange } from './isInRange'
+import { getWeekDayNames, isInRange } from '../utils'
+import { DateInterval } from '../types'
 
 const DAYS_IN_WEEK = 7
 
@@ -122,8 +120,8 @@ export default defineComponent({
         }
     },
     methods: {
-        handleClick(value: CustomDate) {
-            if (!isInRange(this.availableRange, value)) return
+        handleClick(value: Partial<CustomDate>) {
+            if (!isInRange(this.availableRange, value as CustomDate)) return
             const newDate = {
                 from: value.toDate(),
                 to: value.toDate()
@@ -251,14 +249,14 @@ export default defineComponent({
             return style
         },
 
-        handleMouseDown(value: CustomDate) {
-            if (!isInRange(this.availableRange, value)) return
+        handleMouseDown(value: Partial<CustomDate>) {
+            if (!isInRange(this.availableRange, value as CustomDate)) return
             this.$emit('mousedown', value.toDate())
         },
 
-        handleMouseEnter(value: CustomDate) {
+        handleMouseEnter(value: Partial<CustomDate>) {
             if (this.modelValue === null) return
-            if (!isInRange(this.availableRange, value)) return
+            if (!isInRange(this.availableRange, value as CustomDate)) return
 
             if (value.isBefore(new CustomDate(this.modelValue.from))) return
 

package/src/components/{DlDatePicker → compound/DlDateTime/DlDatePicker/components}/DlMonthCalendar.vue

@@ -43,11 +43,10 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import DlIcon from '../DlIcon.vue'
-import { CalendarDate } from './classes/CalendarDate'
-import { DateInterval } from './types'
-import { Month, getMonths } from './utils'
-import { isInRange } from './isInRange'
+import { DlIcon } from '../../../../essential'
+import { CalendarDate } from '../models'
+import { DateInterval } from '../types'
+import { Month, getMonths, isInRange } from '../utils'
 
 export default defineComponent({
     components: {

package/src/components/compound/DlDateTime/DlDatePicker/models/index.ts

@@ -0,0 +1,3 @@
+export * from './Calendar'
+export * from './CalendarDate'
+export * from './CustomDate'

package/src/components/{DlDatePicker/isInRange.ts → compound/DlDateTime/DlDatePicker/utils.ts}

@@ -1,6 +1,45 @@
-import { CustomDate } from './classes/CustomDate'
+import { CalendarDate } from './models/CalendarDate'
+import { CustomDate } from './models/CustomDate'
 import { DateInterval } from './types'
 
+export const getWeekDayNames = (): string[] => {
+    const start = new CalendarDate().day(0)
+    const end = new CalendarDate().day(6)
+
+    const weekDayNames = []
+
+    while (start.isSameOrBefore(end)) {
+        weekDayNames.push(start.format('dddd').substring(0, 2))
+
+        start.add(1, 'day')
+    }
+
+    return weekDayNames
+}
+
+export type Month = {
+    name: string
+    value: number
+}
+
+export const getMonths = (): Month[] => {
+    const start = new CalendarDate().month(0)
+    const end = new CalendarDate().month(11)
+
+    const months = []
+
+    while (start.isSameOrBefore(end)) {
+        months.push({
+            name: start.format('MMM'),
+            value: start.month()
+        })
+
+        start.add(1, 'month')
+    }
+
+    return months
+}
+
 export function isInRange(
     range: Partial<DateInterval> | null,
     value: CustomDate | DateInterval | null

package/src/components/{DlDateTimeRange → compound/DlDateTime/DlDateTimeRange}/DlDateInput.vue

@@ -27,7 +27,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import DlIcon from '../DlIcon.vue'
+import { DlIcon } from '../../../essential'
 
 export default defineComponent({
     components: {

package/src/components/{DlDateTimeRange → compound/DlDateTime/DlDateTimeRange}/DlDateTimeRange.vue

@@ -59,7 +59,7 @@
 </template>
 <script lang="ts">
 import { DlTimePicker } from '../DlTimePicker'
-import { DateInterval } from '../DlDatePicker/types'
+import { DateInterval } from '../types'
 import DlCardSidebar from './DlCardSidebar.vue'
 import {
     DayTypeOption,
@@ -67,13 +67,13 @@ import {
     MonthTypeOption,
     MONTH_SIDEBAR_OPTION
 } from './types'
-import { CustomDate } from '../DlDatePicker/classes/CustomDate'
-import { DlDatePicker } from '../DlDatePicker'
-import { CalendarDate } from '../DlDatePicker/classes/CalendarDate'
+import { CustomDate } from '../DlDatePicker/models/CustomDate'
+import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
+import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
 import DlDateInput from './DlDateInput.vue'
-import { DlMenu } from '../DlMenu'
+import { DlMenu } from '../../../essential'
 import { defineComponent, PropType } from 'vue-demi'
-import { isInRange } from '../DlDatePicker/isInRange'
+import { isInRange } from '../DlDatePicker/utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlTimePicker → compound/DlDateTime/DlTimePicker}/DlTimePicker.vue

@@ -32,8 +32,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import DlTimePickerInput from './DlTimePickerInput.vue'
-import { CustomDate } from '../DlDatePicker/classes/CustomDate'
+import DlTimePickerInput from './components/DlTimePickerInput.vue'
+import { CustomDate } from '../DlDatePicker/models/CustomDate'
 import { Time } from './types'
 import { DateInterval } from '../DlDatePicker/types'
 import { v4 } from 'uuid'

package/src/components/{DlTimePicker → compound/DlDateTime/DlTimePicker/components}/DlTimePickerInput.vue

@@ -69,10 +69,9 @@
     </div>
 </template>
 <script lang="ts">
-import { Time } from './types'
-import DlIcon from '../DlIcon.vue'
+import { Time } from '../types'
 import DlTimeCounter from './DlTimeCounter.vue'
-import { DlMenu } from '../DlMenu'
+import { DlMenu, DlIcon } from '../../../../essential'
 import { defineComponent, PropType } from 'vue-demi'
 
 const MAX_HOUR = 23

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

@@ -0,0 +1,3 @@
+export * from './DlDatePicker'
+export * from './DlDateTimeRange'
+export * from './DlTimePicker'

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

@@ -0,0 +1,3 @@
+export * from './DlDatePicker/types'
+export * from './DlDateTimeRange/types'
+export * from './DlTimePicker/types'

package/src/components/{DlDialogBox → compound/DlDialogBox/components}/DlDialogBoxHeader.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue-demi'
-import { DlButton } from '../DlButton'
+import { DlButton } from '../../../basic'
 
 export default defineComponent({
     name: 'DlDialogBoxHeader',

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

@@ -0,0 +1,5 @@
+import DlDialogBox from './DlDialogBox.vue'
+import DlDialogBoxHeader from './components/DlDialogBoxHeader.vue'
+import DlDialogBoxFooter from './components/DlDialogBoxFooter.vue'
+
+export { DlDialogBox, DlDialogBoxHeader, DlDialogBoxFooter }

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

@@ -0,0 +1 @@
+export {}

package/src/components/{DlDropdownButton.vue → compound/DlDropdownButton/DlDropdownButton.vue}

@@ -1,5 +1,5 @@
 <template>
-    <dl-button-group
+    <button-group
         v-if="split"
         :id="uuid"
         :class="identifierClass"
@@ -95,7 +95,7 @@
         >
             <slot />
         </dl-menu>
-    </dl-button-group>
+    </button-group>
     <dl-button
         v-else
         class="dl-btn-dropdown dl-btn-dropdown--simple"
@@ -164,18 +164,18 @@
 </template>
 
 <script lang="ts">
-import DlIcon from './DlIcon.vue'
-import { DlButton } from './DlButton'
-import DlButtonGroup from './DlButtonGroup.vue'
-import { DlMenu } from './DlMenu'
-import { stop } from '../utils/events'
+import { DlButton } from '../../basic'
+import ButtonGroup from './components/ButtonGroup.vue'
+import { DlMenu, DlIcon } from '../../essential'
+import { stop } from '../../../utils/events'
 import {
     defineComponent,
     ref,
     computed,
     watch,
     onMounted,
-    getCurrentInstance
+    getCurrentInstance,
+    Ref
 } from 'vue-demi'
 import { v4 } from 'uuid'
 
@@ -185,7 +185,7 @@ export default defineComponent({
         DlMenu,
         DlIcon,
         DlButton,
-        DlButtonGroup
+        ButtonGroup
     },
     model: {
         prop: 'modelValue',
@@ -246,7 +246,7 @@ export default defineComponent({
         const vm = getCurrentInstance()
         const proxy = vm!.proxy!
 
-        const showing = ref<boolean>(!!props.modelValue)
+        const showing = ref<boolean>(!!props.modelValue) as Ref<boolean>
         const menuRef = ref(null)
 
         const attributes = computed(() => {

package/src/components/{DlButtonGroup.vue → compound/DlDropdownButton/components/ButtonGroup.vue}

@@ -14,7 +14,7 @@ import { defineComponent } from 'vue-demi'
 const classes = ['outlined', 'flat', 'stretch']
 
 export default defineComponent({
-    name: 'DlButtonGroup',
+    name: 'ButtonGroup',
     props: {
         outlined: Boolean,
         flat: Boolean,
@@ -23,13 +23,14 @@ export default defineComponent({
     },
     data() {
         return {
-            uuid: `dl-button-group-${v4()}`
+            uuid: `button-group-${v4()}`
         }
     },
     computed: {
         classes(): string {
             const cls = classes
-                // @ts-ignore wtf is this ?
+                // todo: wtf is this ?
+                // @ts-ignore
                 .filter((t) => this[t] === true)
                 .map((t) => `dl-btn-group--${t}`)
                 .join(' ')

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

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

package/src/components/{DlTextInput.vue → compound/DlInput/DlInput.vue}

@@ -195,18 +195,15 @@
 <script lang="ts">
 import { debounce } from 'lodash'
 import { defineComponent, PropType } from 'vue-demi'
-import { DlButton } from './DlButton'
-import DlIcon from './DlIcon.vue'
-import DlInfoErrorMessage from './DlInfoErrorMessage.vue'
-import DlList from './DlList.vue'
-import { DlListItem } from './DlListItem'
-import { DlMenu } from './DlMenu'
-import DlTooltip from './DlTooltip.vue'
-import { InputSizes, TInputSizes } from '../utils/input-sizes'
+import { DlInfoErrorMessage } from '../../shared'
+import { DlListItem } from '../../basic'
+import { DlMenu, DlIcon, DlList, DlTooltip } from '../../essential'
+import { DlButton } from '../../basic'
+import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { v4 } from 'uuid'
 
 export default defineComponent({
-    name: 'DlTextInput',
+    name: 'DlInput',
     components: {
         DlButton,
         DlIcon,
@@ -505,11 +502,12 @@ export default defineComponent({
         },
         getSuggestWords(
             item: string,
-            keyword: string
+            keyword: string | number
         ): { value: string; highlighted: boolean }[] {
             const words: { value: string; highlighted: boolean }[] = []
+            const key = `${keyword}`
 
-            if (!keyword.length || !this.highlightMatches) {
+            if (!key.length || !this.highlightMatches) {
                 return [
                     {
                         value: item,
@@ -518,7 +516,7 @@ export default defineComponent({
                 ]
             }
 
-            const regex = new RegExp(keyword, 'g')
+            const regex = new RegExp(key, 'g')
 
             const matches = [...item.matchAll(regex)]
 
@@ -541,12 +539,12 @@ export default defineComponent({
             matches.forEach(
                 (match: RegExpMatchArray, iterationIndex: number) => {
                     const matchIndex = match.index ?? 0
-                    const wordEndIndex = matchIndex + keyword.length
+                    const wordEndIndex = matchIndex + key.length
 
                     words.push({
                         value: item
                             .split('')
-                            .slice(matchIndex, keyword.length + matchIndex)
+                            .slice(matchIndex, key.length + matchIndex)
                             .join(''),
                         highlighted: true
                     })

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

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

package/src/components/{DlItem → compound/DlItem}/DlItem.vue

@@ -11,8 +11,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlListItem } from '../DlListItem'
-import DlItemSection from '../DlItemSection.vue'
+import { DlListItem } from '../../basic'
+import { DlItemSection } from '../../shared'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlSmartSearch → compound/DlJsonEditor}/DlJsonEditor.vue

@@ -79,11 +79,10 @@ import { defineComponent, PropType } from 'vue-demi'
 import { JSONEditor, JSONValue, Mode } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 import { Query } from './types'
-import DlDialogBox from '../DlDialogBox/DlDialogBox.vue'
-import DlDialogBoxHeader from '../DlDialogBox/DlDialogBoxHeader.vue'
-import DlSelect from '../DlSelect/DlSelect.vue'
-import DlButton from '../DlButton/DlButton.vue'
-import DlTypography from '../DlTypography.vue'
+import { DlSelect } from '../DlSelect'
+import { DlButton } from '../../basic'
+import { DlDialogBox, DlDialogBoxHeader } from '../DlDialogBox'
+import { DlTypography } from '../../essential'
 
 interface JSONContent {
     json: JSONValue
@@ -113,7 +112,7 @@ export default defineComponent({
             default: () => [] as Query[]
         }
     },
-    emits: ['update:modelValue', 'save', 'remove'],
+    emits: ['update:modelValue', 'save', 'remove', 'search'],
     data() {
         return {
             preventOnChange: false,

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

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

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

@@ -0,0 +1,4 @@
+export interface Query {
+    name: string
+    query: string | null
+}

package/src/components/{DlOptionGroup → compound/DlOptionGroup}/DlOptionGroup.vue

@@ -54,14 +54,13 @@
 import { defineComponent, PropType } from 'vue-demi'
 import { components, typeValidator, optionsValidator, wrappers } from './utils'
 import {
-    OptionGroupOptions,
-    OptionProps,
-    SelectedValue
-} from './OptionGroup.types'
-import { loggerFactory } from '../../utils'
+    DlOptionGroupOptions,
+    DlOptionProps,
+    DlSelectedValueType
+} from './types'
+import { loggerFactory } from '../../../utils'
 import { v4 } from 'uuid'
-import DlIcon from '../DlIcon.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { DlIcon, DlTooltip } from '../../essential'
 
 export default defineComponent({
     name: 'DlOptionGroup',
@@ -80,7 +79,7 @@ export default defineComponent({
         leftLabel: { type: Boolean, default: false },
         maxWidth: { type: String, default: '100%' },
         options: {
-            type: Array as PropType<OptionGroupOptions>,
+            type: Array as PropType<DlOptionGroupOptions>,
             required: true,
             validator: optionsValidator
         },
@@ -97,7 +96,7 @@ export default defineComponent({
         }
     },
     computed: {
-        individualProps(): (OptionProps & { id: string })[] {
+        individualProps(): (DlOptionProps & { id: string })[] {
             return this.options.map((option) => {
                 const { value, label, ...rest } = option
                 return {
@@ -152,7 +151,7 @@ export default defineComponent({
                 )
             }
         },
-        handleUpdate(newValue: SelectedValue, e: Event) {
+        handleUpdate(newValue: DlSelectedValueType, e: Event) {
             this.$emit('update:model-value', newValue, e)
         }
     },

package/src/components/{DlOptionGroup → compound/DlOptionGroup/components}/MenuItemWrapper.vue

@@ -15,11 +15,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlListItem } from '../DlListItem'
-import DlItemSection from '../DlItemSection.vue'
+import { DlListItem } from '../../../basic'
+import { DlItemSection } from '../../../shared'
 
 export default defineComponent({
-    name: 'DlMenuItemWrapper',
+    name: 'MenuItemWrapper',
     components: { DlListItem, DlItemSection },
     props: {
         leftLabel: Boolean

package/src/components/{DlOptionGroup → compound/DlOptionGroup/components}/SimpleWrapper.vue

@@ -11,7 +11,7 @@
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
-    name: 'DlSimpleWrapper',
+    name: 'SimpleWrapper',
     emits: ['click'],
     methods: {
         emitClick(e: Event) {

package/src/components/{DlOptionGroup → compound/DlOptionGroup}/index.ts

@@ -1,4 +1,4 @@
 import DlOptionGroup from './DlOptionGroup.vue'
 export { DlOptionGroup }
 export * from './utils'
-export * from './OptionGroup.types'
+export * from './types'

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

@@ -0,0 +1,40 @@
+export type DlSelectedValueType = number | string | boolean | null
+
+interface DlGenericOption {
+    label: string
+    value: DlSelectedValueType
+    disabled?: boolean
+    color?: string
+    tooltip?: string
+}
+
+export interface DlRadioOption extends DlGenericOption {
+    tabindex?: number | string
+}
+
+export interface DlCheckboxOption extends DlGenericOption {
+    tabindex?: number | string
+    'toggle-indeterminate'?: boolean
+    'true-value'?: any
+    'false-value'?: any
+}
+
+export interface DlToggleOption extends DlGenericOption {
+    icon?: string
+}
+
+export type DlOptionGroupOptions = (
+    | DlRadioOption
+    | DlCheckboxOption
+    | DlToggleOption
+)[]
+
+export interface DlOptionProps
+    extends Partial<DlRadioOption>,
+        Partial<DlCheckboxOption>,
+        Partial<DlToggleOption> {
+    value?: DlSelectedValueType
+    class?: string
+    rightLabel?: string
+    leftLabel?: string
+}