@dataloop-ai/components 0.15.7 → 0.16.0

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

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

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

@@ -49,10 +49,10 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import RowsSelector from './RowsSelector.vue'
-import PageNavigation from './PageNavigation.vue'
-import QuickNavigation from './QuickNavigation.vue'
-import PaginationLegend from './PaginationLegend.vue'
+import RowsSelector from './components/RowsSelector.vue'
+import PageNavigation from './components/PageNavigation.vue'
+import QuickNavigation from './components/QuickNavigation.vue'
+import PaginationLegend from './components/PaginationLegend.vue'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlPagination → compound/DlPagination/components}/PageNavigation.vue

@@ -104,8 +104,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { getColor } from '../../utils'
-import DlIcon from '../DlIcon.vue'
+import { getColor } from '../../../../utils'
+import { DlIcon } from '../../../essential'
 
 export default defineComponent({
     name: 'PageNavigation',

package/src/components/{DlPagination → compound/DlPagination/components}/QuickNavigation.vue

@@ -25,10 +25,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlTypography from '../DlTypography.vue'
-import { DlButton } from '../DlButton'
-import { stopAndPrevent } from '../../utils'
-import { admissibleKeys } from '../../utils/nav-keys-constants'
+import { DlButton } from '../../../basic'
+import { DlTypography } from '../../../essential'
+import { stopAndPrevent } from '../../../../utils'
+import { admissibleKeys } from '../../../../utils/nav-keys-constants'
 
 export default defineComponent({
     name: 'QuickNavigation',

package/src/components/{DlPagination → compound/DlPagination/components}/RowsSelector.vue

@@ -24,8 +24,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import { DlSelect } from '../DlSelect'
-import DlTypography from '../DlTypography.vue'
+import { DlSelect } from '../../DlSelect'
+import { DlTypography } from '../../../essential'
 
 export default defineComponent({
     name: 'RowsSelector',

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

@@ -82,7 +82,7 @@ import useSlider, {
     useSliderProps,
     useSliderEmits
 } from '../DlSlider/useSlider'
-import { DlButton } from '../DlButton'
+import { DlButton } from '../../basic'
 import {
     stopAndPrevent,
     getColor,
@@ -90,8 +90,8 @@ import {
     includes,
     between,
     isMobileOrTablet
-} from '../../utils'
-import touchPanDirective from '../../directives/TouchPan'
+} from '../../../utils'
+import touchPanDirective from '../../../directives/TouchPan'
 import * as rangeUtils from './utils'
 import { v4 } from 'uuid'
 

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

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

package/src/components/{DlRange → compound/DlRange}/utils.ts

@@ -1,4 +1,4 @@
-import { between, includes, KEY_CODE } from '../../utils'
+import { between, includes, KEY_CODE } from '../../../utils'
 import { Dragging, dragType } from '../DlSlider/useSlider'
 
 type RangeValue = {
@@ -21,7 +21,7 @@ export function updateValue(
     }
 }
 
-type RangeBoundings = {
+type RangeBindings = {
     left: number
     top: number
     width: number
@@ -30,13 +30,13 @@ type RangeBoundings = {
 
 export function getDragging(
     event: any,
-    boundings: RangeBoundings,
+    bindings: RangeBindings,
     sensitivity: number,
     state: RangeValue,
     stateRatio: RangeValue,
     getDraggingRatioFn: (event: MouseEvent, dragging: Dragging) => number
 ): Dragging {
-    const { left, top, width, height } = boundings
+    const { left, top, width, height } = bindings
 
     const dragging = {
         left,

package/src/components/{DlSearch.vue → compound/DlSearches/DlSearch/DlSearch.vue}

@@ -5,7 +5,7 @@
         class="root-wrapper"
         :style="rootVars"
     >
-        <dl-text-input
+        <dl-input
             ref="input"
             type="text"
             clear-button-tooltip
@@ -30,7 +30,7 @@
                     size="12px"
                 />
             </template>
-        </dl-text-input>
+        </dl-input>
         <dl-button
             v-show="withSearchBtn"
             padding="9px 16px"
@@ -47,9 +47,9 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
-import { DlButton } from './DlButton'
-import DlIcon from './DlIcon.vue'
-import DlTextInput from './DlTextInput.vue'
+import { DlButton } from '../../../basic'
+import { DlIcon } from '../../../essential'
+import { DlInput } from '../../DlInput'
 
 const SearchSizes = {
     l: 'l',
@@ -62,7 +62,7 @@ export default defineComponent({
     components: {
         DlButton,
         DlIcon,
-        DlTextInput
+        DlInput
     },
     model: {
         prop: 'modelValue',

package/src/components/compound/DlSearches/DlSearch/index.ts

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

package/src/components/compound/DlSearches/DlSearch/types.ts

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

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

@@ -45,7 +45,7 @@
             :model-value="jsonEditorModel"
             :query="activeQuery"
             :queries="savedQueries"
-            @update:modelValue="(val) => (jsonEditorModel = val)"
+            @update:modelValue="jsonEditorModel = $event"
             @save="handleQuerySaveEditor"
             @remove="handleQueryRemove"
             @search="handleQuerySearchEditor"
@@ -81,7 +81,7 @@
                 />
             </template>
             <template #body>
-                <dl-text-input
+                <dl-input
                     v-model="newQueryName"
                     style="text-align: center"
                     placeholder="Type query name"
@@ -97,15 +97,19 @@
 </template>
 <script lang="ts">
 import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi'
-import DlSmartSearchInput from './DlSmartSearchInput.vue'
-import DlJsonEditor from './DlJsonEditor.vue'
-import { DlDialogBox, DlDialogBoxHeader } from '../DlDialogBox'
-import DlTypography from '../DlTypography.vue'
-import DlTextInput from '../DlTextInput.vue'
-import { DlButton } from '../DlButton'
-import { useSuggestions, Schema, Alias } from '../../hooks/use-suggestions'
+import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
+import { DlJsonEditor } from '../../DlJsonEditor'
+import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
+import { DlInput } from '../../DlInput'
+import { DlTypography } from '../../../essential'
+import { DlButton } from '../../../basic'
+import {
+    useSuggestions,
+    Schema,
+    Alias
+} from '../../../../hooks/use-suggestions'
 import { Filter, Query, ColorSchema, SearchStatus } from './types'
-import { createColorSchema } from './highlightSyntax'
+import { createColorSchema } from './utils/highlightSyntax'
 import { v4 } from 'uuid'
 
 export default defineComponent({
@@ -116,7 +120,7 @@ export default defineComponent({
         DlJsonEditor,
         DlButton,
         DlTypography,
-        DlTextInput
+        DlInput
     },
     props: {
         status: {

package/src/components/{DlSmartSearch → compound/DlSearches/DlSmartSearch/components}/DlSmartSearchInput.vue

@@ -118,19 +118,23 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, PropType } from 'vue-demi'
-import DlIcon from '../DlIcon.vue'
-import { DlButton } from '../DlButton'
-import { DlDatePicker } from '../DlDatePicker'
-import { DlMenu } from '../DlMenu'
-import { isEllipsisActive } from '../../utils/is-ellipsis-active'
-import { useSizeObserver } from '../../hooks/use-size-observer'
-import { SearchStatus, SyntaxColorSchema } from './types'
+import { DlButton } from '../../../../basic'
+import { DlDatePicker } from '../../../DlDateTime'
+import { DlMenu, DlIcon } from '../../../../essential'
+import { isEllipsisActive } from '../../../../../utils/is-ellipsis-active'
+import { useSizeObserver } from '../../../../../hooks/use-size-observer'
+import { SearchStatus, SyntaxColorSchema } from '../types'
 import { debounce } from 'lodash'
-import { isEligibleToChange, setCaret, updateEditor } from './highlightSyntax'
-import DlTooltip from '../DlTooltip.vue'
+import { DlTooltip } from '../../../../essential'
 import DlSuggestionsDropdown from './DlSuggestionsDropdown.vue'
-import { DateInterval } from '../DlDatePicker/types'
-import { isEndingWithDateIntervalPattern, replaceDateInterval } from './utils'
+import { DateInterval } from '../../../DlDateTime/types'
+import {
+    isEndingWithDateIntervalPattern,
+    replaceDateInterval,
+    isEligibleToChange,
+    setCaret,
+    updateEditor
+} from '../utils'
 
 export default defineComponent({
     components: {

package/src/components/{DlSmartSearch → compound/DlSearches/DlSmartSearch/components}/DlSuggestionsDropdown.vue

@@ -26,9 +26,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import { DlMenu } from '../DlMenu'
-import DlList from '../DlList.vue'
-import { DlListItem } from '../DlListItem'
+import { DlMenu, DlList } from '../../../../essential'
+import { DlListItem } from '../../../../basic'
 
 export default defineComponent({
     components: {

package/src/components/compound/DlSearches/DlSmartSearch/index.ts

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

package/src/components/{DlSmartSearch → compound/DlSearches/DlSmartSearch/utils}/highlightSyntax.ts

@@ -1,7 +1,5 @@
-import { operators } from '../../hooks/use-suggestions'
-import { ColorSchema } from './types'
-import { Alias } from '../../hooks/use-suggestions'
-import { SyntaxColorSchema } from './types'
+import { operators, Alias } from '../../../../../hooks/use-suggestions'
+import { ColorSchema, SyntaxColorSchema } from '../types'
 
 let editor = document.getElementById('editor')
 let styleModel: SyntaxColorSchema

package/src/components/{DlSmartSearch/utils.ts → compound/DlSearches/DlSmartSearch/utils/index.ts}

@@ -1,5 +1,7 @@
-import { dateIntervalPattern } from '../../hooks/use-suggestions'
-import { DateInterval } from '../DlDatePicker/types'
+export * from './highlightSyntax'
+
+import { dateIntervalPattern } from '../../../../../hooks/use-suggestions'
+import { DateInterval } from '../../../DlDateTime/types'
 
 export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     const trimmed = str.trim()

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

@@ -0,0 +1,2 @@
+export * from './DlSearch'
+export * from './DlSmartSearch'

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

@@ -0,0 +1,2 @@
+export * from './DlSearch/types'
+export * from './DlSmartSearch/types'

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

@@ -162,7 +162,7 @@
                             <slot name="before-options" />
                         </dl-item-section>
                     </dl-list-item>
-                    <select-option
+                    <dl-select-option
                         v-if="showAllItems"
                         :multiselect="multiselect"
                         :with-wave="withWave"
@@ -180,8 +180,8 @@
                         <template v-else>
                             {{ computedAllItemsLabel }}
                         </template>
-                    </select-option>
-                    <select-option
+                    </dl-select-option>
+                    <dl-select-option
                         v-for="option in options"
                         :key="getKeyForOption(option)"
                         clickable
@@ -216,7 +216,7 @@
                                     : getOptionLabel(option)
                             }}
                         </template>
-                    </select-option>
+                    </dl-select-option>
                     <dl-list-item v-if="hasAfterOptions && !noOptions">
                         <dl-item-section>
                             <slot name="after-options" />
@@ -245,25 +245,21 @@
 </template>
 
 <script lang="ts">
-import { InputSizes, TInputSizes } from '../../utils/input-sizes'
-import DlIcon from '../DlIcon.vue'
-import DlInfoErrorMessage from '../DlInfoErrorMessage.vue'
-import DlList from '../DlList.vue'
-import { DlListItem } from '../DlListItem'
-import DlItemSection from '../DlItemSection.vue'
-import { DlMenu } from '../DlMenu'
-import DlTooltip from '../DlTooltip.vue'
+import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
+import { DlListItem } from '../../basic'
+import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
+import { DlInfoErrorMessage, DlItemSection } from '../../shared'
 import { defineComponent, isVue2, PropType } from 'vue-demi'
 import {
     getLabel,
     getIconSize,
     optionsValidator,
-    SelectOptionType,
+    DlSelectOptionType,
     getLabelOfSelectedOption
 } from './utils'
-import SelectOption from './SelectOption.vue'
+import DlSelectOption from './components/DlSelectOption.vue'
 import { isEqual } from 'lodash'
-import { getColor } from '../../utils'
+import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({
@@ -275,7 +271,7 @@ export default defineComponent({
         DlListItem,
         DlMenu,
         DlTooltip,
-        SelectOption
+        DlSelectOption
     },
     model: {
         prop: 'modelValue',
@@ -314,8 +310,8 @@ export default defineComponent({
         readonly: { type: Boolean, default: false },
         emitValue: { type: Boolean, default: false }, // We emit the value from the option and compare with it as a modelvalue
         options: {
-            type: Array as PropType<SelectOptionType[]>,
-            default: (): SelectOptionType[] => [],
+            type: Array as PropType<DlSelectOptionType[]>,
+            default: (): DlSelectOptionType[] => [],
             validator: optionsValidator
         },
         capitalizedOptions: { type: Boolean, default: false },

package/src/components/{DlSelect/SelectOption.vue → compound/DlSelect/components/DlSelectOption.vue}

@@ -75,7 +75,7 @@
                 v-for="(child, index) in children"
                 :key="`${componentId}-${getValue(child)}-${index}`"
             >
-                <select-option
+                <dl-select-option
                     :multiselect="multiselect"
                     :count="count"
                     clickable
@@ -98,17 +98,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlListItem } from '../DlListItem'
-import DlItemSection from '../DlItemSection.vue'
-import DlCheckbox from '../DlCheckbox.vue'
-import DlIcon from '../DlIcon.vue'
+import { DlListItem } from '../../../basic'
+import { DlIcon, DlCheckbox } from '../../../essential'
+import { DlItemSection } from '../../../shared'
 import { v4 } from 'uuid'
 import { debounce } from 'lodash'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
 export default defineComponent({
-    name: 'SelectOption',
+    name: 'DlSelectOption',
     components: {
         DlListItem,
         DlItemSection,

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

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

package/src/components/{DlSelect → compound/DlSelect}/utils.ts

@@ -1,6 +1,6 @@
-import { TInputSizes } from '../../utils/input-sizes'
+import { TInputSizes } from '../../../utils/input-sizes'
 
-export type SelectOptionType = string | number | Record<string, any>
+export type DlSelectOptionType = string | number | Record<string, any>
 
 export const getLabel = (option: any) => {
     if (typeof option === 'object' && 'label' in option) {
@@ -18,7 +18,7 @@ const ICON_SIZES = {
 
 export const getLabelOfSelectedOption = (
     valueToSearch: string,
-    options: SelectOptionType[]
+    options: DlSelectOptionType[]
 ) => {
     if (options.length === 0) return ''
 
@@ -32,7 +32,7 @@ export const getLabelOfSelectedOption = (
 
 export const getIconSize = (size: TInputSizes) => ICON_SIZES[size] ?? '14px'
 
-export const optionsValidator = (opts: SelectOptionType[]) => {
+export const optionsValidator = (opts: DlSelectOptionType[]) => {
     return opts.every((opt: string | any) => {
         if (typeof opt === 'string' || typeof opt === 'number') {
             return true

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

@@ -95,8 +95,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlSliderBase, DlSliderInput } from './components/'
-import { DlButton, DlIcon, DlTooltip } from '..'
-import { getColor, between } from '../../utils'
+import { DlButton } from '../../basic'
+import { DlIcon, DlTooltip } from '../../essential'
+import { getColor, between } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlSlider → compound/DlSlider}/components/DlSliderBase.vue

@@ -49,8 +49,8 @@ import {
     position,
     keyCodes,
     between
-} from '../../../utils'
-import touchPanDirective from '../../../directives/TouchPan'
+} from '../../../../utils'
+import touchPanDirective from '../../../../directives/TouchPan'
 
 export default defineComponent({
     name: 'DlSliderBase',

package/src/components/{DlSlider → compound/DlSlider}/useSlider.ts

@@ -6,9 +6,9 @@ import {
     Ref
 } from 'vue-demi'
 
-import { useFormProps, FormProps } from '../../hooks/useForm'
+import { useFormProps, FormProps } from '../../../hooks/useForm'
 
-import { includes, keyCodes, between, position } from '../../utils'
+import { includes, keyCodes, between, position } from '../../../utils'
 
 export interface SliderProps extends FormProps {
     text: string

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

@@ -55,14 +55,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import DlStepperContainer from './DlStepperContainer.vue'
-import DlStepperHeader from '../../components/DlStepper/DlStepperHeader.vue'
-import DlStepperFooter from '../../components/DlStepper/DlStepperFooter.vue'
-import DlStepperSidebar from '../../components/DlStepper/DlStepperSidebar.vue'
-import DlStepperContent from '../../components/DlStepper/DlStepperContent.vue'
-import { StepState } from './interfaces'
-import { Step } from './Step'
-import { getColor } from '../../utils'
+import DlStepperContainer from './components/DlStepperContainer.vue'
+import DlStepperHeader from './components/DlStepperHeader.vue'
+import DlStepperFooter from './components/DlStepperFooter.vue'
+import DlStepperSidebar from './components/DlStepperSidebar.vue'
+import DlStepperContent from './components/DlStepperContent.vue'
+import { StepState } from './models/interfaces'
+import { Step } from './models'
+import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/{DlStepper → compound/DlStepper/components}/DlStepperContent.vue

@@ -35,8 +35,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlChip from '../DlChip'
-import DlTypography from '../DlTypography.vue'
+import { DlChip } from '../../../basic'
+import { DlTypography } from '../../../essential'
 
 export default defineComponent({
     name: 'DlStepperContent',

package/src/components/{DlStepper → compound/DlStepper/components}/DlStepperFooter.vue

@@ -30,8 +30,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlButton } from '../'
-import { ButtonState, ButtonPart, ButtonColors } from '../DlButton/DlButton.vue'
+import { DlButton } from '../../../basic'
+import { ButtonState, ButtonPart, ButtonColors } from '../../../basic/types'
 
 export default defineComponent({
     name: 'DlStepperFooter',

package/src/components/{DlStepper → compound/DlStepper/components}/DlStepperHeader.vue

@@ -19,7 +19,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlTypography, DlButton } from '../'
+import { DlButton } from '../../../basic'
+import { DlTypography } from '../../../essential'
 
 export default defineComponent({
     name: 'DlStepperHeader',

package/src/components/{DlStepper → compound/DlStepper/components}/DlStepperSidebar.vue

@@ -33,10 +33,10 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import { DlListItem } from '../DlListItem'
-import DlItemSection from '../DlItemSection.vue'
-import DlList from '../DlList.vue'
-import { Step } from './Step'
+import { DlListItem } from '../../../basic'
+import { DlItemSection } from '../../../shared'
+import { DlList } from '../../../essential'
+import { Step } from '../models'
 
 export default defineComponent({
     name: 'DlStepperSidebar',

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

@@ -0,0 +1,4 @@
+import DlStepper from './DlStepper.vue'
+import { Stepper, Step } from './models'
+
+export { DlStepper, DlStepper as Stepper, Step as Step }

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

@@ -0,0 +1,3 @@
+export * from './Step'
+export * from './Stepper'
+export * from './interfaces'

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

@@ -0,0 +1,2 @@
+import { StepState } from './models'
+export type { StepState }

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

@@ -6,7 +6,7 @@
 <script lang="ts">
 import { v4 } from 'uuid'
 import { defineComponent, VNode, isVue2 } from 'vue-demi'
-import { textSlot } from '../../utils/render'
+import { textSlot } from '../../../utils/render'
 
 export default defineComponent({
     name: 'DlTabPanels',