@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -12,7 +12,7 @@
             :disabled="disabled"
             :style="[computedStyles]"
             style="pointer-events: auto"
-            class="dl-button"
+            :class="buttonClass"
             @click="onClick"
             @mousedown="onMouseDown"
         >
@@ -24,6 +24,7 @@
             <div class="dl-button-content dl-anchor--skip">
                 <dl-icon
                     v-if="hasIcon"
+                    class="dl-button-icon"
                     :size="iconSizePX"
                     :color="iconColor || textColor"
                     :icon="icon"
@@ -52,7 +53,8 @@
 </template>
 
 <script lang="ts">
-import { DlTooltip, DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlIcon } from '../../essential'
 import {
     setPadding,
     setFontSize,
@@ -62,18 +64,22 @@ import {
     setColorOnHover,
     setBorderOnHover,
     setBgOnHover,
+    setBgOnPressed,
+    setBorderOnPressed,
+    setTextOnPressed,
     setIconSize,
     setIconPadding,
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { defineComponent, PropType, ref } from 'vue-demi'
+import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
 import { transformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
+import { textTransform } from '../../../utils/string'
 import { isString } from 'lodash'
 
 export default defineComponent({
@@ -84,49 +90,106 @@ export default defineComponent({
     },
 
     props: {
+        /**
+         * The user will not be able to press on the button
+         */
         disabled: Boolean,
+        /**
+         * The color of the button
+         */
         color: {
-            type: String! as PropType<keyof typeof colorNames>,
+            type: String! as PropType<keyof typeof colorNames | string>,
             default: ''
         },
+        /**
+         * The button's padding is lowered and the white space shrinks
+         */
         dense: { type: Boolean, default: false },
+        /**
+         * The text content of the button
+         */
         label: { type: String, default: '' },
+        /**
+         * The color of the button's text
+         */
         textColor: { type: String!, default: '' },
         colorsObject: {
             type: Object as PropType<ButtonColors>,
             default: null
         },
+        /**
+         * The color of the icon inside the button
+         */
         iconColor: { type: String!, default: '' },
+        /** Padding inside the button */
         padding: { type: String, default: '' },
+        /**
+         * The size of the button, it can be s,m,l or xl
+         */
         margin: { type: String, default: '0 auto' },
         size: { type: String! as PropType<ButtonSizes>, default: 'm' },
+        /**
+         * The assigned color will fill the entirety of the button
+         */
         filled: { type: Boolean, default: true },
+        /** Makes the button rounded */
         round: { type: Boolean, default: false },
-        shaded: { type: Boolean, default: false },
+        /**
+         * The width of the button will take that of its container
+         */
         fluid: Boolean,
+        /**
+         * The button will not have an outline
+         */
         flat: Boolean,
+        /**
+         * All the characters inside the button will be uppercase
+         */
+        uppercase: Boolean,
+        /**
+         * The button will be transparent with a colored outline
+         */
         transform: {
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
                 transformOptions.includes(value)
         },
-        outlined: Boolean,
+        /**
+         * Doesn't allow the button's text to be wrapped along multiple rows
+         */
         noWrap: Boolean,
+        /**
+         * The name of the icon to go inside the button
+         */
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
+        /**
+         * The tooltip displayed when hovering over the button
+         */
         tooltip: { type: String, default: null, required: false },
-        styles: { type: [Object, String], default: null }
+        /**
+         * The button will maintain the styles it has when it's pressed if this prop is active
+         */
+        active: { type: Boolean, default: false, required: false },
+        styles: { type: [Object, String], default: null },
+        shaded: { type: Boolean, default: false },
+        outlined: Boolean
     },
     emits: ['click', 'mousedown'],
-    setup() {
+    setup(props) {
         const buttonLabelRef = ref(null)
         const { hasEllipsis } = useSizeObserver(buttonLabelRef)
 
+        const buttonClass = computed(() => {
+            return props.active ? 'dl-button active-class' : 'dl-button'
+        })
+
         return {
             uuid: `dl-button-${v4()}`,
             buttonLabelRef,
-            isOverflowing: hasEllipsis
+            isOverflowing: hasEllipsis,
+            buttonClass
         }
     },
     computed: {
@@ -151,11 +214,10 @@ export default defineComponent({
             return setIconSize(this.$props.size)
         },
         hasLabel(): boolean {
-            return (
-                this.label !== void 0 &&
-                this.label !== null &&
-                this.label !== ''
-            )
+            return !!this.label
+        },
+        buttonLabel(): string {
+            return textTransform(this.label)
         },
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
@@ -230,7 +292,8 @@ export default defineComponent({
                         disabled: this.disabled,
                         flat: this.flat,
                         shaded: this.shaded,
-                        color: this.color
+                        color: this.color,
+                        outlined: this.outlined
                     }),
                     '--dl-button-text-color-hover': setColorOnHover({
                         disabled: this.disabled,
@@ -253,14 +316,24 @@ export default defineComponent({
                         filled: this.filled,
                         color: this.color
                     }),
-                    '--dl-button-text-color-pressed':
-                        'var(--dl-button-text-color)',
-                    '--dl-button-bg-pressed': 'var(--dl-button-bg)',
-                    '--dl-button-border-pressed': 'var(--dl-button-border)'
+                    '--dl-button-text-color-pressed': setTextOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.shaded
+                    }),
+                    '--dl-button-bg-pressed': setBgOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    }),
+                    '--dl-button-border-pressed': setBorderOnPressed({
+                        shaded: this.shaded,
+                        outlined: this.outlined
+                    })
                 }
             }
 
             return {
+                '--dl-button-transition-duration': 'all ease 0.15s',
+                '--dl-button-text-transition-duration': 'all ease 0.05s',
                 '--dl-button-container-width': this.fluid ? '100%' : 'auto',
                 '--dl-button-padding': this.dense
                     ? '0'
@@ -304,7 +377,7 @@ export default defineComponent({
         },
         onMouseDown(e: Event) {
             if (this.isActionable) {
-                if (e !== void 0) {
+                if (e) {
                     if (e.defaultPrevented === true) {
                         return
                     }
@@ -343,27 +416,28 @@ export default defineComponent({
     align-items: stretch;
     position: relative;
     vertical-align: middle;
-    transition: all ease-in 0.15s;
+    transition: var(--dl-button-transition-duration);
     justify-content: center;
 
     &:active {
-        transition: all ease-in 0.15s;
+        transition: var(--dl-button-transition-duration);
         color: var(--dl-button-text-color-pressed) !important;
         background-color: var(--dl-button-bg-pressed) !important;
         border-color: var(--dl-button-border-pressed) !important;
 
         & > span > i {
-            transition: all ease-in 0.15s;
+            transition: var(--dl-button-text-transition-duration);
         }
     }
 
     &:hover:enabled:not(:active) {
+        transition: var(--dl-button-transition-duration);
         color: var(--dl-button-text-color-hover);
         background-color: var(--dl-button-bg-hover);
         border-color: var(--dl-button-border-hover);
 
         & .dl-button-label {
-            transition: all ease-in 0.15s;
+            transition: var(--dl-button-text-transition-duration);
             color: var(--dl-button-color-hover);
         }
     }
@@ -383,7 +457,11 @@ export default defineComponent({
     gap: var(--dl-button-content-gap, 7px);
 }
 
-.dl-chip.first-letter-capitalized {
+.dl-button-icon {
+    transition: var(--dl-button-text-transition-duration);
+}
+
+.dl-button-container.first-letter-capitalized {
     &::first-letter,
     & > *::first-letter {
         text-transform: capitalize;
@@ -394,4 +472,16 @@ export default defineComponent({
     display: inline-block;
     width: var(--dl-button-container-width);
 }
+
+.active-class {
+    color: var(--dl-button-text-color-hover);
+    background-color: var(--dl-button-bg-hover);
+    border-color: var(--dl-button-border-hover);
+    transition: var(--dl-button-transition-duration);
+
+    & .dl-button-label {
+        color: var(--dl-button-color-hover);
+        transition: var(--dl-button-text-transition-duration);
+    }
+}
 </style>

package/src/components/basic/DlButton/utils.ts

@@ -1,7 +1,7 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | 'xl'
+export type ButtonSizes = 's' | 'm' | 'l' | ('xl' & string)
 
 const paddings = {
     s: '7px 16px',
@@ -70,6 +70,9 @@ export const setTextColor = ({
     if (disabled) {
         return getColor('', 'dl-color-disabled')
     }
+    if (shaded && outlined) {
+        return getColor(textColor, 'dl-color-text-darker-buttons')
+    }
     if (outlined) {
         return getColor(textColor, 'dl-color-secondary')
     }
@@ -111,13 +114,17 @@ export const setBorder = ({
     disabled,
     flat,
     color = '',
-    shaded
+    shaded,
+    outlined
 }: Partial<DlButtonProps>) => {
     if (disabled) {
         return flat
             ? 'var(--dl-color-transparent)'
             : 'var(--dl-color-separator)'
     }
+    if (shaded && outlined) {
+        return 'var(--dl-color-separator)'
+    }
     if (flat || shaded) {
         return 'var(--dl-color-transparent)'
     }
@@ -177,3 +184,39 @@ export const setBgOnHover = ({
 
     return 'var(--dl-color-panel-background)'
 }
+
+export const setBgOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-text-buttons)'
+    }
+    if (shaded) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-bg)'
+}
+
+export const setTextOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-secondary)'
+    }
+    if (shaded) {
+        return 'var(--dl-color-text-buttons)'
+    }
+    return 'var(--dl-button-text-color)'
+}
+
+export const setBorderOnPressed = ({
+    shaded,
+    outlined
+}: Partial<DlButtonProps>) => {
+    if (shaded && outlined) {
+        return 'var(--dl-color-secondary)'
+    }
+    return 'var(--dl-button-border)'
+}

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

@@ -50,7 +50,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlTooltip } from '../../shared'
+import { DlIcon } from '../../essential'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import {
     setTextColor,
@@ -106,11 +107,7 @@ export default defineComponent({
     },
     computed: {
         hasLabel(): boolean {
-            return (
-                this.label !== void 0 &&
-                this.label !== null &&
-                this.label !== ''
-            )
+            return !!this.label
         },
         hasLabelSlot(): boolean {
             return !!this.$slots['default']
@@ -220,7 +217,6 @@ export default defineComponent({
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        padding: 3px 5px 3px 5px;
     }
 }
 

package/src/components/basic/DlChip/utils.ts

@@ -59,17 +59,17 @@ export const setPadding = ({
     const right = removable ? 20 : 5
 
     if (hasLabel && (removable || hasIcon)) {
-        return `3px ${right}px 3px ${left}px`
+        return `5px ${right}px 5px ${left}px`
     }
 
     if (!hasLabel && hasIcon && removable) {
-        return `3px ${right}px 3px 0`
+        return `5px ${right}px 5px 0`
     }
     if (removable || hasIcon) {
-        return '3px 0'
+        return '5px 0'
     }
 
-    return '3px 5px'
+    return '5px'
 }
 
 export const setRemoveIconWidth = ({

package/src/components/basic/DlContainer/DlContainer.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+        ref="wrapper"
+        class="container-wrapper"
+    >
+        <div
+            :id="uuid"
+            ref="container"
+            :class="containerStyles"
+        >
+            <div
+                v-if="hasHeaderSlot"
+                class="dl-container__header"
+            >
+                <slot name="header" />
+            </div>
+
+            <div class="dl-container__content">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlContainer',
+    data() {
+        return {
+            uuid: `dl-container-${v4()}`
+        }
+    },
+    computed: {
+        containerStyles() {
+            return 'dl-container'
+        },
+        hasHeaderSlot(): boolean {
+            return this.$slots.header !== undefined
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-container {
+    border: 1px solid var(--dl-color-separator);
+    user-select: none;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    &__header {
+        display: flex;
+        padding: 10px;
+        border-bottom: 1px solid var(--dl-color-separator);
+    }
+    &__content {
+        padding: 10px;
+        height: 100%;
+        overflow-y: auto;
+    }
+}
+
+.container-wrapper {
+    flex-basis: var(--container-flex-basis);
+    margin: var(--row-gap) var(--column-gap);
+    height: 100%;
+}
+</style>

package/src/components/basic/DlContainer/index.ts

@@ -0,0 +1,3 @@
+import DlContainer from './DlContainer.vue'
+
+export { DlContainer }