@energysage/es-ds-components 3.1.5 → 3.1.7
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/components/es-file-input.vue +24 -2
- package/components/es-popover.vue +43 -38
- package/components/es-tooltip.vue +50 -45
- package/nuxt.config.ts +10 -0
- package/package.json +2 -2
|
@@ -48,6 +48,15 @@ const props = defineProps({
|
|
|
48
48
|
default: false,
|
|
49
49
|
required: false,
|
|
50
50
|
},
|
|
51
|
+
/**
|
|
52
|
+
* When true, allows multiple file selection. When false, restricts to single file selection.
|
|
53
|
+
* Defaults to true to maintain backward compatibility.
|
|
54
|
+
*/
|
|
55
|
+
multiple: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: true,
|
|
58
|
+
required: false,
|
|
59
|
+
},
|
|
51
60
|
});
|
|
52
61
|
|
|
53
62
|
let currentFiles: Array<File> = [];
|
|
@@ -204,6 +213,13 @@ async function verifyFiles(files: Array<File>) {
|
|
|
204
213
|
// @ts-expect-error basically we're filtering out the non-Files here
|
|
205
214
|
newValidFiles = newValidFiles.filter((file) => file && file.status === 'fulfilled').map((file) => file.value);
|
|
206
215
|
|
|
216
|
+
// If multiple is false, only keep the first file
|
|
217
|
+
if (!props.multiple && newValidFiles.length > 0) {
|
|
218
|
+
newValidFiles = [newValidFiles[0]];
|
|
219
|
+
// Clear existing files when single mode is enabled
|
|
220
|
+
currentFiles = [];
|
|
221
|
+
}
|
|
222
|
+
|
|
207
223
|
// If the new file with name already exists in the current files
|
|
208
224
|
// Don't upload the new file and display an error
|
|
209
225
|
const duplicateFiles = newValidFiles.filter(({ name }) => currentFiles.some((file) => file.name === name));
|
|
@@ -211,7 +227,13 @@ async function verifyFiles(files: Array<File>) {
|
|
|
211
227
|
|
|
212
228
|
// For new files with unused names, add them to files
|
|
213
229
|
newValidFiles = newValidFiles.filter(({ name }) => !currentFiles.some((file) => file.name === name));
|
|
214
|
-
|
|
230
|
+
|
|
231
|
+
// In single file mode, replace existing files instead of adding to them
|
|
232
|
+
if (!props.multiple && newValidFiles.length > 0) {
|
|
233
|
+
currentFiles = newValidFiles;
|
|
234
|
+
} else {
|
|
235
|
+
currentFiles = [...currentFiles, ...newValidFiles];
|
|
236
|
+
}
|
|
215
237
|
|
|
216
238
|
if (newValidFiles.length > 0) {
|
|
217
239
|
emit('readyToUpload', newValidFiles);
|
|
@@ -328,7 +350,7 @@ const openFilePicker = () => {
|
|
|
328
350
|
type="file"
|
|
329
351
|
:accept="fileTypes.join(', ')"
|
|
330
352
|
style="display: none"
|
|
331
|
-
multiple
|
|
353
|
+
:multiple="multiple"
|
|
332
354
|
@change="onFileChanged($event)" />
|
|
333
355
|
</div>
|
|
334
356
|
</template>
|
|
@@ -20,47 +20,52 @@ withDefaults(defineProps<IProps>(), {
|
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
const emit = defineEmits(['update:show']);
|
|
23
|
+
|
|
24
|
+
// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
|
|
25
|
+
const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
|
|
23
26
|
</script>
|
|
24
27
|
|
|
25
28
|
<template>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<popover-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
29
|
+
<component :is="wrappingComponent">
|
|
30
|
+
<popover-root
|
|
31
|
+
:open="show"
|
|
32
|
+
@update:open="(val) => emit('update:show', val)">
|
|
33
|
+
<popover-trigger
|
|
34
|
+
class="es-popover-trigger p-0"
|
|
35
|
+
:class="{ [triggerClass]: true }">
|
|
36
|
+
<span class="sr-only">{{ triggerDescription }}</span>
|
|
37
|
+
<slot name="trigger" />
|
|
38
|
+
</popover-trigger>
|
|
39
|
+
<popover-portal>
|
|
40
|
+
<popover-content
|
|
41
|
+
class="es-popover-content position-relative"
|
|
42
|
+
:class="{
|
|
43
|
+
'text-white': variant === 'dark',
|
|
44
|
+
'es-popover-content--light': variant === 'light',
|
|
45
|
+
}"
|
|
46
|
+
:collision-padding="collisionPadding"
|
|
47
|
+
:side="side">
|
|
48
|
+
<popover-close
|
|
49
|
+
class="es-popover-close align-items-center d-flex justify-content-center float-right mb-50 ml-50 position-relative"
|
|
50
|
+
:class="{ 'es-popover-close--light': variant === 'light' }">
|
|
51
|
+
<span class="sr-only">Close</span>
|
|
52
|
+
<icon-x
|
|
53
|
+
height="20px"
|
|
54
|
+
width="20px" />
|
|
55
|
+
</popover-close>
|
|
56
|
+
<popover-arrow
|
|
57
|
+
class="es-popover-arrow"
|
|
58
|
+
:class="{ 'es-popover-arrow--light': variant === 'light' }"
|
|
59
|
+
:height="12"
|
|
60
|
+
rounded
|
|
61
|
+
:width="22" />
|
|
62
|
+
<slot />
|
|
63
|
+
<!-- the cta slot is kept for backwards compatibility but is deprecated -->
|
|
64
|
+
<slot name="cta" />
|
|
65
|
+
</popover-content>
|
|
66
|
+
</popover-portal>
|
|
67
|
+
</popover-root>
|
|
68
|
+
</component>
|
|
64
69
|
</template>
|
|
65
70
|
|
|
66
71
|
<style lang="scss" scoped>
|
|
@@ -43,55 +43,60 @@ onMounted(() => {
|
|
|
43
43
|
const mediaQueryResult = window.matchMedia('(hover: none)') as MediaQueryList;
|
|
44
44
|
deviceSupportsTouch.value = mediaQueryResult?.matches || false;
|
|
45
45
|
});
|
|
46
|
+
|
|
47
|
+
// Workaround: Reka UI components don't play nice with the Nuxt 3.16+ dev server side rendering while using NPM link
|
|
48
|
+
const wrappingComponent = import.meta.dev ? resolveComponent('ClientOnly') : 'span';
|
|
46
49
|
</script>
|
|
47
50
|
|
|
48
51
|
<template>
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
<component :is="wrappingComponent">
|
|
53
|
+
<tooltip-provider
|
|
54
|
+
v-if="!deviceSupportsTouch"
|
|
55
|
+
:delay-duration="delayDuration"
|
|
56
|
+
:disable-closing-trigger="true">
|
|
57
|
+
<tooltip-root
|
|
58
|
+
:open="show || internalShow"
|
|
59
|
+
@update:open="handleUpdateOpen">
|
|
60
|
+
<tooltip-trigger
|
|
61
|
+
class="es-tooltip-trigger p-0"
|
|
62
|
+
:class="{ [triggerClass]: true }"
|
|
63
|
+
@click="handleClick">
|
|
64
|
+
<slot name="trigger" />
|
|
65
|
+
</tooltip-trigger>
|
|
66
|
+
<tooltip-portal>
|
|
67
|
+
<tooltip-content
|
|
68
|
+
class="es-tooltip-content"
|
|
69
|
+
:class="{
|
|
70
|
+
'text-white': variant === 'dark',
|
|
71
|
+
'es-tooltip-content--light': variant === 'light',
|
|
72
|
+
}"
|
|
73
|
+
:collision-padding="collisionPadding"
|
|
74
|
+
:side="side">
|
|
75
|
+
<tooltip-arrow
|
|
76
|
+
class="es-tooltip-arrow"
|
|
77
|
+
:class="{ 'es-tooltip-arrow--light': variant === 'light' }"
|
|
78
|
+
:height="12"
|
|
79
|
+
rounded
|
|
80
|
+
:width="22" />
|
|
81
|
+
<slot />
|
|
82
|
+
</tooltip-content>
|
|
83
|
+
</tooltip-portal>
|
|
84
|
+
</tooltip-root>
|
|
85
|
+
</tooltip-provider>
|
|
86
|
+
<es-popover
|
|
87
|
+
v-else
|
|
88
|
+
:collision-padding="collisionPadding"
|
|
89
|
+
:show="show"
|
|
90
|
+
:side="side"
|
|
91
|
+
:trigger-class="triggerClass"
|
|
92
|
+
:variant="variant"
|
|
93
|
+
@update:show="(val) => emit('update:show', val)">
|
|
94
|
+
<template #trigger>
|
|
60
95
|
<slot name="trigger" />
|
|
61
|
-
</
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
:class="{
|
|
66
|
-
'text-white': variant === 'dark',
|
|
67
|
-
'es-tooltip-content--light': variant === 'light',
|
|
68
|
-
}"
|
|
69
|
-
:collision-padding="collisionPadding"
|
|
70
|
-
:side="side">
|
|
71
|
-
<tooltip-arrow
|
|
72
|
-
class="es-tooltip-arrow"
|
|
73
|
-
:class="{ 'es-tooltip-arrow--light': variant === 'light' }"
|
|
74
|
-
:height="12"
|
|
75
|
-
rounded
|
|
76
|
-
:width="22" />
|
|
77
|
-
<slot />
|
|
78
|
-
</tooltip-content>
|
|
79
|
-
</tooltip-portal>
|
|
80
|
-
</tooltip-root>
|
|
81
|
-
</tooltip-provider>
|
|
82
|
-
<es-popover
|
|
83
|
-
v-else
|
|
84
|
-
:collision-padding="collisionPadding"
|
|
85
|
-
:show="show"
|
|
86
|
-
:side="side"
|
|
87
|
-
:trigger-class="triggerClass"
|
|
88
|
-
:variant="variant"
|
|
89
|
-
@update:show="(val) => emit('update:show', val)">
|
|
90
|
-
<template #trigger>
|
|
91
|
-
<slot name="trigger" />
|
|
92
|
-
</template>
|
|
93
|
-
<slot />
|
|
94
|
-
</es-popover>
|
|
96
|
+
</template>
|
|
97
|
+
<slot />
|
|
98
|
+
</es-popover>
|
|
99
|
+
</component>
|
|
95
100
|
</template>
|
|
96
101
|
|
|
97
102
|
<style lang="scss" scoped>
|
package/nuxt.config.ts
CHANGED
|
@@ -77,8 +77,18 @@ export default defineNuxtConfig({
|
|
|
77
77
|
'primevue/tabpanel',
|
|
78
78
|
'primevue/tabview',
|
|
79
79
|
'reka-ui',
|
|
80
|
+
'motion-v',
|
|
80
81
|
],
|
|
81
82
|
},
|
|
83
|
+
css: {
|
|
84
|
+
preprocessorOptions: {
|
|
85
|
+
scss: {
|
|
86
|
+
api: 'modern',
|
|
87
|
+
// color functions will be deprecated in SASS 2.0: https://sass-lang.com/documentation/breaking-changes/color-functions/
|
|
88
|
+
silenceDeprecations: ['color-functions'],
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
},
|
|
82
92
|
},
|
|
83
93
|
typescript: {
|
|
84
94
|
typeCheck: true,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@energysage/es-ds-components",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "An EnergySage Vue component library",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"author": "EnergySage",
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@energysage/es-ds-styles": "^3.1.
|
|
20
|
+
"@energysage/es-ds-styles": "^3.1.6",
|
|
21
21
|
"@nuxt/eslint": "^1.0.1",
|
|
22
22
|
"@nuxtjs/google-fonts": "^3.2.0",
|
|
23
23
|
"@vuelidate/core": "^2.0.3",
|