@dataloop-ai/components 0.15.7 → 0.16.0

package/src/demo/{DlTextInputDemo.vue → DlInputDemo.vue}

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <dl-text-input
+        <dl-input
             v-model="textInputValue"
             style="width: 220px"
             placeholder="Select option"
@@ -20,7 +20,7 @@
             show-counter
             :max-length="20"
         />
-        <dl-text-input
+        <dl-input
             v-model="passFieldValue"
             title="Password"
             style="width: 220px"
@@ -31,7 +31,7 @@
             error-message="The password entered is incorrect."
             info-message="This won't show, error is true"
         />
-        <dl-text-input
+        <dl-input
             v-model="warningFieldValue"
             title="Warning Example"
             style="width: 220px"
@@ -42,7 +42,7 @@
             info-message="This won't show, error is true"
             optional
         />
-        <dl-text-input
+        <dl-input
             v-model="errorFieldValue"
             title="Error Example"
             style="width: 220px"
@@ -54,7 +54,7 @@
             warning-message="This won't show, error is true"
             info-message="This won't show, error is true"
         />
-        <dl-text-input
+        <dl-input
             style="width: 220px"
             placeholder="Select option"
             title="Min"
@@ -66,11 +66,11 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlTextInput } from '../components'
+import { DlInput } from '../components'
 export default defineComponent({
-    name: 'DlTextInputDemo',
+    name: 'DlInputDemo',
     components: {
-        DlTextInput
+        DlInput
     },
     setup() {
         const textInputValue = ref<string>('')

package/src/demo/DlKpiDemo.vue

@@ -0,0 +1,261 @@
+<template>
+    <div style="width: 90%">
+        <div class="inlineKpi">
+            <div
+                v-for="(kpi, kpiIndex) in kpiItems.slice(0, 2)"
+                :key="kpiIndex"
+                class="autoWidth"
+            >
+                <dl-kpi
+                    :counter="kpi.counter"
+                    :title="kpi.title"
+                    :info-message="kpi.infoMessage"
+                    :progress="kpi.progress"
+                    :with-border="true"
+                    :with-progress-bar="true"
+                />
+            </div>
+        </div>
+        <div class="inlineKpi">
+            <div
+                v-for="(kpiThree, kpiThreeIndex) in kpiItems.slice(0, 3)"
+                :key="kpiThreeIndex"
+                class="autoWidth"
+            >
+                <dl-kpi
+                    :counter="kpiThree.counter"
+                    :title="kpiThree.title"
+                    :info-message="kpiThree.infoMessage"
+                    :progress="kpiThree.progress"
+                    :with-border="true"
+                />
+            </div>
+        </div>
+        <div class="inlineKpi">
+            <div
+                v-for="(kpiFour, kpiFourIndex) in kpiItems.slice(0, 4)"
+                :key="kpiFourIndex"
+                class="autoWidth"
+            >
+                <dl-kpi
+                    :counter="kpiFour.counter"
+                    :title="kpiFour.title"
+                    :info-message="kpiFour.infoMessage"
+                    :progress="kpiFour.progress"
+                    :with-border="true"
+                />
+            </div>
+        </div>
+        <div class="inlineKpi">
+            <div
+                v-for="(kpiFive, kpiFiveIndex) in kpiItems.slice(0, 5)"
+                :key="kpiFiveIndex"
+                class="autoWidth"
+            >
+                <dl-kpi
+                    :counter="kpiFive.counter"
+                    :title="kpiFive.title"
+                    :info-message="kpiFive.infoMessage"
+                    :progress="kpiFive.progress"
+                    :is-small="true"
+                />
+            </div>
+        </div>
+        <div class="inlineKpi">
+            <div
+                v-for="(kpiSix, kpiSixIndex) in kpiItems.slice(0, 6)"
+                :key="kpiSixIndex"
+                class="autoWidth"
+            >
+                <dl-kpi
+                    :counter="kpiSix.counter"
+                    :counter-font-size="'1em'"
+                    :title="kpiSix.title"
+                    :info-message="kpiSix.infoMessage"
+                    :progress="kpiSix.progress"
+                    :with-border="false"
+                    :with-progress-bar="true"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlKpi } from '../components'
+import { DlKpiCounterFormat, DlKpiItem } from '../components/types'
+
+const kpiData: DlKpiItem[] = [
+    {
+        counter: {
+            value: 200000000,
+            format: DlKpiCounterFormat.short
+        },
+        title: 'Complete Complete Complete Complete Complete Complete Complete Complete',
+        infoMessage: 'info message'
+    },
+    {
+        counter: {
+            value: 200000000,
+            format: DlKpiCounterFormat.long
+        },
+        title: 'Complete',
+        infoMessage: 'info message',
+        progress: {
+            value: 30
+        }
+    },
+    {
+        counter: {
+            value: '154H:35M:20s',
+            format: DlKpiCounterFormat.hm
+        },
+        title: 'Complete Complete Complete Complete Complete Complete Complete Complete',
+        infoMessage: 'info message',
+        progress: {
+            value: 40,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: '154h:35m:20s',
+            format: DlKpiCounterFormat.hms
+        },
+        title: 'Complete',
+        infoMessage: 'info message',
+        progress: {
+            value: 50,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: 73,
+            format: DlKpiCounterFormat.short
+        },
+        title: 'Complete',
+        infoMessage: 'info message',
+        progress: {
+            value: 60,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: null,
+            format: DlKpiCounterFormat.long
+        },
+        title: null,
+        infoMessage: null,
+        progress: {
+            value: null,
+            text: null
+        }
+    },
+    {
+        counter: {
+            value: 0,
+            format: DlKpiCounterFormat.long
+        },
+        title: 'Complete',
+        infoMessage: 'info message',
+        progress: {
+            value: 80,
+            text: '75/100 Items'
+        }
+    }
+]
+const kpiTimeData: DlKpiItem[] = [
+    {
+        counter: {
+            value: '',
+            format: DlKpiCounterFormat.hms
+        },
+        title: 'Complete Complete Complete Complete Complete Complete Complete Complete'
+    },
+    {
+        counter: {
+            value: '35m:20s',
+            format: DlKpiCounterFormat.hm
+        },
+        title: 'Complete',
+        progress: {
+            value: 30
+        }
+    },
+    {
+        counter: {
+            value: '154h:35m:20s',
+            format: DlKpiCounterFormat.h
+        },
+        title: 'Complete',
+        progress: {
+            value: 40,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: '154h:35m:20s',
+            format: DlKpiCounterFormat.ms
+        },
+        title: 'Complete',
+        progress: {
+            value: 50,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: '154h:35m:20s',
+            format: DlKpiCounterFormat.m
+        },
+        title: 'Complete',
+        progress: {
+            value: 60,
+            text: '75/100 Items'
+        }
+    },
+    {
+        counter: {
+            value: '',
+            format: DlKpiCounterFormat.s
+        },
+        title: '',
+        progress: {
+            value: 0,
+            text: '75/100 Items'
+        }
+    }
+]
+
+export default defineComponent({
+    name: 'DlKpiDemo',
+    components: {
+        DlKpi
+    },
+    setup() {
+        const kpiItems: DlKpiItem[] = kpiData
+        const kpiTimeItems: DlKpiItem[] = kpiTimeData
+
+        return {
+            kpiItems,
+            kpiTimeItems
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.inlineKpi {
+    display: flex;
+    width: 100%;
+    gap: 30px;
+}
+.autoWidth {
+    width: min(100%, 50rem);
+    height: 100%;
+}
+</style>

package/src/demo/DlOptionGroupDemo.vue

@@ -50,7 +50,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DlOptionGroup, DlMenu, DlButton } from '../components'
-import { OptionGroupOptions } from '../components/DlOptionGroup'
+import { DlOptionGroupOptions } from '../components/types'
 export default defineComponent({
     name: 'DlOptionGroupDemo',
     components: {
@@ -62,7 +62,7 @@ export default defineComponent({
         const optionValue = ref<number>(1)
         const switchValue = ref<number[]>([1, 3])
 
-        const options = ref<OptionGroupOptions>([
+        const options = ref<DlOptionGroupOptions>([
             { label: 'Option 1', value: 1, color: 'dl-color-positive' },
             { label: 'Option 2', value: 2 },
             { label: 'Option 3', value: 3, tooltip: 'Option tooltip' },

package/src/demo/DlPaginationDemo.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlPagination } from '../components/DlPagination'
+import { DlPagination } from '../components'
 
 export default defineComponent({
     name: 'DlPaginationDemo',

package/src/demo/DlPopupDemo.vue

@@ -35,9 +35,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlButton } from '../components/DlButton'
-import DlPopup from '../components/DlPopup'
-import DlTextArea from '../components/DlTextArea.vue'
+import { DlButton, DlPopup, DlTextArea } from '../components'
+
 export default defineComponent({
     components: {
         DlButton,

package/src/demo/DlSpinnerDemo.vue

@@ -10,7 +10,7 @@
 
 <script>
 import { defineComponent } from 'vue-demi'
-import DlSpinner from '../components/DlSpinner.vue'
+import { DlSpinner } from '../components'
 
 export default defineComponent({
     components: {

package/src/demo/DlStepperDemo/CenteredStepperInDialogBox.vue

@@ -123,16 +123,9 @@ import InstructionStep from './steps/InstructionStep.vue'
 import DataStep from './steps/DataStep.vue'
 import AssignmentsStep from './steps/AssignmentsStep.vue'
 import QualityStep from './steps/QualityStep.vue'
-import {
-    DlButton,
-    DlStepper,
-    Stepper,
-    Step,
-    StepState,
-    DlTypography,
-    DlChip,
-    DlCounters
-} from '../..'
+import { DlButton, DlStepper, DlTypography, DlChip, DlCounters } from '../..'
+import { StepState } from '../../types'
+import { Stepper, Step } from '../../components/compound/DlStepper/models'
 import { getColor } from '../../utils'
 
 class CustomStepper extends Stepper {

package/src/demo/DlStepperDemo/SimpleStepper.vue

@@ -103,15 +103,9 @@ import InstructionStep from './steps/InstructionStep.vue'
 import DataStep from './steps/DataStep.vue'
 import AssignmentsStep from './steps/AssignmentsStep.vue'
 import QualityStep from './steps/QualityStep.vue'
-import {
-    DlStepper,
-    Stepper,
-    Step,
-    StepState,
-    DlTypography,
-    DlChip,
-    DlCounters
-} from '../..'
+import { DlStepper, DlTypography, DlChip, DlCounters } from '../..'
+import { StepState } from '../../types'
+import { Stepper, Step } from '../../components/compound/DlStepper/models'
 
 class CustomStepper extends Stepper {
     constructor(steps: Step[]) {

package/src/demo/DlStepperDemo/StepperInDialogBox.vue

@@ -123,16 +123,9 @@ import InstructionStep from './steps/InstructionStep.vue'
 import DataStep from './steps/DataStep.vue'
 import AssignmentsStep from './steps/AssignmentsStep.vue'
 import QualityStep from './steps/QualityStep.vue'
-import {
-    DlButton,
-    DlStepper,
-    Stepper,
-    Step,
-    StepState,
-    DlTypography,
-    DlChip,
-    DlCounters
-} from '../..'
+import { DlButton, DlStepper, DlTypography, DlChip, DlCounters } from '../..'
+import { StepState } from '../../types'
+import { Stepper, Step } from '../../components/compound/DlStepper/models'
 import { getColor } from '../../utils'
 
 class CustomStepper extends Stepper {

package/src/demo/DlStepperDemo/steps/DataStep.vue

@@ -65,7 +65,7 @@
                         color="dl-color-separator"
                         text-color="dl-color-darker"
                     />
-                    <dl-text-input
+                    <dl-input
                         v-model="percentage"
                         style="width: 60px; margin: 0 10px 0 15px"
                         size="m"
@@ -109,7 +109,7 @@ import { defineComponent } from 'vue-demi'
 import {
     DlButton,
     DlCheckbox,
-    DlTextInput,
+    DlInput,
     DlTypography,
     DlOptionGroup,
     DlSelect,
@@ -120,7 +120,7 @@ export default defineComponent({
     components: {
         DlButton,
         DlTypography,
-        DlTextInput,
+        DlInput,
         DlOptionGroup,
         DlSelect,
         DlCheckbox,

package/src/demo/DlStepperDemo/steps/GeneralStep.vue

@@ -22,7 +22,7 @@
             />
         </div>
         <div class="inputs-container">
-            <dl-text-input
+            <dl-input
                 without-root-padding
                 required
                 title="Name"
@@ -57,7 +57,7 @@
                 required
                 :options="['High', 'Medium', 'Low']"
             />
-            <dl-text-input
+            <dl-input
                 without-root-padding
                 title="Completion Due Date"
                 placeholder="dd/mm/yy"
@@ -70,7 +70,7 @@
 import { defineComponent } from 'vue-demi'
 import {
     DlButton,
-    DlTextInput,
+    DlInput,
     DlSelect,
     DlOptionGroup,
     DlTypography
@@ -80,7 +80,7 @@ export default defineComponent({
         DlButton,
         DlTypography,
         DlOptionGroup,
-        DlTextInput,
+        DlInput,
         DlSelect
     },
     emits: ['reset-click', 'error-click', 'complete-click', 'warning-click'],

package/src/demo/DlTableDemo.vue

@@ -29,7 +29,7 @@
                     :model-value="resizableState"
                     @update:model-value="updateResizableState"
                 />
-                <dl-text-input
+                <dl-input
                     v-model="filter"
                     title="Filter"
                     style="width: 220px"
@@ -120,7 +120,7 @@
 </template>
 
 <script lang="ts">
-import { DlTable, DlOptionGroup, DlSwitch, DlTextInput } from '../components'
+import { DlTable, DlOptionGroup, DlSwitch, DlInput } from '../components'
 import { defineComponent } from 'vue-demi'
 import { times } from 'lodash'
 
@@ -280,7 +280,7 @@ export default defineComponent({
         DlTable,
         DlSwitch,
         DlOptionGroup,
-        DlTextInput
+        DlInput
     },
     data() {
         return {

package/src/demo/DlTabsDemo.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlTabs, DlTabPanel, DlTabPanels } from '../components'
-import { TabDetails } from '../components/DlTabs/types'
+import { DlTabDetails } from '../components/types'
 
 export default defineComponent({
     components: {
@@ -46,7 +46,7 @@ export default defineComponent({
                 { label: 'Six', name: 'six' },
                 { label: 'Seven', name: 'seven' },
                 { label: 'Eight', name: 'eight' }
-            ] as TabDetails[]
+            ] as DlTabDetails[]
         }
     },
     methods: {

package/src/demo/{DlToastMessageDemo.vue → DlToastDemo.vue}

@@ -2,16 +2,16 @@
     <div style="width: 950px; padding-top: 20px">
         <div class="flex">
             <div>
-                <dl-text-area
+                <dl-area
                     v-model="message"
                     title="Message"
                 />
-                <dl-text-input
+                <dl-input
                     v-model="duration"
                     type="number"
                     title="Duration seconds"
                 />
-                <dl-text-input
+                <dl-input
                     v-model="classItem"
                     title="Custom class for toast item"
                 />
@@ -92,21 +92,15 @@
 </template>
 
 <script lang="ts">
-import { DlButton } from '../components'
-import { DlToast } from '../components/DlToastMessage'
 import { defineComponent, ref } from 'vue-demi'
-import DlTextInput from '../components/DlTextInput.vue'
-import DlRadio from '../components/DlRadio.vue'
-import DlTextArea from '../components/DlTextArea.vue'
-import DlSwitch from '../components/DlSwitch.vue'
+import { DlButton, DlToast, DlInput, DlRadio, DlSwitch } from '../components'
 
 export default defineComponent({
     name: 'DlToast',
     components: {
         DlSwitch,
-        DlTextArea,
         DlRadio,
-        DlTextInput,
+        DlInput,
         DlButton
     },
     setup() {

package/src/demo/DlTypographyDemo.vue

@@ -39,9 +39,8 @@
 </template>
 
 <script lang="ts">
-import DlTypography from '../components/DlTypography.vue'
-import { DlButton } from '../components/DlButton'
 import { defineComponent } from 'vue-demi'
+import { DlButton, DlTypography } from '../components'
 
 export default defineComponent({
     name: 'DlTypographyDemo',

package/src/demo/DlWidgetDemo.vue

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

package/src/demo/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -58,7 +58,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlSmartSearch, DlCheckbox } from '../../components'
-import { Query } from '../../components/DlSmartSearch/types'
+import { Query } from '../../components/types'
 import { aliases, schema } from './schema'
 
 export default defineComponent({

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
 }