@energysage/es-ds-components 3.0.11 → 3.1.0

package/components/es-popover.vue

@@ -1,113 +1,141 @@
 <script setup lang="ts">
-import OverlayPanel from 'primevue/overlaypanel';
-
-const props = defineProps({
-    target: {
-        type: String,
-        required: true,
-    },
-    triggers: {
-        type: String,
-        required: false,
-        default: 'focus',
-    },
-    show: {
-        type: Boolean,
-        required: false,
-        default: false,
-    },
-    variant: {
-        type: String,
-        required: false,
-        default: 'dark',
-        validator: (val: string) => ['light', 'dark'].includes(val as string),
-    },
-});
+import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
 
-const op = ref<InstanceType<typeof OverlayPanel> | null>(null);
-const slots = useSlots();
-const hasTitle = computed(() => !!slots.title);
-const closePanel = () => {
-    op.value?.hide();
-};
-const showPanel = (event: Event) => {
-    op.value?.show(event);
-};
-
-onMounted(() => {
-    const targetElement = document.getElementById(props.target);
-    if (targetElement) {
-        const triggers = props.triggers.split(' ').map((trigger) => (trigger === 'hover' ? 'mouseover' : trigger));
-
-        for (const trigger of triggers) {
-            targetElement.addEventListener(trigger, showPanel);
-        }
-    }
+interface IProps {
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+    show?: boolean | undefined;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    triggerClass?: string;
+    triggerDescription?: string;
+    variant?: 'light' | 'dark';
+}
+
+withDefaults(defineProps<IProps>(), {
+    collisionPadding: 0,
+    show: undefined,
+    side: 'top',
+    triggerClass: '',
+    triggerDescription: 'More information',
+    variant: 'dark',
 });
 
-watch(
-    () => props.show,
-    (newVal) => {
-        if (newVal) {
-            const targetElement = document.getElementById(props.target);
-            if (targetElement) {
-                const event = new MouseEvent('click', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true,
-                });
-                targetElement.dispatchEvent(event);
-            }
-        } else {
-            closePanel();
-        }
-    },
-);
+const emit = defineEmits(['update:show']);
 </script>
 
 <template>
-    <overlay-panel
-        ref="op"
-        :dismissable="true"
-        append-to="body"
-        :pt="{
-            root: {
-                class: `popover b-popover ${props.variant === 'light' ? 'es-popover-light' : 'es-popover-dark'}`,
-            },
-            transition: {
-                enterFromClass: 'es-popover-enter-from',
-                enterActiveClass: 'es-popover-enter-active',
-                leaveActiveClass: 'es-popover-leave-active',
-                leaveToClass: 'es-popover-leave-to',
-            },
-        }">
-        <div class="arrow"></div>
-        <template v-if="hasTitle">
-            <!-- Title slot content -->
-            <h3 class="popover-header">
-                <slot name="title" />
-                <button
-                    class="es-popover-close p-0 float-right bg-transparent"
-                    @click="closePanel">
-                    <icon-x
-                        height="20px"
-                        width="20px" />
-                </button>
-            </h3>
-        </template>
-        <!-- Popover Content -->
-        <div class="popover-body">
-            <div class="d-flex">
-                <slot />
-                <button
-                    v-if="!hasTitle"
-                    class="es-popover-close p-0 pl-50 mb-auto bg-transparent"
-                    @click="closePanel">
+    <popover-root
+        :open="show"
+        @update:open="(val) => emit('update:show', val)">
+        <popover-trigger
+            class="es-popover-trigger p-0"
+            :class="{ [triggerClass]: true }">
+            <span class="sr-only">{{ triggerDescription }}</span>
+            <slot name="trigger" />
+        </popover-trigger>
+        <popover-portal>
+            <popover-content
+                class="es-popover-content position-relative"
+                :class="{
+                    'text-white': variant === 'dark',
+                    'es-popover-content--light': variant === 'light',
+                }"
+                :collision-padding="collisionPadding"
+                :side="side">
+                <popover-close
+                    class="es-popover-close position-absolute"
+                    :class="{ 'es-popover-close--light': variant === 'light' }">
+                    <span class="sr-only">Close</span>
                     <icon-x
                         height="20px"
                         width="20px" />
-                </button>
-            </div>
-        </div>
-    </overlay-panel>
+                </popover-close>
+                <popover-arrow
+                    class="es-popover-arrow"
+                    :class="{ 'es-popover-arrow--light': variant === 'light' }"
+                    :height="12"
+                    rounded
+                    :width="22" />
+                <div class="pr-300">
+                    <slot />
+                </div>
+                <slot name="cta" />
+            </popover-content>
+        </popover-portal>
+    </popover-root>
 </template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/border-radius' as border-radius;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.es-popover-trigger {
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    display: inline-flex;
+    justify-content: center;
+    vertical-align: middle;
+}
+
+:deep(.es-popover-content) {
+    background-color: variables.$dark-blue;
+    @include border-radius.border-radius(variables.$popover-border-radius);
+    box-shadow: variables.$popover-box-shadow;
+    padding: variables.$popover-header-padding-y variables.$popover-header-padding-x;
+    width: 250px;
+    z-index: variables.$zindex-popover;
+}
+
+:deep(.es-popover-content[data-state='open']) {
+    animation: fadeIn 150ms ease;
+}
+
+:deep(.es-popover-content[data-state='closed']) {
+    animation: fadeOut 150ms ease;
+}
+
+:deep(.es-popover-content--light) {
+    background-color: variables.$white;
+}
+
+:deep(.es-popover-arrow) {
+    fill: variables.$dark-blue;
+}
+
+:deep(.es-popover-arrow--light) {
+    fill: variables.$white;
+}
+
+:deep(.es-popover-close) {
+    background-color: transparent;
+    border: none;
+    color: variables.$white;
+    height: 28px;
+    right: 1rem;
+    padding: 0;
+    top: 0.75rem;
+    width: 28px;
+}
+
+:deep(.es-popover-close--light) {
+    color: variables.$blue-600;
+}
+</style>

