@dataloop-ai/components 0.20.183-ds-v3.2 → 0.20.184

package/src/components/essential/DlProgressBar/DlProgressBar.vue

@@ -1,16 +1,13 @@
 <template>
-    <div
-        :id="uuid"
-        class="dl-progress-wrapper"
-        :style="`width: ${width};`"
-    >
+    <div :id="uuid" class="dl-progress-wrapper" :style="`width: ${width};`">
         <p
-            v-if="label"
+            v-if="label || labelSlot"
             data-test-id="progress-label"
             align="left"
             class="dl-progress-bar-label"
         >
             {{ label }}
+            <slot name="label"> </slot>
         </p>
         <div class="progress-container">
             <span
@@ -35,10 +32,7 @@
                 {{ computedValue }}{{ showPercentage ? '%' : '' }}
             </p>
         </div>
-        <div
-            v-if="summary"
-            class="summary"
-        >
+        <div v-if="summary" class="summary">
             <div>
                 {{ summary }}
             </div>
@@ -63,6 +57,10 @@ export default defineComponent({
             type: String,
             default: null
         },
+        labelSlot: {
+            type: Boolean,
+            default: false
+        },
         showValue: {
             type: Boolean,
             required: false,

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -7,14 +7,12 @@
         }`"
     >
         <label
-            v-if="hasLeftLabel"
+            v-if="!!leftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="left-label">
-                {{ leftLabel }}
-            </slot>
+            {{ leftLabel }}
         </label>
         <span
             class="dl-switch-container"
@@ -37,14 +35,12 @@
             />
         </span>
         <label
-            v-if="hasRightLabel"
+            v-if="!!rightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            <slot name="right-label">
-                {{ rightLabel }}
-            </slot>
+            {{ rightLabel }}
         </label>
     </div>
 </template>
@@ -147,12 +143,6 @@ export default defineComponent({
                 ? this.index === -1
                 : toRaw(this.modelValue) === toRaw(this.falseValue)
         },
-        hasLeftLabel(): boolean {
-            return !!this.leftLabel || !!this.$slots['left-label']
-        },
-        hasRightLabel(): boolean {
-            return !!this.rightLabel || !!this.$slots['right-label']
-        },
         cssVars(): Record<string, string> {
             return {
                 '--dl-checkbox-height': `${this.size}px`,

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -124,9 +124,7 @@ export default defineComponent({
 
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
-        const scrollSizeItem: Ref<number> = ref(
-            virtualScrollItemSize.value || 40
-        )
+        const scrollSizeItem: Ref<number> = ref(40)
 
         const isDefined = (v: any) => v !== undefined && v !== null
 

package/src/demos/DlDateTimeRangeDemo.vue

@@ -176,26 +176,6 @@
                 @change="handleModelValueUpdate"
             />
         </div>
-        <div style="width: 500px; margin-top: 30px">
-            <div style="margin-bottom: 10px; font-weight: bold">
-                Inline Mode
-            </div>
-            <dl-date-time-range
-                v-model="date"
-                :type="type"
-                width="100%"
-                :available-range="range ? availableRange : null"
-                :mode="mode"
-                :show-time="showTime"
-                :auto-close="autoClose"
-                :including-current-month="includesCurrentMonthEnd"
-                :should-clear-select-first-option="shouldClearSelectFirstOption"
-                :disabled-type="type === 'day' ? 'month' : 'day'"
-                view-mode="inline"
-                @set-type="handleSetType"
-                @change="handleModelValueUpdate"
-            />
-        </div>
     </div>
 </template>
 <script lang="ts">

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -42,7 +42,6 @@
 
         <dl-smart-search-input
             v-model="queryObject"
-            no-tooltip
             :aliases="aliases"
             :schema="schema"
             :color-schema="colorSchema"

package/src/components/compound/DlDateTime/DlDateTimeRange/DateTimeRangeContent.vue

@@ -1,177 +0,0 @@
-<template>
-    <div class="dl-date-time-range--card">
-        <div v-if="mode === 'multi'" class="dl-date-time-range--card_sidebar">
-            <card-sidebar
-                v-if="typeState === 'day'"
-                :options="sidebarDayOptions"
-                :current-option="currentSidebarOption"
-                @click="handleDayTypeOptionClick"
-            />
-            <card-sidebar
-                v-else
-                :options="sidebarMonthOptions"
-                :current-option="currentSidebarOption"
-                @click="handleMonthTypeOptionClick"
-            />
-        </div>
-        <div
-            class="dl-date-time-range--card_content"
-            :style="cardContentStyles"
-        >
-            <dl-date-picker
-                :model-value="dateInterval"
-                :type="typeState"
-                :available-range="availableRange"
-                :disabled="isInputDisabled"
-                :normalize-calendars="normalizeCalendars"
-                :active-date-from="activeDateFrom"
-                :active-date-to="activeDateTo"
-                @update:model-value="updateDateIntervalWithAutoClose"
-                @update:from-to-date="updateFromToDate"
-            />
-            <dl-time-picker
-                v-if="showTime && typeState === 'day'"
-                :disabled="isInputDisabled"
-                :model-value="dateInterval"
-                @update:model-value="updateDateInterval"
-            />
-
-            <dl-button
-                v-if="!hideClearButton"
-                size="s"
-                outlined
-                class="dl-date-time-range--button"
-                @click="handleClear"
-            >
-                <span style="text-transform: capitalize"> Clear </span>
-            </dl-button>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { DlTimePicker } from '../DlTimePicker'
-import { DateInterval } from '../types'
-import CardSidebar from './CardSidebar.vue'
-import { DayTypeOption, MonthTypeOption } from './types'
-import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
-import { CalendarDate } from '../DlDatePicker/models/CalendarDate'
-import { DlButton } from '../../../basic'
-
-export default defineComponent({
-    components: {
-        CardSidebar,
-        DlDatePicker,
-        DlTimePicker,
-        DlButton
-    },
-    props: {
-        mode: {
-            type: String as PropType<'single' | 'multi'>,
-            required: true
-        },
-        typeState: {
-            type: String as PropType<'day' | 'month'>,
-            required: true
-        },
-        sidebarDayOptions: {
-            type: Array as PropType<DayTypeOption[]>,
-            required: true
-        },
-        sidebarMonthOptions: {
-            type: Array as PropType<MonthTypeOption[]>,
-            required: true
-        },
-        currentSidebarOption: {
-            type: String,
-            required: true
-        },
-        dateInterval: {
-            type: Object as PropType<DateInterval | null>,
-            default: null
-        },
-        availableRange: {
-            type: Object as PropType<Partial<DateInterval> | null>,
-            default: null
-        },
-        isInputDisabled: {
-            type: Boolean,
-            default: false
-        },
-        normalizeCalendars: {
-            type: Boolean,
-            default: false
-        },
-        activeDateFrom: {
-            type: Object as PropType<CalendarDate | null>,
-            default: null
-        },
-        activeDateTo: {
-            type: Object as PropType<CalendarDate | null>,
-            default: null
-        },
-        showTime: {
-            type: Boolean,
-            default: false
-        },
-        cardContentStyles: {
-            type: Object as PropType<Record<string, any>>,
-            default: () => ({})
-        },
-        hideClearButton: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: [
-        'day-type-option-click',
-        'month-type-option-click',
-        'update-date-interval',
-        'update-date-interval-with-auto-close',
-        'update-from-to-date',
-        'clear'
-    ],
-    methods: {
-        handleDayTypeOptionClick(option: DayTypeOption) {
-            this.$emit('day-type-option-click', option)
-        },
-        handleMonthTypeOptionClick(option: MonthTypeOption) {
-            this.$emit('month-type-option-click', option)
-        },
-        updateDateInterval(value: DateInterval | null) {
-            this.$emit('update-date-interval', value)
-        },
-        updateDateIntervalWithAutoClose(value: DateInterval) {
-            this.$emit('update-date-interval-with-auto-close', value)
-        },
-        updateFromToDate(value?: { from: CalendarDate; to: CalendarDate }) {
-            this.$emit('update-from-to-date', value)
-        },
-        handleClear() {
-            this.$emit('clear')
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.dl-date-time-range--card {
-    background-color: var(--dl-color-bg);
-    z-index: 1;
-    display: flex;
-    border-radius: 2px;
-}
-
-.dl-date-time-range--card_content {
-    width: var(--card-content-width);
-}
-
-.dl-date-time-range--button {
-    display: flex;
-    margin-left: auto;
-    width: fit-content;
-    margin-right: 16px;
-    margin-bottom: 16px;
-}
-</style>