@dataloop-ai/components 0.19.5 → 0.19.7

package/package.json

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

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

@@ -111,8 +111,6 @@ export default defineComponent({
         title: { type: String, default: '' },
         subtitle: { type: String, default: '' },
         withCloseButton: Boolean,
-        height: { type: String, default: 'auto' },
-        width: { type: String, default: 'auto' },
         draggable: Boolean,
         isEmpty: Boolean,
         emptyStateProps: {
@@ -151,8 +149,9 @@ export default defineComponent({
             type: String as PropType<Element | string>,
             default: null
         },
-
         touchPosition: Boolean,
+        height: { type: String, default: 'auto' },
+        width: { type: String, default: 'auto' },
         maxHeight: { type: String, default: 'auto' },
         maxWidth: { type: String, default: 'auto' },
         menuClass: {
@@ -230,8 +229,6 @@ export default defineComponent({
             title,
             subtitle,
             withCloseButton,
-            height,
-            width,
             isEmpty,
             emptyStateProps,
             modelValue,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -284,10 +284,12 @@
                                 :opt="option"
                                 name="option"
                             >
-                                <span
-                                    class="inner-option"
-                                    v-html="getOptionHtml(option)"
-                                />
+                                <dl-ellipsis>
+                                    <span
+                                        class="inner-option"
+                                        v-html="getOptionHtml(option)"
+                                    />
+                                </dl-ellipsis>
                             </slot>
                         </dl-select-option>
                     </div>
@@ -328,6 +330,7 @@ import {
     DlItemSection,
     DlVirtualScroll
 } from '../../shared'
+import { DlEllipsis } from '../../essential'
 import { defineComponent, PropType, ref } from 'vue-demi'
 import {
     getLabel,
@@ -352,7 +355,8 @@ export default defineComponent({
         DlMenu,
         DlTooltip,
         DlSelectOption,
-        DlVirtualScroll
+        DlVirtualScroll,
+        DlEllipsis
     },
     model: {
         prop: 'modelValue',

package/src/components/essential/DlMenu/DlMenu.vue

@@ -133,7 +133,14 @@ export default defineComponent({
         },
 
         touchPosition: Boolean,
-
+        width: {
+            type: String,
+            default: 'auto'
+        },
+        height: {
+            type: String,
+            default: 'auto'
+        },
         maxHeight: {
             type: String,
             default: null
@@ -480,7 +487,9 @@ export default defineComponent({
                 attrs.style,
                 transitionStyle.value,
                 {
-                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)'
+                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)',
+                    '--menu-height': props.height,
+                    '--menu-width': props.width
                 }
             ] as any,
             selectedItem,
@@ -495,6 +504,8 @@ export default defineComponent({
     position: fixed !important;
     display: inline-block;
     max-width: 95vw;
+    height: var(--menu-height);
+    width: var(--menu-width);
     border: 1px solid var(--dl-color-separator);
 
     box-shadow: var(--dl-menu-shadow);

package/src/demos/DlPopupDemo.vue

@@ -224,6 +224,39 @@
                 </template>
             </dl-popup>
         </dl-button>
+        <dl-button label="Open Popup with  height and width">
+            <dl-popup
+                title="Edit Item Description"
+                additional-info="Some additional information"
+                subtitle="Some text for better explanation."
+                with-close-button
+                :style="{ '--dl-popup-padding': '0px' }"
+                height="50px"
+                width="500px"
+            >
+                <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>
+                    <dl-button fluid>
+                        Save
+                    </dl-button>
+                </template>
+            </dl-popup>
+        </dl-button>
     </div>
 </template>
 <script lang="ts">