@energysage/es-ds-components 3.1.5 → 3.1.6
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-popover.vue +43 -38
- package/components/es-tooltip.vue +50 -45
- package/nuxt.config.ts +10 -0
- package/package.json +2 -2
|
@@ -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.6",
|
|
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",
|