@dataloop-ai/components 0.19.109 → 0.19.111
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
|
@@ -45,24 +45,19 @@
|
|
|
45
45
|
:class="{ capitalized }"
|
|
46
46
|
:model-value="modelValue"
|
|
47
47
|
:value="value"
|
|
48
|
-
:label="
|
|
49
|
-
label
|
|
50
|
-
? capitalized
|
|
51
|
-
? label.toLowerCase()
|
|
52
|
-
: label
|
|
53
|
-
: null
|
|
54
|
-
"
|
|
55
48
|
:indeterminate-value="indeterminateValue"
|
|
56
49
|
@update:model-value="handleCheckboxUpdate"
|
|
57
50
|
@checked="handleSingleSelect"
|
|
58
51
|
@unchecked="handleSingleDeselect"
|
|
59
|
-
/>
|
|
60
|
-
<span
|
|
61
|
-
class="multiselect-label"
|
|
62
|
-
:class="{ capitalized }"
|
|
63
52
|
>
|
|
64
|
-
<slot
|
|
65
|
-
|
|
53
|
+
<slot>
|
|
54
|
+
{{
|
|
55
|
+
capitalized
|
|
56
|
+
? value.toString().toLowerCase()
|
|
57
|
+
: value
|
|
58
|
+
}}
|
|
59
|
+
</slot>
|
|
60
|
+
</dl-checkbox>
|
|
66
61
|
<span
|
|
67
62
|
v-if="count"
|
|
68
63
|
class="counter"
|
|
@@ -570,10 +570,55 @@
|
|
|
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>
|
|
603
|
+
Select with multiselect auto expanded and fixed width and virtual scroll
|
|
604
|
+
<dl-select
|
|
605
|
+
v-model="selectedWithChildrenAndReadonly"
|
|
606
|
+
:options="alotOfOptionsExpanded"
|
|
607
|
+
multiselect
|
|
608
|
+
style="margin-bottom: 150px"
|
|
609
|
+
>
|
|
610
|
+
<template #option="scope">
|
|
611
|
+
<div style="padding: 5px 0px">
|
|
612
|
+
<div>{{ scope.opt.label }}</div>
|
|
613
|
+
<div>{{ scope.opt.subLabel }}</div>
|
|
614
|
+
</div>
|
|
615
|
+
</template>
|
|
616
|
+
</dl-select>
|
|
573
617
|
</div>
|
|
574
618
|
</template>
|
|
575
619
|
|
|
576
620
|
<script lang="ts">
|
|
621
|
+
import { cloneDeep } from 'lodash'
|
|
577
622
|
import { defineComponent } from 'vue-demi'
|
|
578
623
|
import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
|
|
579
624
|
import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
|
|
@@ -758,7 +803,39 @@ const treeOptionsExpanded: DlSelectOptionType[] = [
|
|
|
758
803
|
value: 'c8312',
|
|
759
804
|
expanded: true,
|
|
760
805
|
children: [
|
|
761
|
-
{
|
|
806
|
+
{
|
|
807
|
+
label: 'child 7',
|
|
808
|
+
value: 'c923',
|
|
809
|
+
children: [
|
|
810
|
+
{ label: 'child 4', value: 'c9' },
|
|
811
|
+
{
|
|
812
|
+
label: 'child 5',
|
|
813
|
+
value: 'c10',
|
|
814
|
+
children: [
|
|
815
|
+
{
|
|
816
|
+
label: 'child 4',
|
|
817
|
+
value: 'c9'
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
label: 'child 5',
|
|
821
|
+
value: 'c10'
|
|
822
|
+
},
|
|
823
|
+
{
|
|
824
|
+
label: 'child 5',
|
|
825
|
+
value: 'c10'
|
|
826
|
+
},
|
|
827
|
+
{
|
|
828
|
+
label: 'child 5',
|
|
829
|
+
value: 'c10'
|
|
830
|
+
},
|
|
831
|
+
{
|
|
832
|
+
label: 'child 5',
|
|
833
|
+
value: 'c10'
|
|
834
|
+
}
|
|
835
|
+
]
|
|
836
|
+
}
|
|
837
|
+
]
|
|
838
|
+
},
|
|
762
839
|
{ label: 'child 8', value: 'c101' }
|
|
763
840
|
]
|
|
764
841
|
}
|
|
@@ -824,6 +901,11 @@ export default defineComponent({
|
|
|
824
901
|
})
|
|
825
902
|
}
|
|
826
903
|
|
|
904
|
+
return arr
|
|
905
|
+
},
|
|
906
|
+
alotOfOptionsExpanded(): DlSelectOptionType[] {
|
|
907
|
+
const arr = cloneDeep(this.alotOfOptions)
|
|
908
|
+
arr.push(treeOptionsExpanded[0])
|
|
827
909
|
return arr
|
|
828
910
|
}
|
|
829
911
|
},
|