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

package/components/es-accordion-list.vue

@@ -23,19 +23,22 @@ const activeIndex = ref();
 
 watch(model, (newVal) => {
     if (newVal) {
+        // @ts-expect-error not sure
         activeIndex.value = children.findIndex((child) => child.props.id === newVal);
     }
 });
 
 const accordionTabs = children.map((child, index) => {
+    // @ts-expect-error not sure
     if (child.props.id === props.initialExpandedId || child.props.id === model.value) {
         activeIndex.value = index;
     }
     return child.children;
 });
 
-const updateActiveIndex = (index) => {
+const updateActiveIndex = (index: any) => {
     if (model.value) {
+        // @ts-expect-error not sure
         model.value = children[index]?.props.id || '';
     }
 };
@@ -96,6 +99,7 @@ const updateActiveIndex = (index) => {
                     role="heading"
                     aria-level="3"
                     :class="{ 'h3 mb-0': variant === 'minimal' }">
+                    <!-- @vue-expect-error -->
                     <component
                         :is="item"
                         v-for="item in tab.title()"
@@ -103,6 +107,7 @@ const updateActiveIndex = (index) => {
                 </span>
                 <icon-chevron-down class="es-accordion-icon flex-shrink-0 ml-200" />
             </template>
+            <!-- @vue-expect-error -->
             <component
                 :is="item"
                 v-for="item in tab.default()"

package/components/es-breadcrumbs.vue

@@ -13,7 +13,7 @@ const model = computed(() => {
         return [];
     }
 
-    return props.items.map((item) => ({
+    return props.items.map((item: any) => ({
         ...item,
         // mark breadcrumb as active if manually set or if it matches this route
         active: item.active || route.path === item.to || route.path === item.href,

package/components/es-button.vue

@@ -83,10 +83,20 @@ const getRootClasses = computed(() => {
 </script>
 
 <template>
+    <!--
+        <a> is needed for href because a root-relative link like /market/start/
+        that is passed to <nuxt-link :to="" /> will attempt to internally navigate
+        within a micro frontend, which will result in a 404
+    -->
+    <a
+        v-if="props.href"
+        :class="getRootClasses"
+        :href="props.href">
+        <slot />
+    </a>
     <nuxt-link
-        v-if="props.href || props.to"
-        :href="props.href || undefined"
-        :to="props.to || undefined"
+        v-else-if="props.to"
+        :to="props.to"
         :class="getRootClasses">
         <slot />
     </nuxt-link>

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-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-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

@@ -21,7 +21,7 @@ const props = defineProps({
     },
 });
 
-const checkFrozenRow = (index) => {
+const checkFrozenRow = (index: any) => {
     if (index === 0 && props.stickyFirstCol) {
         return true;
     }
@@ -39,7 +39,7 @@ const startCase = (str: string) =>
         .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
         .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
 
-const label = (col) => {
+const label = (col: any) => {
     if (typeof col === 'string') {
         return startCase(col);
     }
@@ -50,6 +50,7 @@ const columns = computed(() => {
     if (props.fields) {
         return props.fields;
     }
+    // @ts-expect-error not sure
     return Object.keys(props.items[0]);
 });
 
@@ -81,6 +82,7 @@ const scrollHeight = computed(() => {
         :value="props.items"
         class="border table__data-table table-spacing table"
         :scroll-height="scrollHeight">
+        <!-- @vue-expect-error -->
         <column
             v-for="(col, index) of columns"
             :key="col?.key ? col.key : col"

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';

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();
         };

package/components/es-tabs.vue

@@ -11,15 +11,16 @@ const panels = useSlots().default?.() || [];
 // keep track of the active tab index
 //  - from above, if v-model is used
 //  - from below, if the tab component receives a click
-const activeIndex = ref(model.value || 0);
+const activeIndex: Ref<number> = ref(model.value || 0);
 
 // watch the v-model for changes and update the active index if it does change
 watch(model, (newVal) => {
+    // @ts-expect-error I don't know why
     activeIndex.value = newVal;
 });
 
 // called from the TabView when the user clicks a tab to make it active
-const updateActiveIndex = (index) => {
+const updateActiveIndex = (index: number) => {
     model.value = index;
 };
 </script>
@@ -35,6 +36,7 @@ const updateActiveIndex = (index) => {
             panelContainer: 'tab-content',
         }"
         @update:active-index="updateActiveIndex">
+        <!-- @vue-expect-error -->
         <tab-panel
             v-for="(panel, index) in panels"
             :key="index"
@@ -58,6 +60,7 @@ const updateActiveIndex = (index) => {
                     ],
                 }),
             }">
+            <!-- @vue-expect-error -->
             <component
                 :is="item"
                 v-for="(item, idx) in panel.children.default()"

package/components/es-video.vue

@@ -2,10 +2,12 @@
 // Props
 interface IProps {
     altText: string;
-    coverImageUrl: string;
+    coverImageUrl?: string;
     embedUrl: string;
 }
-const props = defineProps<IProps>();
+const props = withDefaults(defineProps<IProps>(), {
+    coverImageUrl: '',
+});
 const showVideo = ref(false);
 
 // Methods

package/components/es-view-more.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// @ts-expect-error module has no types
 import truncate from 'html-truncate';
 
 const props = defineProps({

package/components/es-zip-code-form.vue

@@ -85,13 +85,13 @@ const rules = {
 
 const { v$, validateState } = useEsForms(rules, state);
 
-const ctaForm = ref<HTMLFormElement>('ctaForm');
+const ctaForm = useTemplateRef<HTMLFormElement>('ctaForm');
 
 const handleSubmit = () => {
     if (v$.value.$invalid) {
         v$.value.$touch();
     } else {
-        ctaForm.value.submit();
+        ctaForm.value?.submit();
     }
 };
 </script>

package/components/icon/arrow-clockwise.vue

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

package/components/icon/arrow-counter-clockwise.vue

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

package/components/icon/arrow-cycle.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconArrowCycle',
     props: {

package/components/icon/arrow-left.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowLeftIcon',
     props: {

package/components/icon/arrow-right.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowRightIcon',
     props: {

package/components/icon/arrow-up.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowUpIcon',
     props: {

package/components/icon/arrow.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconArrow',
     props: {

package/components/icon/bank.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBank',
     props: {

package/components/icon/bell.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBell',
     props: {

package/components/icon/block.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBlock',
     props: {

package/components/icon/calculator.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCalculator',
     props: {

package/components/icon/calendar.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCalendar',
     props: {