@dataloop-ai/components 0.18.0 → 0.18.2

package/src/layouts/DlStudioLayout/components/ListAutocomplete.vue

@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <div>
+            <dl-input
+                v-model="inputValue"
+                placeholder="No items selected"
+                size="l"
+                has-prepend
+                padding-prop="0px 0px 0px 0px"
+                :border-left="inputBorderLeft"
+                @clear="clearAutocomplete"
+                @update:model-value="onChange"
+                @focus="onActiveInput"
+            >
+                <template #prepend>
+                    <dl-icon
+                        style="margin-bottom: 5px"
+                        icon="icon-dl-search"
+                        size="12px"
+                    />
+                </template>
+            </dl-input>
+        </div>
+        <div>
+            <dl-list clickable>
+                <template #default="{ clickable }">
+                    <dl-list-item
+                        v-for="(item, itemIndex) in results"
+                        :key="itemIndex"
+                        :clickable="clickable"
+                        :border-left="`2px solid ${item.color}`"
+                        :end-icon="
+                            item.name === inputValue ? `icon-dl-approve` : ''
+                        "
+                        :style="`background-color: ${activeBackground(
+                            item.name
+                        )}`"
+                        :highlighted="itemIndex === highlightedIndex"
+                        @click="handleOption(item)"
+                    >
+                        <dl-item-section no-wrap>
+                            <dl-ellipsis
+                                color="dl-color-darker"
+                                :text="item.name"
+                            />
+                        </dl-item-section>
+                    </dl-list-item>
+                </template>
+            </dl-list>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted, PropType } from 'vue-demi'
+import { useArrowNavigation } from '../../../hooks/use-arrow-navigation'
+import {
+    DlList,
+    DlItemSection,
+    DlListItem,
+    DlInput,
+    DlIcon,
+    DlEllipsis
+} from '../../../components'
+
+type TListAutocomplete = {
+    name: string
+    color: string
+}
+
+export default defineComponent({
+    name: 'ListAutocomplete',
+    components: {
+        DlList,
+        DlItemSection,
+        DlListItem,
+        DlInput,
+        DlIcon,
+        DlEllipsis
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => Array as PropType<any[]>
+        }
+    },
+    emit: ['selectedOption'],
+    setup(props, ctx) {
+        const inputValue = ref('')
+        const isInputActive = ref(false)
+        const inputBorderLeft = ref('')
+        const results = ref(null)
+        const { selectedItem, highlightedIndex } = useArrowNavigation(
+            results,
+            isInputActive
+        )
+        watch(selectedItem, (value: any) => {
+            handleOption(value)
+        })
+        const filterResults = () => {
+            results.value = props.items.filter((item: any) => {
+                return (
+                    item.name
+                        .toLowerCase()
+                        .indexOf(inputValue.value.toLowerCase()) > -1
+                )
+            })
+        }
+        const onChange = () => {
+            filterResults()
+        }
+        const activeBackground = (name: string) =>
+            name === inputValue.value ? 'var(--dl-color-fill)' : 'transparent'
+
+        onMounted(() => {
+            filterResults()
+        })
+
+        const handleOption = (item: TListAutocomplete) => {
+            inputValue.value = item.name
+            inputBorderLeft.value = `2px solid ${item.color}`
+            ctx.emit('selectedOption', item)
+        }
+        const clearAutocomplete = () => {
+            inputBorderLeft.value = ''
+            ctx.emit('selectedOption', null)
+        }
+        const onActiveInput = () => {
+            isInputActive.value = true
+        }
+
+        return {
+            handleOption,
+            inputValue,
+            clearAutocomplete,
+            filterResults,
+            results,
+            onChange,
+            inputBorderLeft,
+            activeBackground,
+            onActiveInput,
+            selectedItem,
+            highlightedIndex
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/layouts/DlStudioLayout/components/NavigationDrawer.vue

@@ -0,0 +1,147 @@
+<template>
+    <div
+        class="dl-layout-drawer"
+        :style="cssVars"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+        <div style="height: 100%; position: relative">
+            <div
+                v-if="location === 'right'"
+                class="dl-layout-drawer__wrapper"
+            >
+                <dl-icon
+                    :icon="expandIcon"
+                    size="25px"
+                    class="dl-layout-drawer__wrapper__expand-icon"
+                    :class="{ expanded: !isExpanded }"
+                    @click="toggleExpandDrawer"
+                />
+            </div>
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted, watch } from 'vue-demi'
+import DlIcon from '../../../essential/DlIcon/DlIcon.vue'
+
+export default defineComponent({
+    name: 'NavigationDrawer',
+    components: {
+        DlIcon
+    },
+    props: {
+        position: {
+            type: String,
+            default: 'relative',
+            validator: (val: string) => ['relative', 'absolute'].includes(val)
+        },
+        location: {
+            type: String,
+            default: 'left',
+            validator: (val: string) => ['left', 'right'].includes(val)
+        },
+        expandDrawer: {
+            type: Boolean
+        }
+    },
+    emits: ['expand'],
+    setup(props, context) {
+        const isVisible = ref(true)
+        const propsExpandDrawer = computed(() => props.expandDrawer)
+        const isExpanded = ref(propsExpandDrawer.value)
+        const drawerWidth = ref('')
+        const LARGE_WIDTH = '250px'
+        const SMALL_WIDTH = '0px'
+
+        const onMouseEnter = () => {
+            if (isExpanded.value) return
+            drawerWidth.value = LARGE_WIDTH
+            isVisible.value = true
+        }
+        const onMouseLeave = () => {
+            if (isExpanded.value) return
+            drawerWidth.value = SMALL_WIDTH
+            isVisible.value = false
+        }
+        const expandIcon = computed(() =>
+            props.location === 'left'
+                ? 'icon-dl-left-chevron'
+                : 'icon-dl-right-chevron'
+        )
+        const toggleExpandDrawer = () => {
+            isExpanded.value = !isExpanded.value
+            context.emit('expand', isExpanded.value)
+        }
+
+        onMounted(() => {
+            drawerWidth.value = SMALL_WIDTH
+        })
+        watch(isExpanded, (value) => {
+            isVisible.value = value
+            drawerWidth.value = value ? LARGE_WIDTH : SMALL_WIDTH
+        })
+
+        watch(propsExpandDrawer, (value) => {
+            isExpanded.value = value
+        })
+
+        const cssVars = computed(() => {
+            return {
+                '--dl-layout-drawer-width': isExpanded.value
+                    ? LARGE_WIDTH
+                    : SMALL_WIDTH,
+                '--dl-layout-position': props.position,
+                '--dl-layout-drawer-overflow':
+                    props.position === 'absolute' ? 'hidden' : null
+            }
+        })
+        return {
+            cssVars,
+            onMouseEnter,
+            drawerWidth,
+            onMouseLeave,
+            isVisible,
+            expandIcon,
+            isExpanded,
+            toggleExpandDrawer
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-layout-drawer {
+    position: var(--dl-layout-position);
+    z-index: 1;
+    width: var(--dl-layout-drawer-width);
+    height: 100%;
+    overflow: var(--dl-layout-drawer-overflow);
+    transition: all 300ms;
+    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.08);
+    background-color: transparent;
+
+    &__wrapper {
+        position: absolute;
+        top: 70px;
+        left: -17px;
+        cursor: pointer;
+        color: var(--dl-color-lighter);
+        text-align: right;
+        margin-top: 8px;
+        background-color: var(--dl-color-bg);
+        border-radius: 50px;
+
+        &__expand-icon {
+            display: flex !important;
+            transition: all 300ms;
+
+            &.expanded {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
+</style>

package/src/layouts/DlStudioLayout/index.ts

@@ -0,0 +1,2 @@
+import DlStudioLayout from './DlStudioLayout.vue'
+export { DlStudioLayout }

package/src/layouts/DlStudioLayout/types/HorizontalItems.ts

@@ -0,0 +1,9 @@
+type option = {
+    label: string
+    value: string
+}
+export type HorizontalItems = {
+    title?: string
+    icon?: string
+    options: option[]
+}

package/src/layouts/DlStudioLayout/types/VerticalItems.ts

@@ -0,0 +1,10 @@
+export type LayoutVerticalItems = {
+    id: number
+    link: string
+    icon: string
+    title: string
+    subtitle?: string
+    fontSize: string
+    hasSeparator?: boolean
+    data?: LayoutVerticalItems[]
+}

package/src/simple-code-editor.d.ts

@@ -0,0 +1 @@
+declare module 'simple-code-editor'

package/src/utils/click-outside.ts

@@ -27,7 +27,7 @@ function globalHandler(evt: ClickOutsideEvent | TouchOutsideEvent) {
     const target = evt.target as HTMLElement
 
     if (
-        target === void 0 ||
+        !target ||
         target.nodeType === 8 ||
         target.classList.contains('no-pointer-events') === true
     ) {

package/src/utils/dom.ts

@@ -12,15 +12,15 @@ export function css(element: HTMLElement, css: Record<string, string>) {
 export function getElement(
     el: HTMLElement | Ref<HTMLElement> | Element | null | string
 ) {
-    if (el === void 0 || el === null) {
-        return void 0
+    if (!el) {
+        return null
     }
 
     if (typeof el === 'string') {
         try {
-            return document.querySelector(el) || void 0
+            return document.querySelector(el) || null
         } catch (err) {
-            return void 0
+            return null
         }
     }
 
@@ -33,7 +33,7 @@ export function getElement(
 
 // internal
 export function childHasFocus(el: HTMLElement, focusedEl: Node) {
-    if (el === void 0 || el === null || el.contains(focusedEl) === true) {
+    if (!el || el.contains(focusedEl) === true) {
         return true
     }
 

package/src/utils/events.ts

@@ -65,7 +65,7 @@ export function addEvt(
 ) {
     const name = `__dl_${targetName}_evt`
 
-    ctx[name] = ctx[name] !== void 0 ? ctx[name].concat(events) : events
+    ctx[name] = ctx[name] ? ctx[name].concat(events) : events
 
     events.forEach((evt: any[]) => {
         evt[0].addEventListener(evt[1], ctx[evt[2]], listenOpts[evt[3]])
@@ -75,10 +75,10 @@ export function addEvt(
 export function cleanEvt(ctx: Record<string, any>, targetName: string) {
     const name = `__dl_${targetName}_evt`
 
-    if (ctx[name] !== void 0) {
+    if (ctx[name]) {
         ctx[name].forEach((evt: any[]) => {
             evt[0].removeEventListener(evt[1], ctx[evt[2]], listenOpts[evt[3]])
         })
-        ctx[name] = void 0
+        ctx[name] = null
     }
 }

package/src/utils/global-nodes.ts

@@ -11,9 +11,9 @@ export function createGlobalNode(id: string | null = null) {
         el.id = id
     }
 
-    if (globalConfig.globalNodes !== void 0) {
+    if (globalConfig.globalNodes) {
         const cls = globalConfig.globalNodes.class
-        if (cls !== void 0) {
+        if (cls) {
             el.className = cls
         }
     }

package/src/utils/input-sizes.ts

@@ -1,7 +1,10 @@
 export const InputSizes = {
     l: 'l',
     m: 'm',
-    s: 's'
+    s: 's',
+    large: 'large',
+    medium: 'medium',
+    small: 'small'
 } as const
 
-export type TInputSizes = typeof InputSizes[keyof typeof InputSizes]
+export type TInputSizes = (typeof InputSizes)[keyof typeof InputSizes]

package/src/utils/is-ellipsis-active.ts

@@ -1,3 +1,6 @@
 export const isEllipsisActive = (e: Element) => {
-    return (e as HTMLElement).offsetWidth < e.scrollWidth
+    return (
+        (e as HTMLElement).offsetWidth < e.scrollWidth ||
+        (e as HTMLElement).offsetHeight < e.scrollHeight
+    )
 }