@dataloop-ai/components 0.15.6 → 0.16.0

package/src/components/basic/DlKpi/types/KpiItem.ts

@@ -0,0 +1,28 @@
+export enum DlKpiCounterFormat {
+    long = 'long',
+    short = 'short',
+    hms = 'h:m:s',
+    hm = 'h:m',
+    ms = 'm:s',
+    h = 'h',
+    m = 'm',
+    s = 's'
+}
+
+export type DlKpiCounterType = {
+    /* for string it should be have 0h:0m:0s format */
+    value: number | string
+    format: DlKpiCounterFormat
+}
+
+export type DlKpiProgressType = {
+    value?: number
+    text?: string
+}
+
+export type DlKpiItem = {
+    counter: DlKpiCounterType | number
+    title: string
+    infoMessage?: string
+    progress?: DlKpiProgressType
+}

package/src/components/basic/DlKpi/types.ts

@@ -0,0 +1 @@
+export * from './types/KpiItem'

package/src/components/{DlListItem → basic/DlListItem}/DlListItem.vue

@@ -48,8 +48,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlItemSection from '../DlItemSection.vue'
-import DlIcon from '../DlIcon.vue'
+import { DlItemSection } from '../../shared'
+import { DlIcon } from '../../essential'
 import {
     itemHoverColor,
     itemActiveColor,
@@ -57,7 +57,7 @@ import {
     itemBorder,
     itemColor
 } from './utils'
-import { wave, waveTrigger } from '../../utils'
+import { wave, waveTrigger } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlPanelContainer → basic/DlPanelContainer}/DlPanelContainer.vue

@@ -111,8 +111,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import DlIcon from '../DlIcon.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { DlIcon, DlTooltip } from '../../essential'
 
 export default defineComponent({
     name: 'DlPanelContainer',

package/src/components/basic/DlPanelContainer/index.ts

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

package/src/components/{DlPopup → basic/DlPopup}/DlPopup.vue

@@ -20,6 +20,7 @@
                     @move="movePopup"
                 />
                 <popup-header
+                    v-if="hasHeaderSlot"
                     :title="title"
                     :additional-info="additionalInfo"
                     :subtitle="subtitle"
@@ -67,28 +68,30 @@ import {
     isVue2
 } from 'vue-demi'
 
-import useWindowSize from '../../hooks/use-window-size'
-import useAnchor, { useAnchorProps } from '../../hooks/use-anchor'
-import useScrollTarget from '../../hooks/use-scroll-target'
+import useWindowSize from '../../../hooks/use-window-size'
+import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useScrollTarget from '../../../hooks/use-scroll-target'
 import useModelToggle, {
     useModelToggleProps,
     AnchorEvent
-} from '../../hooks/use-model-toggle'
-import usePortal from '../../hooks/use-portal'
-import useTransition, { useTransitionProps } from '../../hooks/use-transition'
-import useTick from '../../hooks/use-tick'
-import useTimeout from '../../hooks/use-timeout'
-
-import { getScrollTarget } from '../../utils/scroll'
-import DlTeleport from '../../utils/teleport'
-import { removeEscapeKey } from '../../utils/escape-key'
-import { addFocusout, removeFocusout } from '../../utils/focusout'
-import { childHasFocus } from '../../utils/dom'
+} from '../../../hooks/use-model-toggle'
+import usePortal from '../../../hooks/use-portal'
+import useTransition, {
+    useTransitionProps
+} from '../../../hooks/use-transition'
+import useTick from '../../../hooks/use-tick'
+import useTimeout from '../../../hooks/use-timeout'
+
+import { getScrollTarget } from '../../../utils/scroll'
+import DlTeleport from '../../../utils/teleport'
+import { removeEscapeKey } from '../../../utils/escape-key'
+import { addFocusout, removeFocusout } from '../../../utils/focusout'
+import { childHasFocus } from '../../../utils/dom'
 import {
     removeClickOutside,
     ClickOutsideEvent
-} from '../../utils/click-outside'
-import { addFocusFn } from '../../utils/focus-manager'
+} from '../../../utils/click-outside'
+import { addFocusFn } from '../../../utils/focus-manager'
 
 import {
     validatePosition,
@@ -96,7 +99,7 @@ import {
     setPosition,
     parsePosition,
     setForcedPosition
-} from '../../utils/position-engine'
+} from '../../../utils/position-engine'
 import {
     getAnchorOrigin,
     handleWatcherEvents,
@@ -105,9 +108,9 @@ import {
     refocusTargetFn,
     conditionalHandler,
     handleClickOutside
-} from '../DlMenu/utils'
-import DraggableUpper from './DraggableUpper.vue'
-import PopupHeader from './PopupHeader.vue'
+} from '../../essential/DlMenu/utils'
+import DraggableUpper from './components/DraggableUpper.vue'
+import PopupHeader from './components/PopupHeader.vue'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlPopup → basic/DlPopup/components}/PopupHeader.vue

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

