@dataloop-ai/components 0.18.37 → 0.18.38

package/package.json

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

package/src/components/compound/DlDialogBox/DlDialogBox.vue

@@ -12,12 +12,7 @@
             />
             <div
                 class="dialog-wrapper"
-                :style="{
-                    width: Number(width) ? `${width}px` : width,
-                    height: Number(height) ? `${height}px` : height,
-                    transform: `translate(${draggableOptions.draggableX}px, ${draggableOptions.draggableY}px)`,
-                    maxHeight: !fullscreen && !fullHeight ? '90vh' : ''
-                }"
+                :style="wrapperStyles"
                 :class="{
                     'dialog-wrapper--fullscreen': fullscreen,
                     'dialog-wrapper--fullheight': fullHeight,
@@ -164,6 +159,21 @@ export default defineComponent({
                     `${this.zIndex}` ?? 'var(--dl-z-index-dialog)'
             }
         },
+        wrapperStyles() {
+            return {
+                ...{
+                    width: Number(this.width) ? `${this.width}px` : this.width,
+                    height: Number(this.height)
+                        ? `${this.height}px`
+                        : this.height,
+                    maxHeight:
+                        !this.fullscreen && !this.fullHeight ? '90vh' : ''
+                },
+                ...(this.draggable && {
+                    transform: `translate(${this.draggableOptions.draggableX}px, ${this.draggableOptions.draggableY}px)`
+                })
+            }
+        },
         iconStyles(): Record<string, string> {
             return {
                 cursor: this.draggableOptions.draggableCursor,

package/src/demos/DlIconDemo.vue

@@ -27,21 +27,38 @@
             icon="icon-dl-search"
             @click.stop="onClick"
         />
+
+        <dl-input
+            v-model="inputValue"
+            style="margin-top: 10px"
+            title="Custom Label"
+        />
+        <DlIcon
+            size="50px"
+            :icon="inputValue"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { DlIcon } from '../components'
+import { defineComponent, ref } from 'vue-demi'
+import { DlIcon, DlInput } from '../components'
 export default defineComponent({
     name: 'DlIconDemo',
     components: {
-        DlIcon
+        DlIcon,
+        DlInput
     },
-    methods: {
-        onClick() {
+    setup() {
+        const inputValue = ref('icon-dl-search')
+
+        const onClick = () => {
             console.log('clicked')
         }
+        return {
+            onClick,
+            inputValue
+        }
     }
 })
 </script>