@dataloop-ai/components 0.13.0

package/src/components/DlButton/DlButton.vue

@@ -0,0 +1,370 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-button-container"
+        style="pointer-events: none"
+    >
+        <button
+            v-if="hasContent || hasIcon"
+            :tabindex="tabIndex"
+            :aria-disabled="disabled ? 'true' : 'false'"
+            :disabled="disabled"
+            :style="cssButtonVars"
+            style="pointer-events: auto"
+            class="dl-button"
+            @click="onClick"
+            @mousedown="onMouseDown"
+        >
+            <dl-tooltip
+                v-if="!tooltip && overflow && isOverflowing && hasLabel"
+            >
+                {{ btnLabel }}
+            </dl-tooltip>
+            <span class="dl-btn-content dl-anchor--skip">
+                <dl-icon
+                    v-if="hasIcon"
+                    :size="iconSizePX"
+                    :color="iconColor || textColor"
+                    :class="{ 'dl-btn-icon': hasContent }"
+                    :icon="icon"
+                    :style="cssButtonVars"
+                />
+                <span
+                    v-if="hasLabel"
+                    ref="btnLabelRef"
+                    class="dl-btn-label"
+                    :class="{ 'dl-button-no-wrap': noWrap }"
+                >
+                    {{ btnLabel }}
+                </span>
+                <slot />
+            </span>
+        </button>
+        <dl-tooltip
+            v-if="tooltip"
+            style="pointer-events: auto"
+        >
+            {{ tooltip }}
+        </dl-tooltip>
+    </div>
+</template>
+
+<script lang="ts">
+import DlIcon from '../DlIcon.vue'
+import DlTooltip from '../DlTooltip.vue'
+import {
+    setPadding,
+    setFontSize,
+    setTextColor,
+    setBgColor,
+    setBorder,
+    setColorOnHover,
+    setBorderOnHover,
+    setBgOnHover,
+    setIconSize,
+    setIconPadding,
+    setMaxHeight
+} from './utils'
+import type { ButtonSizes } from './utils'
+import { textTransform } from '../../utils/string'
+import { defineComponent, PropType, ref } from 'vue-demi'
+import { colorNames } from '../../utils/css-color-names'
+import { useSizeObserver } from '../../hooks/use-size-observer'
+import { v4 } from 'uuid'
+
+export enum ButtonState {
+    Active = 'ACTIVE',
+    Hover = 'HOVER',
+    Pressed = 'PRESSED',
+    Disabled = 'DISABLED'
+}
+
+export enum ButtonPart {
+    Text = 'TEXT',
+    Background = 'BACKGROUND',
+    Border = 'BORDER'
+}
+
+export type ButtonColors = Record<ButtonState, Record<ButtonPart, string>>
+
+export default defineComponent({
+    name: 'DlButton',
+    components: {
+        DlIcon,
+        DlTooltip
+    },
+
+    props: {
+        disabled: Boolean,
+        color: {
+            type: String! as PropType<keyof typeof colorNames>,
+            default: ''
+        },
+        dense: { type: Boolean, default: false },
+        label: { type: String, default: '' },
+        textColor: { type: String!, default: '' },
+        colorsObject: {
+            type: Object as PropType<ButtonColors>,
+            default: null
+        },
+        iconColor: { type: String!, default: '' },
+        padding: { type: String, default: '' },
+        size: { type: String! as PropType<ButtonSizes>, default: 'm' },
+        filled: { type: Boolean, default: true },
+        round: { type: Boolean, default: false },
+        fluid: Boolean,
+        flat: Boolean,
+        uppercase: Boolean,
+        outlined: Boolean,
+        noWrap: Boolean,
+        icon: { type: String, default: '' },
+        overflow: { type: Boolean, default: false, required: false },
+        tooltip: { type: String, default: null, required: false }
+    },
+    emits: ['click', 'mousedown'],
+    setup() {
+        const btnLabelRef = ref(null)
+        const { hasEllipsis } = useSizeObserver(btnLabelRef)
+
+        return {
+            uuid: `dl-button-${v4()}`,
+            btnLabelRef,
+            isOverflowing: hasEllipsis
+        }
+    },
+    computed: {
+        isActionable(): boolean {
+            return this.disabled !== true
+        },
+        tabIndex(): number {
+            return this.isActionable ? 0 : -1
+        },
+        iconSizePX(): string {
+            return setIconSize(this.$props.size)
+        },
+        hasLabel(): boolean {
+            return (
+                this.label !== void 0 &&
+                this.label !== null &&
+                this.label !== ''
+            )
+        },
+        btnLabel(): string {
+            return textTransform(this.label)
+        },
+        hasIcon(): boolean {
+            return typeof this.icon === 'string' && this.icon !== ''
+        },
+        hasContent(): boolean {
+            return !!this.$slots.default || this.hasLabel
+        },
+        cssButtonVars(): Record<string, string> {
+            let colors: Record<string, string> = {}
+
+            if (this.colorsObject) {
+                if (this.disabled) {
+                    colors = {
+                        '--dl-button-text-color':
+                            this.colorsObject.DISABLED.TEXT,
+                        '--dl-button-bg': this.colorsObject.DISABLED.BACKGROUND,
+                        '--dl-button-border': this.colorsObject.DISABLED.BORDER,
+                        '--dl-button-text-color-hover':
+                            this.colorsObject.DISABLED.TEXT,
+                        '--dl-button-bg-hover':
+                            this.colorsObject.DISABLED.BACKGROUND,
+                        '--dl-button-border-hover':
+                            this.colorsObject.DISABLED.BORDER,
+                        '--dl-button-text-color-pressed':
+                            this.colorsObject.DISABLED.TEXT,
+                        '--dl-button-bg-pressed':
+                            this.colorsObject.DISABLED.BACKGROUND,
+                        '--dl-button-border-pressed':
+                            this.colorsObject.DISABLED.BORDER
+                    }
+                } else {
+                    colors = {
+                        '--dl-button-text-color': this.colorsObject.ACTIVE.TEXT,
+                        '--dl-button-bg': this.colorsObject.ACTIVE.BACKGROUND,
+                        '--dl-button-border': this.colorsObject.ACTIVE.BORDER,
+                        '--dl-button-text-color-hover':
+                            this.colorsObject.HOVER.TEXT,
+                        '--dl-button-bg-hover':
+                            this.colorsObject.HOVER.BACKGROUND,
+                        '--dl-button-border-hover':
+                            this.colorsObject.HOVER.BORDER,
+                        '--dl-button-text-color-pressed':
+                            this.colorsObject.PRESSED.TEXT,
+                        '--dl-button-bg-pressed':
+                            this.colorsObject.PRESSED.BACKGROUND,
+                        '--dl-button-border-pressed':
+                            this.colorsObject.PRESSED.BORDER
+                    }
+                }
+            } else {
+                colors = {
+                    '--dl-button-text-color': setTextColor({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        flat: this.flat,
+                        color: this.color,
+                        filled: this.filled,
+                        textColor: this.textColor
+                    }),
+                    '--dl-button-bg': setBgColor({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        flat: this.flat,
+                        color: this.color
+                    }),
+                    '--dl-button-border': setBorder({
+                        disabled: this.disabled,
+                        flat: this.flat,
+                        color: this.color
+                    }),
+                    '--dl-button-text-color-hover': setColorOnHover({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        flat: this.flat,
+                        color: this.textColor
+                    }),
+                    '--dl-button-border-hover': setBorderOnHover({
+                        disabled: this.disabled,
+                        flat: this.flat,
+                        color: this.color
+                    }),
+                    '--dl-button-bg-hover': setBgOnHover({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        flat: this.flat,
+                        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)'
+                }
+            }
+
+            return {
+                '--dl-button-padding': this.dense
+                    ? '0'
+                    : this.padding
+                    ? this.padding
+                    : this.hasIcon && !this.hasContent
+                    ? setIconPadding(this.size)
+                    : setPadding(this.size),
+                '--dl-button-font-size': setFontSize(this.size),
+                '--dl-button-text-transform': this.uppercase
+                    ? 'uppercase'
+                    : 'none',
+                '--dl-button-cursor': this.isActionable
+                    ? 'pointer'
+                    : 'not-allowed',
+
+                '--dl-button-width': '100%',
+                '--dl-button-border-radius':
+                    !this.hasContent && this.hasIcon && this.round
+                        ? '50%'
+                        : '2px',
+                '--dl-button-max-height': this.padding
+                    ? '100%'
+                    : setMaxHeight(this.size),
+                ...colors
+            }
+        }
+    },
+    methods: {
+        onClick(e: Event) {
+            if (this.isActionable) {
+                if (!e) {
+                    if (e.defaultPrevented === true) {
+                        return
+                    }
+                }
+
+                this.$emit('click', e)
+            }
+        },
+        onMouseDown(e: Event) {
+            if (this.isActionable) {
+                if (e !== void 0) {
+                    if (e.defaultPrevented === true) {
+                        return
+                    }
+                }
+
+                this.$emit('mousedown', e)
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-button-no-wrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.dl-button {
+    padding: var(--dl-button-padding);
+    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);
+    color: var(--dl-button-text-color);
+    background-color: var(--dl-button-bg);
+    border: 1px solid var(--dl-button-border);
+    width: var(--dl-button-width);
+    max-height: var(--dl-button-max-height);
+    height: auto;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: relative;
+    vertical-align: middle;
+    transition: all ease-in 0.15s;
+    justify-content: center;
+    &:active {
+        transition: all ease-in 0.15s;
+        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;
+        }
+    }
+    &:hover:enabled:not(:active) {
+        color: var(--dl-button-text-color-hover);
+        background-color: var(--dl-button-bg-hover);
+        border-color: var(--dl-button-border-hover);
+        & .dl-btn-label {
+            transition: all ease-in 0.15s;
+            color: var(--dl-button-color-hover);
+        }
+    }
+}
+.dl-btn-content {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex: 10000 1 0%;
+    flex-wrap: nowrap;
+    line-height: 1;
+    z-index: 0;
+    user-select: none !important;
+    min-width: 1.5em;
+}
+
+.dl-btn-icon {
+    margin-right: 7px;
+}
+
+.dl-button-container {
+    display: inline-block;
+}
+</style>

package/src/components/DlButton/index.ts

@@ -0,0 +1,4 @@
+import DlButton from './DlButton.vue'
+
+export * from './utils'
+export { DlButton }

package/src/components/DlButton/utils.ts

@@ -0,0 +1,169 @@
+import { getColor } from '../../utils'
+import { getLighterGradient } from '../../utils/getLighterGradient'
+
+export type ButtonSizes = 's' | 'm' | 'l' | 'xl'
+
+const paddings = {
+    s: '7px 16px',
+    m: '9px 16px',
+    l: '10px 16px',
+    xl: '12px 16px'
+}
+
+const iconPaddings = {
+    s: '6px',
+    m: '8px',
+    l: '10px',
+    xl: '12px'
+}
+
+const iconSizes = {
+    s: '12px',
+    m: '16px',
+    l: '18px',
+    xl: '20px'
+}
+
+const maxHeights = {
+    s: '28px',
+    m: '34px',
+    l: 'auto',
+    xl: 'auto'
+}
+
+const fontSizes = {
+    s: '12px',
+    m: '14px',
+    l: '16px',
+    xl: '18px'
+}
+
+interface ButtonProps {
+    disabled: boolean
+    outlined: boolean
+    flat: boolean
+    filled: boolean
+    color: string
+    textColor: string
+}
+
+export const setIconSize = (size: ButtonSizes) => iconSizes[size] || size
+
+export const setPadding = (size: ButtonSizes) => paddings[size]
+
+export const setIconPadding = (size: ButtonSizes) => iconPaddings[size]
+
+export const setFontSize = (size: ButtonSizes) => fontSizes[size]
+
+export const setMaxHeight = (size: ButtonSizes) => maxHeights[size]
+
+export const setTextColor = ({
+    disabled,
+    outlined,
+    flat,
+    color,
+    filled,
+    textColor
+}: ButtonProps): string => {
+    if (disabled) {
+        return getColor('', 'dl-color-disabled')
+    }
+    if (outlined) {
+        return getColor(textColor, 'dl-color-secondary')
+    }
+    if (flat) {
+        if (color === 'secondary') {
+            return getColor(textColor, 'dl-color-darker')
+        }
+
+        return getColor(textColor, 'dl-color-secondary')
+    }
+    if (filled) {
+        return getColor(textColor, 'dl-color-text-buttons')
+    }
+
+    return getColor(textColor, 'dl-color-text-buttons')
+}
+
+export const setBgColor = ({
+    disabled,
+    flat,
+    outlined,
+    color = ''
+}: Partial<ButtonProps>) => {
+    if (disabled || flat || outlined) {
+        return 'var(--dl-color-transparent)'
+    }
+
+    return getColor(color, 'dl-color-secondary')
+}
+
+export const setBorder = ({
+    disabled,
+    flat,
+    color = ''
+}: Partial<ButtonProps>) => {
+    if (disabled) {
+        return flat
+            ? 'var(--dl-color-transparent)'
+            : 'var(--dl-color-separator)'
+    }
+    if (flat) {
+        return 'var(--dl-color-transparent)'
+    }
+
+    return getColor(color, 'dl-color-secondary')
+}
+
+export const setColorOnHover = ({
+    disabled,
+    flat,
+    outlined,
+    color
+}: Partial<ButtonProps>) => {
+    if (color) return getLighterGradient(color)
+    if (disabled) {
+        return flat ? 'var(--dl-color-transparent)' : 'var(--dl-color-disabled)'
+    }
+    if (outlined || flat) {
+        return 'var(--dl-color-hover)'
+    }
+
+    return 'var(--dl-color-white)'
+}
+
+export const setBorderOnHover = ({
+    disabled,
+    flat,
+    color
+}: Partial<ButtonProps>) => {
+    if (disabled) {
+        return 'var(--dl-color-separator)'
+    }
+    if (flat) {
+        return 'var(--dl-color-transparent)'
+    }
+    if (color) {
+        return getLighterGradient(color)
+    }
+    return 'var(--dl-color-hover)'
+}
+
+export const setBgOnHover = ({
+    disabled,
+    flat,
+    outlined,
+    filled,
+    color
+}: Partial<ButtonProps>) => {
+    if (color) return getLighterGradient(color)
+
+    if (disabled || flat || outlined) {
+        return 'var(--dl-color-transparent)'
+    }
+    if (filled) {
+        return 'var(--dl-color-hover)'
+    }
+
+    return 'var(--dl-color-panel-background)'
+}

package/src/components/DlButtonGroup.vue

@@ -0,0 +1,122 @@
+<template>
+    <div
+        :id="uuid"
+        :class="classes"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+const classes = ['outlined', 'flat', 'stretch']
+
+export default defineComponent({
+    name: 'DlButtonGroup',
+    props: {
+        outlined: Boolean,
+        flat: Boolean,
+        stretch: Boolean,
+        spread: Boolean
+    },
+    data() {
+        return {
+            uuid: `dl-button-group-${v4()}`
+        }
+    },
+    computed: {
+        classes(): string {
+            const cls = classes
+                // @ts-ignore wtf is this ?
+                .filter((t) => this[t] === true)
+                .map((t) => `dl-btn-group--${t}`)
+                .join(' ')
+
+            return (
+                `dl-btn-group row no-wrap${cls.length > 0 ? ' ' + cls : ''}` +
+                (this.spread ? ' dl-btn-group--spread' : ' inline')
+            )
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.dl-btn-group {
+    border-radius: 2px;
+    vertical-align: middle;
+
+    > .dl-button {
+        border-radius: inherit;
+        align-self: stretch;
+
+        &:before {
+            box-shadow: none;
+        }
+    }
+    > .dl-btn-group {
+        box-shadow: none;
+
+        &:first-child {
+            > .dl-button:first-child {
+                border-top-left-radius: inherit;
+                border-bottom-left-radius: inherit;
+            }
+        }
+        &:last-child {
+            > .dl-button:last-child {
+                border-top-right-radius: inherit;
+                border-bottom-right-radius: inherit;
+            }
+        }
+    }
+    > .dl-btn-group:not(:first-child) > .dl-button:first-child:before {
+        border-left: 0;
+    }
+    > .dl-btn-group:not(:last-child) > .dl-button:last-child:before {
+        border-right: 0;
+    }
+    > .dl-button:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    > .dl-button:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    > .dl-button.dl-button--standard:before {
+        z-index: -1;
+    }
+    &--flat,
+    &--outlined,
+    &--outlined {
+        > .dl-separator {
+            display: none;
+        }
+        > .dl-button + .dl-button:before {
+            border-left: 0;
+        }
+        > .dl-button:not(:last-child):before {
+            border-right: 0;
+        }
+    }
+    &--stretch {
+        align-self: stretch;
+        border-radius: 0;
+    }
+    &--spread {
+        > .dl-btn-group {
+            display: flex !important;
+        }
+        > .dl-button,
+        > .dl-btn-group > .dl-button:not(.dl-btn-dropdown__arrow-container) {
+            width: auto;
+            min-width: 0;
+            max-width: 100%;
+            flex: 10000 1 0%;
+        }
+    }
+}
+</style>