@dataloop-ai/components 0.18.55 → 0.18.57

package/package.json

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

package/src/assets/globals.scss

@@ -46,6 +46,12 @@ body {
     &--none{
         text-transform: none;
     }
+    &--default {
+        &,
+        & > * {
+            text-transform: capitalize;
+        }
+    }
 }
 
 /* Inserting a collapsed row between two flex items will make 

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

@@ -1,9 +1,9 @@
 <template>
     <div
         :id="uuid"
-        class="dl-button-container"
+        :class="containerClasses"
         style="pointer-events: none"
-        :style="[cssButtonVars, containerStyles, capitalizeFirst]"
+        :style="[cssButtonVars, containerStyles]"
     >
         <button
             v-if="hasContent || hasIcon"
@@ -73,7 +73,7 @@ import {
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { computed, defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref, toRefs } from 'vue-demi'
 import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
@@ -179,11 +179,16 @@ export default defineComponent({
     },
     emits: ['click', 'mousedown', 'dblclick'],
     setup(props) {
+        const { active } = toRefs(props)
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
 
         const buttonClass = computed(() => {
-            return props.active ? 'dl-button active-class' : 'dl-button'
+            const classes = ['dl-button']
+            if (active.value) {
+                classes.push('active-class')
+            }
+            return classes
         })
 
         return {
@@ -194,6 +199,12 @@ export default defineComponent({
         }
     },
     computed: {
+        containerClasses(): string[] {
+            return [
+                'dl-button-container',
+                `dl-text-transform--${this.transform}`
+            ]
+        },
         getIconColor(): string {
             if (this.iconColor) {
                 return this.iconColor
@@ -203,12 +214,6 @@ export default defineComponent({
                 return this.textColor
             }
 
-            return 'dl-color-secondary'
-        },
-        capitalizeFirst(): string {
-            if (this.transform === 'default') {
-                return 'first-letter-capitalized'
-            }
             return null
         },
         computedStyles(): Record<string, string> {
@@ -356,9 +361,6 @@ export default defineComponent({
                     : setPadding(this.size),
                 '--dl-button-margin': this.margin,
                 '--dl-button-font-size': setFontSize(this.size),
-                '--dl-button-text-transform': this.capitalizeFirst
-                    ? null
-                    : this.transform,
                 '--dl-button-cursor': this.isActionable
                     ? 'pointer'
                     : 'not-allowed',
@@ -424,7 +426,6 @@ export default defineComponent({
     padding: var(--dl-button-padding);
     margin: var(--dl-button-margin);
     border-radius: var(--dl-button-border-radius);
-    text-transform: var(--dl-button-text-transform);
     font-family: 'Roboto', sans-serif;
     font-size: var(--dl-button-font-size);
     cursor: var(--dl-button-cursor);
@@ -484,13 +485,6 @@ export default defineComponent({
     transition: var(--dl-button-text-transition-duration);
 }
 
-.dl-button-container.first-letter-capitalized {
-    &::first-letter,
-    & > *::first-letter {
-        text-transform: capitalize;
-    }
-}
-
 .dl-button-container {
     display: inline-block;
     width: var(--dl-button-container-width);

package/src/components/basic/DlChip/DlChip.vue

@@ -127,10 +127,7 @@ export default defineComponent({
             return this.iconColor
         },
         chipClass(): string {
-            if (this.transform === 'default') {
-                return 'first-letter-capitalized'
-            }
-            return null
+            return `dl-text-transform--${this.transform}`
         },
         cssChipVars(): Record<string, string | number> {
             return {
@@ -170,10 +167,7 @@ export default defineComponent({
                 '--dl-chip-left-icon-hover-opacity': this.disabled ? 1 : 0.8,
                 '--dl-chip-left-icon-cursor': this.disabled
                     ? 'not-allowed'
-                    : 'pointer',
-                '--dl-chip-text-transform': this.chipClass
-                    ? null
-                    : this.transform
+                    : 'pointer'
             }
         }
     },
@@ -193,7 +187,6 @@ export default defineComponent({
     position: relative;
     display: flex;
     vertical-align: middle;
-    text-transform: var(--dl-chip-text-transform);
     font-size: var(--dl-font-size-body);
     line-height: 12px;
     border-radius: 2px;
@@ -220,13 +213,6 @@ export default defineComponent({
     }
 }
 
-.dl-chip.first-letter-capitalized {
-    &::first-letter,
-    & > *::first-letter {
-        text-transform: capitalize;
-    }
-}
-
 .dl-chip-remove-icon-container {
     cursor: var(--dl-chip-left-icon-cursor);
     position: absolute;

package/src/components/basic/DlMarkupTable/DlMarkupTable.vue

@@ -11,7 +11,8 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent, computed, ref } from 'vue-demi'
+import { defineComponent, computed, ref, PropType, toRefs } from 'vue-demi'
+import { DlTextTransformOptions } from '../../shared/types'
 
 const separatorValues = ['horizontal', 'vertical', 'cell', 'none']
 
@@ -22,7 +23,14 @@ export default defineComponent({
         flat: Boolean,
         bordered: Boolean,
         square: Boolean,
-        wrapCells: Boolean,
+        /** wraps the cells */
+        wrap: Boolean,
+        transform: {
+            type: String as PropType<DlTextTransformOptions>,
+            default: 'default',
+            validator: (value: DlTextTransformOptions): boolean =>
+                Object.values(DlTextTransformOptions).includes(value)
+        },
 
         separator: {
             type: String,
@@ -32,17 +40,21 @@ export default defineComponent({
         }
     },
     setup(props) {
+        const { transform, dense, separator, flat, bordered, square, wrap } =
+            toRefs(props)
+
         const uuid = ref(`dl-markup-table-${v4()}`)
 
         const classes = computed(
             () =>
                 'dl-markup-table dl-table__container dl-table__card' +
-                ` dl-table--${props.separator}-separator` +
-                (props.dense === true ? ' dl-table--dense' : '') +
-                (props.flat === true ? ' dl-table--flat' : '') +
-                (props.bordered === true ? ' dl-table--bordered' : '') +
-                (props.square === true ? ' dl-table--square' : '') +
-                (props.wrapCells === false ? ' dl-table--no-wrap' : '')
+                ` dl-table--${separator.value}-separator` +
+                (dense.value === true ? ' dl-table--dense' : '') +
+                (flat.value === true ? ' dl-table--flat' : '') +
+                (bordered.value === true ? ' dl-table--bordered' : '') +
+                (square.value === true ? ' dl-table--square' : '') +
+                (wrap.value === false ? ' dl-table--no-wrap' : '') +
+                ` dl-text-transform--${transform.value}`
         )
 
         return {

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -405,11 +405,15 @@ export default defineComponent({
                 return 'dl-color-secondary'
             }
 
+            if (props.flat) {
+                return 'dl-color-darker'
+            }
+
             if (props.color) {
                 return props.color
             }
 
-            return 'dl-color-medium'
+            return 'dl-color-white'
         })
 
         return {

package/src/components/essential/DlLink/DlLink.vue

@@ -24,7 +24,7 @@ import { getLinkTarget, getLinkRel } from './utils'
 export default defineComponent({
     name: 'DlLink',
     props: {
-        href: { required: true, type: String },
+        href: { required: false, type: String, default: null },
         newtab: { required: false, default: false, type: Boolean },
         external: { required: false, default: false, type: Boolean },
         disabled: { required: false, default: false, type: Boolean },
@@ -37,6 +37,9 @@ export default defineComponent({
     },
     computed: {
         link(): string {
+            if (!this.href) {
+                return null
+            }
             return this.external
                 ? `${this.href}`
                 : `${window.origin}/${this.href}`
@@ -45,9 +48,15 @@ export default defineComponent({
             return this.color ?? 'dl-color-studio-secondary'
         },
         target(): string | null {
+            if (!this.href) {
+                return null
+            }
             return getLinkTarget(this.newtab)
         },
         rel(): string | null {
+            if (!this.href) {
+                return null
+            }
             return getLinkRel(this.external)
         }
     },
@@ -63,6 +72,7 @@ a {
 
 a:hover {
     text-decoration: underline;
+    cursor: pointer;
 }
 
 .disabled {

package/src/demos/DlButtonDemo.vue

@@ -25,7 +25,7 @@
                         flat
                         @click="log"
                     >
-                        Flat Primary
+                        flat primary
                     </DlButton>
                     <DlButton
                         color="secondary"