@dataloop-ai/components 0.19.276 → 0.19.278

package/package.json

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

package/src/components/compound/DlCharts/charts/DlColumnChart/DlColumnChart.vue

@@ -1,20 +1,8 @@
 <template>
-    <div
-        :style="cssVars"
-        :class="chartWrapperClasses"
-    >
-        <dl-empty-state
-            v-if="isEmpty"
-            v-bind="emptyStateProps"
-        >
-            <template
-                v-for="(_, slot) in $slots"
-                #[slot]="props"
-            >
-                <slot
-                    :name="slot"
-                    v-bind="props"
-                />
+    <div :style="cssVars" :class="chartWrapperClasses">
+        <dl-empty-state v-if="isEmpty" v-bind="emptyStateProps">
+            <template v-for="(_, slot) in $slots" #[slot]="props">
+                <slot :name="slot" v-bind="props" />
             </template>
         </dl-empty-state>
         <Bar
@@ -25,6 +13,7 @@
             :style="(chartStyles, `max-height: ${wrapperHeight}`)"
             :data="chartData"
             :options="chartOptions"
+            :plugins="chartPlugins"
             @mouseout="onChartLeave"
         />
         <slot
@@ -484,6 +473,8 @@ export default defineComponent({
             )
         )
 
+        const chartPlugins = props.plugins || []
+
         watch(
             () => chart.value?.scales?.x?.width,
             (val: string) => {
@@ -627,6 +618,7 @@ export default defineComponent({
             variables,
             chartData,
             chartOptions,
+            chartPlugins,
             brush,
             xLabels,
             columnChart,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -155,17 +155,25 @@
                 @highlighted-item="setHighlightedIndex"
                 @selected-item="handleSelectedItem"
             >
-                <dl-list class="select-list" :padding="false">
-                    <dl-list-item v-if="noOptions">
-                        <dl-item-section color="dl-color-medium">
-                            <slot name="no-options"> No options </slot>
-                        </dl-item-section>
-                    </dl-list-item>
-                    <dl-list-item v-if="hasBeforeOptions && !noOptions">
-                        <dl-item-section color="dl-color-medium">
-                            <slot name="before-options" />
-                        </dl-item-section>
-                    </dl-list-item>
+                <dl-list-item v-if="hasBeforeOptions && !noOptions">
+                    <dl-item-section color="dl-color-medium">
+                        <slot name="before-options" />
+                    </dl-item-section>
+                </dl-list-item>
+                <dl-list-item v-if="noOptions">
+                    <dl-item-section color="dl-color-medium">
+                        <slot name="no-options"> No options </slot>
+                    </dl-item-section>
+                </dl-list-item>
+                <dl-list
+                    class="select-list"
+                    :padding="false"
+                    :style="
+                        optionsCount > MAX_ITEMS_PER_LIST
+                            ? ''
+                            : `width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px); overflow-y: scroll;`
+                    "
+                >
                     <dl-select-option
                         v-if="showAllItems"
                         :multiselect="multiselect"
@@ -194,7 +202,7 @@
                         :virtual-scroll-item-size="28"
                         :virtual-scroll-sticky-size-start="28"
                         :virtual-scroll-sticky-size-end="20"
-                        :style="`width: 100%; max-height: calc(${dropdownMaxHeight} - 20px);`"
+                        :style="`width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px);`"
                     >
                         <dl-select-option
                             :key="getKeyForOption(item)"
@@ -290,12 +298,12 @@
                             </slot>
                         </dl-select-option>
                     </div>
-                    <dl-list-item v-if="hasAfterOptions && !noOptions">
-                        <dl-item-section>
-                            <slot name="after-options" />
-                        </dl-item-section>
-                    </dl-list-item>
                 </dl-list>
+                <dl-list-item v-if="hasAfterOptions && !noOptions">
+                    <dl-item-section>
+                        <slot name="after-options" />
+                    </dl-item-section>
+                </dl-list-item>
             </dl-menu>
         </div>
         <div
@@ -487,46 +495,6 @@ export default defineComponent({
             if (this.customFilter || this.searchTerm === '') {
                 return this.options
             }
-
-            // alternate version here it shows from child down
-            // const labelIncluded = (
-            //     options: DlSelectOptionType[],
-            //     term: string
-            // ): DlSelectOptionType[] => {
-            //     const filteredNodes: DlSelectOptionType[] = []
-
-            //     for (const op of options) {
-            //         const queue: DlSelectOptionType[] = [op]
-            //         while (queue.length) {
-            //             const node = queue.shift()
-            //             let shouldPush = false
-
-            //             const label = getLabel(node)
-
-            //             if (
-            //                 label &&
-            //                 label
-            //                     .toLowerCase()
-            //                     .includes(term.toLowerCase().trim())
-            //             ) {
-            //                 filteredNodes.push(node)
-            //                 shouldPush = true
-            //             }
-
-            //             if (
-            //                 !shouldPush &&
-            //                 (node as DlSelectOptionEntry)?.children?.length
-            //             ) {
-            //                 queue.push(
-            //                     ...(node as DlSelectOptionEntry).children
-            //                 )
-            //             }
-            //         }
-            //     }
-
-            //     return filteredNodes
-            // }
-
             const labelIncluded = (
                 options: DlSelectOptionType[],
                 term: string
@@ -574,6 +542,27 @@ export default defineComponent({
 
             return labelIncluded(cloneDeep(this.options), this.searchTerm)
         },
+        calculatedDropdownMaxHeight(): string {
+            const knownValuePhrases = ['vh', 'px', 'vw', 'em', 'rem', '%']
+            let val = this.dropdownMaxHeight
+
+            for (const phrase of knownValuePhrases) {
+                if (val.includes(phrase)) {
+                    val = val.replace(phrase, '')
+                    let value = parseInt(val)
+                    if (this.hasAfterOptions) {
+                        value -= 5
+                    }
+                    if (this.hasBeforeOptions) {
+                        value -= 5
+                    }
+                    return String(value + phrase)
+                }
+            }
+
+            // :shrug: if it's not a known value, just return it
+            return `calc(${this.dropdownMaxHeight} - 20px)`
+        },
         computedMenuStyle(): string {
             let style = this.menuStyle ?? ''
             if (this.optionsCount > this.MAX_ITEMS_PER_LIST) {

package/src/demos/DlSelectDemo.vue

@@ -156,10 +156,7 @@
             all-items-option
         >
             <template #prepend>
-                <dl-icon
-                    size="12px"
-                    icon="icon-dl-filter"
-                />
+                <dl-icon size="12px" icon="icon-dl-filter" />
             </template>
         </dl-select>
         custom search
@@ -594,13 +591,47 @@
             multiselect
             style="margin-bottom: 150px"
         />
+
+        <dl-select
+            :options="searchOptions"
+            title="With before and after options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
+        <dl-select
+            :options="alotOfOptions"
+            title="With before and after options - lots of options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
+        <dl-select
+            :options="someOptions"
+            title="With before and after options - some options"
+        >
+            <template #before-options>
+                <dl-button label="Button" />
+            </template>
+            <template #after-options>
+                <dl-button label="Button" />
+            </template>
+        </dl-select>
     </div>
 </template>
 
 <script lang="ts">
 import { cloneDeep } from 'lodash'
 import { defineComponent } from 'vue-demi'
-import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
+import { DlChip, DlSelect, DlIcon, DlBadge, DlButton } from '../components'
 import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
 
 const defaultOptions = [
@@ -828,7 +859,7 @@ const treeOptionsExpanded: DlSelectOptionType[] = [
 ]
 
 export default defineComponent({
-    components: { DlSelect, DlIcon, DlChip, DlBadge },
+    components: { DlSelect, DlIcon, DlChip, DlBadge, DlButton },
     data() {
         return {
             selectedWithFit: [],
@@ -883,6 +914,21 @@ export default defineComponent({
 
             return arr
         },
+        someOptions(): DlSelectOptionType[] {
+            const arr = [] as any[]
+
+            for (let i = 0; i < 10; ++i) {
+                arr.push({
+                    key: i,
+                    subLabel: 'not so high',
+                    label: 'High ' + i,
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                })
+            }
+
+            return arr
+        },
         alotOfOptionsExpanded(): DlSelectOptionType[] {
             const arr = cloneDeep(this.alotOfOptions)
             arr.push(treeOptionsExpanded[0])