@energysage/es-ds-components 3.7.7 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [4.0.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v3.7.7...es-ds-components-v4.0.0) (2025-10-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* update to nuxt 4 ([#1682](https://github.com/EnergySage/es-ds/issues/1682))
+
+### Features
+
+* update to nuxt 4 ([#1682](https://github.com/EnergySage/es-ds/issues/1682)) ([c01c5e8](https://github.com/EnergySage/es-ds/commit/c01c5e8b5aa98020d09145436b596ba231f09dd9))
+
 ## [3.7.7](https://github.com/EnergySage/es-ds/compare/es-ds-components-v3.7.6...es-ds-components-v3.7.7) (2025-10-03)
 
 

package/{components → app/components}/es-carousel.vue

@@ -66,11 +66,11 @@ const emit = defineEmits<{
 // get the breakpoint pixel numbers from the SASS variables in es-ds-styles
 const parseSassBreakpoint = (breakpoint: string) => parseInt(breakpoint.replace('px', ''), 10);
 const BREAKPOINTS = {
-    SM: parseSassBreakpoint(sassBreakpoints.sm),
-    MD: parseSassBreakpoint(sassBreakpoints.md),
-    LG: parseSassBreakpoint(sassBreakpoints.lg),
-    XL: parseSassBreakpoint(sassBreakpoints.xl),
-    XXL: parseSassBreakpoint(sassBreakpoints.xxl),
+    SM: parseSassBreakpoint(sassBreakpoints.sm!),
+    MD: parseSassBreakpoint(sassBreakpoints.md!),
+    LG: parseSassBreakpoint(sassBreakpoints.lg!),
+    XL: parseSassBreakpoint(sassBreakpoints.xl!),
+    XXL: parseSassBreakpoint(sassBreakpoints.xxl!),
 };
 
 // lower breakpoint values propagate to higher breakpoints unless overridden

package/{components → app/components}/es-error-page.vue

@@ -77,11 +77,11 @@ const errorCodeToMessages: ErrorCodeMap = {
     },
 };
 
-const messages: ErrorCode = errorCodeToMessages[props.errorType];
+const messages = errorCodeToMessages[props.errorType];
 
 const errorShortMessage = messages?.shortMessage || props.errorType;
 
-const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.longMessage;
+const errorLongMessage = messages?.longMessage || errorCodeToMessages.default?.longMessage;
 </script>
 
 <template>

package/{components → app/components}/es-file-input.vue

@@ -60,7 +60,7 @@ const props = defineProps({
 });
 
 let currentFiles: Array<File> = [];
-let active = false;
+const active = ref(false);
 const fileInput = ref(null);
 const emit = defineEmits([
     'fileSizeError',
@@ -215,7 +215,7 @@ async function verifyFiles(files: Array<File>) {
 
     // If multiple is false, only keep the first file
     if (!props.multiple && newValidFiles.length > 0) {
-        newValidFiles = [newValidFiles[0]];
+        newValidFiles = [newValidFiles[0]!];
         // Clear existing files when single mode is enabled
         currentFiles = [];
     }
@@ -268,7 +268,7 @@ 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.
-    active = false;
+    active.value = false;
 
     // Use DataTransferItemList interface to access the file(s)
     const dataTransfersAsFiles = [...event.dataTransfer.items]

package/{components → app/components}/es-segmented-control.vue

@@ -31,9 +31,7 @@ const buttonDimensions: ButtonDimensionsInterface = reactive({
     options: props.options?.length ? props.options.map(() => ({})) : [],
 });
 
-const inkbarStyle: ComputedRef<Partial<CSSStyleDeclaration>> = computed(
-    () => buttonDimensions.options[model.value || 0],
-);
+const inkbarStyle = computed(() => buttonDimensions.options[model.value || 0]);
 
 // assume the provided label is unique and convert to an id
 // by lowercasing and replacing all whitespace with dashes

package/{components → app/components}/es-skeleton-img.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 });
 
 const aspects = props.aspect.split(':');
-const aspectRatio = computed(() => `${(parseFloat(aspects[1]) / parseFloat(aspects[0])) * 100}%`);
+const aspectRatio = computed(() => `${(parseFloat(aspects[1]!) / parseFloat(aspects[0]!)) * 100}%`);
 </script>
 
 <template>

package/nuxt.config.ts

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
     // https://google-fonts.nuxtjs.org/options
     googleFonts: {
         preload: true,
-        download: false,
+        download: true,
         display: 'swap',
         families: {
             'Plus+Jakarta+Sans': {
@@ -50,12 +50,19 @@ export default defineNuxtConfig({
     vite: {
         optimizeDeps: {
             include: [
+                '@vue/devtools-core',
+                '@vue/devtools-kit',
                 '@vuelidate/core',
                 '@vuelidate/validators',
-                'html-truncate',
                 '@vueuse/core',
+                'clipboard',
+                'html-truncate',
+                'motion-v',
+                'primevue/config',
                 'primevue/accordion',
                 'primevue/accordiontab',
+                'primevue/animateonscroll',
+                'primevue/badgedirective',
                 'primevue/breadcrumb',
                 'primevue/button',
                 'primevue/carousel',
@@ -63,6 +70,7 @@ export default defineNuxtConfig({
                 'primevue/datatable',
                 'primevue/dialog',
                 'primevue/dropdown',
+                'primevue/focustrap',
                 'primevue/inputmask',
                 'primevue/inputotp',
                 'primevue/inputtext',
@@ -72,13 +80,15 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/ripple',
                 'primevue/selectbutton',
                 'primevue/skeleton',
                 'primevue/slider',
+                'primevue/styleclass',
                 'primevue/tabpanel',
                 'primevue/tabview',
+                'primevue/tooltip',
                 'reka-ui',
-                'motion-v',
             ],
         },
         css: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.7.7",
+    "version": "4.0.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -10,6 +10,7 @@
         "lint:eslint": "eslint .",
         "lint:prettier": "prettier --check .",
         "lint": "npm run lint:eslint && npm run lint:prettier",
+        "postinstall": "patch-package",
         "format:prettier": "prettier --write --list-different .",
         "format:eslint": "npm run lint:eslint -- --fix",
         "format": "npm run format:prettier && npm run format:eslint"
@@ -22,9 +23,9 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
-        "@vueuse/core": "^11.1.0",
+        "@vueuse/core": "^13.9.0",
         "html-truncate": "^1.2.2",
-        "nuxt": "^3.19.0",
+        "nuxt": "^4.1.2",
         "nuxt-primevue": "^3.0.0",
         "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
@@ -35,9 +36,13 @@
         "eslint": "^9.20.1",
         "eslint-config-prettier": "^10.0.1",
         "nuxt-primevue": "^3.0.0",
+        "patch-package": "^8.0.0",
         "prettier": "^3.3.3",
         "sass": "^1.77.8",
         "typescript": "^5.5.4",
-        "vue-tsc": "^2.0.29"
+        "vue-tsc": "^3.0.8"
+    },
+    "overrides": {
+        "chokidar": "==3.6.0"
     }
 }

package/patches/nuxt-primevue+3.0.0.patch

@@ -0,0 +1,27 @@
+diff --git a/node_modules/nuxt-primevue/dist/module.json b/node_modules/nuxt-primevue/dist/module.json
+index 5d029a4..d830998 100644
+--- a/node_modules/nuxt-primevue/dist/module.json
++++ b/node_modules/nuxt-primevue/dist/module.json
+@@ -2,7 +2,7 @@
+   "name": "nuxt-primevue",
+   "configKey": "primevue",
+   "compatibility": {
+-    "nuxt": "^3.0.0"
++    "nuxt": "^4.0.0"
+   },
+   "version": "3.0.0"
+ }
+
+diff --git a/node_modules/nuxt-primevue/dist/module.mjs b/node_modules/nuxt-primevue/dist/module.mjs
+index fd76a2e..6ef19a4 100644
+--- a/node_modules/nuxt-primevue/dist/module.mjs
++++ b/node_modules/nuxt-primevue/dist/module.mjs
+@@ -230,7 +230,7 @@ const module = defineNuxtModule({
+     name: "nuxt-primevue",
+     configKey: "primevue",
+     compatibility: {
+-      nuxt: "^3.0.0"
++      nuxt: "^4.0.0"
+     }
+   },
+   defaults: {