@dataloop-ai/components 0.13.0

package/src/components/DlDialogBox/DlDialogBoxFooter.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="root-container">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlDialogBoxFooter'
+})
+</script>
+
+<style lang="scss" scoped>
+.root-container {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+</style>

package/src/components/DlDialogBox/DlDialogBoxHeader.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="root-container">
+        <div>
+            <dl-button
+                v-if="hasBackButton"
+                label="Back"
+                icon="icon-dl-arrow-left"
+                flat
+                text-color="dl-color-medium"
+                style="padding: 0; margin-bottom: 10px"
+                @click.stop.prevent="$emit('onClose')"
+            />
+            <h2 class="title">
+                {{ title }}
+            </h2>
+            <p class="subtitle">
+                {{ subtitle }}
+            </p>
+        </div>
+        <dl-button
+            v-if="closeButton"
+            class="close-button"
+            icon="icon-dl-close"
+            size="s"
+            flat
+            text-color="dl-color-darker"
+            @click="$emit('onClose')"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlButton } from '../DlButton'
+
+export default defineComponent({
+    name: 'DlDialogBoxHeader',
+    components: {
+        DlButton
+    },
+    props: {
+        title: { type: String, default: '' },
+        subtitle: { type: String, default: '' },
+        closeButton: { type: Boolean, default: true },
+        hasBackButton: Boolean
+    },
+    emits: ['onClose']
+})
+</script>
+
+<style lang="scss" scoped>
+.root-container {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: var(--dl-font-size-h2);
+    margin: 0;
+    color: var(--dl-color-darker);
+}
+
+.subtitle {
+    font-size: var(--dl-font-size-body);
+    margin: 3px 0 0 0;
+    color: var(--dl-color-medium);
+}
+
+.close-button {
+    margin-right: -6px;
+    margin-top: -6px;
+}
+</style>

package/src/components/DlDialogBox/index.ts

@@ -0,0 +1,5 @@
+import DlDialogBox from './DlDialogBox.vue'
+import DlDialogBoxHeader from './DlDialogBoxHeader.vue'
+import DlDialogBoxFooter from './DlDialogBoxFooter.vue'
+
+export { DlDialogBox, DlDialogBoxHeader, DlDialogBoxFooter }

package/src/components/DlDropdownButton.vue

