@dataloop-ai/components 0.20.30 → 0.20.32

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.30",
3
+ "version": "0.20.32",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -1092,7 +1092,6 @@ export default defineComponent({
1092
1092
  text-align: left;
1093
1093
  margin-right: 5px;
1094
1094
  white-space: nowrap;
1095
- width: 100%;
1096
1095
  }
1097
1096
 
1098
1097
  .required-asterisk {
@@ -33,6 +33,7 @@
33
33
  :is-active="modelValue === item.name"
34
34
  :font-size="fontSize"
35
35
  :bordered="bordered"
36
+ :icon="icon"
36
37
  @click="handleTabClick"
37
38
  />
38
39
  </div>
@@ -10,6 +10,7 @@
10
10
  @keydown="onKeydown"
11
11
  @keyup="onKeyup"
12
12
  >
13
+ <dl-icon v-if="icon !== ''" size="14px" :icon="icon" class="tab-icon" />
13
14
  {{ label }}
14
15
  <span>
15
16
  <dl-icon
@@ -50,7 +51,8 @@ export default defineComponent({
50
51
  tooltip: { type: String, default: null },
51
52
  tabindex: { type: String, default: '0' },
52
53
  fontSize: { type: String, default: '18px' },
53
- bordered: { type: Boolean, default: true }
54
+ bordered: { type: Boolean, default: true },
55
+ icon: { type: String, default: '' }
54
56
  },
55
57
  emits: ['click'],
56
58
  data() {
@@ -116,10 +118,17 @@ export default defineComponent({
116
118
  display: flex;
117
119
  align-items: center;
118
120
  justify-content: center;
121
+ .tab-icon {
122
+ margin: 0px 5px;
123
+ color: var(--dl-color-medium);
124
+ }
119
125
  &--active {
120
126
  color: var(--dl-color-secondary);
121
127
  border-color: var(--dl-color-secondary) !important;
122
128
  cursor: default;
129
+ .tab-icon {
130
+ color: var(--dl-color-secondary);
131
+ }
123
132
  }
124
133
  &--simple {
125
134
  font-size: var(--dl-tab-font-size);
@@ -144,10 +153,16 @@ export default defineComponent({
144
153
  &:hover {
145
154
  color: var(--dl-color-disabled) !important;
146
155
  }
156
+ .tab-icon {
157
+ color: var(--dl-color-disabled) !important;
158
+ }
147
159
  }
148
160
  &:hover {
149
161
  color: var(--dl-color-hover);
150
162
  border-color: var(--dl-color-hover);
163
+ .tab-icon {
164
+ color: var(--dl-color-hover);
165
+ }
151
166
  }
152
167
  &--no-border-bottom {
153
168
  border-bottom: unset;
@@ -155,6 +170,7 @@ export default defineComponent({
155
170
  cursor: pointer;
156
171
  flex-grow: 1;
157
172
  }
173
+
158
174
  .info-icon {
159
175
  margin: 0px 5px;
160
176
  }
@@ -5,4 +5,5 @@ export interface DlTabDetails {
5
5
  disabled?: boolean
6
6
  showTooltip?: boolean
7
7
  tooltip?: string
8
+ icon?: string
8
9
  }