@dataloop-ai/components 0.20.60 → 0.20.62
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
|
@@ -12,6 +12,49 @@
|
|
|
12
12
|
>
|
|
13
13
|
<div ref="panel" :style="innerContainerStyles" class="inner-container">
|
|
14
14
|
<div v-if="collapsed" class="inner-container-overlay" />
|
|
15
|
+
<div
|
|
16
|
+
ref="separator"
|
|
17
|
+
class="separator"
|
|
18
|
+
:class="{ resize: resizable === true && isFullWidth === true }"
|
|
19
|
+
:style="separatorStyles"
|
|
20
|
+
>
|
|
21
|
+
<div
|
|
22
|
+
v-if="showDragHandle"
|
|
23
|
+
v-show="resizable === true"
|
|
24
|
+
class="gutter"
|
|
25
|
+
:style="glutterStyles"
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
<div
|
|
29
|
+
v-if="hasHeader === true && !isEmpty"
|
|
30
|
+
class="header"
|
|
31
|
+
:style="headerStyles"
|
|
32
|
+
>
|
|
33
|
+
<div class="overflow-hidden">
|
|
34
|
+
<slot name="header" />
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="content" :style="contentStyle">
|
|
38
|
+
<div class="column" />
|
|
39
|
+
<dl-empty-state
|
|
40
|
+
v-if="isEmpty && emptyStateProps"
|
|
41
|
+
v-bind="emptyStateProps"
|
|
42
|
+
>
|
|
43
|
+
<template v-for="(_, slot) in $slots" #[slot]="props">
|
|
44
|
+
<slot :name="slot" v-bind="props" />
|
|
45
|
+
</template>
|
|
46
|
+
</dl-empty-state>
|
|
47
|
+
<slot v-if="!isEmpty" />
|
|
48
|
+
</div>
|
|
49
|
+
<div
|
|
50
|
+
v-if="hasFooter === true && !isEmpty"
|
|
51
|
+
class="footer"
|
|
52
|
+
:style="footerStyles"
|
|
53
|
+
>
|
|
54
|
+
<div class="overflow-hidden">
|
|
55
|
+
<slot name="footer" />
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
15
58
|
<div v-if="collapsable === true">
|
|
16
59
|
<div
|
|
17
60
|
v-if="
|
|
@@ -23,7 +66,7 @@
|
|
|
23
66
|
:style="collapseIconStyle"
|
|
24
67
|
@click="handleCollapseButtonClick"
|
|
25
68
|
>
|
|
26
|
-
<dl-tooltip>
|
|
69
|
+
<dl-tooltip>Collapse Panel</dl-tooltip>
|
|
27
70
|
<dl-icon
|
|
28
71
|
icon="icon-dl-collapse"
|
|
29
72
|
color="dl-color-darker"
|
|
@@ -36,7 +79,7 @@
|
|
|
36
79
|
:style="collapseIconStyle"
|
|
37
80
|
@click="handleCollapseButtonClick"
|
|
38
81
|
>
|
|
39
|
-
<dl-tooltip>
|
|
82
|
+
<dl-tooltip>Expand Panel</dl-tooltip>
|
|
40
83
|
<dl-icon
|
|
41
84
|
icon="icon-dl-expand"
|
|
42
85
|
color="dl-color-darker"
|
|
@@ -55,7 +98,7 @@
|
|
|
55
98
|
@mouseleave="collapseButtonMouseLeave"
|
|
56
99
|
@mouseenter="collapseButtonMouseEnter"
|
|
57
100
|
>
|
|
58
|
-
<dl-tooltip>
|
|
101
|
+
<dl-tooltip>Collapse Panel</dl-tooltip>
|
|
59
102
|
<dl-icon
|
|
60
103
|
icon="icon-dl-expand"
|
|
61
104
|
color="dl-color-darker"
|
|
@@ -70,7 +113,7 @@
|
|
|
70
113
|
@mouseleave="collapseButtonMouseLeave"
|
|
71
114
|
@mouseenter="collapseButtonMouseEnter"
|
|
72
115
|
>
|
|
73
|
-
<dl-tooltip>
|
|
116
|
+
<dl-tooltip>Expand Panel</dl-tooltip>
|
|
74
117
|
<dl-icon
|
|
75
118
|
icon="icon-dl-collapse"
|
|
76
119
|
color="dl-color-darker"
|
|
@@ -78,49 +121,6 @@
|
|
|
78
121
|
/>
|
|
79
122
|
</div>
|
|
80
123
|
</div>
|
|
81
|
-
<div
|
|
82
|
-
ref="separator"
|
|
83
|
-
class="separator"
|
|
84
|
-
:class="{ resize: resizable === true }"
|
|
85
|
-
:style="separatorStyles"
|
|
86
|
-
>
|
|
87
|
-
<div
|
|
88
|
-
v-if="showDragHandle"
|
|
89
|
-
v-show="resizable === true"
|
|
90
|
-
class="gutter"
|
|
91
|
-
:style="glutterStyles"
|
|
92
|
-
/>
|
|
93
|
-
</div>
|
|
94
|
-
<div
|
|
95
|
-
v-if="hasHeader === true && !isEmpty"
|
|
96
|
-
class="header"
|
|
97
|
-
:style="headerStyles"
|
|
98
|
-
>
|
|
99
|
-
<div class="overflow-hidden">
|
|
100
|
-
<slot name="header" />
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="content" :style="contentStyle">
|
|
104
|
-
<div class="column" />
|
|
105
|
-
<dl-empty-state
|
|
106
|
-
v-if="isEmpty && emptyStateProps"
|
|
107
|
-
v-bind="emptyStateProps"
|
|
108
|
-
>
|
|
109
|
-
<template v-for="(_, slot) in $slots" #[slot]="props">
|
|
110
|
-
<slot :name="slot" v-bind="props" />
|
|
111
|
-
</template>
|
|
112
|
-
</dl-empty-state>
|
|
113
|
-
<slot v-if="!isEmpty" />
|
|
114
|
-
</div>
|
|
115
|
-
<div
|
|
116
|
-
v-if="hasFooter === true && !isEmpty"
|
|
117
|
-
class="footer"
|
|
118
|
-
:style="footerStyles"
|
|
119
|
-
>
|
|
120
|
-
<div class="overflow-hidden">
|
|
121
|
-
<slot name="footer" />
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
124
|
</div>
|
|
125
125
|
</div>
|
|
126
126
|
</template>
|
|
@@ -340,7 +340,7 @@ export default defineComponent({
|
|
|
340
340
|
},
|
|
341
341
|
leftClosedCollapseIconStyle(): Record<string, string> {
|
|
342
342
|
return {
|
|
343
|
-
left: this.isStudioMode ? '
|
|
343
|
+
left: this.isStudioMode ? '6px' : '0px',
|
|
344
344
|
marginRight: '15px',
|
|
345
345
|
borderTopRightRadius: '2px',
|
|
346
346
|
borderBottomRightRadius: '2px'
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
:contenteditable="contenteditable"
|
|
80
80
|
:class="inputClasses"
|
|
81
81
|
:placeholder="placeholder"
|
|
82
|
+
:style="stylesInput"
|
|
82
83
|
@input="onChange"
|
|
83
84
|
@focus="onFocus"
|
|
84
85
|
@blur="onBlur"
|
|
@@ -100,6 +101,7 @@
|
|
|
100
101
|
...adornmentClasses,
|
|
101
102
|
'dl-input__adornment-container--pos-right'
|
|
102
103
|
]"
|
|
104
|
+
:style="styleAppend"
|
|
103
105
|
>
|
|
104
106
|
<slot v-if="hasAppend" name="append" />
|
|
105
107
|
<span
|
|
@@ -626,6 +628,14 @@ export default defineComponent({
|
|
|
626
628
|
trimDebounce: {
|
|
627
629
|
type: Number,
|
|
628
630
|
default: 500
|
|
631
|
+
},
|
|
632
|
+
styleAppend: {
|
|
633
|
+
type: String,
|
|
634
|
+
default: ''
|
|
635
|
+
},
|
|
636
|
+
stylesInput: {
|
|
637
|
+
type: String,
|
|
638
|
+
default: ''
|
|
629
639
|
}
|
|
630
640
|
},
|
|
631
641
|
emits: [
|
|
@@ -124,6 +124,25 @@
|
|
|
124
124
|
/>
|
|
125
125
|
</template>
|
|
126
126
|
</dl-input>
|
|
127
|
+
<div class="numberClip" style="max-width: 64px">
|
|
128
|
+
<dl-input
|
|
129
|
+
v-model="numberClip"
|
|
130
|
+
title="Number Clip"
|
|
131
|
+
dense
|
|
132
|
+
size="m"
|
|
133
|
+
hide-clear-button
|
|
134
|
+
fit-content
|
|
135
|
+
type="number"
|
|
136
|
+
text-overflow="clip"
|
|
137
|
+
style-append="flex: none; transform:translateX(-2px);"
|
|
138
|
+
styles-input="text-overflow: clip;margin-right: 5px"
|
|
139
|
+
>
|
|
140
|
+
<template #append>
|
|
141
|
+
<span>%</span>
|
|
142
|
+
</template>
|
|
143
|
+
</dl-input>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
127
146
|
<dl-input
|
|
128
147
|
v-model="passFieldValue"
|
|
129
148
|
title="Password"
|
|
@@ -277,6 +296,7 @@ export default defineComponent({
|
|
|
277
296
|
|
|
278
297
|
const textVal = ref<string>('test me')
|
|
279
298
|
const numberVal = ref<number>()
|
|
299
|
+
const numberClip = ref<number>(0)
|
|
280
300
|
const emittedNumberValues = ref<number[]>([])
|
|
281
301
|
|
|
282
302
|
const trimmedValue = ref('')
|
|
@@ -296,6 +316,7 @@ export default defineComponent({
|
|
|
296
316
|
sizeSFieldValue,
|
|
297
317
|
files,
|
|
298
318
|
updateFiles,
|
|
319
|
+
numberClip,
|
|
299
320
|
addFile
|
|
300
321
|
}
|
|
301
322
|
}
|