package/src/components/basic/DlPopup/index.ts

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

package/src/components/{DlProgressChart.vue → basic/DlProgressChart/DlProgressChart.vue}

@@ -76,10 +76,9 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, isVue2 } from 'vue-demi'
-import { getColor } from '../utils'
-import { isEllipsisActive } from '../utils/is-ellipsis-active'
-import DlLink from './DlLink/DlLink.vue'
-import DlTooltip from './DlTooltip.vue'
+import { getColor } from '../../../utils'
+import { isEllipsisActive } from '../../../utils/is-ellipsis-active'
+import { DlTooltip, DlLink } from '../../essential'
 
 type ProgressChartOption = {
     name: string

package/src/components/basic/DlProgressChart/index.ts

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

package/src/components/{DlWidget → basic/DlWidget}/DlWidget.vue

@@ -46,7 +46,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import DlIcon from '../DlIcon.vue'
+import { DlIcon } from '../../essential'
 import {
     getElementAbove,
     addMouseEnter,
@@ -54,7 +54,7 @@ import {
     setFlexBasis,
     insertAfter
 } from './utils'
-import { swapNodes } from '../../utils/swapNodes'
+import { swapNodes } from '../../../utils/swapNodes'
 
 export default defineComponent({
     name: 'DlWidget',

package/src/components/basic/DlWidget/index.ts

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

package/src/components/basic/index.ts

@@ -0,0 +1,11 @@
+export * from './DlAccordion'
+export * from './DlAlert'
+export * from './DlAvatar'
+export * from './DlButton'
+export * from './DlChip'
+export * from './DlKpi'
+export * from './DlListItem'
+export * from './DlWidget'
+export * from './DlPopup'
+export * from './DlPanelContainer'
+export * from './DlProgressChart'

package/src/components/basic/models.ts

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

package/src/components/basic/types.ts

@@ -0,0 +1,8 @@
+import { DlChipProps } from './DlChip/utils'
+import { DlButtonProps } from './DlButton/utils'
+
+export type { DlChipProps, DlButtonProps }
+
+export * from './DlKpi/types'
+export * from './DlWidget/types'
+export * from './DlButton/types'

package/src/components/{DlChart → compound/DlCharts/charts/DlBarChart}/DlBarChart.vue

@@ -14,7 +14,7 @@
                 @mouseout="onChartLeave"
                 @wheel.native="handleChartScroll"
             />
-            <dl-scroll-bar
+            <dl-chart-scroll-bar
                 v-if="maxItems > thisItemsInView"
                 :height="wrapperHeight"
                 :item-count="maxItems"
@@ -52,12 +52,16 @@
 </template>
 
 <script lang="ts">
-import { Bar } from './'
-import { CommonProps, BarChartProps, defaultBarChartProps } from './props'
+import { Bar } from '../../types/typedCharts'
+import {
+    CommonProps,
+    BarChartProps,
+    defaultBarChartProps
+} from '../../types/props'
 import { defineComponent, reactive, ref, watch, computed } from 'vue-demi'
-import DlChartLegend from './DlChartLegend.vue'
-import DlScrollBar from './DlScrollBar.vue'
-import { updateKey } from '../../utils/update-key'
+import DlChartLegend from '../../components/DlChartLegend.vue'
+import DlChartScrollBar from '../../components/DlChartScrollBar.vue'
+import { updateKey } from '../../../../../utils/update-key'
 import {
     Chart as ChartJS,
     Title,
@@ -72,8 +76,8 @@ import {
 } from 'chart.js'
 import type { Chart, ChartMeta, ChartDataset, ActiveElement } from 'chart.js'
 import { isEqual, merge } from 'lodash'
-import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../utils'
-import { useThemeVariables } from '../../hooks/use-theme'
+import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../../../../utils'
+import { useThemeVariables } from '../../../../../hooks/use-theme'
 
 ChartJS.register(
     CategoryScale,
@@ -89,7 +93,7 @@ export default defineComponent({
     name: 'DlBarChart',
     components: {
         Bar,
-        DlScrollBar,
+        DlChartScrollBar,
         DlChartLegend
     },
     props: {

package/src/components/compound/DlCharts/charts/DlBarChart/index.ts

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

package/src/components/{DlChart → compound/DlCharts/charts/DlColumnChart}/DlColumnChart.vue

@@ -74,14 +74,18 @@
 </template>
 
 <script lang="ts">
-import { Bar } from './'
-import { CommonProps, ColumnChartProps, defaultColumnChartProps } from './props'
+import { Bar } from '../../types/typedCharts'
+import {
+    CommonProps,
+    ColumnChartProps,
+    defaultColumnChartProps
+} from '../../types/props'
 import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
-import DlBrush from './DlBrush.vue'
-import DlChartLegend from './DlChartLegend.vue'
-import DlChartLabels from './DlChartLabels.vue'
-import { updateKey } from '../../utils/update-key'
-import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../utils'
+import DlBrush from '../../components/DlBrush.vue'
+import DlChartLegend from '../../components/DlChartLegend.vue'
+import DlChartLabels from '../../components/DlChartLabels.vue'
+import { updateKey } from '../../../../../utils/update-key'
+import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../../../../utils'
 import {
     Chart as ChartJS,
     Title,
@@ -94,15 +98,9 @@ import {
     LineElement,
     BarControllerDatasetOptions
 } from 'chart.js'
-import type {
-    Chart,
-    ChartMeta,
-    ChartDataset,
-    ActiveElement,
-    ChartType
-} from 'chart.js'
+import type { Chart, ChartMeta, ChartDataset, ActiveElement } from 'chart.js'
 import { unionBy, orderBy, merge, isEqual } from 'lodash'
-import { useThemeVariables } from '../../hooks/use-theme'
+import { useThemeVariables } from '../../../../../hooks/use-theme'
 
 ChartJS.register(
     Title,

package/src/components/compound/DlCharts/charts/DlColumnChart/index.ts

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

package/src/components/{DlChart/Doughnut → compound/DlCharts/charts/DlDoughnutChart}/DlDoughnutChart.vue

@@ -81,11 +81,11 @@ import {
 ChartJS.register(Tooltip, Legend, DoughnutController, ArcElement)
 
 import { cloneDeep, merge } from 'lodash'
-import { Doughnut } from '../index'
-import { useThemeVariables } from '../../../hooks/use-theme'
-import { updateNestedArrayValues } from '../../../utils/update-key'
-import DlDoughnutChartLegend from './DlDoughnutChartLegend.vue'
-import { defaultDoughnutChartProps } from '../props'
+import { Doughnut } from '../../types/typedCharts'
+import { useThemeVariables } from '../../../../../hooks/use-theme'
+import { updateNestedArrayValues } from '../../../../../utils/update-key'
+import DlDoughnutChartLegend from './components/DlDoughnutChartLegend.vue'
+import { defaultDoughnutChartProps } from '../../types/props'
 import { TDoughnutWithOriginalColor } from './types/TDoughnutWithOriginalColor'
 
 export default defineComponent({

package/src/components/{DlChart/Doughnut → compound/DlCharts/charts/DlDoughnutChart}/DlDoughnutChartWidget.vue

@@ -26,9 +26,7 @@
 import { defineComponent, PropType } from 'vue-demi'
 import DlDoughnutChart from './DlDoughnutChart.vue'
 import { TDoughnutChartData } from './types/TDoughnutChartData'
-import DlGrid from '../../../components/DlWidget/DlGrid.vue'
-import DlGridRow from '../../../components/DlWidget/DlGridRow.vue'
-import DlWidget from '../../../components/DlWidget/DlWidget.vue'
+import { DlWidget, DlGridRow, DlGrid } from '../../../../basic'
 
 export default defineComponent({
     name: 'DlDoughnutChartWidget',

package/src/components/{DlChart/Doughnut → compound/DlCharts/charts/DlDoughnutChart/components}/DlDoughnutChartLegend.vue

@@ -50,10 +50,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import type { LegendItem } from 'chart.js'
-import DlTypography from '../../DlTypography.vue'
-import { TDoughnutChartData } from './types/TDoughnutChartData'
-import DlTooltip from '../../DlTooltip.vue'
+import { DlTypography, DlTooltip } from '../../../../../essential'
+import { TDoughnutChartData } from '../types/TDoughnutChartData'
 
 enum EBadgeText {
     badge = 'badge',

package/src/components/compound/DlCharts/charts/DlDoughnutChart/index.ts

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

package/src/components/compound/DlCharts/charts/DlDoughnutChart/types/index.ts

@@ -0,0 +1,5 @@
+export * from './TDoughnutChartAnimation'
+export * from './TDoughnutChartData'
+export * from './TDoughnutChartOptions'
+export * from './TDoughnutChartProps'
+export * from './TDoughnutWithOriginalColor'

package/src/components/{DlChart → compound/DlCharts/charts/DlLineChart}/DlLineChart.vue

@@ -74,14 +74,18 @@
 </template>
 
 <script lang="ts">
-import { Line as DlLine } from '.'
-import { CommonProps, ColumnChartProps, defaultLineChartProps } from './props'
+import { Line as DlLine } from '../../types/typedCharts'
+import {
+    CommonProps,
+    ColumnChartProps,
+    defaultLineChartProps
+} from '../../types/props'
 import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
-import DlBrush from './DlBrush.vue'
-import DlChartLegend from './DlChartLegend.vue'
-import DlChartLabels from './DlChartLabels.vue'
-import { updateKeys } from '../../utils/update-key'
-import { hexToRgbA } from '../../utils'
+import DlBrush from '../../components/DlBrush.vue'
+import DlChartLegend from '../../components/DlChartLegend.vue'
+import DlChartLabels from '../../components/DlChartLabels.vue'
+import { updateKeys } from '../../../../../utils/update-key'
+import { hexToRgbA } from '../../../../../utils'
 import {
     Chart as ChartJS,
     Title,
@@ -105,7 +109,7 @@ import type {
     LineControllerDatasetOptions
 } from 'chart.js'
 import { orderBy, merge, isEqual, unionBy, cloneDeep } from 'lodash'
-import { useThemeVariables } from '../../hooks/use-theme'
+import { useThemeVariables } from '../../../../../hooks/use-theme'
 
 ChartJS.register(
     Title,

package/src/components/compound/DlCharts/charts/DlLineChart/index.ts

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

package/src/components/compound/DlCharts/charts/index.ts

@@ -0,0 +1,4 @@
+export * from './DlBarChart'
+export * from './DlColumnChart'
+export * from './DlDoughnutChart'
+export * from './DlLineChart'

package/src/components/{DlChart → compound/DlCharts/components}/DlBrush.vue

@@ -22,7 +22,7 @@
                     class="selection"
                     :style="selectionBarStyle"
                 />
-                <dl-brush-thumb
+                <brush-thumb
                     key="tmin"
                     ref="minThumbRef"
                     class="thumb"
@@ -33,7 +33,7 @@
                     data-test="min-thumb"
                 />
 
-                <dl-brush-thumb
+                <brush-thumb
                     key="tmax"
                     ref="maxThumbRef"
                     class="thumb"
@@ -62,11 +62,11 @@ import useSlider, {
     useSliderEmits,
     dragType,
     Dragging
-} from '../DlSlider/useSlider'
+} from '../../DlSlider/useSlider'
 
-import { between, isMobileOrTablet, getColor } from '../../utils'
-import DlBrushThumb from './BrushThumb.vue'
-import touchPanDirective from '../../directives/TouchPan'
+import { between, isMobileOrTablet, getColor } from '../../../../utils'
+import BrushThumb from '../shared/BrushThumb.vue'
+import touchPanDirective from '../../../../directives/TouchPan'
 
 export default defineComponent({
     name: 'DlBrushBar',
@@ -74,7 +74,7 @@ export default defineComponent({
         touchPan: touchPanDirective as any // force any type cause of the vue version
     },
     components: {
-        DlBrushThumb
+        BrushThumb
     },
     model: {
         prop: 'modelValue',

package/src/components/{DlChart → compound/DlCharts/components}/DlChartLabels.vue

@@ -81,9 +81,8 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType, isVue2 } from 'vue-demi'
-import { isEllipsisActive } from '../../utils/is-ellipsis-active'
-import DlTypography from '../DlTypography.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { isEllipsisActive } from '../../../../utils/is-ellipsis-active'
+import { DlTooltip, DlTypography } from '../../../essential'
 
 type ObserverRefs = {
     ref: 'resizeObserverTitle' | 'resizeObserverSubtitle'

package/src/components/{DlChart → compound/DlCharts/components}/DlChartLegend.vue

@@ -36,9 +36,8 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
 import type { LegendItem, DatasetChartOptions } from 'chart.js'
-import { getColor } from '../../utils'
-import DlBadge from '../DlBadge.vue'
-import DlTypography from '../DlTypography.vue'
+import { getColor } from '../../../../utils'
+import { DlBadge, DlTypography } from '../../../essential'
 
 const positions = {
     left: 'flex-start',

package/src/components/{DlChart/DlScrollBar.vue → compound/DlCharts/components/DlChartScrollBar.vue}

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
-    name: 'DlScrollBar',
+    name: 'DlChartScrollBar',
     props: {
         itemCount: {
             type: Number,

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

@@ -0,0 +1 @@
+export * from './charts'

package/src/components/{DlChart → compound/DlCharts/models}/chart.ts

@@ -9,8 +9,8 @@ import {
     getCurrentInstance
 } from 'vue-demi'
 import { Chart as ChartJS } from 'chart.js'
-import type { ChartComponent } from './types'
-import { Props } from './props'
+import { DlChartComponent } from '../types/types'
+import { Props } from '../types/props'
 import {
     cloneData,
     setLabels,
@@ -18,7 +18,7 @@ import {
     setOptions,
     toRawIfProxy,
     cloneProxy
-} from './utils'
+} from '../utils'
 
 export const Chart = defineComponent({
     props: Props,
@@ -119,4 +119,4 @@ export const Chart = defineComponent({
         }
     },
     template: `<canvas ref="canvasRef" />`
-}) as unknown as ChartComponent
+}) as unknown as DlChartComponent

package/src/components/compound/DlCharts/models/index.ts

@@ -0,0 +1 @@
+export * from './chart'

package/src/components/{DlChart → compound/DlCharts/shared}/BrushThumb.vue

@@ -15,12 +15,11 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue-demi'
-import { getColor } from '../../utils'
-
-import { DlIcon } from '../'
+import { getColor } from '../../../../utils'
+import { DlIcon } from '../../../essential'
 
 export default defineComponent({
-    name: 'DlBrushThumb',
+    name: 'BrushThumb',
     components: {
         DlIcon
     },

package/src/components/compound/DlCharts/types/index.ts

@@ -0,0 +1 @@
+export type { DlChartProps, DlChartComponentRef } from './types'

package/src/components/{DlChart → compound/DlCharts/types}/props.ts

@@ -7,8 +7,8 @@ import type {
     UpdateMode,
     DatasetChartOptions
 } from 'chart.js'
-import { TDoughnutProps } from './Doughnut/types/TDoughnutChartProps'
-import { TDoughnutChartData } from './Doughnut/types/TDoughnutChartData'
+import { TDoughnutProps } from '../charts/DlDoughnutChart/types/TDoughnutChartProps'
+import { TDoughnutChartData } from '../charts/DlDoughnutChart/types/TDoughnutChartData'
 
 export const CommonProps = {
     data: {

package/src/components/{DlChart → compound/DlCharts/types}/typedCharts.ts

@@ -11,10 +11,10 @@ import {
     RadarController,
     ScatterController
 } from 'chart.js'
-import type { TypedChartComponent, ChartComponentRef } from './types'
+import type { DlTypedChartComponent, DlChartComponentRef } from './types'
 import { CommonProps } from './props'
-import { Chart } from './chart'
-import { compatProps } from './utils'
+import { Chart } from '../models'
+import { compatProps } from '../utils'
 
 const template = `<Chart v-bind="{...allProps}" />`
 
@@ -25,7 +25,7 @@ export function createTypedChart<
 >(
     type: TType,
     registerables: ChartComponentLike
-): TypedChartComponent<TType, TData, TLabel> {
+): DlTypedChartComponent<TType, TData, TLabel> {
     ChartJS.register(registerables)
 
     return defineComponent({
@@ -35,7 +35,7 @@ export function createTypedChart<
         props: CommonProps,
         setup(props) {
             const canvasRef = shallowRef<ChartJS | null>(null)
-            const reforwardRef = (chartRef: ChartComponentRef) => {
+            const reforwardRef = (chartRef: DlChartComponentRef) => {
                 canvasRef.value = chartRef?.chart
             }