@dataloop-ai/components 0.14.3 → 0.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.14.3",
+  "version": "0.14.5",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@dataloop-ai/icons": "^2.0.13",
     "@types/lodash": "^4.14.184",
-    "chart.js": "^4.2.1",
+    "chart.js": "^3.9.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "sass": "^1.51.0",

package/src/components/DlChart/Doughnut/DlDoughnutChartLegend.vue

@@ -271,8 +271,8 @@ export default defineComponent({
             &__counter {
                 display: flex;
                 width: 100%;
-                text-align: end;
-                justify-content: end;
+                text-align: flex-end;
+                justify-content: flex-end;
                 color: var(--dl-color-darker);
             }
         }

package/src/components/DlDialogBox/DlDialogBox.vue

@@ -188,6 +188,14 @@ export default defineComponent({
         height: 100vh !important;
         border-radius: 0px;
     }
+    &--right {
+        position: absolute !important;
+        right: 0;
+    }
+    &--left {
+        position: absolute !important;
+        left: 0;
+    }
 }
 
 .header {

package/src/components/DlDialogBox/DlDialogBoxHeader.vue

@@ -10,11 +10,21 @@
                 style="padding: 0; margin-bottom: 10px"
                 @click.stop.prevent="$emit('onClose')"
             />
-            <h2 class="title">
-                {{ title }}
+            <h2
+                v-if="hasTitle"
+                class="title"
+            >
+                <slot name="title">
+                    {{ title }}
+                </slot>
             </h2>
-            <p class="subtitle">
-                {{ subtitle }}
+            <p
+                v-if="hasSubtitle"
+                class="subtitle"
+            >
+                <slot name="subtitle">
+                    {{ subtitle }}
+                </slot>
             </p>
         </div>
         <dl-button
@@ -30,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { computed, defineComponent } from 'vue-demi'
 import { DlButton } from '../DlButton'
 
 export default defineComponent({
@@ -44,7 +54,12 @@ export default defineComponent({
         closeButton: { type: Boolean, default: true },
         hasBackButton: Boolean
     },
-    emits: ['onClose']
+    emits: ['onClose'],
+    setup(props, { slots }) {
+        const hasTitle = computed(() => !!props.title || !!slots.title)
+        const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
+        return { hasTitle, hasSubtitle }
+    }
 })
 </script>
 
@@ -60,6 +75,7 @@ export default defineComponent({
     font-size: var(--dl-font-size-h2);
     margin: 0;
     color: var(--dl-color-darker);
+    line-height: 2rem !important;
 }
 
 .subtitle {

package/src/components/DlDropdownButton.vue

@@ -78,7 +78,8 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            fit
+            fit-container
+            :fit-content="fitContent"
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -142,7 +143,8 @@
             :class="contentClass"
             :style="contentStyle"
             :cover="cover"
-            fit
+            fit-container
+            :fit-content="fitContent"
             :persistent="persistent"
             :auto-close="autoClose"
             :anchor="menuAnchor"
@@ -227,7 +229,8 @@ export default defineComponent({
         flat: Boolean,
         uppercase: Boolean,
         outlined: Boolean,
-        padding: { type: String, default: '5px' }
+        padding: { type: String, default: '5px' },
+        fitContent: Boolean
     },
     emits: [
         'update:model-value',
@@ -349,19 +352,6 @@ export default defineComponent({
             }
         }
 
-        // expose public methods
-        Object.assign(proxy, {
-            show,
-            hide,
-            toggle,
-            onClickHide,
-            onClick,
-            onBeforeShow,
-            onShow,
-            onBeforeHide,
-            onHide
-        })
-
         onMounted(() => {
             if (props.modelValue) {
                 show()

package/src/components/DlMenu/DlMenu.vue

@@ -98,7 +98,8 @@ export default defineComponent({
 
         noRefocus: Boolean,
 
-        fit: Boolean,
+        fitContainer: Boolean,
+        fitContent: Boolean,
         cover: Boolean,
 
         square: Boolean,
@@ -358,7 +359,8 @@ export default defineComponent({
                 anchorOrigin: anchorOrigin.value,
                 selfOrigin: selfOrigin.value,
                 absoluteOffset,
-                fit: props.fit,
+                fitContainer: props.fitContainer,
+                fitContent: props.fitContent,
                 cover: props.cover,
                 maxHeight: props.maxHeight,
                 maxWidth: props.maxWidth

package/src/components/DlPagination/RowsSelector.vue

@@ -12,7 +12,6 @@
             size="s"
             :options="options"
             :disabled="disabled"
-            :fit="false"
             width="min-content"
             align-right
             disable-dropdown-icon-padding
@@ -55,7 +54,7 @@ export default defineComponent({
     },
     emits: ['update:modelValue'],
     computed: {
-        hasSingeValue() {
+        hasSingeValue(): boolean {
             return this.options.length <= 1
         }
     },

package/src/components/DlPopup/DlPopup.vue

@@ -384,7 +384,6 @@ export default defineComponent({
                 anchorOrigin: anchorOrigin.value,
                 selfOrigin: selfOrigin.value,
                 absoluteOffset,
-                fit: false,
                 cover: false,
                 maxHeight: props.maxHeight,
                 maxWidth: props.maxWidth

package/src/components/DlSelect/DlSelect.vue

@@ -76,6 +76,7 @@
                     class="select-search-input"
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
                     :disabled="disabled"
+                    :readonly="readonly"
                     @input="handleSearchInput"
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
@@ -134,12 +135,13 @@
             <dl-menu
                 ref="menu"
                 v-model="isExpanded"
-                :fit="fit"
+                fit-container
+                :fit-content="fitContent"
                 square
                 no-focus
                 :offset="[0, 3]"
                 style="border-radius: 0"
-                :disabled="disabled"
+                :disabled="disabled || readonly"
                 @show="onMenuOpen"
                 @hide="closeMenu"
             >
@@ -297,7 +299,7 @@ export default defineComponent({
         search: { type: Boolean, default: false },
         required: { type: Boolean, default: false },
         optional: { type: Boolean, default: false },
-        fit: { type: Boolean, default: true },
+        fitContent: Boolean,
         tooltip: { type: String, default: '' },
         highlightSelected: { type: Boolean, default: false },
         type: { type: String, default: 'text' },
@@ -309,6 +311,7 @@ export default defineComponent({
         errorMessage: { type: String, default: '' },
         error: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
+        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[]>,
@@ -497,6 +500,9 @@ export default defineComponent({
             if (this.disabled) {
                 classes.push('dl_select__select--disabled')
             }
+            if (this.readonly) {
+                classes.push('dl_select__select--readonly')
+            }
             if (this.isExpanded) {
                 classes.push('dl_select__select--focused')
             }
@@ -718,6 +724,7 @@ export default defineComponent({
             if (!this.preserveSearch) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 if (inputRef) inputRef.value = ''
+                this.$emit('filter', '')
             }
         },
         getLabel,
@@ -901,6 +908,18 @@ export default defineComponent({
                 pointer-events: none;
             }
         }
+
+        &--readonly {
+            border-color: var(--dl-color-separator);
+            cursor: text;
+
+            &:hover {
+                border-color: var(--dl-color-separator);
+            }
+            & input {
+                pointer-events: none;
+            }
+        }
     }
 
     .selected {

package/src/components/DlSmartSearch/DlSuggestionsDropdown.vue

@@ -7,7 +7,7 @@
             :target="defaultTarget"
             :offset="offset"
             :disabled="disabled"
-            fit
+            fit-container
             :model-value="modelValue"
             @update:modelValue="$emit('update:modelValue', $event)"
         >

package/src/components/DlTextArea.vue

@@ -13,6 +13,7 @@
             :disabled="disabled"
             :class="!enableResize ? 'textarea-disable-resize' : ''"
             @input="onChange"
+            @keydown="onKeydown"
             @focus="onFocus"
             @blur="onBlur"
         />
@@ -63,7 +64,7 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['input', 'focus', 'blur', 'update:model-value'],
+    emits: ['input', 'focus', 'blur', 'update:model-value', 'keydown'],
     data() {
         return {
             uuid: `dl-text-area-${v4()}`
@@ -81,6 +82,9 @@ export default defineComponent({
             this.$emit('input', e.target.value, e)
             this.$emit('update:model-value', e.target.value)
         },
+        onKeydown(e: KeyboardEvent) {
+            this.$emit('keydown', e)
+        },
         onFocus(e: InputEvent) {
             this.$emit('focus', e)
         },
@@ -104,8 +108,8 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    width: max-content;
-    max-width: 100%;
+    width: 100%;
+    max-width: var(--dl-textarea-width);
 }
 
 .textarea {
@@ -115,13 +119,14 @@ export default defineComponent({
     padding: 10px;
     font-family: 'Roboto', sans-serif;
     font-size: var(--dl-font-size-body);
-    width: var(--dl-textarea-width);
+    width: 100%;
     min-width: 100px;
     max-width: 100%;
     min-height: 80px;
     max-height: 120px;
     outline: none;
     color: var(--dl-color-darker);
+    box-sizing: border-box;
 
     &:hover {
         border-color: var(--dl-color-hover);

package/src/components/DlTextInput.vue

@@ -51,6 +51,7 @@
                 :maxlength="maxLength"
                 :type="showPass ? 'text' : type"
                 :disabled="disabled"
+                :readonly="readonly"
                 @input="onChange"
                 @focus="onFocus"
                 @blur="debouncedBlur()"
@@ -102,13 +103,23 @@
                     </dl-tooltip>
                 </span>
             </div>
+            <div
+                v-show="hasAction"
+                :class="[
+                    ...adornmentClasses,
+                    'dl-text-input__adornment-container--pos-right-out'
+                ]"
+            >
+                <slot name="action" />
+            </div>
             <dl-menu
                 v-if="showSuggestItems"
                 v-model="isMenuOpen"
                 auto-close
                 no-focus
                 :offset="[0, 3]"
-                fit
+                fit-container
+                :fit-content="fitContent"
                 @click="onMenuShow"
             >
                 <dl-list
@@ -274,6 +285,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
         maxLength: {
             type: Number,
             default: null
@@ -309,7 +324,8 @@ export default defineComponent({
         clearButtonTooltip: {
             type: Boolean,
             default: false
-        }
+        },
+        fitContent: Boolean
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
     data() {
@@ -323,9 +339,9 @@ export default defineComponent({
     computed: {
         bottomMessage(): boolean {
             return (
-                !!this.infoMessage.length ||
-                !!this.errorMessage.length ||
-                !!this.warningMessage.length ||
+                !!this.infoMessage?.length ||
+                !!this.errorMessage?.length ||
+                !!this.warningMessage?.length ||
                 this.showCounter
             )
         },
@@ -391,6 +407,9 @@ export default defineComponent({
                 !this.isSmall
             )
         },
+        hasAction(): boolean {
+            return !!this.$slots.action && !this.isSmall
+        },
         passShowIcon(): string {
             return this.showPass ? 'icon-dl-hide' : 'icon-dl-show'
         },
@@ -400,6 +419,7 @@ export default defineComponent({
                 !this.disableClearBtn &&
                 this.type !== 'password' &&
                 !this.disabled &&
+                !this.readonly &&
                 !!this.modelValue
                 // this.focused
             )
@@ -443,10 +463,18 @@ export default defineComponent({
             this.$emit('input', e.target.value, e)
             this.$emit('update:model-value', e.target.value)
         },
+        focus(): void {
+            const inputRef = this.$refs.input as HTMLInputElement
+            inputRef.focus()
+        },
         onFocus(e: InputEvent): void {
             this.focused = true
             this.$emit('focus', e)
         },
+        blur(): void {
+            const inputRef = this.$refs.input as HTMLInputElement
+            inputRef.blur()
+        },
         onBlur(e: InputEvent): void {
             this.focused = false
             this.$emit('blur', e)
@@ -473,8 +501,7 @@ export default defineComponent({
             inputRef.value = item
         },
         onMenuShow(): void {
-            const inputRef = this.$refs.input as HTMLInputElement
-            inputRef.focus()
+            this.focus()
         },
         getSuggestWords(
             item: string,
@@ -697,6 +724,13 @@ export default defineComponent({
             color: var(--dl-color-disabled);
             cursor: not-allowed;
         }
+        &:readonly {
+            border-color: var(--dl-color-separator);
+            cursor: text;
+            &:hover {
+                border-color: var(--dl-color-separator) !important;
+            }
+        }
     }
 
     &__adornment-container {
@@ -725,7 +759,11 @@ export default defineComponent({
 
         &--pos-right {
             top: 0;
-            right: 0px;
+            right: 0;
+        }
+        &--pos-right-out {
+            top: 0;
+            right: -30px;
         }
     }
 

package/src/components/DlToastMessage/components/ToastComponent.vue

@@ -75,7 +75,7 @@ export default defineComponent({
             default: true
         }
     },
-    setup(props) {
+    setup(props: any) {
         const { position, duration, message } = props
         const root = ref(null)
         let parentTop: HTMLElement = null

package/src/components/DlToastMessage/utils/render.ts

@@ -1,8 +1,10 @@
-import * as VueDemi from 'vue-demi'
+import * as VueDemiModule from 'vue-demi'
 import ToastComponent from '../components/ToastComponent.vue'
 
 let createComponent: Function
 
+const VueDemi: any = VueDemiModule
+
 if (VueDemi.isVue3) {
     createComponent = function (
         component: object,

package/src/demo/DlChipDemo.vue

@@ -184,7 +184,7 @@ export default defineComponent({
     },
     methods: {
         removeChip() {
-            (this.$refs.removableChip as typeof DlChip).remove()
+            (this.$refs.removableChip as any).remove()
         }
     }
 })

package/src/demo/DlDropdownButtonDemo.vue

@@ -204,7 +204,7 @@
                         @click="() => onClose('Videos and long text')"
                     >
                         <dl-item-section>
-                            Videos and long text
+                            Videos and long text Videos and long text
                         </dl-item-section>
                     </dl-list-item>
 

package/src/demo/DlMenuDemo.vue

@@ -389,7 +389,7 @@
             <h4>Sizing and styling</h4>
             <div>
                 <dl-button label="Fit Menu">
-                    <dl-menu fit>
+                    <dl-menu fit-container>
                         <dl-list>
                             <dl-list-item clickable>
                                 <dl-item-section>New tab</dl-item-section>

package/src/demo/DlOptionGroupDemo.vue

@@ -35,7 +35,7 @@
         >
             <dl-menu
                 ref="menu"
-                fit
+                fit-container
             >
                 <dl-option-group
                     v-model="switchValue"

package/src/demo/DlSelectDemo.vue

@@ -167,7 +167,7 @@
             multiselect
             search
             capitalized-options
-            fit
+            fit-container
         />
         With Label and sub label
         <dl-select

package/src/demo/DlTextAreaDemo.vue

@@ -1,17 +1,20 @@
 <template>
-    <div>
-        <dl-text-area
-            v-model="textAreaValue"
-            placeholder="Type your text..."
-            show-counter
-            :max-length="20"
-            enable-resize
-            @focus="textAreaFocused = true"
-            @blur="textAreaFocused = false"
-        />
-        <div style="margin-left: 20px">
-            <p>Value: {{ textAreaValue }}</p>
-            <p>Status: {{ textAreaFocused ? 'focused' : 'unfocused' }}</p>
+    <div style="width: 800px">
+        <div style="max-width: 500px; width: 100%">
+            <dl-text-area
+                v-model="textAreaValue"
+                placeholder="Type your text..."
+                show-counter
+                :max-length="20"
+                enable-resize
+                @keydown="log"
+                @focus="textAreaFocused = true"
+                @blur="textAreaFocused = false"
+            />
+            <div style="margin-left: 20px">
+                <p>Value: {{ textAreaValue }}</p>
+                <p>Status: {{ textAreaFocused ? 'focused' : 'unfocused' }}</p>
+            </div>
         </div>
     </div>
 </template>
@@ -28,7 +31,10 @@ export default defineComponent({
         const textAreaValue = ref('')
         const textAreaFocused = ref(false)
 
+        const log = (e: KeyboardEvent) => console.log(e)
+
         return {
+            log,
             textAreaValue,
             textAreaFocused
         }

package/src/utils/position-engine.ts

@@ -126,7 +126,8 @@ interface PositionConfig {
     maxHeight?: string
     maxWidth?: string
     absoluteOffset?: any
-    fit?: boolean // fit the size to the content
+    fitContent?: boolean // fit the size to the content
+    fitContainer?: boolean // fit the size to the container
     cover?: boolean
 }
 
@@ -194,13 +195,21 @@ export function setPosition(cfg: PositionConfig) {
         visibility: 'visible'
     }
 
-    if (cfg.fit === true || cfg.cover === true) {
+    if (
+        cfg.fitContainer === true ||
+        cfg.cover === true ||
+        cfg.fitContent === true
+    ) {
         elStyle.minWidth = cfg.maxWidth || anchorProps.width + 'px'
         elStyle.maxWidth = cfg.maxWidth || anchorProps.width + 'px'
 
         if (cfg.cover === true) {
             elStyle.minHeight = anchorProps.height + 'px'
         }
+
+        if (cfg.fitContent === true) {
+            elStyle.maxWidth = cfg.el.offsetWidth + 'px'
+        }
     }
 
     Object.assign(cfg.el!.style, elStyle)