@dataloop-ai/components 0.18.36 → 0.18.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.36",
+  "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/components/essential/DlTypography/DlTypography.vue

@@ -14,7 +14,7 @@ import { defineComponent, PropType } from 'vue-demi'
 import { getColor } from '../../../utils'
 import { DlTransformOptions } from '../../shared/types'
 
-type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
+type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div'
 
 const sizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'small']
 
@@ -77,7 +77,7 @@ export default defineComponent({
                 }
             } else {
                 if (sizes.includes(this.variant)) {
-                    classes.push(`dl-typography--${this.size}`)
+                    classes.push(`dl-typography--${this.variant}`)
                 } else {
                     classes.push(`dl-typography--body`)
                 }
@@ -121,6 +121,7 @@ export default defineComponent({
         font-size: var(--dl-font-size-small);
     }
 
+    // important needed above for sizing of h tags.. quasar conflict
     // to deal with quasar conflicts.
     line-height: initial !important;
 }

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>

package/src/demos/DlPageLayoutDemo/DlPageLayoutDemo.vue

@@ -17,6 +17,7 @@
             <dl-page-layout>
                 <template #header>
                     <dl-page-layout-header
+                        title="testsetest"
                         :counters="[
                             {
                                 value: 200,
@@ -36,12 +37,12 @@
                             }
                         ]"
                     >
-                        <template #title>
-                            test title
+                        <template #actions>
                             <dl-button
-                                label="testsetests"
                                 outlined
-                                dense
+                                style="margin-left: 10px"
+                                padding="5px"
+                                label="Switch to Basic Browser"
                             />
                         </template>
                         <template #subtitle>

package/src/layouts/DlPageLayout/components/DlPageLayoutHeader/DlPageLayoutHeader.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page-layout-header">
-        <div class="page-layout-header__title">
+        <div class="page-layout-header__title-container">
             <dl-typography
                 color="dl-color-lighter"
                 variant="h6"
@@ -9,15 +9,17 @@
                     {{ subTitle }}
                 </slot>
             </dl-typography>
-            <dl-typography
-                color="dl-color-darker"
-                variant="h1"
-                style="padding-bottom: 10px"
-            >
-                <slot name="title">
-                    {{ title }}
-                </slot>
-            </dl-typography>
+            <div class="page-layout-header__title">
+                <dl-typography
+                    color="dl-color-darker"
+                    variant="h1"
+                >
+                    <slot name="title">
+                        {{ title }}
+                    </slot>
+                </dl-typography>
+                <slot name="actions" />
+            </div>
         </div>
         <div
             v-if="counters.length > 0"
@@ -69,7 +71,7 @@ export default defineComponent({
     justify-content: center;
     background-color: var(--dl-color-body-background);
 
-    &__title {
+    &__title-container {
         display: flex;
         height: 100%;
         padding-left: 25px;
@@ -78,11 +80,17 @@ export default defineComponent({
         flex-grow: 1;
     }
 
+    &__title {
+        padding-bottom: 10px;
+        display: flex;
+        align-items: center;
+    }
+
     &__counters {
         display: flex;
         height: 100%;
         align-items: center;
-        justify-content: end;
+        justify-content: flex-end;
         padding-right: 10px;
     }
 }