@dataloop-ai/components 0.13.0

package/src/components/DlInfoErrorMessage.vue

@@ -0,0 +1,91 @@
+<template>
+    <span
+        v-show="!!value.length"
+        :id="uuid"
+        :class="classes"
+    >
+        {{ value }}
+    </span>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlInfoErrorMessage',
+    props: {
+        error: {
+            type: Boolean,
+            default: false
+        },
+        warning: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+        position: {
+            type: String,
+            default: 'below',
+            validator(value: string): boolean {
+                return ['above', 'below'].includes(value)
+            }
+        }
+    },
+    data() {
+        return {
+            uuid: `dl-info-error-message-${v4()}`
+        }
+    },
+    computed: {
+        classes(): string[] {
+            const classes = []
+
+            if (this.error) {
+                classes.push('text-error')
+            } else if (this.warning) {
+                classes.push('text-warning')
+            }
+
+            classes.push(this.position === 'below' ? 'text' : 'text-above')
+
+            return classes
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.text {
+    font-size: var(--dl-font-size-small);
+    color: var(--dl-color-lighter);
+    text-overflow: ellipsis;
+    line-height: 11px;
+    max-height: 22px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    display: inline-block;
+}
+
+.text-error {
+    color: var(--dl-color-negative) !important;
+}
+
+.text-warning {
+    color: var(--dl-color-warning) !important;
+}
+
+.text-above {
+    font-size: var(--dl-font-size-body);
+    color: var(--dl-color-darker);
+    text-overflow: ellipsis;
+    line-height: 13px;
+    max-height: 26px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    display: inline-block;
+}
+</style>

package/src/components/DlItem/DlItem.vue

@@ -0,0 +1,35 @@
+<template>
+    <dl-list-item
+        :id="uuid"
+        :clickable="clickable"
+    >
+        <dl-item-section>
+            <slot />
+        </dl-item-section>
+    </dl-list-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlListItem } from '../DlListItem'
+import DlItemSection from '../DlItemSection.vue'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlItem',
+    components: {
+        DlListItem,
+        DlItemSection
+    },
+    props: {
+        clickable: { type: Boolean, default: true }
+    },
+    data() {
+        return {
+            uuid: `dl-item-${v4()}`
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/DlItem/index.ts

@@ -0,0 +1,2 @@
+import DlItem from './DlItem.vue'
+export default DlItem

package/src/components/DlItemSection.vue

@@ -0,0 +1,88 @@
+<template>
+    <div
+        :id="uuid"
+        :style="cssVars"
+        :class="classes"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+import { getColor } from '../utils'
+
+export default defineComponent({
+    name: 'DlItemSection',
+    props: {
+        color: {
+            type: String,
+            default: null
+        },
+        side: Boolean,
+        noWrap: Boolean
+    },
+    data() {
+        return {
+            uuid: `dl-item-section-${v4()}`
+        }
+    },
+    computed: {
+        classes(): Record<string, boolean> {
+            return {
+                'dl-item__section': true,
+                'dl-item__section--side': this.side,
+                'dl-item__section--nowrap': this.noWrap,
+                'dl-item__section--main': !this.side
+            }
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-item-color': this.color ? getColor(this.color) : 'inherit'
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-item__section {
+    padding-left: 0;
+    padding-right: 0;
+    font-size: var(--dl-font-size-body);
+    color: var(--dl-item-color);
+    min-width: 0;
+    justify-content: flex-start;
+    &--nowrap {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        & > * {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+    &--side {
+        align-items: flex-start;
+        padding-right: 10px;
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+    }
+    &--main {
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+        flex: 10000 1 0%;
+        & + & {
+            margin-left: 8px;
+        }
+        ~ .dl-item__section--side {
+            align-items: flex-end;
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+</style>

package/src/components/DlLink/DlLink.vue

@@ -0,0 +1,76 @@
+<template>
+    <div
+        :id="uuid"
+        class="link-wrapper"
+    >
+        <a
+            :href="link"
+            :target="target"
+            :rel="rel"
+            :style="`color: var(--${textColor});`"
+            :class="`${disabled ? 'disabled' : ''}`"
+            @click="$emit('click')"
+        >
+            <slot />
+        </a>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+import { getLinkTarget, getLinkRel } from './utils'
+
+export default defineComponent({
+    name: 'DlLink',
+    props: {
+        href: { required: true, type: String },
+        newtab: { required: false, default: false, type: Boolean },
+        external: { required: false, default: false, type: Boolean },
+        disabled: { required: false, default: false, type: Boolean },
+        color: { required: false, type: String, default: null }
+    },
+    data() {
+        return {
+            uuid: `dl-link-${v4()}`
+        }
+    },
+    computed: {
+        link(): string {
+            return this.external
+                ? `${this.href}`
+                : `${window.origin}/${this.href}`
+        },
+        textColor(): string {
+            return this.color ?? 'dl-color-studio-secondary'
+        },
+        target(): string | null {
+            return getLinkTarget(this.external || this.newtab)
+        },
+        rel(): string | null {
+            return getLinkRel(this.external)
+        }
+    },
+    template: 'dl-link'
+})
+</script>
+
+<style scoped lang="css">
+a {
+    text-decoration: none;
+    font-size: var(--dl-font-size-body);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.disabled {
+    pointer-events: none;
+    color: var(--dl-color-disabled) !important;
+}
+
+.link-wrapper {
+    display: inline-block;
+}
+</style>

package/src/components/DlLink/index.ts

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

package/src/components/DlLink/utils.ts

@@ -0,0 +1,4 @@
+export const getLinkTarget = (openOnNewTab: boolean) =>
+    openOnNewTab ? '_blank' : null
+export const getLinkRel = (openOnNewTab: boolean) =>
+    openOnNewTab ? 'noopener noreferrer' : null

package/src/components/DlList.vue

@@ -0,0 +1,61 @@
+<template>
+    <div
+        :id="uuid"
+        :class="classes"
+    >
+        <slot :clickable="clickable" />
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+export default defineComponent({
+    name: 'DlList',
+    props: {
+        bordered: Boolean,
+        separator: Boolean,
+        padding: Boolean,
+        clickable: Boolean
+    },
+    data() {
+        return {
+            uuid: `dl-list-${v4()}`
+        }
+    },
+    computed: {
+        classes(): string | Record<string, string> {
+            return (
+                'dl-list' +
+                (this.bordered ? ' dl-list--bordered' : '') +
+                (this.separator ? ' dl-list--separator' : '') +
+                (this.padding ? ' dl-list--padding' : '')
+            )
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-list {
+    padding: 5px 0;
+    background-color: var(--dl-color-panel-background);
+    &--bordered {
+        border: 1px solid var(--dl-color-separator);
+    }
+    &--separator {
+        border-top: 1px solid var(--dl-color-separator);
+        & > .dl-list-item {
+            padding: 5px 10px;
+        }
+        & > .list-item-wrapper:not(:first-child) {
+            & .separator {
+                display: block;
+            }
+        }
+    }
+    &--padding {
+        padding: 8px 0;
+    }
+}
+</style>

package/src/components/DlListItem/DlListItem.vue

@@ -0,0 +1,205 @@
+<template>
+    <component
+        :is="as"
+        :id="uuid"
+        class="list-item-wrapper"
+    >
+        <hr
+            class="separator"
+            :class="{ 'separator--visible': bordered }"
+        >
+        <div
+            v-wave="!disabled && withWave"
+            :class="[
+                {
+                    'dl-list-item': true,
+                    'dl-list-item-disabled': disabled,
+                    'dl-list-spaced': bordered
+                },
+                'row'
+            ]"
+            :style="cssItemVars"
+            @click="onClick"
+        >
+            <dl-item-section
+                v-if="startIcon"
+                side
+            >
+                <dl-icon
+                    :icon="startIcon"
+                    :color="startIconColor"
+                    :size="startIconSize"
+                />
+            </dl-item-section>
+            <slot />
+            <dl-item-section
+                v-if="endIcon"
+                side
+            >
+                <dl-icon
+                    :icon="endIcon"
+                    :color="endIconColor"
+                    :size="endIconSize"
+                />
+            </dl-item-section>
+        </div>
+    </component>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlItemSection from '../DlItemSection.vue'
+import DlIcon from '../DlIcon.vue'
+import {
+    itemHoverColor,
+    itemActiveColor,
+    itemCursor,
+    itemBorder,
+    itemColor
+} from './utils'
+import { wave, waveTrigger } from '../../utils'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlListItem',
+    components: {
+        DlItemSection,
+        DlIcon
+    },
+    directives: {
+        wave,
+        waveTrigger
+    },
+    props: {
+        disabled: Boolean,
+        clickable: Boolean,
+        bordered: Boolean,
+        withWave: Boolean,
+        startIcon: { type: String, required: false, default: '' },
+        endIcon: { type: String, required: false, default: '' },
+        as: {
+            type: String,
+            default: 'div'
+        },
+        startIconColor: {
+            type: String,
+            required: false,
+            default: 'dl-color-darker'
+        },
+        endIconColor: {
+            type: String,
+            required: false,
+            default: 'dl-color-darker'
+        },
+        startIconSize: {
+            type: String,
+            default: '12px'
+        },
+        endIconSize: {
+            type: String,
+            default: '12px'
+        },
+        height: { type: String, default: null, required: false },
+        padding: { type: String, default: null, required: false }
+    },
+    emits: ['click'],
+    data() {
+        return {
+            uuid: `dl-list-item-${v4()}`
+        }
+    },
+    computed: {
+        isClickable(): boolean {
+            return this.clickable && !this.disabled
+        },
+        cssItemVars(): Record<string, string> {
+            return {
+                '--dl-list-item-hover': itemHoverColor(this.isClickable),
+                '--dl-list-item-active': itemActiveColor(this.isClickable),
+                '--dl-list-item-cursor': itemCursor(
+                    this.isClickable,
+                    this.disabled
+                ),
+                '--dl-list-item-border': itemBorder(this.bordered),
+                '--dl-list-item-color': itemColor(this.disabled),
+                '--dl-list-item-height': this.height ?? '28px',
+                '--dl-list-item-padding': this.padding ?? '0px 10px'
+            }
+        }
+    },
+    methods: {
+        onClick(e: MouseEvent) {
+            if (this.isClickable) {
+                this.$emit('click', e)
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.list-item-wrapper {
+    width: 100%;
+}
+
+.dl-list-item {
+    -webkit-tap-highlight-color: transparent;
+    background-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    width: 100%;
+    border-radius: 0px;
+    cursor: var(--dl-list-item-cursor);
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    color: var(--dl-list-item-color);
+    display: flex;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    -webkit-box-pack: start;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    min-width: 0px;
+    box-sizing: border-box;
+    text-align: left;
+    min-height: var(--dl-list-item-height);
+    height: 100%;
+    padding: var(--dl-list-item-padding);
+    font-size: var(--dl-font-size-body);
+    line-height: 14px;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    &:hover {
+        background-color: var(--dl-list-item-hover);
+    }
+    &:active {
+        background-color: var(--dl-list-item-active);
+    }
+}
+
+.separator {
+    border: none;
+    border-top: 1px solid var(--dl-color-separator);
+    display: none;
+    &--visible {
+        display: block;
+        margin: 5px 0;
+    }
+}
+
+.dl-list-spaced {
+    margin: 5px 0;
+}
+
+.dl-list-item-disabled {
+    color: var(--dl-color-disabled) !important;
+    & > div > i::before {
+        color: var(--dl-color-disabled) !important;
+    }
+}
+</style>

package/src/components/DlListItem/index.ts

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

package/src/components/DlListItem/utils.ts

@@ -0,0 +1,14 @@
+export const itemHoverColor = (isActionable: boolean) =>
+    isActionable ? 'var(--dl-color-fill-hover)' : 'transparent'
+
+export const itemActiveColor = (isActionable: boolean) =>
+    isActionable ? 'var(--dl-color-fill)' : 'transparent'
+
+export const itemCursor = (actionable: boolean, disabled: boolean) =>
+    actionable ? 'pointer' : disabled ? 'not-allowed' : 'cursor'
+
+export const itemBorder = (bordered: boolean) =>
+    bordered ? `1px solid var(--dl-color-separator)` : '0px'
+
+export const itemColor = (disabled: boolean) =>
+    disabled ? 'var(--dl-color-disabled)' : 'var(--dl-color-darker)'