@dataloop-ai/components 0.15.7 → 0.16.0

package/src/components/essential/DlIcon/index.ts

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

package/src/components/{DlLink → essential/DlLink}/index.ts

@@ -1,4 +1,3 @@
 import DlLink from './DlLink.vue'
 
-export * from './utils'
 export { DlLink }

package/src/components/essential/DlList/index.ts

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

package/src/components/{DlMenu → essential/DlMenu}/DlMenu.vue

@@ -36,35 +36,37 @@ 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,
     useModelToggleEmits,
     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 { closePortalMenus } from '../../utils/portal'
-import { getScrollTarget } from '../../utils/scroll'
-import DlTeleport from '../../utils/teleport'
-import { removeEscapeKey } from '../../utils/escape-key'
+} 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 { closePortalMenus } from '../../../utils/portal'
+import { getScrollTarget } from '../../../utils/scroll'
+import DlTeleport from '../../../utils/teleport'
+import { removeEscapeKey } from '../../../utils/escape-key'
 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,
     validateOffset,
     setPosition,
     parsePosition
-} from '../../utils/position-engine'
+} from '../../../utils/position-engine'
 import {
     handleClickOutside,
     getAnchorOrigin,
@@ -75,7 +77,7 @@ import {
     refocusTargetFn,
     conditionalHandler
 } from './utils'
-import { isMobileOrTablet } from '../../utils'
+import { isMobileOrTablet } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlMenu → essential/DlMenu}/utils.ts

@@ -1,13 +1,13 @@
-import { AnchorEvent } from '../../hooks/use-model-toggle'
-import { position, stopAndPrevent } from '../../utils/events'
-import { parsePosition } from '../../utils/position-engine'
+import { AnchorEvent } from '../../../hooks/use-model-toggle'
+import { position, stopAndPrevent } from '../../../utils/events'
+import { parsePosition } from '../../../utils/position-engine'
 import { Ref } from 'vue-demi'
