@dataloop-ai/components 0.20.24 → 0.20.26

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.20.24",
3
+ "version": "0.20.26",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -82,7 +82,9 @@
82
82
  name="selected"
83
83
  >
84
84
  <span class="root-container--placeholder">
85
- {{ filterSelectLabel }}
85
+ <dl-ellipsis>
86
+ {{ filterSelectLabel }}
87
+ </dl-ellipsis>
86
88
  </span>
87
89
  </slot>
88
90
  </div>
@@ -98,7 +100,7 @@
98
100
  {{ computedAllItemsLabel }}
99
101
  </template>
100
102
  <template v-else>
101
- {{ filterSelectLabel }}
103
+ <dl-ellipsis> filterSelectLabel </dl-ellipsis>
102
104
  </template>
103
105
  </span>
104
106
  <span
@@ -108,7 +110,9 @@
108
110
  "
109
111
  class="selected-label"
110
112
  >
111
- {{ getLabel(selectedOption) }}
113
+ <dl-ellipsis>
114
+ {{ getLabel(selectedOption) }}
115
+ </dl-ellipsis>
112
116
  </span>
113
117
  </template>
114
118
  <div
@@ -1070,6 +1074,7 @@ export default defineComponent({
1070
1074
  }
1071
1075
  &--placeholder {
1072
1076
  color: var(--dl-select-placeholder-color, var(--placeholder-color));
1077
+ width: 100%;
1073
1078
  }
1074
1079
 
1075
1080
  .dl-select__title-container {
@@ -1087,6 +1092,8 @@ export default defineComponent({
1087
1092
 
1088
1093
  .selected-label {
1089
1094
  color: var(--dl-select-placeholder-color, var(--placeholder-color));
1095
+ width: fit-content;
1096
+ max-width: 100%;
1090
1097
  }
1091
1098
 
1092
1099
  .dl-select__title {
@@ -1095,6 +1102,7 @@ export default defineComponent({
1095
1102
  text-align: left;
1096
1103
  margin-right: 5px;
1097
1104
  white-space: nowrap;
1105
+ width: 100%;
1098
1106
  }
1099
1107
 
1100
1108
  .required-asterisk {
@@ -181,6 +181,18 @@
181
181
  searchable
182
182
  />
183
183
 
184
+ selected ellipsis
185
+ <div style="width: 200px">
186
+ <dl-select
187
+ v-model="selectedByFilteringSearch"
188
+ :options="ellipsisSelected"
189
+ size="m"
190
+ multiselect
191
+ placeholder="contributors"
192
+ searchable
193
+ />
194
+ </div>
195
+
184
196
  <dl-select
185
197
  v-model="selectedWithEmitValue"
186
198
  title="Emit Value"
@@ -700,6 +712,21 @@ const defaultOptions = [
700
712
  { label: 'Contributor 3', value: 'c3' }
701
713
  ]
702
714
 
715
+ const defaultOptions1 = [
716
+ {
717
+ label: 'Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1',
718
+ value: 'c1'
719
+ },
720
+ {
721
+ label: 'Contributor 2 Contributor 2 Contributor 2 Contributor 2 Contributor 2 Contributor 2',
722
+ value: 'c2'
723
+ },
724
+ {
725
+ label: 'Contributor 3 Contributor 3 Contributor 3 Contributor 3 Contributor 3 Contributor 3',
726
+ value: 'c3'
727
+ }
728
+ ]
729
+
703
730
  const treeOptions = [
704
731
  {
705
732
  label: 'root',
@@ -939,6 +966,7 @@ export default defineComponent({
939
966
  badgeColor: 'dl-color-disabled'
940
967
  },
941
968
  searchOptions: defaultOptions,
969
+ ellipsisSelected: defaultOptions1,
942
970
  treeOptions,
943
971
  treeOptionsWithReadonly,
944
972
  treeOptionsExpanded,