@dataloop-ai/components 0.16.56 → 0.16.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.56",
+  "version": "0.16.58",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlButton/DlButton.vue

@@ -10,7 +10,7 @@
             :tabindex="tabIndex"
             :aria-disabled="disabled ? 'true' : 'false'"
             :disabled="disabled"
-            :style="[cssButtonVars, computedStyles]"
+            :style="[computedStyles]"
             style="pointer-events: auto"
             class="dl-button"
             @click="onClick"

package/src/components/basic/DlPopup/DlPopup.vue

@@ -20,12 +20,14 @@
                     @move="movePopup"
                 />
                 <popup-header
-                    v-if="hasHeaderSlot"
+                    v-if="
+                        hasHeaderSlot || hasCloseButtonSlot || withCloseButton
+                    "
                     :title="title"
                     :additional-info="additionalInfo"
                     :subtitle="subtitle"
                     :with-close-button="withCloseButton"
-                    @hide-button-clik="handleHideClick"
+                    @close-button-click="handleCloseClick"
                 >
                     <template
                         v-if="hasHeaderSlot"
@@ -34,10 +36,10 @@
                         <slot name="header" />
                     </template>
                     <template
-                        v-if="hasHideButtonSlot"
-                        #hide-button
+                        v-if="hasCloseButtonSlot"
+                        #close-button
                     >
-                        <slot name="hide-button" />
+                        <slot name="close-button" />
                     </template>
                 </popup-header>
                 <div class="popup-content">
