@dataloop-ai/components 0.19.172 → 0.19.173
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
|
@@ -32,15 +32,13 @@
|
|
|
32
32
|
:no-caps="item.noCaps"
|
|
33
33
|
:is-active="modelValue === item.name"
|
|
34
34
|
:font-size="fontSize"
|
|
35
|
+
:bordered="bordered"
|
|
35
36
|
@click="handleTabClick"
|
|
36
37
|
/>
|
|
37
38
|
</div>
|
|
38
39
|
</tabs-wrapper>
|
|
39
|
-
<div class="empty-space" />
|
|
40
|
-
<slot
|
|
41
|
-
name="top-right"
|
|
42
|
-
:styles="topRightSlotStyles"
|
|
43
|
-
/>
|
|
40
|
+
<div :class="{ 'no-border-bottom': !bordered }" class="empty-space" />
|
|
41
|
+
<slot name="top-right" :styles="topRightSlotStyles" />
|
|
44
42
|
</div>
|
|
45
43
|
</template>
|
|
46
44
|
|
|
@@ -70,7 +68,8 @@ export default defineComponent({
|
|
|
70
68
|
disabled: { type: Boolean, default: false },
|
|
71
69
|
modelValue: { type: String, required: true },
|
|
72
70
|
fontSize: { type: String, default: '18px' },
|
|
73
|
-
gap: { type: String, default: '40px' }
|
|
71
|
+
gap: { type: String, default: '40px' },
|
|
72
|
+
bordered: { type: Boolean, default: true }
|
|
74
73
|
},
|
|
75
74
|
emits: ['update:model-value'],
|
|
76
75
|
data() {
|
|
@@ -87,11 +86,13 @@ export default defineComponent({
|
|
|
87
86
|
},
|
|
88
87
|
computed: {
|
|
89
88
|
topRightSlotStyles(): string {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
89
|
+
let borderBottom = this.vertical
|
|
90
|
+
? 'inherit'
|
|
91
|
+
: '1px solid var(--dl-color-separator)'
|
|
92
|
+
if (!this.bordered) {
|
|
93
|
+
borderBottom = 'unset'
|
|
94
|
+
}
|
|
95
|
+
return `border-bottom: ${borderBottom};
|
|
95
96
|
padding-left: ${this.topRightSlotWidth ? this.gap : '0px'};
|
|
96
97
|
`
|
|
97
98
|
},
|
|
@@ -143,7 +144,7 @@ export default defineComponent({
|
|
|
143
144
|
this.updatePosition()
|
|
144
145
|
},
|
|
145
146
|
unsubscribeListeners() {
|
|
146
|
-
(this.$refs.dlTabsRef as HTMLElement)?.removeEventListener(
|
|
147
|
+
;(this.$refs.dlTabsRef as HTMLElement)?.removeEventListener(
|
|
147
148
|
'scroll',
|
|
148
149
|
this.handleScroll
|
|
149
150
|
)
|
|
@@ -247,4 +248,7 @@ export default defineComponent({
|
|
|
247
248
|
.full-width {
|
|
248
249
|
width: 100%;
|
|
249
250
|
}
|
|
251
|
+
.no-border-bottom {
|
|
252
|
+
border-bottom: unset;
|
|
253
|
+
}
|
|
250
254
|
</style>
|
|
@@ -49,7 +49,8 @@ export default defineComponent({
|
|
|
49
49
|
showTooltip: { type: Boolean, default: false },
|
|
50
50
|
tooltip: { type: String, default: null },
|
|
51
51
|
tabindex: { type: String, default: '0' },
|
|
52
|
-
fontSize: { type: String, default: '18px' }
|
|
52
|
+
fontSize: { type: String, default: '18px' },
|
|
53
|
+
bordered: { type: Boolean, default: true }
|
|
53
54
|
},
|
|
54
55
|
emits: ['click'],
|
|
55
56
|
data() {
|
|
@@ -78,6 +79,8 @@ export default defineComponent({
|
|
|
78
79
|
|
|
79
80
|
if (this.isActive) {
|
|
80
81
|
classes = classes + ' dl-tab--active'
|
|
82
|
+
} else if (!this.bordered) {
|
|
83
|
+
classes = classes + ' dl-tab--no-border-bottom'
|
|
81
84
|
}
|
|
82
85
|
|
|
83
86
|
if (this.disabled) {
|
|
@@ -146,6 +149,9 @@ export default defineComponent({
|
|
|
146
149
|
color: var(--dl-color-hover);
|
|
147
150
|
border-color: var(--dl-color-hover);
|
|
148
151
|
}
|
|
152
|
+
&--no-border-bottom {
|
|
153
|
+
border-bottom: unset;
|
|
154
|
+
}
|
|
149
155
|
cursor: pointer;
|
|
150
156
|
flex-grow: 1;
|
|
151
157
|
}
|
package/src/demos/DlTabsDemo.vue
CHANGED
|
@@ -17,6 +17,25 @@
|
|
|
17
17
|
</dl-tab-panel>
|
|
18
18
|
</dl-tab-panels>
|
|
19
19
|
|
|
20
|
+
With no border
|
|
21
|
+
<dl-tabs
|
|
22
|
+
v-model="selectedTab"
|
|
23
|
+
:items="tabItems"
|
|
24
|
+
:bordered="false"
|
|
25
|
+
@update:model-value="handleModelValueUpdate"
|
|
26
|
+
/>
|
|
27
|
+
<div style="height: 4px" />
|
|
28
|
+
<dl-tab-panels v-model="selectedTab">
|
|
29
|
+
<dl-tab-panel
|
|
30
|
+
v-for="item in tabItems"
|
|
31
|
+
:key="item.name"
|
|
32
|
+
class="tabpanel"
|
|
33
|
+
:name="item.name"
|
|
34
|
+
>
|
|
35
|
+
<h1>{{ item.label }}</h1>
|
|
36
|
+
</dl-tab-panel>
|
|
37
|
+
</dl-tab-panels>
|
|
38
|
+
|
|
20
39
|
<dl-tabs
|
|
21
40
|
v-model="selectedTab"
|
|
22
41
|
:items="tabItems"
|
|
@@ -41,11 +60,7 @@
|
|
|
41
60
|
icon="icon-dl-refresh"
|
|
42
61
|
label="Refresh"
|
|
43
62
|
/>
|
|
44
|
-
<dl-button
|
|
45
|
-
size="s"
|
|
46
|
-
icon="icon-dl-pause"
|
|
47
|
-
label="Pause"
|
|
48
|
-
/>
|
|
63
|
+
<dl-button size="s" icon="icon-dl-pause" label="Pause" />
|
|
49
64
|
</div>
|
|
50
65
|
</template>
|
|
51
66
|
</dl-tabs>
|
|
@@ -86,11 +101,7 @@
|
|
|
86
101
|
icon="icon-dl-refresh"
|
|
87
102
|
label="Refresh"
|
|
88
103
|
/>
|
|
89
|
-
<dl-button
|
|
90
|
-
size="s"
|
|
91
|
-
icon="icon-dl-pause"
|
|
92
|
-
label="Pause"
|
|
93
|
-
/>
|
|
104
|
+
<dl-button size="s" icon="icon-dl-pause" label="Pause" />
|
|
94
105
|
</div>
|
|
95
106
|
</template>
|
|
96
107
|
</dl-tabs>
|