@dataloop-ai/components 0.18.1 → 0.18.2
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 +1 -2
- package/src/components/compound/DlCodeEditor/DlCodeEditor.vue +2 -0
- package/src/components/essential/DlLabel/DlLabel.vue +19 -3
- package/src/components/essential/DlMenu/utils.ts +1 -1
- package/src/demos/DlDemoPage.vue +1 -1
- package/src/demos/DlLabelDemo.vue +80 -0
- package/src/demos/DlMenuDemo.vue +2 -5
- package/src/hooks/use-model-toggle.ts +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.2",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": "./index.ts",
|
|
6
6
|
"./models": "./models.ts",
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"moment": "^2.29.4",
|
|
33
33
|
"sass": "^1.51.0",
|
|
34
34
|
"sass-loader": "^12.6.0",
|
|
35
|
-
"simple-code-editor": "^2.0.8",
|
|
36
35
|
"uuid": "^8.3.2",
|
|
37
36
|
"v-wave": "^1.5.0",
|
|
38
37
|
"vanilla-jsoneditor": "^0.10.2",
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
<dl-ellipsis
|
|
20
20
|
v-if="text"
|
|
21
21
|
class="dl-label__text"
|
|
22
|
+
:class="!suffix && fluid ? 'dl-label__fluid' : ''"
|
|
22
23
|
:text="text"
|
|
23
24
|
/>
|
|
24
25
|
<dl-ellipsis
|
|
@@ -27,7 +28,11 @@
|
|
|
27
28
|
>
|
|
28
29
|
<slot name="default" />
|
|
29
30
|
</dl-ellipsis>
|
|
30
|
-
<span
|
|
31
|
+
<span
|
|
32
|
+
v-if="suffix"
|
|
33
|
+
:class="fluid ? 'dl-label__fluid' : ''"
|
|
34
|
+
>
|
|
35
|
+
{{ suffixPreview }}</span>
|
|
31
36
|
<div class="dl-label__suffix">
|
|
32
37
|
<div class="dl-label__suffix-slot">
|
|
33
38
|
<slot
|
|
@@ -100,6 +105,13 @@ export default defineComponent({
|
|
|
100
105
|
color: {
|
|
101
106
|
type: String,
|
|
102
107
|
default: 'dl-color-darker'
|
|
108
|
+
},
|
|
109
|
+
/**
|
|
110
|
+
* Will fill the container size its given
|
|
111
|
+
*/
|
|
112
|
+
fluid: {
|
|
113
|
+
type: Boolean,
|
|
114
|
+
default: false
|
|
103
115
|
}
|
|
104
116
|
},
|
|
105
117
|
setup(props, { emit, slots }) {
|
|
@@ -162,13 +174,17 @@ export default defineComponent({
|
|
|
162
174
|
&__content {
|
|
163
175
|
color: var(--dl-label-text-color);
|
|
164
176
|
display: flex;
|
|
165
|
-
width:
|
|
177
|
+
width: 95%;
|
|
166
178
|
}
|
|
167
179
|
&__text {
|
|
168
|
-
flex-grow: 100;
|
|
169
180
|
overflow: hidden;
|
|
170
181
|
text-overflow: ellipsis;
|
|
171
182
|
white-space: nowrap;
|
|
172
183
|
}
|
|
184
|
+
|
|
185
|
+
&__fluid {
|
|
186
|
+
flex-grow: 100;
|
|
187
|
+
max-width: 100%;
|
|
188
|
+
}
|
|
173
189
|
}
|
|
174
190
|
</style>
|
|
@@ -116,7 +116,7 @@ export const refocusTargetFn = (
|
|
|
116
116
|
// menu was hidden from code or ESC plugin
|
|
117
117
|
(evt ||
|
|
118
118
|
// menu was not closed from a mouse or touch clickOutside
|
|
119
|
-
evt
|
|
119
|
+
evt?.dlClickOutside !== true)
|
|
120
120
|
) {
|
|
121
121
|
(refocusTarget as HTMLElement).focus()
|
|
122
122
|
}
|
package/src/demos/DlDemoPage.vue
CHANGED
|
@@ -101,6 +101,86 @@
|
|
|
101
101
|
</template>
|
|
102
102
|
</dl-label>
|
|
103
103
|
</div>
|
|
104
|
+
<div
|
|
105
|
+
class="dl-text-holder-demo"
|
|
106
|
+
style="width: 500px"
|
|
107
|
+
>
|
|
108
|
+
Label with suffix in a large container
|
|
109
|
+
<dl-label
|
|
110
|
+
label-color="dl-color-secondary"
|
|
111
|
+
hint="tooltip"
|
|
112
|
+
text="dl-labelaaaaaaaaaaaaaa"
|
|
113
|
+
suffix=".mp3"
|
|
114
|
+
>
|
|
115
|
+
<template #actions>
|
|
116
|
+
<div
|
|
117
|
+
style="
|
|
118
|
+
display: flex;
|
|
119
|
+
gap: 5px;
|
|
120
|
+
align-items: center;
|
|
121
|
+
height: 100%;
|
|
122
|
+
margin-right: 5px;
|
|
123
|
+
"
|
|
124
|
+
>
|
|
125
|
+
<dl-icon icon="icon-dl-add" />
|
|
126
|
+
<dl-icon icon="icon-dl-delete" />
|
|
127
|
+
</div>
|
|
128
|
+
</template>
|
|
129
|
+
</dl-label>
|
|
130
|
+
</div>
|
|
131
|
+
<div
|
|
132
|
+
class="dl-text-holder-demo"
|
|
133
|
+
style="width: 500px"
|
|
134
|
+
>
|
|
135
|
+
Label with suffix in a large container and fluid
|
|
136
|
+
<dl-label
|
|
137
|
+
label-color="dl-color-secondary"
|
|
138
|
+
hint="tooltip"
|
|
139
|
+
text="dl-labelaaaaaaaaaaaaaa"
|
|
140
|
+
suffix=".mp3"
|
|
141
|
+
fluid
|
|
142
|
+
>
|
|
143
|
+
<template #actions>
|
|
144
|
+
<div
|
|
145
|
+
style="
|
|
146
|
+
display: flex;
|
|
147
|
+
gap: 5px;
|
|
148
|
+
align-items: center;
|
|
149
|
+
height: 100%;
|
|
150
|
+
margin-right: 5px;
|
|
151
|
+
"
|
|
152
|
+
>
|
|
153
|
+
<dl-icon icon="icon-dl-add" />
|
|
154
|
+
<dl-icon icon="icon-dl-delete" />
|
|
155
|
+
</div>
|
|
156
|
+
</template>
|
|
157
|
+
</dl-label>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="dl-text-holder-demo">
|
|
160
|
+
Label with suffix and fluid
|
|
161
|
+
<dl-label
|
|
162
|
+
label-color="dl-color-secondary"
|
|
163
|
+
hint="tooltip"
|
|
164
|
+
text="dl-labelaaaaaaaaaaaaaa"
|
|
165
|
+
suffix=".mp3"
|
|
166
|
+
fluid
|
|
167
|
+
>
|
|
168
|
+
<template #actions>
|
|
169
|
+
<div
|
|
170
|
+
style="
|
|
171
|
+
display: flex;
|
|
172
|
+
gap: 5px;
|
|
173
|
+
align-items: center;
|
|
174
|
+
height: 100%;
|
|
175
|
+
margin-right: 5px;
|
|
176
|
+
"
|
|
177
|
+
>
|
|
178
|
+
<dl-icon icon="icon-dl-add" />
|
|
179
|
+
<dl-icon icon="icon-dl-delete" />
|
|
180
|
+
</div>
|
|
181
|
+
</template>
|
|
182
|
+
</dl-label>
|
|
183
|
+
</div>
|
|
104
184
|
</div>
|
|
105
185
|
</template>
|
|
106
186
|
|
package/src/demos/DlMenuDemo.vue
CHANGED
|
@@ -333,7 +333,7 @@
|
|
|
333
333
|
flex-direction: column;
|
|
334
334
|
"
|
|
335
335
|
>
|
|
336
|
-
V-model {{ showing }}
|
|
336
|
+
With model V-model {{ showing }}
|
|
337
337
|
<div>
|
|
338
338
|
<dl-button
|
|
339
339
|
color="primary"
|
|
@@ -357,10 +357,7 @@
|
|
|
357
357
|
>
|
|
358
358
|
Click me
|
|
359
359
|
|
|
360
|
-
<dl-menu
|
|
361
|
-
v-model="showing"
|
|
362
|
-
:value="false"
|
|
363
|
-
>
|
|
360
|
+
<dl-menu v-model="showing">
|
|
364
361
|
<dl-list style="min-width: 100px">
|
|
365
362
|
<dl-list-item clickable>
|
|
366
363
|
<dl-item-section>New tab</dl-item-section>
|
|
@@ -80,7 +80,7 @@ export default function useModelToggle({
|
|
|
80
80
|
props[`onUpdate:${modelValueNaming}`] ||
|
|
81
81
|
(vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
|
|
82
82
|
|
|
83
|
-
if (listener
|
|
83
|
+
if (listener) {
|
|
84
84
|
emit(`update:${modelValueNaming}`, true)
|
|
85
85
|
payload = evt
|
|
86
86
|
|
|
@@ -91,7 +91,7 @@ export default function useModelToggle({
|
|
|
91
91
|
})
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
if (!props.modelValue || listener
|
|
94
|
+
if (!props.modelValue || !listener) {
|
|
95
95
|
processShow(evt)
|
|
96
96
|
}
|
|
97
97
|
}
|