package/components/es-tooltip.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui';
+
+interface IProps {
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+    delayDuration?: number;
+    show?: boolean | undefined;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    triggerClass?: string;
+    variant?: 'light' | 'dark';
+}
+
+withDefaults(defineProps<IProps>(), {
+    collisionPadding: 0,
+    delayDuration: 0,
+    show: undefined,
+    side: 'top',
+    triggerClass: '',
+    variant: 'dark',
+});
+
+const emit = defineEmits(['update:show']);
+
+const deviceSupportsTouch = ref(false);
+const internalShow = ref(false);
+
+// provide a workaround for the case where scroll-flipping causes the tooltip
+// to get in a state where it won't reopen on hover (allow user to click to open)
+const handleClick = () => {
+    internalShow.value = true;
+    emit('update:show', true);
+};
+
+// keep the internal boolean up to date when the state changes
+// and also emit the update event up and out
+const handleUpdateOpen = (val: boolean) => {
+    internalShow.value = val;
+    emit('update:show', val);
+};
+
+onMounted(() => {
+    // detect if the device supports touch events or not
+    const mediaQueryResult = window.matchMedia('(hover: none)') as MediaQueryList;
+    deviceSupportsTouch.value = mediaQueryResult?.matches || false;
+});
+</script>
+
+<template>
+    <tooltip-provider
+        v-if="!deviceSupportsTouch"
+        :delay-duration="delayDuration"
+        :disable-closing-trigger="true">
+        <tooltip-root
+            :open="show || internalShow"
+            @update:open="handleUpdateOpen">
+            <tooltip-trigger
+                class="es-tooltip-trigger p-0"
+                :class="{ [triggerClass]: true }"
+                @click="handleClick">
+                <slot name="trigger" />
+            </tooltip-trigger>
+            <tooltip-portal>
+                <tooltip-content
+                    class="es-tooltip-content"
+                    :class="{
+                        'text-white': variant === 'dark',
+                        'es-tooltip-content--light': variant === 'light',
+                    }"
+                    :collision-padding="collisionPadding"
+                    :side="side">
+                    <tooltip-arrow
+                        class="es-tooltip-arrow"
+                        :class="{ 'es-tooltip-arrow--light': variant === 'light' }"
+                        :height="12"
+                        rounded
+                        :width="22" />
+                    <slot />
+                </tooltip-content>
+            </tooltip-portal>
+        </tooltip-root>
+    </tooltip-provider>
+    <es-popover
+        v-else
+        :collision-padding="collisionPadding"
+        :show="show"
+        :side="side"
+        :trigger-class="triggerClass"
+        :variant="variant"
+        @update:show="(val) => emit('update:show', val)">
+        <template #trigger>
+            <slot name="trigger" />
+        </template>
+        <slot />
+    </es-popover>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/border-radius' as border-radius;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.es-tooltip-trigger {
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    display: inline-flex;
+    justify-content: center;
+    vertical-align: middle;
+}
+
+:deep(.es-tooltip-content) {
+    background-color: variables.$dark-blue;
+    @include border-radius.border-radius(variables.$popover-border-radius);
+    box-shadow: variables.$popover-box-shadow;
+    padding: variables.$popover-header-padding-y variables.$popover-header-padding-x;
+    width: 250px;
+    z-index: variables.$zindex-popover;
+}
+
+:deep(.es-tooltip-content[data-state='open']) {
+    animation: fadeIn 150ms ease;
+}
+
+:deep(.es-tooltip-content[data-state='closed']) {
+    animation: fadeOut 150ms ease;
+}
+
+:deep(.es-tooltip-content--light) {
+    background-color: variables.$white;
+}
+
+:deep(.es-tooltip-arrow) {
+    fill: variables.$dark-blue;
+}
+
+:deep(.es-tooltip-arrow--light) {
+    fill: variables.$white;
+}
+
+:deep(.es-tooltip-close) {
+    background-color: transparent;
+    border: none;
+    color: variables.$white;
+    height: 28px;
+    right: 1rem;
+    padding: 0;
+    top: 0.75rem;
+    width: 28px;
+}
+
+:deep(.es-tooltip-close--light) {
+    color: variables.$blue-600;
+}
+</style>

package/nuxt.config.ts

@@ -76,6 +76,7 @@ export default defineNuxtConfig({
                 'primevue/slider',
                 'primevue/tabpanel',
                 'primevue/tabview',
+                'reka-ui',
             ],
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.0.11",
+    "version": "3.1.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.0.3",
+        "@energysage/es-ds-styles": "^3.1.0",
         "@nuxt/eslint": "^1.0.1",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
@@ -28,6 +28,7 @@
         "nuxt-primevue": "^3.0.0",
         "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
+        "reka-ui": "^2.2.0",
         "vue": "^3.5.6"
     },
     "devDependencies": {