@dataloop-ai/components 0.19.109 → 0.19.110
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -570,10 +570,41 @@
|
|
|
570
570
|
</div>
|
|
571
571
|
</template>
|
|
572
572
|
</dl-select>
|
|
573
|
+
|
|
574
|
+
Select with multiselect auto expanded and fixed width
|
|
575
|
+
<dl-select
|
|
576
|
+
v-model="selectedWithChildrenAndReadonly"
|
|
577
|
+
:options="treeOptionsExpanded"
|
|
578
|
+
multiselect
|
|
579
|
+
style="margin-bottom: 150px; width: 200px"
|
|
580
|
+
>
|
|
581
|
+
<template #option="scope">
|
|
582
|
+
<div style="padding: 5px 0px">
|
|
583
|
+
<div>{{ scope.opt.label }}</div>
|
|
584
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
585
|
+
</div>
|
|
586
|
+
</template>
|
|
587
|
+
</dl-select>
|
|
588
|
+
|
|
589
|
+
Select with multiselect auto expanded and fixed width and virtual scroll
|
|
590
|
+
<dl-select
|
|
591
|
+
v-model="selectedWithChildrenAndReadonly"
|
|
592
|
+
:options="alotOfOptionsExpanded"
|
|
593
|
+
multiselect
|
|
594
|
+
style="margin-bottom: 150px; width: 200px"
|
|
595
|
+
>
|
|
596
|
+
<template #option="scope">
|
|
597
|
+
<div style="padding: 5px 0px">
|
|
598
|
+
<div>{{ scope.opt.label }}</div>
|
|
599
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
600
|
+
</div>
|
|
601
|
+
</template>
|
|
602
|
+
</dl-select>
|
|
573
603
|
</div>
|
|
574
604
|
</template>
|
|
575
605
|
|
|
576
606
|
<script lang="ts">
|
|
607
|
+
import { cloneDeep } from 'lodash'
|
|
577
608
|
import { defineComponent } from 'vue-demi'
|
|
578
609
|
import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
|
|
579
610
|
import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
|
|
@@ -758,7 +789,27 @@ const treeOptionsExpanded: DlSelectOptionType[] = [
|
|
|
758
789
|
value: 'c8312',
|
|
759
790
|
expanded: true,
|
|
760
791
|
children: [
|
|
761
|
-
{
|
|
792
|
+
{
|
|
793
|
+
label: 'child 7',
|
|
794
|
+
value: 'c923',
|
|
795
|
+
children: [
|
|
796
|
+
{ label: 'child 4', value: 'c9' },
|
|
797
|
+
{
|
|
798
|
+
label: 'child 5',
|
|
799
|
+
value: 'c10',
|
|
800
|
+
children: [
|
|
801
|
+
{
|
|
802
|
+
label: 'child 4',
|
|
803
|
+
value: 'c9'
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
label: 'child 5',
|
|
807
|
+
value: 'c10'
|
|
808
|
+
}
|
|
809
|
+
]
|
|
810
|
+
}
|
|
811
|
+
]
|
|
812
|
+
},
|
|
762
813
|
{ label: 'child 8', value: 'c101' }
|
|
763
814
|
]
|
|
764
815
|
}
|
|
@@ -824,6 +875,11 @@ export default defineComponent({
|
|
|
824
875
|
})
|
|
825
876
|
}
|
|
826
877
|
|
|
878
|
+
return arr
|
|
879
|
+
},
|
|
880
|
+
alotOfOptionsExpanded(): DlSelectOptionType[] {
|
|
881
|
+
const arr = cloneDeep(this.alotOfOptions)
|
|
882
|
+
arr.push(treeOptionsExpanded[0])
|
|
827
883
|
return arr
|
|
828
884
|
}
|
|
829
885
|
},
|