@dataloop-ai/components 0.18.144 → 0.19.0

package/src/components/basic/DlWidget/DlWidget.vue

@@ -66,7 +66,8 @@
 import { v4 } from 'uuid'
 import { computed, defineComponent, ref, toRef, PropType } from 'vue-demi'
 import { DlIcon } from '../../essential'
-import { getElementAbove, addMouseEnter, removeMouseEnter } from '../utils'
+import { addMouseEnter, removeMouseEnter } from '../utils'
+import { getElementAbove } from '../../../utils'
 import { DlEmptyStateProps } from '../DlEmptyState/types'
 import DlEmptyState from '../DlEmptyState/DlEmptyState.vue'
 

package/src/components/basic/utils.ts

@@ -1,12 +1,3 @@
-export function getElementAbove(el: HTMLElement, className: string) {
-    //@ts-ignore
-    for (; el && el !== document; el = el.parentNode) {
-        if (el.classList.contains(className)) {
-            return el
-        }
-    }
-}
-
 export function addMouseEnter(className: string, method: EventListenerObject) {
     Array.from(document.getElementsByClassName(className)).forEach((widget) => {
         widget.addEventListener('mouseenter', method)

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -0,0 +1,127 @@
+<template>
+    <div style="width: 200px">
+        <dl-input
+            v-model="inputValue"
+            :placeholder="placeHolderText"
+            size="l"
+            has-prepend
+            padding-prop="0px 0px 0px 0px"
+            :style="inputStyles"
+        >
+            <template #prepend>
+                <dl-icon
+                    style="margin-bottom: 5px"
+                    icon="icon-dl-search"
+                    size="12px"
+                />
+            </template>
+        </dl-input>
+        <dl-tree-table
+            draggable="none"
+            separator="none"
+            :hide-pagination="true"
+            :hide-header="true"
+            :bordered="false"
+            :columns="columns"
+            selection="none"
+            :loading="false"
+            :filter="inputValue"
+            :rows="items"
+            row-key="name"
+            color="dl-color-secondary"
+            @row-click="handleRowClick"
+        >
+            <template #body-cell-displayLabel="item">
+                <DlLabel
+                    :text="item.row.displayLabel"
+                    :indicator-color="item.row.color"
+                    class="dl-label-picker-item"
+                />
+            </template>
+        </dl-tree-table>
+    </div>
+</template>
+
+<script lang="ts">
+import { ref, PropType, defineComponent, computed } from 'vue-demi'
+import { DlLabel, DlIcon } from '../../essential'
+import { DlInput, DlTreeTable } from '../../compound'
+import { DlTableColumn } from '../../types'
+import { DlLabelPickerItem } from './types'
+
+export default defineComponent({
+    name: 'DlLabelPicker',
+    components: {
+        DlInput,
+        DlIcon,
+        DlLabel,
+        DlTreeTable
+    },
+    props: {
+        items: {
+            type: Array as PropType<DlLabelPickerItem[]>,
+            default: () => [] as PropType<DlLabelPickerItem[]>
+        }
+    },
+    emits: ['selectedLabel'],
+    setup(props, { emit, slots }) {
+        const columns: DlTableColumn[] = [
+            {
+                name: 'displayLabel',
+                label: '',
+                required: false,
+                align: 'left',
+                field: 'displayLabel',
+                sortable: false,
+                style: `cursor: pointer;`
+            }
+        ]
+
+        const inputValue = ref('')
+        const isInputActive = ref(false)
+        const inputBorderLeft = ref('2px solid transparent')
+        const currentSelectedLabel = ref<DlLabelPickerItem>(null)
+
+        const handleRowClick = (_: MouseEvent, item: DlLabelPickerItem) => {
+            currentSelectedLabel.value = item
+            emit('selectedLabel', item)
+        }
+
+        const placeHolderText = computed(() => {
+            if (!currentSelectedLabel.value) {
+                return `No items selected`
+            }
+
+            return currentSelectedLabel.value.displayLabel
+        })
+
+        const selectedColor = computed(() => {
+            if (!currentSelectedLabel.value) {
+                return null
+            }
+            return currentSelectedLabel.value.color
+        })
+
+        const inputStyles = computed(() => {
+            return { 'border-left': `2px solid ${selectedColor.value}` }
+        })
+
+        return {
+            handleRowClick,
+            inputValue,
+            inputBorderLeft,
+            isInputActive,
+            columns,
+            selectedColor,
+            placeHolderText,
+            inputStyles
+        }
+    }
+})
+</script>
+
+<style scope>
+.dl-label-picker-item {
+    cursor: pointer;
+}
+</style>

package/src/components/blocks/DlLabelPicker/index.ts

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

package/src/components/blocks/DlLabelPicker/types.ts

@@ -0,0 +1,6 @@
+export type DlLabelPickerItem = {
+    color: string
+    identifier: string
+    displayLabel: string
+    children?: DlLabelPickerItem[]
+}

package/src/components/blocks/index.ts

@@ -0,0 +1 @@
+export * from './DlLabelPicker'

package/src/components/blocks/types.ts

@@ -0,0 +1 @@
+export * from './DlLabelPicker/types'

package/src/components/compound/DlCodeEditor/README.md

@@ -1,11 +1,12 @@
-# DlCodeEditor 
+# DlCodeEditor
 
 The DlCodeEditor component is based off the [simple-code-editor](https://github.com/justcaliturner/simple-code-editor) written by [Vic](https://github.com/justcaliturner)
 
-
 #### Modifications
-The code itself was modified a bit to support vue 2.6 and vue3 together using the library vue-demi and general vue changes. 
+
+The code itself was modified a bit to support vue 2.6 and vue3 together using the library vue-demi and general vue changes.
+
 1. moved to composition api
 2. used vue-demi to support transition between library versions
 3. used library version agnostic terms and behaviors
-4. use custom components for the header and other elements
+4. use custom components for the header and other elements