chore: update dev dependencies (vue 3.5 | vite 5.4 | vitest 2.1)

packages/oruga/package.json

@@ -70,42 +70,42 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.8",
-    "@babel/preset-env": "7.24.8",
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.4",
     "@rollup/plugin-babel": "6.0.4",
     "@types/jest-axe": "^3.5.9",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.10",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "@vitest/coverage-istanbul": "^2.1.1",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "core-js": "3.37.1",
+    "core-js": "3.38.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.4.0",
-    "eslint-plugin-vue": "^9.27.0",
-    "eslint-plugin-vuejs-accessibility": "^2.3.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "jest-axe": "^9.0.0",
-    "jsdom": "^24.1.0",
-    "npm-check-updates": "^16.14.20",
-    "prettier": "^3.3.2",
+    "jsdom": "^25.0.0",
+    "npm-check-updates": "^17.1.1",
+    "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "sass": "1.77.7",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0",
-    "vue": "^3.4.31",
-    "vue-component-meta": "^2.0.26",
-    "vue-component-type-helpers": "^2.0.26",
-    "vue-tsc": "^2.0.26"
+    "sass": "1.78.0",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.2.1",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "vue": "^3.5.6",
+    "vue-component-meta": "^2.1.6",
+    "vue-component-type-helpers": "^2.1.6",
+    "vue-tsc": "^2.1.6"
   }
 }

packages/oruga/src/components/autocomplete/Autocomplete.vue

@@ -409,7 +409,7 @@ const filteredOptions = computed<T[]>(() =>
 );
 
 /** filtered options formatted as groups */
