@dataloop-ai/components 0.19.108 → 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
|
@@ -213,6 +213,7 @@
|
|
|
213
213
|
:virtual-scroll-sticky-size-start="28"
|
|
214
214
|
:virtual-scroll-sticky-size-end="20"
|
|
215
215
|
separator
|
|
216
|
+
style="width: max-content"
|
|
216
217
|
>
|
|
217
218
|
<dl-select-option
|
|
218
219
|
:key="getKeyForOption(item)"
|
|
@@ -235,6 +236,7 @@
|
|
|
235
236
|
:children="getOptionChildren(item)"
|
|
236
237
|
:capitalized="capitalizedOptions"
|
|
237
238
|
:readonly="isReadonlyOption(item)"
|
|
239
|
+
:is-expanded="item.expanded"
|
|
238
240
|
@update:model-value="handleModelValueUpdate"
|
|
239
241
|
@click="selectOption(item)"
|
|
240
242
|
@selected="handleSelected"
|
|
@@ -283,6 +285,7 @@
|
|
|
283
285
|
:children="getOptionChildren(option)"
|
|
284
286
|
:capitalized="capitalizedOptions"
|
|
285
287
|
:readonly="isReadonlyOption(option)"
|
|
288
|
+
:is-expanded="option.expanded"
|
|
286
289
|
@update:model-value="handleModelValueUpdate"
|
|
287
290
|
@click="selectOption(option)"
|
|
288
291
|
@selected="handleSelected"
|
|
@@ -98,6 +98,7 @@
|
|
|
98
98
|
:with-wave="withWave"
|
|
99
99
|
:capitalized="capitalized"
|
|
100
100
|
:readonly="isReadonlyOption(child)"
|
|
101
|
+
:is-expanded="isExpanded"
|
|
101
102
|
@update:model-value="handleCheckboxUpdate"
|
|
102
103
|
@selected="handleSingleSelect"
|
|
103
104
|
@deselected="handleSingleDeselect"
|
|
@@ -148,7 +149,11 @@ export default defineComponent({
|
|
|
148
149
|
depth: { type: Number, default: 0 },
|
|
149
150
|
label: { type: String, default: null },
|
|
150
151
|
capitalized: { type: Boolean, default: false },
|
|
151
|
-
readonly: { type: Boolean, default: false }
|
|
152
|
+
readonly: { type: Boolean, default: false },
|
|
153
|
+
isExpanded: {
|
|
154
|
+
type: Boolean,
|
|
155
|
+
default: false
|
|
156
|
+
}
|
|
152
157
|
},
|
|
153
158
|
emits: [
|
|
154
159
|
'update:model-value',
|
|
@@ -159,7 +164,7 @@ export default defineComponent({
|
|
|
159
164
|
],
|
|
160
165
|
data() {
|
|
161
166
|
return {
|
|
162
|
-
showChildren:
|
|
167
|
+
showChildren: this.isExpanded,
|
|
163
168
|
componentId: v4(),
|
|
164
169
|
uuid: `dl-select-option-${v4()}`
|
|
165
170
|
}
|
|
@@ -555,10 +555,56 @@
|
|
|
555
555
|
</div>
|
|
556
556
|
</template>
|
|
557
557
|
</dl-select>
|
|
558
|
+
|
|
559
|
+
Select with multiselect auto expanded
|
|
560
|
+
<dl-select
|
|
561
|
+
v-model="selectedWithChildrenAndReadonly"
|
|
562
|
+
:options="treeOptionsExpanded"
|
|
563
|
+
multiselect
|
|
564
|
+
style="margin-bottom: 150px"
|
|
565
|
+
>
|
|
566
|
+
<template #option="scope">
|
|
567
|
+
<div style="padding: 5px 0px">
|
|
568
|
+
<div>{{ scope.opt.label }}</div>
|
|
569
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
570
|
+
</div>
|
|
571
|
+
</template>
|
|
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>
|
|
558
603
|
</div>
|
|
559
604
|
</template>
|
|
560
605
|
|
|
561
606
|
<script lang="ts">
|
|
607
|
+
import { cloneDeep } from 'lodash'
|
|
562
608
|
import { defineComponent } from 'vue-demi'
|
|
563
609
|
import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
|
|
564
610
|
import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
|
|
@@ -719,6 +765,62 @@ const treeOptionsWithReadonly = [
|
|
|
719
765
|
}
|
|
720
766
|
]
|
|
721
767
|
|
|
768
|
+
const treeOptionsExpanded: DlSelectOptionType[] = [
|
|
769
|
+
{
|
|
770
|
+
label: 'Readonly option with children & readonly child',
|
|
771
|
+
value: 'r6',
|
|
772
|
+
expanded: true,
|
|
773
|
+
children: [
|
|
774
|
+
{ label: 'child 1', value: 'c6' },
|
|
775
|
+
{ label: 'child 2', value: 'c7' },
|
|
776
|
+
{
|
|
777
|
+
label: 'child 3',
|
|
778
|
+
value: 'c8',
|
|
779
|
+
expanded: true,
|
|
780
|
+
children: [
|
|
781
|
+
{ label: 'child 4', value: 'c9' },
|
|
782
|
+
{
|
|
783
|
+
label: 'child 5',
|
|
784
|
+
value: 'c10441',
|
|
785
|
+
expanded: true,
|
|
786
|
+
children: [
|
|
787
|
+
{
|
|
788
|
+
label: 'child 6',
|
|
789
|
+
value: 'c8312',
|
|
790
|
+
expanded: true,
|
|
791
|
+
children: [
|
|
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
|
+
},
|
|
813
|
+
{ label: 'child 8', value: 'c101' }
|
|
814
|
+
]
|
|
815
|
+
}
|
|
816
|
+
]
|
|
817
|
+
}
|
|
818
|
+
]
|
|
819
|
+
}
|
|
820
|
+
]
|
|
821
|
+
}
|
|
822
|
+
]
|
|
823
|
+
|
|
722
824
|
export default defineComponent({
|
|
723
825
|
components: { DlSelect, DlIcon, DlChip, DlBadge },
|
|
724
826
|
data() {
|
|
@@ -742,6 +844,7 @@ export default defineComponent({
|
|
|
742
844
|
searchOptions: defaultOptions,
|
|
743
845
|
treeOptions,
|
|
744
846
|
treeOptionsWithReadonly,
|
|
847
|
+
treeOptionsExpanded,
|
|
745
848
|
selectedBySearch: undefined,
|
|
746
849
|
selectedByFilteringSearch: [],
|
|
747
850
|
selectedWithEmitValue: 'c1',
|
|
@@ -772,6 +875,11 @@ export default defineComponent({
|
|
|
772
875
|
})
|
|
773
876
|
}
|
|
774
877
|
|
|
878
|
+
return arr
|
|
879
|
+
},
|
|
880
|
+
alotOfOptionsExpanded(): DlSelectOptionType[] {
|
|
881
|
+
const arr = cloneDeep(this.alotOfOptions)
|
|
882
|
+
arr.push(treeOptionsExpanded[0])
|
|
775
883
|
return arr
|
|
776
884
|
}
|
|
777
885
|
},
|