@@ -146,7 +148,6 @@ export default defineComponent({
         withCloseButton: { type: Boolean, default: false },
         preventHide: { type: Boolean, default: false },
         disableCloseByEsc: { type: Boolean, default: false },
-        hideOnClickOutside: { type: Boolean, default: false },
         self: {
             type: String,
             default: 'top middle',
@@ -169,7 +170,7 @@ export default defineComponent({
         draggable: Boolean
     },
     emits: [
-        'hide-button-click',
+        'close-button-click',
         'show',
         'before-show',
         'hide',
@@ -205,8 +206,8 @@ export default defineComponent({
 
         const hasHeaderSlot = computed(() => slots.header !== undefined)
 
-        const hasHideButtonSlot = computed(
-            () => slots['hide-button'] !== undefined
+        const hasCloseButtonSlot = computed(
+            () => slots['close-button'] !== undefined
         )
 
         const { hide } = useModelToggle({
@@ -230,7 +231,7 @@ export default defineComponent({
             innerRef,
             onClickOutside: (e: AnchorEvent) =>
                 handleClickOutside(e, {
-                    persistent: !props.hideOnClickOutside,
+                    persistent: props.persistent,
                     showing: showing.value,
                     fn: hide
                 })
@@ -421,11 +422,11 @@ export default defineComponent({
             )
         }
 
-        function handleHideClick(e: Event) {
+        function handleCloseClick(e: Event) {
             if (!props.preventHide) {
                 hide(e as AnchorEvent)
             }
-            proxy.$emit('hide-button-click', e)
+            proxy.$emit('close-button-click', e)
         }
 
         onBeforeUnmount(anchorCleanup as any)
@@ -438,8 +439,8 @@ export default defineComponent({
             portalIsAccessible,
             anchorEl,
             showing,
-            handleHideClick,
-            hasHideButtonSlot,
+            handleCloseClick,
+            hasCloseButtonSlot,
             hasFooterSlot,
             movePopup,
             hasHeaderSlot,

package/src/components/basic/DlPopup/components/PopupHeader.vue

@@ -27,12 +27,12 @@
             </span>
             <span
                 v-if="withCloseButton"
-                class="hide-button"
-                @click="handleHide"
+                class="close-button"
+                @click="handleClick"
             >
                 <slot
-                    v-if="hasHideButtonSlot"
-                    name="hide-button"
+                    v-if="hasCloseButtonSlot"
+                    name="close-button"
                 />
                 <dl-icon
                     v-else
@@ -61,13 +61,13 @@ export default defineComponent({
         additionalInfo: { type: String, default: '' },
         withCloseButton: { type: Boolean, default: false }
     },
-    emits: ['hide-button-clik'],
+    emits: ['close-button-click'],
     computed: {
         hasHeaderSlot(): boolean {
             return this.$slots.header !== undefined
         },
-        hasHideButtonSlot(): boolean {
-            return this.$slots['hide-button'] !== undefined
+        hasCloseButtonSlot(): boolean {
+            return this.$slots['close-button'] !== undefined
         },
         hasAdditionalInfo(): boolean {
             return this.additionalInfo !== ''
@@ -81,8 +81,8 @@ export default defineComponent({
         }
     },
     methods: {
-        handleHide(e: Event) {
-            this.$emit('hide-button-clik', e)
+        handleClick(e: Event) {
+            this.$emit('close-button-click', e)
         }
     }
 })
@@ -107,7 +107,7 @@ export default defineComponent({
     color: var(--dl-color-darker);
 }
 
-.hide-button {
+.close-button {
     display: flex;
     justify-content: center;
     align-items: center;

package/src/components/compound/DlRange/DlRange.vue

@@ -177,14 +177,8 @@ export default defineComponent({
         normalizeModel()
 
         const initialValue = {
-            min:
-                props.modelValue.min === null
-                    ? props.min
-                    : between(props.modelValue.min, props.min, props.max),
-            max:
-                props.modelValue.max === null
-                    ? props.max
-                    : between(props.modelValue.max, props.min, props.max)
+            min: props.min,
+            max: props.max
         }
 
         const modelMinRatio = computed(() =>
@@ -402,7 +396,7 @@ export default defineComponent({
 
             model.value.min = initialValue.min!
             model.value.max = initialValue.max!
-            emit('update:model-value', { ...model.value })
+            updateValue()
         }
 
         return {

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

@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash'
 import { between, includes, KEY_CODE } from '../../../utils'
 import { Dragging, dragType } from '../DlSlider/useSlider'
 
@@ -12,12 +13,10 @@ export function updateValue(
     emitFn: (...args: any[]) => any,
     change?: boolean
 ) {
-    if (state.min !== props.min || state.max !== props.max) {
-        emitFn('update:model-value', { ...state })
-    }
+    emitFn('update:model-value', cloneDeep(state))
 
     if (change === true) {
-        emitFn('change', { ...state })
+        emitFn('change', cloneDeep(state))
     }
 }
 

package/src/components/compound/DlSearches/DlSearch/DlSearch.vue

@@ -14,7 +14,7 @@
             :placeholder="placeholder"
             :auto-suggest-items="autoSuggestItems"
             :highlight-matches="highlightMatches"
-            :without-root-padding="withoutRootPadding"
+            :dense="dense"
             :suggest-menu-width="suggestMenuWidth"
             @input="onChange"
             @focus="onFocus"
@@ -81,7 +81,7 @@ export default defineComponent({
             default: (): string[] => []
         },
         highlightMatches: { type: Boolean, default: false },
-        withoutRootPadding: { type: Boolean, default: false },
+        dense: { type: Boolean, default: false },
         withSearchBtn: { type: Boolean, default: false },
         suggestMenuWidth: { type: String, default: 'auto' }
     },

package/src/demos/DlInputDemo.vue

@@ -90,13 +90,16 @@
             error-message="Error message is the strongest."
         />
         <p>input in a row with button</p>
-        <div class="row">
+        <div
+            class="row"
+            style="align-items: center"
+        >
             <dl-input
                 class="input-parts"
                 style="width: 440px"
                 placeholder="Select option"
                 title="Min"
-                without-root-padding
+                dense
                 size="s"
             />
             <dl-button

package/src/demos/DlPopupDemo.vue

@@ -6,7 +6,7 @@
                 additional-info="Some additional information"
                 subtitle="Some text for better explanation."
                 with-close-button
-                @hide-button-click="handleClear"
+                @close-button-click="handleClear"
             >
                 <dl-text-area
                     v-model="text"
@@ -15,12 +15,36 @@
                     placeholder="Type your text"
                     width="203px"
                 />
-                <template #hide-button>
+                <template #footer>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
+        <div />
+        <dl-button label="Open Popup persistent">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                persistent
+            >
+                <dl-text-area
+                    v-model="text"
+                    :max-length="100"
+                    show-counter
+                    placeholder="Type your text"
+                    width="203px"
+                />
+                <template #close-button>
                     <dl-button
                         flat
                         style="padding-bottom: 0; padding-top: 0"
                         label="clear"
                         size="m"
+                        @click="handleClear"
                     />
                 </template>
                 <template #footer>
@@ -30,7 +54,6 @@
                 </template>
             </dl-popup>
         </dl-button>
-        <div />
     </div>
 </template>
 <script lang="ts">

package/src/demos/DlRangeDemo.vue

@@ -4,10 +4,9 @@
             v-model="value"
             width="500px"
             :min="0"
-            :max="100"
-            :step="5"
+            :max="1"
+            :step="0.1"
             text="Range"
-            :snap="true"
             :readonly="readonly"
             :disabled="disabled"
             name="range"
@@ -20,6 +19,9 @@
                 Disable: {{ disabled }}
             </button>
         </div>
+        <div>
+            {{ value }}
+        </div>
     </div>
 </template>
 
@@ -34,11 +36,16 @@ export default defineComponent({
     },
     data() {
         return {
-            value: { min: 0, max: 100 },
+            value: { min: 0, max: 0.5 },
             disabled: false,
             readonly: false
         }
     },
+    watch: {
+        value(val) {
+            console.log('value changed: ', val)
+        }
+    },
     template: 'dl-range-demo'
 })
 </script>

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

@@ -69,7 +69,7 @@
                         v-model="percentage"
                         style="width: 60px; margin: 0 10px 0 15px"
                         size="m"
-                        without-root-padding
+                        dense
                         disable-clear-btn
                     />
                     <dl-typography color="dl-color-medium">Items Limit</dl-typography>

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

@@ -23,7 +23,7 @@
         </div>
         <div class="inputs-container">
             <dl-input
-                without-root-padding
+                dense
                 required
                 title="Name"
             />
@@ -58,7 +58,7 @@
                 :options="['High', 'Medium', 'Low']"
             />
             <dl-input
-                without-root-padding
+                dense
                 title="Completion Due Date"
                 placeholder="dd/mm/yy"
             />

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -3,7 +3,7 @@
         <div style="margin: 40px 0">
             <dl-checkbox
                 v-model="switchState"
-                without-root-padding
+                dense
                 label="Disabled"
             />
         </div>