-const groupOptions = computed<{ items: any[]; group?: string }[]>(() => {
+const _groupOptions = computed<{ items: any[]; group?: string }[]>(() => {
     if (props.groupField) {
         if (props.groupOptions)
             return filteredOptions.value.map((item: T) => {
@@ -437,7 +437,7 @@ const groupOptions = computed<{ items: any[]; group?: string }[]>(() => {
 /** is any option visible */
 const isEmpty = computed(
     () =>
-        !groupOptions.value?.some(
+        !_groupOptions.value?.some(
             (element) => element.items && element.items.length,
         ),
 );
@@ -479,7 +479,7 @@ watch(
         } else if (hoveredOption.value) {
             // reset hovered if list doesn't contain it
             const hoveredValue = getValue(hoveredOption.value);
-            const data = groupOptions.value
+            const data = _groupOptions.value
                 .map((d) => d.items)
                 .reduce((a, b) => [...a, ...b], []);
             const index = data.findIndex((d) => getValue(d) === hoveredValue);
@@ -574,7 +574,7 @@ function setHoveredIdToIndex(index: number): void {
 /** set first option as hovered */
 function hoverFirstOption(): void {
     nextTick(() => {
-        const nonEmptyElements = groupOptions.value.filter(
+        const nonEmptyElements = _groupOptions.value.filter(
             (element) => element.items?.length,
         );
         if (nonEmptyElements.length) {
@@ -598,7 +598,7 @@ function navigateItem(direction: 1 | -1): void {
         return;
     }
 
-    const data = groupOptions.value
+    const data = _groupOptions.value
         .map((d) => d.items)
         .reduce((a, b) => [...a, ...b], []);
 
@@ -888,7 +888,7 @@ defineExpose({ focus: setFocus, value: vmodel });
             <slot name="header" />
         </o-dropdown-item>
 
-        <template v-for="(element, groupindex) in groupOptions">
+        <template v-for="(element, groupindex) in _groupOptions">
             <o-dropdown-item
                 v-if="element.group"
                 :key="`${groupindex}_group`"

packages/oruga/src/components/autocomplete/tests/SimpleAutocomplete.vue

@@ -1,50 +1,35 @@
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { ref, computed } from "vue";
 import OAutocomplete from "../Autocomplete.vue";
 import OField from "../../field/Field.vue";
-export default defineComponent({
-    components: {
-        [OAutocomplete.name]: OAutocomplete,
-        [OField.name]: OField,
-    },
-    data() {
-        return {
-            data: [
-                "Angular",
-                "Angular 2",
-                "Aurelia",
-                "Backbone",
-                "Ember",
-                "jQuery",
-                "Meteor",
-                "Node.js",
-                "Polymer",
-                "React",
-                "RxJS",
-                "Vue.js",
-            ],
-            name: "",
-            selected: null,
-        };
-    },
-    computed: {
-        filteredDataArray(): string[] {
-            return this.data.filter((option: any) => {
-                return (
-                    option
-                        .toString()
-                        .toLowerCase()
-                        .indexOf(this.name.toLowerCase()) >= 0
-                );
-            });
-        },
-    },
-    methods: {
-        select(option: any) {
-            this.selected = option;
-        },
-    },
-});
+
+const data = [
+    "Angular",
+    "Angular 2",
+    "Aurelia",
+    "Backbone",
+    "Ember",
+    "jQuery",
+    "Meteor",
+    "Node.js",
+    "Polymer",
+    "React",
+    "RxJS",
+    "Vue.js",
+];
+const name = ref("");
+const selected = ref(null);
+
+const filteredDataArray = computed((): string[] =>
+    data.filter(
+        (option: string) =>
+            option.toLowerCase().indexOf(name.value.toLowerCase()) >= 0,
+    ),
+);
+
+function select(option: string): void {
+    selected.value = option;
+}
 </script>
 
 <template>
@@ -62,5 +47,3 @@ export default defineComponent({
         </o-autocomplete>
     </o-field>
 </template>
-
-<style></style>

packages/oruga/src/components/datetimepicker/Datetimepicker.vue

@@ -2,8 +2,9 @@
 import {
     computed,
     ref,
+    useTemplateRef,
     watch,
-    type ComponentInstance,
+    type ComponentPublicInstance,
     type PropType,
 } from "vue";
 
@@ -229,9 +230,10 @@ const emits = defineEmits<{
     (e: "icon-right-click", event: Event): void;
 }>();
 
-const datepickerRef = ref<ComponentInstance<typeof ODatepicker>>();
-const timepickerRef = ref<ComponentInstance<typeof OTimepicker>>();
-const nativeInputRef = ref<ComponentInstance<typeof OInput>>();
+const datepickerRef = useTemplateRef<ComponentPublicInstance>("datepickerRef");
+const timepickerRef = useTemplateRef<ComponentPublicInstance>("timepickerRef");
+const nativeInputRef =
+    useTemplateRef<ComponentPublicInstance>("nativeInputRef");
 
 const timepickerProps = ref<TimepickerProps>(props.timepicker);
 watch(

packages/oruga/src/components/dropdown/tests/dropdown.integration.test.ts

@@ -1,12 +1,9 @@
 import { afterEach, describe, expect, test } from "vitest";
 import { enableAutoUnmount, mount } from "@vue/test-utils";
-import type { ComponentInstance } from "vue";
+import type { ComponentPublicInstance } from "vue";
 
 import DropdownExample from "./DropdownExample.vue";
 import ODropdownItem from "@/components/dropdown/DropdownItem.vue";
-import ODropdown from "@/components/dropdown/Dropdown.vue";
-
-type ComponenType = ComponentInstance<typeof ODropdown<string>>;
 
 describe("Dropdown integration tests", () => {
     const values = ["A", "B", "C"];
@@ -46,7 +43,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeFalsy();
         expect(items[2].classes("o-drop__item--active")).toBeTruthy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.emitted("update:modelValue")).toHaveLength(1);
         expect(dropdown.emitted("change")).toHaveLength(1);
         expect(dropdown.emitted("change")[0][0]).toBe(values[2]);
@@ -70,7 +69,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeFalsy();
         expect(items[2].classes("o-drop__item--active")).toBeFalsy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.emitted("update:modelValue")).toBeUndefined();
         expect(dropdown.emitted("change")).toBeUndefined();
         expect(dropdown.emitted("close")).toHaveLength(1);
@@ -93,7 +94,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeFalsy();
         expect(items[2].classes("o-drop__item--active")).toBeFalsy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.emitted("update:modelValue")).toHaveLength(1);
         expect(dropdown.emitted("change")).toHaveLength(1);
         expect(dropdown.emitted("change")[0][0]).toHaveLength(1);
@@ -142,7 +145,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeFalsy();
         expect(items[2].classes("o-drop__item--active")).toBeFalsy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.emitted("update:modelValue")).toHaveLength(1);
         expect(dropdown.emitted("change")).toHaveLength(1);
         expect(dropdown.emitted("close")).toBeUndefined();
@@ -165,7 +170,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeFalsy();
         expect(items[2].classes("o-drop__item--active")).toBeFalsy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.classes("o-drop--disabled")).toBeTruthy();
         expect(dropdown.emitted("update:modelValue")).toBeUndefined();
         expect(dropdown.emitted("change")).toBeUndefined();
@@ -191,7 +198,9 @@ describe("Dropdown integration tests", () => {
         expect(items[1].classes("o-drop__item--active")).toBeTruthy();
         expect(items[2].classes("o-drop__item--active")).toBeFalsy();
 
-        const dropdown = wrapper.findComponent<ComponenType>(ODropdown);
+        const dropdown = wrapper.findComponent<ComponentPublicInstance>(
+            '[data-oruga="dropdown"]',
+        );
         expect(dropdown.emitted("update:modelValue")).toHaveLength(1);
         expect(dropdown.emitted("update:modelValue")[0][0]).toStrictEqual(
             values[1],

packages/oruga/src/components/menu/Menu.vue

@@ -126,6 +126,7 @@ const labelClasses = defineClasses(["listLabelClass", "o-menu__label"]);
                 <span>{{ label }}</span>
             </slot>
         </div>
+
         <ul :class="listClasses" :role="ariaRole">
             <!--
                 @slot Place menu items here 

packages/oruga/src/components/menu/MenuItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, toRaw, type PropType } from "vue";
+import { ref, computed, toValue, type PropType } from "vue";
 
 import OIcon from "../icon/Icon.vue";
 
@@ -161,11 +161,11 @@ function triggerReset(child?: ProviderItem): void {
     // The point of this method is to collect references to the clicked item and any parent,
     // this way we can skip resetting those elements.
     if (typeof itemParent.value?.triggerReset === "function") {
-        itemParent.value.triggerReset(toRaw(item.value));
+        itemParent.value.triggerReset(toValue(item.value));
     }
     // else if not a sub item reset parent menu
     else if (typeof parent.value.resetMenu === "function") {
-        parent.value.resetMenu([toRaw(item.value), child]);
+        parent.value.resetMenu([toValue(item.value), child]);
     }
 }