@dataloop-ai/components 0.18.11 → 0.18.13

package/package.json

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

package/src/components/basic/DlAccordion/DlAccordion.vue

@@ -25,11 +25,7 @@
         <div
             ref="dlAccordionContent"
             class="accordion-content"
-            :class="{
-                closed: !isOpen,
-                'right-side': rightSide,
-                'accordion-content__border': separator
-            }"
+            :class="{ closed: !isOpen, 'right-side': rightSide }"
         >
             <slot v-if="isOpen && !isEmpty" />
             <dl-empty-state
@@ -79,8 +75,7 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: null
-        },
-        separator: { type: Boolean, default: false }
+        }
     },
     emits: ['update:model-value', 'hide', 'show'],
     data() {
@@ -121,11 +116,9 @@ export default defineComponent({
     line-height: 16px;
     padding: 0 16px 15px 38px;
     color: var(--dl-color-darker);
+    border-bottom: 1px solid var(--dl-color-separator);
     max-height: fit-content;
     overflow: hidden;
-    &__border {
-        border-bottom: 1px solid var(--dl-color-separator);
-    }
     &.right-side {
         padding: 0 38px 16px 16px;
     }

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

@@ -77,7 +77,7 @@ import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
-import { DlTransformOptions } from '../../shared/types'
+import { transformOptions } from '../../shared/types'
 import { stringStyleToRecord } from '../../../utils'
 import { textTransform } from '../../../utils/string'
 import { isString } from 'lodash'
@@ -153,7 +153,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                DlTransformOptions.includes(value)
+                transformOptions.includes(value)
         },
         /**
          * Doesn't allow the button's text to be wrapped along multiple rows

package/src/components/basic/DlChip/DlChip.vue

@@ -63,7 +63,7 @@ import {
     setRemoveIconWidth
 } from './utils'
 import { v4 } from 'uuid'
-import { DlTransformOptions } from '../../shared/types'
+import { transformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlChip',
@@ -87,7 +87,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                DlTransformOptions.includes(value)
+                transformOptions.includes(value)
         },
         overflow: { type: Boolean, default: false },
         fit: { type: Boolean, default: false }

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

@@ -173,10 +173,12 @@
                     thumb-size="20px"
                     :max="matrix.length"
                     :min-range="2"
+                    :max-range="cellDisplayLimit"
                     :selection-color="getCellBackground(0.1)"
                     :color="getCellBackground()"
                     :step="1"
                     drag-range
+                    :model-value="currentBrushState"
                     @update:model-value="handleBrushUpdate"
                 />
                 <span class="label-tag x"> {{ bottomLabel }} </span>
@@ -250,6 +252,10 @@ export default defineComponent({
             type: Boolean,
             default: true
         },
+        cellDisplayLimit: {
+            type: Number,
+            default: 10
+        },
         color: {
             type: String,
             default: '--dl-color-secondary'
@@ -277,7 +283,7 @@ export default defineComponent({
         const { variables } = useThemeVariables()
         const currentBrushState = ref<{ min: number; max: number }>({
             min: 0,
-            max: props.matrix.length
+            max: Math.min(props.matrix.length, props.cellDisplayLimit)
         })
         const cellWidth = ref<number | null>(null)
         const rotateXLabels = ref(true)
@@ -376,7 +382,10 @@ export default defineComponent({
     watch: {
         matrix: {
             handler(value) {
-                this.currentBrushState.max = Math.min(10, value.length)
+                this.currentBrushState.max = Math.min(
+                    this.cellDisplayLimit,
+                    value.length
+                )
                 this.$nextTick(() => {
                     this.resizeMatrix()
                 })
@@ -442,7 +451,7 @@ export default defineComponent({
             const width = verticalWrapper?.offsetWidth
 
             labelY.style.marginTop = `-${this.leftLabel.length * 16}px`
-            this.cellWidth = width / this.matrix.length
+            this.cellWidth = Math.round(width / this.matrix.length)
             colorSpectrum.style.height = `${width}px`
             yAxisOuter.style.height = `${width}px`
         },
@@ -460,7 +469,7 @@ export default defineComponent({
                     ctx.matrix.length / (brush.max - brush.min),
                     ctx.$refs.matrix
                 )
-                const scroll = brush.min * (getCellWidth() - 2)
+                const scroll = brush.min * getCellWidth()
                 const container = ctx.$refs.matrixWrapper
                 container.scroll(scroll, 0)
                 ctx.currentBrushState = brush
@@ -524,7 +533,6 @@ export default defineComponent({
     &__element {
         width: var(--cell-dimensions);
         max-width: 100px;
-        overflow: hidden;
         text-overflow: ellipsis;
         &--text {
             font-size: 12px;
@@ -575,9 +583,8 @@ export default defineComponent({
     grid-template-columns: repeat(var(--matrix-rows), 1fr);
 
     &__cell {
-        font-size: max(calc(var(--cell-dimensions) * 0.1), 12px);
+        font-size: calc(var(--cell-dimensions) * 0.33);
         cursor: pointer;
-        border: 1px solid var(--dl-color-separator);
         box-sizing: border-box;
         width: var(--cell-dimensions);
         height: var(--cell-dimensions);

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -188,7 +188,7 @@ import {
     Ref
 } from 'vue-demi'
 import { v4 } from 'uuid'
-import { DlTransformOptions } from '../../shared/types'
+import { transformOptions } from '../../shared/types'
 
 export default defineComponent({
     name: 'DlDropdownButton',
@@ -242,7 +242,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                DlTransformOptions.includes(value)
+                transformOptions.includes(value)
         },
         outlined: Boolean,
         padding: { type: String, default: '5px' },

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

@@ -11,7 +11,7 @@
             :model-value="modelValue"
             :arrow-nav-items="suggestions"
             :auto-close="false"
-            @update:modelValue="emitModelValue($event)"
+            @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
             @highlightedIndex="setHighlightedIndex"
@@ -44,7 +44,7 @@ export default defineComponent({
     },
     model: {
         prop: 'modelValue',
-        event: 'update:modelValue'
+        event: 'update:model-value'
     },
     props: {
         parentId: {
@@ -72,7 +72,7 @@ export default defineComponent({
             default: () => [0, 0]
         }
     },
-    emits: ['set-input-value', 'update:modelValue'],
+    emits: ['set-input-value', 'update:model-value'],
     setup(props, { emit }) {
         const isMenuOpen = ref(false)
         const highlightedIndex = ref(-1)
@@ -90,7 +90,7 @@ export default defineComponent({
             handleOption(value)
         }
         const emitModelValue = (event: any) => {
-            emit('update:modelValue', event)
+            emit('update:model-value', event)
         }
         const handleOption = (item: any) => {
             emit('set-input-value', item)

package/src/components/essential/DlTypography/DlTypography.vue

@@ -12,7 +12,7 @@
 import { v4 } from 'uuid'
 import { defineComponent, PropType } from 'vue-demi'
 import { getColor } from '../../../utils'
-import { DlTransformOptions } from '../../shared/types'
+import { transformOptions } from '../../shared/types'
 
 type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
 
@@ -35,7 +35,7 @@ export default defineComponent({
             type: String,
             default: 'default',
             validator: (value: string): boolean =>
-                DlTransformOptions.includes(value)
+                transformOptions.includes(value)
         },
         bold: Boolean,
         color: {

package/src/components/shared/types.ts

@@ -1,4 +1,4 @@
-export const DlTransformOptions: string[] = [
+export const transformOptions: string[] = [
     'none',
     'capitalize',
     'uppercase',

package/src/demos/DlAccordionDemo.vue

@@ -89,38 +89,6 @@
                 </template>
             </dl-accordion>
         </div>
-        <div style="width: 100%">
-            <dl-accordion default-opened>
-                <template #header>
-                    Custom header content
-                    <dl-switch
-                        v-model="switchModel"
-                        :value="2"
-                    />
-                </template>
-
-                <dl-accordion default-opened>
-                    <template #header>
-                        Custom header content
-                        <dl-switch
-                            v-model="switchModel"
-                            :value="2"
-                        />
-                    </template>
-                    <template #default>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-                        sed do eiusmod tempor incididunt ut labore et dolore
-                        magna aliqua. Ut enim ad minim veniam, quis nostrud
-                        exercitation ullamco laboris nisi ut aliquip ex ea
-                        commodo consequat. Duis aute irure dolor in
-                        reprehenderit in voluptate velit esse cillum dolore eu
-                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-                        non proident, sunt in culpa qui officia deserunt mollit
-                        anim id est laborum.
-                    </template>
-                </dl-accordion>
-            </dl-accordion>
-        </div>
     </div>
 </template>