@dataloop-ai/components 0.19.47 → 0.19.49
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
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
class="text-input-area"
|
|
11
11
|
type="text"
|
|
12
12
|
clear-button-tooltip
|
|
13
|
-
style="
|
|
13
|
+
:style="inputStyles"
|
|
14
14
|
:size="size"
|
|
15
15
|
:model-value="modelValue"
|
|
16
16
|
:placeholder="placeholder"
|
|
@@ -36,8 +36,10 @@
|
|
|
36
36
|
</dl-input>
|
|
37
37
|
<dl-button
|
|
38
38
|
v-show="withSearchButton"
|
|
39
|
+
ref="button"
|
|
39
40
|
:size="buttonSize"
|
|
40
41
|
:class="buttonClasses"
|
|
42
|
+
style="margin-left: 15px"
|
|
41
43
|
@click="onSearchButtonPress"
|
|
42
44
|
>
|
|
43
45
|
Search
|
|
@@ -109,6 +111,16 @@ export default defineComponent({
|
|
|
109
111
|
}
|
|
110
112
|
},
|
|
111
113
|
computed: {
|
|
114
|
+
inputStyles(): Record<string, string> {
|
|
115
|
+
const button = this.$refs.button as any
|
|
116
|
+
const buttonEl = button?.$el as HTMLElement
|
|
117
|
+
const buttonWidth = buttonEl?.clientWidth + 13 ?? 0
|
|
118
|
+
|
|
119
|
+
return {
|
|
120
|
+
'max-width': '100%',
|
|
121
|
+
width: `calc(100% - ${buttonWidth}px)`
|
|
122
|
+
}
|
|
123
|
+
},
|
|
112
124
|
buttonSize(): string {
|
|
113
125
|
return BUTTON_SIZES[this.size]
|
|
114
126
|
},
|
|
@@ -156,7 +168,6 @@ export default defineComponent({
|
|
|
156
168
|
display: flex;
|
|
157
169
|
align-items: center;
|
|
158
170
|
width: 100%;
|
|
159
|
-
gap: 10px;
|
|
160
171
|
}
|
|
161
172
|
|
|
162
173
|
.text-input-area {
|
|
@@ -33,6 +33,29 @@
|
|
|
33
33
|
:auto-suggest-items="suggestItems"
|
|
34
34
|
style="height: 28px"
|
|
35
35
|
/>
|
|
36
|
+
|
|
37
|
+
<div style="width: 100%">
|
|
38
|
+
search in flex div
|
|
39
|
+
<div style="display: flex; width: 30%">
|
|
40
|
+
<dl-search
|
|
41
|
+
v-model="searchValue"
|
|
42
|
+
size="l"
|
|
43
|
+
with-search-button
|
|
44
|
+
highlight-matches
|
|
45
|
+
style="width: 100%; max-width: 100%"
|
|
46
|
+
placeholder="Search here"
|
|
47
|
+
:auto-suggest-items="suggestItems"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
<div style="display: flex; width: 30%">
|
|
51
|
+
<dl-search
|
|
52
|
+
v-model="searchValue"
|
|
53
|
+
size="l"
|
|
54
|
+
style="width: 100%; max-width: 100%"
|
|
55
|
+
placeholder="Search here"
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
36
59
|
</div>
|
|
37
60
|
</template>
|
|
38
61
|
|