@dataloop-ai/components 0.15.6 → 0.16.0

package/src/demo/index.ts

@@ -33,7 +33,7 @@ import DlChipDemo from './DlChipDemo.vue'
 import DlListDemo from './DlListDemo.vue'
 import DlCounterDemo from './DlCounterDemo.vue'
 import DlTextareaDemo from './DlTextAreaDemo.vue'
-import DlTextInputDemo from './DlTextInputDemo.vue'
+import DlInputDemo from './DlInputDemo.vue'
 import DlSearchDemo from './DlSearchDemo.vue'
 import DlBadgeDemo from './DlBadgeDemo.vue'
 import DlTrendDemo from './DlTrendDemo.vue'
@@ -43,10 +43,11 @@ import DlTextHolderDemo from './DlTextHolderDemo.vue'
 import DlColumnChartDemo from './ColumnChartDemo.vue'
 import DlBarChartDemo from './BarChartDemo.vue'
 import DlSwitchDemo from './DlSwitchDemo.vue'
-import DlToastMessageDemo from './DlToastMessageDemo.vue'
+import DlToastDemo from './DlToastDemo.vue'
 import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
+import DlKpiDemo from './DlKpiDemo.vue'
 
 export {
     AvatarDemo,
@@ -84,14 +85,14 @@ export {
     DlListDemo,
     DlCounterDemo,
     DlTextareaDemo,
-    DlTextInputDemo,
+    DlInputDemo,
     DlSearchDemo,
     DlBadgeDemo,
     DlTrendDemo,
     DlWidgetDemo,
     DlRadioDemo,
     DlTextHolderDemo,
-    DlToastMessageDemo,
+    DlToastDemo as DlToastMessageDemo,
     DlColumnChartDemo,
     DlSwitchDemo,
     DlChartDoughnutDemo,
@@ -126,6 +127,7 @@ export const demoState = {
     popup: PopupDemo,
     progress_bar: DlProgressBarDemo,
     progress_chart: DlProgressChartDemo,
+    kpi: DlKpiDemo,
     range: DlRangeDemo,
     search: DlSearchDemo,
     select: DlSelectDemo,
@@ -137,7 +139,7 @@ export const demoState = {
     table_th: DlThDemo,
     table_tr: DlTrDemo,
     tabs: TabsDemo,
-    text_input: DlTextInputDemo,
+    input: DlInputDemo,
     textarea: DlTextareaDemo,
     text_holder: DlTextHolderDemo,
     time_picker: DlDateTimeRangeDemo,
@@ -148,6 +150,6 @@ export const demoState = {
     radio: DlRadioDemo,
     switch: DlSwitchDemo,
     smart_search: DlSmartSearchDemo,
-    toast_message: DlToastMessageDemo,
+    toast: DlToastDemo,
     spinner: DlSpinner
 }

package/src/models.ts

@@ -1,4 +1,2 @@
 export * from './types'
-
-export * from './components/DlStepper/Stepper'
-export * from './components/DlStepper/Step'
+export * from './components/models'

package/src/types.ts

@@ -1,6 +1 @@
-export * from './components/DlOptionGroup/OptionGroup.types'
-export * from './components/DlStepper/interfaces'
-export * from './components/DlTable/types'
-export * from './components/DlTabs/types'
-export * from './components/DlTimePicker/types'
-export * from './components/DlWidget/types'
+export * from './components/types'

package/src/utils/formatNumber.ts

@@ -0,0 +1,15 @@
+export function numberWithComma(nr: number) {
+    if (!nr) return 0
+    return new Intl.NumberFormat('en-US', {
+        style: 'decimal'
+    }).format(nr)
+}
+
+export function abbreviateNumber(nr: number) {
+    if (!nr) return 0
+    return new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 1,
+        notation: 'compact',
+        compactDisplay: 'short'
+    }).format(nr)
+}

package/src/utils/index.ts

@@ -11,6 +11,7 @@ export * from './format'
 export * from './render'
 export * from './component-name-parser'
 export * from './colors'
+export * from './teleport'
 
 export const isMobileOrTablet = () => {
     let check = false

package/src/components/DlChart/index.ts

@@ -1,36 +0,0 @@
-import { Chart } from './chart'
-import {
-    createTypedChart,
-    Bar,
-    Doughnut,
-    Line,
-    Pie,
-    PolarArea,
-    Radar,
-    Bubble,
-    Scatter
-} from './typedCharts'
-import DlColumnChart from './DlColumnChart.vue'
-import DlLineChart from './DlLineChart.vue'
-
-export type { ChartProps, ChartComponentRef } from './types'
-export {
-    getDatasetAtEvent,
-    getElementAtEvent,
-    getElementsAtEvent
-} from './utils'
-
-export {
-    Chart,
-    createTypedChart,
-    Bar,
-    Doughnut,
-    Line,
-    Pie,
-    PolarArea,
-    Radar,
-    Bubble,
-    Scatter,
-    DlColumnChart,
-    DlLineChart
-}

package/src/components/DlChip/index.ts

@@ -1,4 +0,0 @@
-import DlChip from './DlChip.vue'
-
-export default DlChip
-export * from './utils'

package/src/components/DlColorPicker/index.ts

@@ -1,20 +0,0 @@
-import DlColorPicker from './DlColorPicker.vue'
-import DlColors from './DlColors.vue'
-import DlHue from './DlHue.vue'
-import DlPreview from './DlPreview.vue'
-import DlSaturation from './DlSaturation.vue'
-import DlBox from './DlBox.vue'
-import DlAlpha from './DlAlpha.vue'
-
-export * from './types'
-export * from './utils'
-
-export {
-    DlColorPicker,
-    DlColors,
-    DlHue,
-    DlPreview,
-    DlSaturation,
-    DlBox,
-    DlAlpha
-}

package/src/components/DlDatePicker/utils.ts

@@ -1,39 +0,0 @@
-import { CalendarDate } from './classes/CalendarDate'
-
-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
-}

package/src/components/DlDialogBox/index.ts

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

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

@@ -1,36 +0,0 @@
-export type SelectedValue = number | string | boolean | null
-
-interface GenericOption {
-    label: string
-    value: SelectedValue
-    disabled?: boolean
-    color?: string
-    tooltip?: string
-}
-
-export interface RadioOption extends GenericOption {
-    tabindex?: number | string
-}
-
-export interface CheckboxOption extends GenericOption {
-    tabindex?: number | string
-    'toggle-indeterminate'?: boolean
-    'true-value'?: any
-    'false-value'?: any
-}
-
-export interface ToggleOption extends GenericOption {
-    icon?: string
-}
-
-export type OptionGroupOptions = (RadioOption | CheckboxOption | ToggleOption)[]
-
-export interface OptionProps
-    extends Partial<RadioOption>,
-        Partial<CheckboxOption>,
-        Partial<ToggleOption> {
-    value?: SelectedValue
-    class?: string
-    rightLabel?: string
-    leftLabel?: string
-}

package/src/components/DlOptionGroup/utils.ts

@@ -1,40 +0,0 @@
-import DlRadio from '../DlRadio.vue'
-import DlSwitch from '../DlSwitch.vue'
-import DlCheckbox from '../DlCheckbox.vue'
-
-import { isVue3, shallowRef } from 'vue-demi'
-import { OptionGroupOptions } from './OptionGroup.types'
-import MenuItemWrapper from './MenuItemWrapper.vue'
-import SimpleWrapper from './SimpleWrapper.vue'
-
-export const components = isVue3
-    ? {
-          radio: shallowRef(DlRadio),
-          checkbox: shallowRef(DlCheckbox),
-          switch: shallowRef(DlSwitch)
-          // toggle: shallowRef(DlToggle),
-      }
-    : {
-          radio: () => import('../DlRadio.vue').then((d) => d.default),
-          checkbox: () => import('../DlCheckbox.vue').then((d) => d.default),
-          switch: () => import('../DlSwitch.vue').then((d) => d.default)
-          // toggle: () => import('../DlToggle.vue').then(d => d.default),
-      }
-export const componentsType = Object.keys(components)
-
-export const typeValidator = (type: string) => componentsType.includes(type)
-
-export const optionsValidator = (opts: OptionGroupOptions) => {
-    return opts.every((opt) => 'value' in opt && 'label' in opt)
-}
-
-export const wrappers = isVue3
-    ? {
-          menuItem: shallowRef(MenuItemWrapper),
-          label: shallowRef(SimpleWrapper)
-      }
-    : {
-          menuItem: () =>
-              import('./MenuItemWrapper.vue').then((d) => d.default),
-          label: () => import('./SimpleWrapper.vue').then((d) => d.default)
-      }

package/src/components/DlPanelContainer/index.ts

@@ -1,4 +0,0 @@
-import DlPanel from './DlPanel.vue'
-import DlPanelContainer from './DlPanelContainer.vue'
-
-export { DlPanel, DlPanelContainer }

package/src/components/DlPopup/index.ts

@@ -1 +0,0 @@
-export { default } from './DlPopup.vue'

package/src/components/DlSelect/index.ts

@@ -1,4 +0,0 @@
-import DlSelect from './DlSelect.vue'
-import SelectOption from './SelectOption.vue'
-
-export { DlSelect, SelectOption }

package/src/components/DlSmartSearch/index.ts

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

package/src/components/DlStepper/index.ts

@@ -1,7 +0,0 @@
-import DlStepper from './DlStepper.vue'
-import { Stepper } from './Stepper'
-import { Step } from './Step'
-import { StepState } from './interfaces'
-
-export { DlStepper, Stepper, Step }
-export type { StepState }

package/src/components/DlTable/index.ts

@@ -1,6 +0,0 @@
-import DlTr from './DlTr.vue'
-import DlTh from './DlTh.vue'
-import DlTd from './DlTd.vue'
-import DlTable from './DlTable.vue'
-
-export { DlTr, DlTh, DlTd, DlTable }

package/src/components/DlTable/types.ts

@@ -1,96 +0,0 @@
-export type TableProps = {
-    columns: TableColumn[]
-    rows: TableRow[]
-    visibleColumns: string[]
-    filter: Filter
-    filterMethod: FilterMethod
-    sortMethod: SortMethod
-    selected: string[]
-    expanded: string[]
-    columnSortOrder: 'asc' | 'des'
-    [key: string]: any
-}
-
-export type TableRow = {
-    [key: string]: any
-}
-
-export type Filter = string | Record<string, any>
-
-export type TableColumn = {
-    name: string
-    label: string
-    field: string | ((row: TableRow) => string)
-    required?: boolean
-    align?: 'right' | 'left' | 'center'
-    sortable?: boolean
-    sort?: (a: any, b: any, rowA: TableRow, rowB: TableRow) => number
-    sortOrder?: 'asc' | 'des'
-    format?: (val: any, row: TableRow) => any
-    style?: string | ((row: TableRow) => string)
-    classes?: string | ((row: TableRow) => string)
-    headerStyle?: string
-    headerClasses?: string
-}
-
-export type FilterMethod = (
-    rows: TableRow[],
-    terms: Filter,
-    cols: TableColumn[],
-    getCellValue: (col: TableColumn, row: TableRow) => any
-) => TableRow[]
-
-export type SortMethod = (
-    rows: TableRow[],
-    sortBy: string,
-    descending: boolean
-) => TableRow[]
-
-export type Pagination = {
-    page: number
-    rowsPerPage: number
-    rowsNumber?: number
-    sortBy?: string | null
-    descending?: boolean
-}
-
-export type RequestProp = {
-    pagination: Pagination
-    filter?: FilterMethod
-    getCellValue?: (col: TableColumn, row: TableRow) => any
-}
-
-export type SelectionDetails = {
-    rows: TableRow[]
-    keys: string[]
-    added: boolean
-    evt: Event
-}
-
-export type ScrollPosition = {
-    index: number
-    from: number
-    to: number
-    direction: 'increase' | 'decrease'
-}
-
-export interface EnhancedCol extends TableColumn {
-    iconClass: string
-    thClass: string
-    tdStyle: ((row: TableRow) => string) | (() => any)
-    tdClass: (row: TableRow) => string
-}
-
-export type VirtualScroll = {
-    [key: string]: any
-    reset: () => void
-    scrollTo: (toIndex: number | string, edge?: number | string) => void
-}
-
-export type TypographyProps = {
-    variant?: string
-    size?: string
-    uppercase?: boolean
-    bold?: boolean
-    color?: string
-}

package/src/components/DlWidget/index.ts

@@ -1,4 +0,0 @@
-import DlWidget from './DlWidget.vue'
-import DlGrid from './DlGrid.vue'
-
-export { DlWidget, DlGrid }