@dataloop-ai/components 0.18.102 → 0.18.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.102",
+  "version": "0.18.104",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlButton/DlButton.vue

@@ -333,6 +333,20 @@ export default defineComponent({
                         flat: this.flat,
                         color: this.textColor
                     }),
+                    '--dl-button-icon-color-hover': setColorOnHover({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        shaded: this.shaded,
+                        flat: this.flat,
+                        color: this.getIconColor
+                    }),
+                    '--dl-icon-color': setColorOnHover({
+                        disabled: this.disabled,
+                        outlined: this.outlined,
+                        shaded: this.shaded,
+                        flat: this.flat,
+                        color: this.getIconColor
+                    }),
                     '--dl-button-border-hover': setBorderOnHover({
                         disabled: this.disabled,
                         flat: this.flat,
@@ -505,6 +519,9 @@ export default defineComponent({
 
 .dl-button-icon {
     transition: var(--dl-button-text-transition-duration);
+    &:hover:enabled:not(:active) {
+        color: var(--dl-button-icon-color-hover);
+    }
 }
 
 .dl-button-container {

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -300,7 +300,7 @@ export default defineComponent({
         const setInputFromSuggestion = (value: string) => {
             let stringValue = ''
             if (searchQuery.value.length) {
-                const query = searchQuery.value
+                let query = searchQuery.value
                     .replace(new RegExp(' ', 'g'), ' ')
                     .split(' ')
                     .map((string: string) => string.trim())
@@ -316,6 +316,14 @@ export default defineComponent({
                             query[query.length - 1] = query[
                                 query.length - 1
                             ].replace('.', '')
+                        } else if (
+                            value
+                                .toLowerCase()
+                                .startsWith(
+                                    query[query.length - 1].toLowerCase()
+                                )
+                        ) {
+                            query = query.slice(0, query.length - 1)
                         }
                         stringValue = [...query, value, ''].join(' ')
                     }
@@ -324,7 +332,14 @@ export default defineComponent({
                         query[query.length - 1] = query[
                             query.length - 1
                         ].replace('.', '')
+                    } else if (
+                        value
+                            .toLowerCase()
+                            .startsWith(query[query.length - 1].toLowerCase())
+                    ) {
+                        query = query.slice(0, query.length - 1)
                     }
+
                     stringValue = [...query, value, ''].join(' ')
                 }
             } else {

package/src/components/essential/DlIcon/DlIcon.vue

@@ -89,7 +89,7 @@ export default defineComponent({
         cssIconVars(): Record<string, string> {
             return {
                 '--dl-icon-font-size': `${this.size}`,
-                '--dl-icon-color': this.color
+                '--icon-color': this.color
                     ? // todo: remove this. this is needed for now until the swap of DLBTN in OA
                       getColor(
                           this.color === 'secondary'
@@ -157,7 +157,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-icon {
     display: inline-flex;
-    color: var(--dl-icon-color);
+    color: var(var(--dl-icon-color), var(--color-icon));
     font-size: var(--dl-icon-font-size);
 }
 </style>

package/src/demos/DlButtonDemo.vue

@@ -293,6 +293,16 @@
                 outlined
             />
         </div>
+        <div>
+            <h3>hover color</h3>
+            <dl-button
+                icon="icon-dl-search"
+                flat
+                dense
+                label="test me"
+                text-color="red"
+            />
+        </div>
         <div>
             <h3>button with icon color</h3>
             <dl-button

package/src/demos/DlTooltipDemo.vue

@@ -25,8 +25,7 @@
                 <dl-tooltip
                     color="rgb(0, 255, 0)"
                     background-color="dl-color-side-panel"
-                >
-                    lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                >lorem ipsum dolor, sit amet consectetur adipisicing elit.
                     Assumenda corporis alias cupiditate natus? Ipsum quos quia
                     temporibus ipsam magnam, alias rerum aut, a quaerat dicta,
                     quasi aperiam facere asperiores saepe.

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchFilter/DlSmartSearchFilters.vue

@@ -1,79 +0,0 @@
-<template>
-    <div
-        :id="uuid"
-        class="dl-filters-wrapper"
-    >
-        <dl-tabs
-            v-model="currentTab"
-            volatile
-            full-width
-            :items="tabItems"
-            font-size="14px"
-        />
-        <div class="dl-filters-tabs">
-            <dl-tab-panels v-model="currentTab">
-                <dl-tab-panel
-                    v-for="tab in tabItems"
-                    :key="tab.name"
-                    :name="tab.name"
-                >
-                    <div>
-                        <filters-query
-                            v-for="(query, index) in filters[currentTab]"
-                            :key="index"
-                            :type="currentTab"
-                            :name="query.name"
-                            @select="$emit('filters-select', currentTab, query)"
-                            @delete="$emit('filters-delete', currentTab, query)"
-                        />
-                    </div>
-                </dl-tab-panel>
-            </dl-tab-panels>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { DlTabs } from '../../../../DlTabs'
-import { DlTabPanels, DlTabPanel } from '../../../../DlTabPanels'
-import { Filters } from '../../types'
-import { getTabItems } from '../../utils'
-import FiltersQuery from './components/FiltersQuery.vue'
-import { v4 } from 'uuid'
-
-export default defineComponent({
-    components: {
-        DlTabs,
-        DlTabPanels,
-        DlTabPanel,
-        FiltersQuery
-    },
-    props: {
-        filters: {
-            type: Object as PropType<Filters>,
-            default: (): Filters => ({ saved: [], recent: [], suggested: [] })
-        }
-    },
-    emits: ['filters-delete', 'filters-select'],
-    data() {
-        return {
-            uuid: `dl-smart-search-filters-${v4()}`,
-            currentTab: 'saved'
-        }
-    },
-    computed: {
-        tabItems(): { label: string; name: string }[] {
-            return getTabItems(this.filters)
-        }
-    }
-})
-</script>
-<style scoped lang="scss">
-.dl-filters-wrapper {
-    min-height: 300px;
-}
-.dl-filters-tabs {
-    margin-top: 5px;
-}
-</style>

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchFilter/components/FiltersQuery.vue

@@ -1,100 +0,0 @@
-<template>
-    <div
-        class="query"
-        @mouseenter="actionsVisible = true"
-        @mouseleave="actionsVisible = false"
-    >
-        <div
-            class="query__header"
-            @mousedown="$emit('select')"
-        >
-            <dl-icon :icon="icon" />
-            <span class="query__header--title">
-                {{ name }}
-            </span>
-        </div>
-        <div
-            v-if="actionsVisible"
-            class="query__actions"
-        >
-            <div
-                class="query__actions--icon"
-                @mousedown="$emit('delete')"
-            >
-                <dl-icon
-                    :inline="false"
-                    size="14px"
-                    icon="icon-dl-delete"
-                />
-                <dl-tooltip>Delete</dl-tooltip>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { DlIcon } from '../../../../../../essential'
-import { DlTooltip } from '../../../../../../shared'
-
-export default defineComponent({
-    components: {
-        DlIcon,
-        DlTooltip
-    },
-    props: {
-        type: {
-            type: String,
-            default: 'saved'
-        },
-        name: {
-            type: String,
-            default: ''
-        }
-    },
-    emits: ['delete', 'select'],
-    data() {
-        return {
-            actionsVisible: false
-        }
-    },
-    computed: {
-        icon(): string {
-            return this.type === 'saved' ? 'icon-dl-save' : 'icon-dl-time'
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.query {
-    height: 18px;
-    padding: 5px 10px;
-    border-radius: 3px;
-    display: flex;
-    justify-content: space-between;
-    color: var(--dl-color-darker);
-    &__header {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        &--title {
-            font-size: 12px;
-            margin: 0px 12px;
-        }
-    }
-
-    &__actions {
-        display: flex;
-        align-items: center;
-        &--icon {
-            cursor: pointer;
-            margin: 0px 5px;
-        }
-    }
-
-    &:hover {
-        background-color: var(--dl-color-fill);
-    }
-}
-</style>

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchQueryFilters.vue

@@ -1,124 +0,0 @@
-<!-- <template>
-    <dl-button
-        class="dl-smart-search__buttons--filters"
-        shaded
-        outlined
-        size="s"
-    >
-        Saved Filters
-        <dl-menu
-            v-model="filtersModel"
-            :offset="[0, 5]"
-            anchor="bottom middle"
-            self="top middle"
-        >
-            <dl-smart-search-filters
-                :filters="filters"
-                @filters-select="handleFiltersSelect"
-                @filters-delete="handleFiltersDelete"
-            />
-        </dl-menu>
-    </dl-button>
-</template>
-
-<script lang="ts">
-import {
-    defineComponent,
-    ref,
-    watch,
-    PropType,
-    toRefs,
-    computed
-} from 'vue-demi'
-import { DlSelect } from '../../../DlSelect'
-import { DlSelectOption } from '../../../DlSelect/types'
-import { DlButton } from '../../../../basic'
-import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
-import { DlJsonEditor } from '../../../DlJsonEditor'
-import { DlTypography } from '../../../../essential'
-import { DlInput } from '../../../DlInput'
-
-export default defineComponent({
-    components: {
-        DlDialogBox,
-        DlDialogBoxHeader,
-        DlJsonEditor,
-        DlButton,
-        DlSelect,
-        DlTypography,
-        DlInput
-    },
-    model: {
-        prop: 'modelValue',
-        event: 'update:modelValue'
-    },
-    props: {
-        modelValue: {
-            required: false,
-            type: Boolean,
-            default: false
-        },
-        json: {
-            required: true,
-            type: String
-        },
-        options: {
-            required: true,
-            type: Array as PropType<DlSelectOption[]>,
-            default: () => [] as DlSelectOption[]
-        }
-    },
-    emits: ['update:modelValue', 'search', 'update:json', 'save', 'delete'],
-    setup(props, { emit }) {
-        const { modelValue, options, json } = toRefs(props)
-
-        const isOpen = computed({
-            get: () => modelValue.value,
-            set: (val) => emit('update:modelValue', val)
-        })
-
-        const jsonEditor = ref<typeof DlJsonEditor>(null)
-        const showSaveDialog = ref(false)
-        const showDeleteDialog = ref(false)
-        const stringifiedJSON = ref(json.value)
-        const newQueryName = ref('')
-        const selectedOption = ref<DlSelectOption>(
-            options.value.find((o) => o.value === json.value) ?? {
-                label: 'New Query',
-                value: json.value
-            }
-        )
-
-        const canDelete = computed(
-            () =>
-                !options.value?.filter(
-                    (q: DlSelectOption) => q.value === stringifiedJSON
-                ).length
-        )
-
-        const alignJSON = () => {
-            jsonEditor.value.format()
-        }
-
-        const onQuerySelect = (option: DlSelectOption) => {
-            selectedOption.value = option
-            stringifiedJSON.value = option.value
-        }
-
-        return {
-            isOpen,
-            jsonEditor,
-            showSaveDialog,
-            stringifiedJSON,
-            selectedOption,
-            canDelete,
-            alignJSON,
-            onQuerySelect,
-            newQueryName,
-            showDeleteDialog
-        }
-    }
-})
-</script>
-
-<style scoped lang="scss"></style> -->