@@ -0,0 +1,463 @@
+<template>
+    <dl-button-group
+        v-if="split"
+        :id="uuid"
+        :class="identifierClass"
+        class="dl-btn-dropdown dl-btn-dropdown--split no-wrap dl-btn-item"
+        :outlined="outlined"
+        :flat="flat"
+        :stretch="stretch"
+    >
+        <dl-button
+            class="dl-btn-dropdown--current"
+            :style="mainBtnStyle"
+            :label="label"
+            :outlined="outlined"
+            :size="size"
+            :flat="flat"
+            :disabled="disabled === true || disableMainBtn === true"
+            :max-width="maxWidth"
+            :color="color"
+            :icon="icon"
+            :uppercase="uppercase"
+            :text-color="textColor"
+            no-wrap
+            :aria-expanded="showing === true ? 'true' : 'false'"
+            :aria-haspopup="true"
+            :aria-disabled="
+                disabled === true ||
+                    (split === false && disableMainBtn === true) ||
+                    disableDropdown === true
+            "
+            @click="onClickHide"
+        />
+        <dl-button
+            class="dl-btn-dropdown__arrow-container"
+            :style="btnCSSStyles"
+            :disabled="disabled === true || disableDropdown === true"
+            :outlined="outlined"
+            :flat="flat"
+            :size="size"
+            :color="color"
+            :text-color="textColor"
+            :aria-expanded="showing"
+            :aria-haspopup="true"
+            :aria-disabled="
+                disabled === true ||
+                    (split === false && disableMainBtn === true) ||
+                    disableDropdown === true
+            "
+        >
+            <div
+                class="dl-btn-dropdown--separator"
+                :style="`
+                    background-color: ${
+                    disabled
+                        ? 'var(--dl-color-disabled)'
+                        : outlined && !textColor
+                            ? 'var(--dl-color-secondary)'
+                            : textColor || 'var(--dl-color-white)'
+                }`"
+            />
+            <dl-icon
+                :class="iconClass"
+                :icon="dropdownIcon"
+                :size="iconSize"
+                :color="
+                    disabled
+                        ? 'dl-color-disabled'
+                        : outlined && !textColor
+                            ? 'dl-color-secondary'
+                            : textColor || 'dl-color-white'
+                "
+            />
+        </dl-button>
+        <dl-menu
+            ref="menuRef"
+            v-model="menuModel"
+            :class="contentClass"
+            :style="contentStyle"
+            :cover="cover"
+            fit
+            :persistent="persistent"
+            :auto-close="autoClose"
+            :anchor="menuAnchor"
+            :self="menuSelf"
+            :offset="menuOffset"
+            separate-close-popup
+            :disabled="disabled"
+            :max-height="maxHeight"
+            @before-show="onBeforeShow"
+            @show="onShow"
+            @before-hide="onBeforeHide"
+            @hide="onHide"
+        >
+            <slot />
+        </dl-menu>
+    </dl-button-group>
+    <dl-button
+        v-else
+        class="dl-btn-dropdown dl-btn-dropdown--simple"
+        v-bind="$props"
+        label=""
+        :aria-expanded="showing"
+        :aria-haspopup="true"
+        :aria-disabled="
+            disabled === true ||
+                (split === false && disableMainBtn === true) ||
+                disableDropdown === true
+        "
+        :disabled="disabled === true || disableMainBtn === true"
+        :style="mainBtnStyle"
+        no-wrap
+        @click="onClick"
+    >
+        <div
+            style="
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+            "
+        >
+            <span style="margin-right: 5px">
+                {{ label }}
+            </span>
+            <dl-icon
+                :class="iconClass"
+                :icon="dropdownIcon"
+                :size="iconSize"
+                :color="
+                    disabled
+                        ? 'dl-color-disabled'
+                        : outlined && !textColor
+                            ? 'dl-color-secondary'
+                            : textColor || 'dl-color-white'
+                "
+            />
+        </div>
+
+        <dl-menu
+            ref="menuRef"
+            v-model="menuModel"
+            :class="contentClass"
+            :style="contentStyle"
+            :cover="cover"
+            fit
+            :persistent="persistent"
+            :auto-close="autoClose"
+            :anchor="menuAnchor"
+            :self="menuSelf"
+            :offset="menuOffset"
+            separate-close-popup
+            :disabled="disabled"
+            :max-height="maxHeight"
+            @before-show="onBeforeShow"
+            @show="onShow"
+            @before-hide="onBeforeHide"
+            @hide="onHide"
+        >
+            <slot />
+        </dl-menu>
+    </dl-button>
+</template>
+
+<script lang="ts">
+import DlIcon from './DlIcon.vue'
+import { DlButton } from './DlButton'
+import DlButtonGroup from './DlButtonGroup.vue'
+import { DlMenu } from './DlMenu'
+import { stop } from '../utils/events'
+import {
+    defineComponent,
+    ref,
+    computed,
+    watch,
+    onMounted,
+    getCurrentInstance
+} from 'vue-demi'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlDropdownButton',
+    components: {
+        DlMenu,
+        DlIcon,
+        DlButton,
+        DlButtonGroup
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        'onUpdate:modelValue': [Function, Array],
+        modelValue: Boolean,
+        split: Boolean,
+        dropdownIcon: { type: String, default: 'icon-dl-down-chevron' },
+        contentClass: { type: [Array, String, Object], default: '' },
+        contentStyle: { type: [Array, String, Object], default: '' },
+        mainBtnStyle: { type: [Array, String, Object], default: '' },
+        cover: Boolean,
+        maxWidth: { type: String, default: null },
+        maxHeight: { type: String, default: null },
+        persistent: Boolean,
+        stretch: Boolean,
+        autoClose: Boolean,
+        menuAnchor: {
+            type: String,
+            default: 'bottom end'
+        },
+        menuSelf: {
+            type: String,
+            default: 'top end'
+        },
+        menuOffset: { type: Array, default: () => [0, 0] },
+        disableMainBtn: Boolean,
+        disableDropdown: Boolean,
+        noIconAnimation: Boolean,
+        disabled: Boolean,
+        color: { type: String!, default: '' },
+        label: { type: String, default: '' },
+        textColor: { type: String!, default: '' },
+        size: { type: String, default: 'm' },
+        contained: { type: Boolean, default: true },
+        fluid: Boolean,
+        icon: { type: String, required: false, default: '' },
+        iconSize: { type: String, required: false, default: '20px' },
+        flat: Boolean,
+        uppercase: Boolean,
+        outlined: Boolean,
+        padding: { type: String, default: '5px' }
+    },
+    emits: [
+        'update:model-value',
+        'update:modelValue',
+        'click',
+        'before-show',
+        'show',
+        'before-hide',
+        'hide'
+    ],
+
+    setup(props, { emit }) {
+        const vm = getCurrentInstance()
+        const proxy = vm!.proxy!
+
+        const showing = ref<boolean>(!!props.modelValue)
+        const menuRef = ref(null)
+
+        const attributes = computed(() => {
+            const acc: Record<string, string> = {
+                'aria-expanded': showing.value === true ? 'true' : 'false',
+                'aria-haspopup': 'true'
+            }
+
+            if (
+                props.disabled === true ||
+                (props.split === false && props.disableMainBtn === true) ||
+                props.disableDropdown === true
+            ) {
+                acc['aria-disabled'] = 'true'
+            }
+
+            return acc
+        })
+
+        const menuModel = computed({
+            get: () => props.modelValue,
+            set: (val) => emit('update:modelValue', val)
+        })
+
+        const iconClass = computed(() => {
+            return (
+                'dl-btn-dropdown__arrow' +
+                (showing.value === true && props.noIconAnimation === false
+                    ? ' rotate-180'
+                    : '') +
+                (props.split === false
+                    ? ' dl-btn-dropdown__arrow-container'
+                    : '')
+            )
+        })
+
+        const btnCSSStyles = computed(() => {
+            return {
+                '--dl-btn-border-left': props.outlined
+                    ? 'none'
+                    : 'var(--dl-color-white)'
+            }
+        })
+
+        watch(
+            () => props.modelValue,
+            (val) => {
+                if (menuRef.value) {
+                    (menuRef!.value as Record<string, Function>)[
+                        val ? 'show' : 'hide'
+                    ]()
+                }
+            }
+        )
+
+        watch(() => props.split, hide)
+
+        function onBeforeShow(e: Event) {
+            showing.value = true
+            emit('before-show', e)
+        }
+
+        function onShow(e: Event) {
+            emit('show', e)
+            emit('update:modelValue', true)
+        }
+
+        function onBeforeHide(e: Event) {
+            showing.value = false
+            emit('before-hide', e)
+        }
+
+        function onHide(e: Event) {
+            emit('hide', e)
+            emit('update:modelValue', false)
+        }
+
+        function onClick(e: Event) {
+            emit('click', e)
+        }
+
+        function onClickHide(e: Event) {
+            stop(e)
+            hide(e)
+            emit('click', e)
+        }
+
+        function toggle(evt: Event) {
+            if (menuRef.value) {
+                (menuRef.value as Record<string, Function>).toggle(evt)
+            }
+        }
+
+        function show(evt?: Event) {
+            if (menuRef.value) {
+                (menuRef.value as Record<string, Function>).show(evt)
+            }
+        }
+
+        function hide(evt?: any) {
+            if (menuRef.value) {
+                (menuRef.value as Record<string, Function>).hide(evt)
+            }
+        }
+
+        // expose public methods
+        Object.assign(proxy, {
+            show,
+            hide,
+            toggle,
+            onClickHide,
+            onClick,
+            onBeforeShow,
+            onShow,
+            onBeforeHide,
+            onHide
+        })
+
+        onMounted(() => {
+            if (props.modelValue) {
+                show()
+            }
+        })
+
+        const identifierClass = computed(() => {
+            return `dl-dropdown-button-${props.label ?? ''}`.replaceAll(
+                ' ',
+                '-'
+            )
+        })
+
+        return {
+            uuid: `dl-dropdown-button-${v4()}`,
+            identifierClass,
+            iconClass,
+            menuRef,
+            attributes,
+            btnCSSStyles,
+            showing,
+            onBeforeShow,
+            onBeforeHide,
+            onShow,
+            onHide,
+            onClick,
+            onClickHide,
+            toggle,
+            show,
+            hide,
+            menuModel
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-btn-dropdown {
+    padding-right: var(--dl-btn-padding-right) !important;
+    &--split .dl-btn-dropdown__arrow-container {
+        // padding: 0 4px;
+        ::v-deep .dl-button {
+            border-top-left-radius: 0 !important;
+            border-left-width: 0 !important;
+            border-bottom-left-radius: 0 !important;
+            padding-right: 10px;
+            padding-left: 10px;
+            &:hover:enabled:not(:active),
+            &:hover:enabled:active {
+                border-top-left-radius: 0 !important;
+                border-left-width: 0 !important;
+                border-bottom-left-radius: 0 !important;
+            }
+            &:active:not(:disabled) {
+                border-top-left-radius: 0 !important;
+                border-left-width: 0 !important;
+                border-bottom-left-radius: 0 !important;
+            }
+        }
+    }
+
+    &--separator {
+        position: absolute;
+        left: 0;
+        width: 1px;
+        height: 60%;
+    }
+
+    &--simple {
+        ::v-deep .dl-button-no-wrap {
+            padding-right: 8px;
+        }
+    }
+    &__arrow {
+        transition: transform 0.28s;
+    }
+    &--current {
+        flex-grow: 1;
+        ::v-deep .dl-button {
+            border-top-right-radius: 0 !important;
+            border-right-width: 0 !important;
+            border-bottom-right-radius: 0 !important;
+            &:hover:enabled:not(:active) {
+                border-top-right-radius: 0 !important;
+                border-right-width: 0 !important;
+                border-bottom-right-radius: 0 !important;
+            }
+            &:active:not(:disabled) {
+                border-top-right-radius: 0 !important;
+                border-right-width: 0 !important;
+                border-bottom-right-radius: 0 !important;
+            }
+        }
+    }
+}
+::v-deep .dl-button-no-wrap {
+    flex-grow: 1;
+}
+</style>

package/src/components/DlIcon.vue

@@ -0,0 +1,147 @@
+<template>
+    <div
+        v-if="!svg"
+        :id="uuid"
+        :style="inlineStyles"
+        @click="$emit('click', $event)"
+    >
+        <i
+            class="dl-icon"
+            :class="`${icon} ${externalIcon ? externalIconSource : ''}`"
+            aria-hidden="true"
+            role="presentation"
+            :style="cssIconVars"
+        >
+            {{ externalIcon ? icon : null }}
+        </i>
+        <slot />
+    </div>
+    <div
+        v-else
+        :id="uuid"
+        style="display: inline"
+        @click="$emit('click', $event)"
+    >
+        <div ref="svgIcon">
+            <div ref="childToReplace" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+import { getColor, loggerFactory } from '../utils'
+
+export default defineComponent({
+    name: 'DlIcon',
+    props: {
+        color: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            required: true
+        },
+        size: {
+            type: String,
+            default: '12px'
+        },
+        svg: {
+            type: Boolean,
+            default: false
+        },
+        inline: {
+            type: Boolean,
+            default: true
+        },
+        svgSource: {
+            type: String,
+            default: null
+        }
+    },
+    emits: ['click'],
+    data() {
+        return {
+            uuid: `dl-icon-${v4()}`,
+            externalIconSource: 'material-icons',
+            logger_: loggerFactory('dl-icon')
+        }
+    },
+    computed: {
+        cssIconVars(): Record<string, string> {
+            return {
+                '--dl-icon-font-size': `${this.size}`,
+                '--dl-icon-color': this.color
+                    ? // needed for now until the swap of DLBTN in OA
+                      getColor(
+                          this.color === 'secondary'
+                              ? 'q-color-secondary'
+                              : this.color,
+                          'dl-color-icon-default'
+                      )
+                    : 'inherit'
+            }
+        },
+        inlineStyles(): string {
+            return this.inline ? 'display: inline' : ''
+        },
+        // needed to allow external source of icons that do not use class based
+        externalIcon(): boolean {
+            return (
+                !this.icon.startsWith('icon-dl-') &&
+                !this.icon.startsWith('fas') &&
+                !this.icon.startsWith('fa-')
+            )
+        }
+    },
+    mounted() {
+        const possibleToLoadSvg = this.svg && this.icon && this.icon !== ''
+        if (possibleToLoadSvg) {
+            this.loadSvg()
+        }
+    },
+    methods: {
+        loadSvg() {
+            return new Promise<void>((resolve, reject) => {
+                const svgElement = new Image()
+                svgElement.setAttribute('height', this.size)
+                svgElement.setAttribute('width', this.size)
+
+                svgElement.onload = () => {
+                    // @ts-ignore // In order to handle events and loading that occur mid unmounting.
+                    if (this._isDestroyed || this._isBeingDestroyed) {
+                        return
+                    }
+                    const container = this.$refs.svgIcon as HTMLDivElement
+                    if (!container) {
+                        reject(new Error('No Ref'))
+                        return
+                    }
+                    container.setAttribute('height', this.size)
+                    container.setAttribute('width', this.size)
+                    container?.firstChild?.replaceWith(svgElement)
+                    resolve()
+                }
+
+                try {
+                    svgElement.src = this.svgSource
+                        ? `${this.svgSource}/${this.icon}.svg`
+                        : require(`@dataloop-ai/icons/docs/assets/${this.icon}.svg`)
+                } catch (e) {
+                    reject(e)
+                }
+            })
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-icon {
+    display: inline-block;
+    color: var(--dl-icon-color);
+    font-size: var(--dl-icon-font-size);
+}
+</style>