-import { addEscapeKey, removeEscapeKey } from '../../utils/escape-key'
+import { addEscapeKey, removeEscapeKey } from '../../../utils/escape-key'
 import {
     addClickOutside,
     removeClickOutside,
     ClickOutsideEvent
-} from '../../utils/click-outside'
+} from '../../../utils/click-outside'
 
 interface ClickOutsideProps {
     persistent: boolean

package/src/components/essential/DlPanel/index.ts

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

package/src/components/{DlProgressBar.vue → essential/DlProgressBar/DlProgressBar.vue}

@@ -29,19 +29,28 @@
                 />
             </span>
             <p
-                v-if="showValue && !indeterminate"
+                v-if="showValue && !indeterminate && !summary"
                 class="dl-progress-bar-label"
             >
                 {{ computedValue }}{{ showPercentage ? '%' : '' }}
             </p>
         </div>
+        <div
+            v-if="summary"
+            class="summary"
+        >
+            <div>
+                {{ summary }}
+            </div>
+            <div>{{ computedValue }}%</div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { getColor } from '../utils'
+import { getColor } from '../../../utils'
 
 export default defineComponent({
     name: 'DlProgressBar',
@@ -75,6 +84,10 @@ export default defineComponent({
         width: {
             type: String,
             default: '100%'
+        },
+        summary: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -130,6 +143,18 @@ export default defineComponent({
     animation-iteration-count: infinite;
 }
 
+.summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: capitalize;
+    font-feature-settings: 'cpsp' on;
+    color: var(--dl-color-lighter);
+}
 @keyframes indeterminate-loading {
     0% {
         width: 0%;

package/src/components/essential/DlProgressBar/index.ts

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

package/src/components/{DlRadio.vue → essential/DlRadio/DlRadio.vue}

@@ -62,9 +62,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { stopAndPrevent } from '../utils'
+import { stopAndPrevent, getColor } from '../../../utils'
 import { v4 } from 'uuid'
-import { getColor } from '../utils'
 
 export default defineComponent({
     name: 'DlRadio',

package/src/components/essential/DlRadio/index.ts

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

package/src/components/essential/DlSkeleton/index.ts

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

package/src/components/essential/DlSpinner/index.ts

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

package/src/components/{DlSwitch.vue → essential/DlSwitch/DlSwitch.vue}

@@ -46,7 +46,6 @@
 <script lang="ts">
 import { defineComponent, PropType, toRaw, nextTick } from 'vue-demi'
 import { debounce } from 'lodash'
-import { getColor } from '../utils'
 import { v4 } from 'uuid'
 import {
     calculateBorderRadius,
@@ -54,8 +53,9 @@ import {
     calculateMargin,
     calculateActiveMarginLeft,
     calculateWidth,
-    stopAndPrevent
-} from '../utils'
+    stopAndPrevent,
+    getColor
+} from '../../../utils'
 
 const Any = [Array, Boolean, String, Number, Object]
 

package/src/components/essential/DlSwitch/index.ts

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

package/src/components/essential/DlTextArea/index.ts

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

package/src/components/essential/DlTextHolder/index.ts

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

package/src/components/{DlThemeProvider.vue → essential/DlThemeProvider/DlThemeProvider.vue}

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, watch, provide, ref } from 'vue-demi'
-import { getThemeModeAttr } from '../utils'
+import { getThemeModeAttr } from '../../../utils'
 import '@dataloop-ai/icons/docs/style.css'
 import { v4 } from 'uuid'
 
@@ -47,4 +47,4 @@ export default defineComponent({
 })
 </script>
 
-<style src="../assets/globals.scss" lang="scss" />
+<style src="../../../assets/globals.scss" lang="scss" />

package/src/components/essential/DlThemeProvider/index.ts

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

package/src/components/{DlTooltip.vue → essential/DlTooltip/DlTooltip.vue}

@@ -34,34 +34,36 @@ import {
     PropType,
     onMounted
 } from 'vue-demi'
-import useAnchor, { useAnchorProps } from '../hooks/use-anchor'
-import useModelToggle, { AnchorEvent } from '../hooks/use-model-toggle'
-import usePortal from '../hooks/use-portal'
-import useScrollTarget from '../hooks/use-scroll-target'
-import useTick from '../hooks/use-tick'
-import useTimeout from '../hooks/use-timeout'
-import useTransition, { useTransitionProps } from '../hooks/use-transition'
+import useAnchor, { useAnchorProps } from '../../../hooks/use-anchor'
+import useModelToggle, { AnchorEvent } from '../../../hooks/use-model-toggle'
+import usePortal from '../../../hooks/use-portal'
+import useScrollTarget from '../../../hooks/use-scroll-target'
+import useTick from '../../../hooks/use-tick'
+import useTimeout from '../../../hooks/use-timeout'
+import useTransition, {
+    useTransitionProps
+} from '../../../hooks/use-transition'
 import {
     addEvt,
     cleanEvt,
     clearSelection,
     getColor,
     isMobileOrTablet
-} from '../utils'
+} from '../../../utils'
 import {
     parsePosition,
     setPosition,
     validateOffset,
     validatePosition
-} from '../utils/position-engine'
-import { getScrollTarget } from '../utils/scroll'
-import useWindowSize from '../hooks/use-window-size'
+} from '../../../utils/position-engine'
+import { getScrollTarget } from '../../../utils/scroll'
+import useWindowSize from '../../../hooks/use-window-size'
 import {
     removeClickOutside,
     ClickOutsideEvent,
     addClickOutside
-} from '../utils/click-outside'
-import DlTeleport from '../utils/teleport'
+} from '../../../utils/click-outside'
+import DlTeleport from '../../../utils/teleport'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/essential/DlTooltip/index.ts

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

package/src/components/{DlTrend.vue → essential/DlTrend/DlTrend.vue}

@@ -20,7 +20,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
-import { getColor } from '../utils'
+import { getColor } from '../../../utils'
 
 const colorValidator = (val: string | null) =>
     val === 'negative' || val === 'positive' || val === null

package/src/components/essential/DlTrend/index.ts

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

package/src/components/{DlTypography.vue → essential/DlTypography/DlTypography.vue}

@@ -11,7 +11,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
-import { getColor } from '../utils'
+import { getColor } from '../../../utils'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 

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

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

package/src/components/essential/index.ts

@@ -0,0 +1,19 @@
+export * from './DlBadge'
+export * from './DlCheckbox'
+export * from './DlIcon'
+export * from './DlList'
+export * from './DlMenu'
+export * from './DlProgressBar'
+export * from './DlRadio'
+export * from './DlSkeleton'
+export * from './DlSwitch'
+export * from './DlTextHolder'
+export * from './DlThemeProvider'
+export * from './DlTooltip'
+export * from './DlTrend'
+export * from './DlTypography'
+export * from './DlPanel'
+export * from './DlTextArea'
+export * from './DlLink'
+export * from './DlColorPicker'
+export * from './DlSpinner'

package/src/components/essential/models.ts

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

package/src/components/essential/types.ts

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

package/src/components/index.ts

@@ -1,123 +1,4 @@
-import { DlAccordion } from './DlAccordion'
-import DlAvatar from './DlAvatar.vue'
-import DlCheckbox from './DlCheckbox.vue'
-import DlSkeleton from './DlSkeleton.vue'
-import DlThemeProvider from './DlThemeProvider.vue'
-import { DlLink } from './DlLink'
-import DlSwitch from './DlSwitch.vue'
-import DlIcon from './DlIcon.vue'
-import DlOptionGroup from './DlOptionGroup/DlOptionGroup.vue'
-import DlRadio from './DlRadio.vue'
-import DlProgressBar from './DlProgressBar.vue'
-import { DlButton } from './DlButton'
-import { DlTabPanel, DlTabPanels } from './DlTabPanels'
-import { DlTabs, DlTab } from './DlTabs'
-import DlTooltip from './DlTooltip.vue'
-import { DlSlider } from './DlSlider'
-import { DlColorPicker } from './DlColorPicker'
-import DlChip from './DlChip'
-import { DlListItem } from './DlListItem'
-import DlItemSection from './DlItemSection.vue'
-import DlList from './DlList.vue'
-import { DlMenu } from './DlMenu'
-import DlCounters from './DlCounters.vue'
-import DlRange from './DlRange/DlRange.vue'
-import DlTextArea from './DlTextArea.vue'
-import DlTrend from './DlTrend.vue'
-import DlInfoErrorMessage from './DlInfoErrorMessage.vue'
-import DlTextInput from './DlTextInput.vue'
-import DlProgressChart from './DlProgressChart.vue'
-import DlAlert from './DlAlert.vue'
-import DlPopup from './DlPopup'
-import DlDropdownButton from './DlDropdownButton.vue'
-import DlTypography from './DlTypography.vue'
-import {
-    DlDialogBox,
-    DlDialogBoxHeader,
-    DlDialogBoxFooter
-} from './DlDialogBox'
-import { DlPanelContainer, DlPanel } from './DlPanelContainer'
-import DlSearch from './DlSearch.vue'
-import { DlSelect } from './DlSelect'
-import DlBadge from './DlBadge.vue'
-import DlItem from './DlItem'
-import { DlStepper, Stepper, Step, StepState } from './DlStepper'
-import { DlTr, DlTh, DlTd, DlTable } from './DlTable'
-import { DlPagination } from './DlPagination'
-import { DlDatePicker } from './DlDatePicker'
-import { DlTimePicker } from './DlTimePicker'
-import { DlDateTimeRange } from './DlDateTimeRange'
-import { DateInterval } from './DlDatePicker/types'
-import { DlSmartSearch } from './DlSmartSearch'
-import { DlWidget } from './DlWidget'
-import { DlGrid } from './DlWidget'
-import DlTextHolder from './DlTextHolder.vue'
-import { DlColumnChart, DlLineChart } from './DlChart'
-import DlSpinner from './DlSpinner.vue'
-
-export {
-    DlAccordion,
-    DlAvatar,
-    DlInfoErrorMessage,
-    DlCheckbox,
-    DlSkeleton,
-    DlIcon,
-    DlSelect,
-    DlLink,
-    DlRadio,
-    DlOptionGroup,
-    DlSwitch,
-    DlThemeProvider,
-    DlTrend,
-    DlProgressBar,
-    DlItem,
-    DlSlider,
-    DlButton,
-    DlChip,
-    DlTooltip,
-    DlListItem,
-    DlItemSection,
-    DlList,
-    DlMenu,
-    DlCounters,
-    DlTextInput,
-    DlColorPicker,
-    DlTab,
-    DlTabs,
-    DlTabPanel,
-    DlTabPanels,
-    DlRange,
-    DlTextArea,
-    DlPopup,
-    DlAlert,
-    DlDropdownButton,
-    DlProgressChart,
-    DlTypography,
-    DlDialogBox,
-    DlDialogBoxHeader,
-    DlDialogBoxFooter,
-    DlPanelContainer,
-    DlPanel,
-    DlSearch,
-    DlBadge,
-    DlStepper,
-    Stepper,
-    Step,
-    DlTr,
-    DlTh,
-    DlTd,
-    DlTable,
-    DlPagination,
-    DlDatePicker,
-    DlTimePicker,
-    DlDateTimeRange,
-    DlSmartSearch,
-    DlWidget,
-    DlGrid,
-    DlTextHolder,
-    DlColumnChart,
-    DlLineChart,
-    DlSpinner
-}
-
-export type { StepState, DateInterval }
+export * from './shared'
+export * from './essential'
+export * from './basic'
+export * from './compound'

package/src/components/models.ts

@@ -0,0 +1,4 @@
+export * from './shared/models'
+export * from './essential/models'
+export * from './basic/models'
+export * from './compound/models'

package/src/components/shared/DlInfoErrorMessage/index.ts

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

package/src/components/{DlItemSection.vue → shared/DlItemSection/DlItemSection.vue}

@@ -11,7 +11,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { getColor } from '../utils'
+import { getColor } from '../../../utils'
 
 export default defineComponent({
     name: 'DlItemSection',

package/src/components/shared/DlItemSection/index.ts

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

package/src/components/{DlVirtualScroll → shared/DlVirtualScroll}/DlVirtualScroll.vue

@@ -76,8 +76,8 @@ import {
     ref,
     watch
 } from 'vue-demi'
-import { listenOpts } from '../../utils'
-import { getScrollTarget } from '../../utils/scroll'
+import { listenOpts } from '../../../utils'
+import { getScrollTarget } from '../../../utils/scroll'
 import { useVirtualScroll, useVirtualScrollProps } from './useVirtualScroll'
 
 export default defineComponent({
@@ -249,7 +249,7 @@ export default defineComponent({
 })
 </script>
 <style scoped lang="scss">
-@import '../DlTable/dl-table-styles.scss';
+@import '../../compound/DlTable/styles/dl-table-styles.scss';
 .dl-virtual-scroll {
     &:focus {
         outline: 0;

package/src/components/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './DlItemSection'
+export * from './DlInfoErrorMessage'
+export * from './DlVirtualScroll'

package/src/components/shared/models.ts

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

package/src/components/shared/types.ts

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

package/src/components/types.ts

@@ -0,0 +1,3 @@
+export * from './essential/types'
+export * from './basic/types'
+export * from './compound/types'

package/src/demo/BarChartDemo.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlBarChart from '../components/DlChart/DlBarChart.vue'
+import { DlBarChart } from '../components'
 
 const labelsFn = () => {
     const a = []

package/src/demo/ColumnChartDemo.vue

@@ -56,8 +56,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlColumnChart from '../components/DlChart/DlColumnChart.vue'
-import DlAvatar from '../components/DlAvatar.vue'
+import { DlAvatar, DlColumnChart } from '../components'
 
 import { orderBy } from 'lodash'
 

package/src/demo/DlAvatarDemo.vue

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

package/src/demo/DlButtonDemo.vue

@@ -234,7 +234,7 @@
 <script lang="ts">
 import { defineComponent, reactive } from 'vue-demi'
 import { DlButton, DlBadge, DlIcon } from '../components'
-import { ButtonSizes } from '../components/DlButton'
+import { ButtonSizes } from '../components/basic/DlButton/utils'
 export default defineComponent({
     name: 'DlButtonDemo',
     components: {

package/src/demo/DlChartDoughnutDemo.vue

@@ -66,9 +66,9 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import DlDoughnutChart from '../components/DlChart/Doughnut/DlDoughnutChart.vue'
 import { DoughnutControllerChartOptions } from 'chart.js'
-import { TDoughnutChartData } from '../components/DlChart/Doughnut/types/TDoughnutChartData'
+import { DlDoughnutChart } from '../components'
+import { TDoughnutChartData } from '../components/compound/DlCharts/charts/DlDoughnutChart/types'
 
 export default defineComponent({
     name: 'DlChartDoughnutDemo',

package/src/demo/DlColorPickerDemo.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlColorPicker } from '../components'
-import { NewColor } from '../components/DlColorPicker'
+import { NewColor } from '../components/types'
 
 export default defineComponent({
     name: 'DlColorPickerDemo',

package/src/demo/DlCounterDemo.vue

@@ -26,7 +26,7 @@
                     text: 'lorem ipsum'
                 },
                 {
-                    value: 45,
+                    value: null,
                     text: 'ipsum lorem',
                     subtext:
                         'Cupidatat est labore et nisi do culpa veniam reprehenderit anim consectetur dolor mollit.'

package/src/demo/DlDateTimeRangeDemo.vue

@@ -87,7 +87,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlSwitch, DlDateTimeRange } from '../components'
-import { DateInterval } from '../components/DlDatePicker/types'
+import { DateInterval } from '../components/types'
 
 export default defineComponent({
     components: {

package/src/demo/DlDialogBoxDemo.vue

@@ -113,7 +113,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlDialogBox, DlButton } from '../components'
-import { DlDialogBoxHeader, DlDialogBoxFooter } from '../components/DlDialogBox'
+import { DlDialogBoxHeader, DlDialogBoxFooter } from '../components'
 
 export default defineComponent({
     name: 'DlDialogBoxDemo',