@dataloop-ai/components 0.18.1 → 0.18.3
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 +30 -5
- package/src/hooks/use-model-toggle.ts +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.3",
|
|
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>
|
|
@@ -528,6 +525,32 @@
|
|
|
528
525
|
</dl-button>
|
|
529
526
|
</div>
|
|
530
527
|
</div>
|
|
528
|
+
|
|
529
|
+
<h4>With model as button: {{ isOpen }}</h4>
|
|
530
|
+
<dl-button label="test">
|
|
531
|
+
<dl-menu
|
|
532
|
+
v-model="isOpen"
|
|
533
|
+
max-height="250px"
|
|
534
|
+
self="bottom middle"
|
|
535
|
+
anchor="top middle"
|
|
536
|
+
:offset="[50, 5]"
|
|
537
|
+
@show="onShow"
|
|
538
|
+
@hide="onHide"
|
|
539
|
+
>
|
|
540
|
+
<dl-list style="min-width: 100px">
|
|
541
|
+
<dl-list-item
|
|
542
|
+
v-for="(item, index) in alotOfListItems"
|
|
543
|
+
:key="index"
|
|
544
|
+
clickable
|
|
545
|
+
:is-highlighted="index === highlightedIndex"
|
|
546
|
+
>
|
|
547
|
+
<dl-item-section>
|
|
548
|
+
{{ item }}
|
|
549
|
+
</dl-item-section>
|
|
550
|
+
</dl-list-item>
|
|
551
|
+
</dl-list>
|
|
552
|
+
</dl-menu>
|
|
553
|
+
</dl-button>
|
|
531
554
|
</div>
|
|
532
555
|
</template>
|
|
533
556
|
|
|
@@ -559,6 +582,7 @@ export default defineComponent({
|
|
|
559
582
|
const showing = ref(false)
|
|
560
583
|
const isMenuOpen = ref(false)
|
|
561
584
|
const arrowNavigationLabel = ref<ItemType>('Arrow Navigation Label')
|
|
585
|
+
const isOpen = ref(false)
|
|
562
586
|
|
|
563
587
|
const listItems = ref([
|
|
564
588
|
'New tab',
|
|
@@ -697,6 +721,7 @@ export default defineComponent({
|
|
|
697
721
|
listItems,
|
|
698
722
|
onShow,
|
|
699
723
|
onHide,
|
|
724
|
+
isOpen,
|
|
700
725
|
isMenuOpen,
|
|
701
726
|
selectedItem,
|
|
702
727
|
highlightedIndex,
|
|
@@ -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
|
}
|
|
@@ -121,7 +121,7 @@ export default function useModelToggle({
|
|
|
121
121
|
props[`onUpdate:${modelValueNaming}`] ||
|
|
122
122
|
(vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
|
|
123
123
|
|
|
124
|
-
if (listener
|
|
124
|
+
if (listener) {
|
|
125
125
|
emit(`update:${modelValueNaming}`, false)
|
|
126
126
|
payload = evt
|
|
127
127
|
nextTick(() => {
|
|
@@ -131,7 +131,7 @@ export default function useModelToggle({
|
|
|
131
131
|
})
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
if (!props.modelValue || listener
|
|
134
|
+
if (!props.modelValue || !listener) {
|
|
135
135
|
processHide(evt)
|
|
136
136
|
}
|
|
137
137
|
}
|