@energysage/es-ds-components 3.0.0-alpha.8 → 3.0.0

package/components/es-collapse.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     },
 });
 
-const userDeterminedState = ref(null);
+const userDeterminedState: Ref<boolean | null> = ref(null);
 
 // directly determines the expanded/collapsed state of the panel
 const expanded = computed(() => {
@@ -34,7 +34,7 @@ const expanded = computed(() => {
     return props.visible || model.value;
 });
 
-const onClick = ({ value }) => {
+const onClick = ({ value }: { value: boolean }) => {
     // save the state toggled by the user
     // convert from "collapsed" semantics internal to the primevue panel
     // to the "expanded" semantics exposed by this component

package/components/es-container.vue

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+interface IProps {
+    fluid?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    fluid: false,
+});
+</script>
+
 <template>
-    <div class="container">
+    <div :class="props.fluid ? 'container-fluid' : 'container'">
         <slot />
     </div>
 </template>

package/components/es-cta-banner.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
     dark: {
         type: Boolean,

package/components/es-cta-card.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
     imageFirst: {
         type: Boolean,

package/components/es-data-table-column.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Column from 'primevue/column';
+import type { ComponentOptionsMixin } from 'vue';
+
+// magic solution for wrapping Column successfully
+// https://www.reddit.com/r/vuejs/comments/1g17u7u/comment/lvjv91h/
+defineOptions({
+    name: 'Column',
+    extends: (Column as unknown as ComponentOptionsMixin).extends,
+    inheritAttrs: false,
+});
+</script>
+
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+    <!--
+    While this file needs to exist to keep Nuxt happy, it doesn't actually do anything.
+    Instances of es-data-table-column are placed inside es-data-table, and es-data-table handles their display.
+    -->
+</template>

package/components/es-data-table-simple.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 });
 
 const isSingleCol = computed(() => !props.fields);
-const computedItems = computed(() => {
+const computedItems: ComputedRef<any[]> = computed(() => {
     if (!props.items.length && !useSlots().default) {
         throw new Error('Neither items prop nor slot content is defined.');
     }

package/components/es-data-table.vue

@@ -1,74 +1,38 @@
 <script setup lang="ts">
 import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
 
 const props = defineProps({
-    fields: {
-        type: Array,
-        default: null,
-    },
     items: {
         type: Array,
         required: true,
     },
-    stickyFirstCol: {
+    scrollable: {
         type: Boolean,
         default: false,
     },
-    stickyHeader: {
-        type: [Boolean, String],
-        default: false,
+    scrollHeight: {
+        type: String,
+        default: '',
     },
 });
 
-const checkFrozenRow = (index) => {
-    if (index === 0 && props.stickyFirstCol) {
-        return true;
-    }
-    return false;
-};
-
-// Code is taken from BootStrap Vue to implemnt <b-table> feature that automatically
-// samples the first row to extract field name and "humanize" by converting kebab-case,
-// snake_case, and camelCase to individual words and capitalizes each word.
-// Doc: https://bootstrap-vue.org/docs/components/table
-// Source Code: https://github.com/bootstrap-vue/bootstrap-vue/blob/5173dd19f6f46dc9d125cd7233fb59ccd2ef9296/src/utils/string.js#L30
-const startCase = (str: string) =>
-    str
-        .replace(/_/g, ' ')
-        .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
-        .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
-
-const label = (col) => {
-    if (typeof col === 'string') {
-        return startCase(col);
+// avoid passing in default scrollHeight value when scrollable is false
+// otherwise it will limit the height when we don't want it to
+const defaultScrollHeight = computed(() => {
+    if (props.scrollable) {
+        return props.scrollHeight || '305px';
     }
-    return col?.label ? col.label : startCase(col?.key);
-};
 
-const columns = computed(() => {
-    if (props.fields) {
-        return props.fields;
-    }
-    return Object.keys(props.items[0]);
-});
-
-const scrollHeight = computed(() => {
-    if (props.stickyHeader) {
-        if (typeof props.stickyHeader === 'string') {
-            return props.stickyHeader;
-        }
-        return '300px';
-    }
     return '';
 });
 </script>
+
 <template>
     <data-table
-        scrollable
+        class="border table__data-table table-spacing table"
         :pt="{
             table: {
-                class: 'font-size-75 font-size-md-100',
+                class: 'font-size-75 font-size-md-100 w-100',
                 style: 'border-collapse: separate; border-spacing: 0;',
             },
             wrapper: {
@@ -78,49 +42,34 @@ const scrollHeight = computed(() => {
                 style: 'top: 0px; z-index: 2',
             },
         }"
-        :value="props.items"
-        class="border table__data-table table-spacing table"
-        :scroll-height="scrollHeight">
-        <column
-            v-for="(col, index) of columns"
-            :key="col?.key ? col.key : col"
-            :field="col?.key ? col.key : col"
-            :header="label(col)"
-            :sortable="col?.sortable"
-            :frozen="checkFrozenRow(index)"
-            align-frozen="left"
-            :pt="{
-                sortIcon: {
-                    style: 'display: none',
-                },
-                headerCell: (options) => ({
-                    class: [
-                        {
-                            sortable: options.props.sortable,
-                            stickyFirstColHeader: options.props.frozen,
-                        },
-                    ],
-                }),
-                bodyCell: (options) => ({
-                    class: [
-                        {
-                            stickyFirstCol: options.props.frozen,
-                        },
-                    ],
-                }),
-            }">
-        </column>
+        :scrollable="scrollable"
+        :scroll-height="defaultScrollHeight"
+        :value="items">
+        <slot />
     </data-table>
 </template>
+
 <style scoped lang="scss">
-:deep(.stickyFirstColHeader) {
-    position: sticky !important;
+:deep(th[data-p-sortable-column='true']) {
+    cursor: pointer;
+    user-select: none;
+
+    div[data-pc-section='headercontent'] {
+        align-items: center;
+        display: flex;
+    }
+    span[data-pc-section='sort'] {
+        display: inline-block;
+        margin-left: 0.5rem;
+    }
 }
-:deep(.stickyFirstCol) {
+
+:deep(td[data-p-frozen-column='true']),
+:deep(th[data-p-frozen-column='true']) {
     position: sticky !important;
-    background: inherit;
 }
-:deep(.sortable) {
-    cursor: pointer !important;
+
+:deep(td[data-p-frozen-column='true']) {
+    background: inherit;
 }
 </style>

package/components/es-file-input.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import findMimeType, { mimeTypes } from '../lib-utils/mime-type-finder';
-
 type UploadInfo = {
     name: string;
     uploadUrl: string;
@@ -29,7 +27,7 @@ const props = defineProps({
         type: Array,
         default: () => [],
         required: true,
-        validator(fileTypes) {
+        validator(fileTypes: any[]) {
             return fileTypes.every((fileType) => mimeTypes.includes(fileType));
         },
     },
@@ -101,6 +99,7 @@ async function verifyMimeType(file: File) {
     return new Promise((resolve, reject) => {
         const fileReader = new FileReader();
         fileReader.onload = (evt) => {
+            // @ts-expect-error not sure
             const uint = new Uint8Array(evt.target.result);
             const bytes: string[] = [];
             uint.forEach((byte) => {
@@ -198,8 +197,11 @@ async function verifyFiles(files: Array<File>) {
     const correctlyNamedFiles = removeSpaceFromFileNames(correctlySizedFiles);
 
     // Make sure the file is the correct mime type
-    let newValidFiles = await Promise.allSettled(correctlyNamedFiles.map(async (file) => verifyMimeType(file)));
+    let newValidFiles = (await Promise.allSettled(
+        correctlyNamedFiles.map(async (file) => verifyMimeType(file)),
+    )) as unknown as File[];
     // Filter out undefined values and "rejected"
+    // @ts-expect-error basically we're filtering out the non-Files here
     newValidFiles = newValidFiles.filter((file) => file && file.status === 'fulfilled').map((file) => file.value);
 
     // If the new file with name already exists in the current files
@@ -240,7 +242,7 @@ async function onFileChanged($event: Event) {
     }
 }
 
-const onDrop = (event) => {
+const onDrop = (event: any) => {
     // The user has dropped files onto the component. We have to apply the same logic as if they had
     // selected the files from the file picker which limits the file types to the ones specified in the
     // fileTypes prop.
@@ -262,6 +264,7 @@ const onDrop = (event) => {
 
 const openFilePicker = () => {
     if (fileInput.value) {
+        // @ts-expect-error not sure
         fileInput.value.click();
     }
 };

package/components/es-footer.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 import IconFacebook from './icon/facebook.vue';
 import IconInstagram from './icon/instagram.vue';
 import IconLinkedin from './icon/linkedin.vue';
@@ -25,6 +25,25 @@ export default {
             return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
         },
     },
+    mounted() {
+        // https://energysage.atlassian.net/wiki/spaces/FG/pages/1427865649/One-trust+Consent+Initialization+and+GTM
+        window.addEventListener('OneTrustLoadedCb', () => {
+            (window as any).OneTrust.OnConsentChanged(() => {
+                // OneTrust modal should modify cookie values, a hard-refresh will
+                // trigger re-loading GTM with updated cookie values, which in turn
+                // will only fire tags aligned with new preferences
+                window.location.reload();
+                return false;
+            });
+            document.querySelectorAll('.toggle-info-display').forEach((elem) => {
+                // Function closure to ensure event only fires on one elem
+                elem.addEventListener('click', (e) => {
+                    e.stopImmediatePropagation();
+                    (window as any).OneTrust.ToggleInfoDisplay();
+                });
+            });
+        });
+    },
 };
 </script>
 
@@ -120,16 +139,26 @@ export default {
                 <!-- Trademark Info -->
                 <!-- Legal -->
                 <hr class="border-top border-blue-500 m-0" />
-                <div class="row justify-content-center pt-100">
+                <div class="row pt-100">
                     <div
                         v-for="link in content.legalLinks"
                         :key="link.text"
-                        class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
+                        class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300">
                         <es-nav-bar-link
+                            v-if="link.url"
                             :href="link.url"
-                            class="text-reset font-weight-normal">
+                            class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
                             {{ link.text }}
                         </es-nav-bar-link>
+                        <div v-else>
+                            <icon-ccpa-opt-out />
+                            <es-button
+                                inline
+                                class="toggle-info-display text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal ml-1"
+                                variant="link">
+                                {{ link.text }}
+                            </es-button>
+                        </div>
                     </div>
                 </div>
                 <!-- Legal -->

package/components/es-modal.vue

@@ -13,7 +13,7 @@ const props = defineProps({
     size: {
         type: String,
         default: 'md',
-        validator: (val) => ['sm', 'md', 'lg', 'xl'].includes(val),
+        validator: (val: string) => ['sm', 'md', 'lg', 'xl'].includes(val),
     },
     bodyClass: {
         type: String,

package/components/es-nav-bar-account-menu.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBarAccountMenu',
     props: {
@@ -30,13 +30,16 @@ export default {
                 <ul
                     class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
                     style="display: none">
+                    <!-- @vue-expect-error -->
                     <li
                         v-for="item in authItems"
                         :key="item.name">
+                        <!-- @vue-expect-error -->
                         <es-nav-bar-link
                             class="dropdown-item nav-link"
                             :href="item.link">
                             <span class="mx-50">
+                                <!-- @vue-expect-error -->
                                 {{ item.name }}
                             </span>
                         </es-nav-bar-link>

package/components/es-nav-bar-featured-article.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBarFeaturedArticle',
     props: {

package/components/es-nav-bar-link.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 // specific workaround for getting a reference to an auto-imported but not globally registered
 // component like NuxtLink, so that it can be used in a <component :is=""> context.
 // this resolves to an import statement, according to:

package/components/es-nav-bar-product-menu.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBarProductMenu',
     props: {
@@ -141,14 +141,17 @@ export default {
                     <div class="col-2" />
                 </li>
                 <!-- subnav items -->
+                <!-- @vue-expect-error -->
                 <li
                     v-for="item in items"
                     :key="item.name">
+                    <!-- @vue-expect-error -->
                     <es-nav-bar-link
                         class="dropdown-item nav-item nav-item-border-mobile nav-link align-items-center d-flex px-lg-100 py-lg-50 product-menu-link"
                         :class="{ 'font-weight-bold': item.emphasize }"
                         :href="item.link"
                         :target="item.newTab ? '_blank' : null">
+                        <!-- @vue-expect-error -->
                         {{ item.name }}
                     </es-nav-bar-link>
                 </li>
@@ -183,6 +186,7 @@ export default {
                 <es-row
                     tag="ul"
                     class="d-block d-lg-flex list-unstyled">
+                    <!-- @vue-expect-error -->
                     <es-nav-bar-topic-menu
                         v-for="topic in topics"
                         :key="topic.name"

package/components/es-nav-bar-top-level-menu.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBarTopLevelMenu',
     props: {
@@ -154,6 +154,7 @@ export default {
                                         </div>
                                         <div class="col-2" />
                                     </li>
+                                    <!-- @vue-expect-error -->
                                     <es-nav-bar-topic-menu
                                         v-for="topic in topics"
                                         :key="topic.name"

package/components/es-nav-bar-topic-menu.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBarTopicMenu',
     props: {
@@ -158,14 +158,17 @@ export default {
                     </div>
                     <div class="col-2">&nbsp;</div>
                 </li>
+                <!-- @vue-expect-error -->
                 <li
                     v-for="item in items"
                     :key="item.name">
+                    <!-- @vue-expect-error -->
                     <es-nav-bar-link
                         class="dropdown-item nav-item nav-item-border-mobile nav-link d-flex align-items-center ml-lg-0 px-lg-0 py-lg-50"
                         :class="{ 'font-weight-bold': item.emphasize }"
                         :href="item.link"
                         :target="item.newTab ? '_blank' : null">
+                        <!-- @vue-expect-error -->
                         {{ item.name }}
                     </es-nav-bar-link>
                 </li>

package/components/es-nav-bar.vue

@@ -1,4 +1,4 @@
-<script lang="js">
+<script lang="ts">
 export default {
     name: 'EsNavBar',
     props: {
@@ -18,6 +18,7 @@ export default {
         function uncheck_menus() {
             document.querySelectorAll('.menu-checkbox').forEach((element) => {
                 const checkbox = element;
+                // @ts-expect-error legacy code
                 checkbox.checked = false;
             });
         }
@@ -26,10 +27,12 @@ export default {
         const overlay = document.querySelector('.content-overlay');
 
         // Function to show/hide overlay
-        function show_overlay(overlay_visible) {
+        function show_overlay(overlay_visible: boolean) {
             if (overlay_visible) {
+                // @ts-expect-error legacy code
                 overlay.classList.add('show');
             } else {
+                // @ts-expect-error legacy code
                 overlay.classList.remove('show');
             }
         }
@@ -53,12 +56,14 @@ export default {
 
         // Collapse all open menus on window resize
         window.addEventListener('resize', () => {
+            // @ts-expect-error legacy code
             if (mainMenuCheckbox.checked || accountMenuCheckbox.checked) {
                 collapse_mobile_menus();
             }
         });
 
         // Collapse all open menus on overlay click
+        // @ts-expect-error legacy code
         overlay.addEventListener('click', () => {
             collapse_mobile_menus();
         });
@@ -74,13 +79,16 @@ export default {
                     show_overlay(true);
                 });
                 element.addEventListener('mouseout', () => {
+                    // @ts-expect-error legacy code
                     // Hide overlay on mouseout on desktop not mobile
                     show_overlay(mainMenuCheckbox.checked || accountMenuCheckbox.checked);
                 });
             });
 
+        // @ts-expect-error legacy code
         // Toggle menu display on main menu open/close
         mainMenuCheckbox.addEventListener('change', (event) => {
+            // @ts-expect-error legacy code
             if (event.target.checked) {
                 show_mobile_menus();
             } else {
@@ -88,8 +96,10 @@ export default {
             }
         });
 
+        // @ts-expect-error legacy code
         // Toggle menu display on account menu open/close
         accountMenuCheckbox.addEventListener('change', (event) => {
+            // @ts-expect-error legacy code
             if (event.target.checked) {
                 show_mobile_menus();
             } else {
@@ -98,22 +108,26 @@ export default {
         });
 
         // get logged in/out state and display appropriate menu
-        const menuDisplay = ({ loggedOut }) => {
+        const menuDisplay = ({ loggedOut }: { loggedOut: boolean }) => {
             if (loggedOut) {
                 // logged out so allow loggedOut menu and the compare buttons to be visible
                 document.querySelectorAll('.nav-es-container .loggedOut').forEach((element) => {
+                    // @ts-expect-error legacy code
                     // eslint-disable-next-line no-param-reassign
                     element.style.display = null;
                 });
             } else {
                 // logged in so allow logged in menu to be visible, and show name with appropriate layout
                 document.querySelectorAll('.nav-es-container .loggedIn').forEach((element) => {
+                    // @ts-expect-error legacy code
                     // eslint-disable-next-line no-param-reassign
                     element.style.display = null;
                 });
+                // @ts-expect-error legacy code
                 document.querySelector('.nav-es-container .icon-dropdown .dropdown-toggle').style.display = 'flex';
                 const selector = '.nav-es-container .icon-dropdown .dropdown-toggle .first-name';
                 document.querySelectorAll(selector).forEach((element) => {
+                    // @ts-expect-error legacy code
                     // eslint-disable-next-line no-param-reassign
                     element.style.display = 'block';
                 });
@@ -153,7 +167,7 @@ export default {
         };
 
         // set up callback for sticky nav intersection observer
-        const intersectionCallback = (entries) => {
+        const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     entry.target.classList.remove('scrolled');
@@ -167,6 +181,7 @@ export default {
         // https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
         const observer = new IntersectionObserver(intersectionCallback, intersectionOptions);
         const targetEl = document.querySelector('#nav-main');
+        // @ts-expect-error legacy code
         observer.observe(targetEl);
 
         // CUSTOM GLOBAL-NAV SCRIPT ENDS

package/components/es-pagination.vue

@@ -24,6 +24,7 @@ const model = defineModel<number>();
 const first = ref();
 
 watch(model, (newVal) => {
+    // @ts-expect-error I don't know
     first.value = (newVal - 1) * props.perPage;
 });
 

package/components/es-reviews-io-card-carousel.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 useHead({
     link: [
         {
@@ -34,7 +34,9 @@ onBeforeUnmount(() => {
 
 const initializeWidget = () => {
     // if the Reviews.io script loaded before
+    // @ts-expect-error global-scoped ReviewsIO stuff
     if (typeof window !== 'undefined' && window.carouselInlineWidget) {
+        // @ts-expect-error global-scoped ReviewsIO stuff
         // eslint-disable-next-line no-new, new-cap
         new window.carouselInlineWidget('reviewsio-carousel-widget', {
             /* Your REVIEWS.io account ID: */
@@ -256,11 +258,13 @@ onMounted(async () => {
     // if we're server-side, get out
     if (typeof window === 'undefined') return;
 
+    // @ts-expect-error global-scoped ReviewsIO stuff
     if (window.carouselInlineWidget) {
         // if the Reviews.io script has loaded, initialize the widget
         initializeWidget();
     } else {
         // if the Reviews.io script has not loaded, set its callback function to trigger widget initialization
+        // @ts-expect-error global-scoped ReviewsIO stuff
         window.carouselInlineWidgetCallback = () => {
             initializeWidget();
         };