add alphabetic sorting to multiselect dropdowns

package.json

@@ -18,57 +18,57 @@
         "format:check": "prettier --check './**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}'"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.19.0",
         "@inertiajs/vue3": "^2.0.0",
-        "@playwright/test": "^1.59.1",
+        "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
         "@types/chroma-js": "^3.1.0",
         "@types/node": "^22.10.10",
-        "@vitejs/plugin-vue": "^6.0.6",
-        "@vue/tsconfig": "^0.9.1",
-        "autoprefixer": "^10.5.0",
-        "axios": "^1.15.2",
-        "eslint-plugin-unused-imports": "^4.4.1",
+        "@vitejs/plugin-vue": "^6.0.3",
+        "@vue/tsconfig": "^0.8.0",
+        "autoprefixer": "^10.4.20",
+        "axios": "^1.6.4",
+        "eslint-plugin-unused-imports": "^4.1.4",
         "laravel-vite-plugin": "^2.1.0",
         "openapi-zod-client": "^1.16.2",
-        "postcss": "^8.5.12",
+        "postcss": "^8.4.47",
         "postcss-import": "^15.1.0",
         "postcss-nesting": "^12.1.5",
         "tailwindcss": "^3.4.13",
         "typescript": "^5.7.3",
         "vite": "^7.0.0",
-        "vite-plugin-checker": "^0.13.0",
-        "vue": "^3.5.33",
-        "vue-tsc": "^3.2.7"
+        "vite-plugin-checker": "^0.12.0",
+        "vue": "^3.5.0",
+        "vue-tsc": "^3.0.0"
     },
     "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/vue": "^1.1.11",
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/vue": "^1.0.6",
         "@heroicons/vue": "^2.1.1",
-        "@rushstack/eslint-patch": "^1.16.1",
+        "@rushstack/eslint-patch": "^1.10.5",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tanstack/vue-form": "^1.29.1",
-        "@tanstack/vue-query": "^5.100.5",
+        "@tanstack/vue-form": "^1.3.1",
+        "@tanstack/vue-query": "^5.56.2",
         "@tanstack/vue-query-devtools": "^5.58.0",
         "@tanstack/vue-table": "^8.21.2",
         "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/eslint-config-typescript": "^14.7.0",
+        "@vue/eslint-config-typescript": "^14.3.0",
         "@vueuse/core": "^14.2.1",
-        "@vueuse/integrations": "^14.2.1",
+        "@vueuse/integrations": "^14.0.0",
         "@zodios/core": "^10.9.6",
-        "chroma-js": "3.2.0",
+        "chroma-js": "3.1.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "dayjs": "^1.11.20",
+        "dayjs": "^1.11.11",
         "echarts": "^6.0.0",
-        "focus-trap": "^8.1.0",
+        "focus-trap": "^8.0.0",
         "lucide-vue-next": "^0.487.0",
-        "parse-duration": "^2.1.6",
+        "parse-duration": "^2.0.1",
         "pinia": "^3.0.0",
         "radix-vue": "^1.9.6",
-        "reka-ui": "^2.9.6",
+        "reka-ui": "^2.8.2",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "vue-echarts": "^8.0.0",

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -35,7 +35,8 @@ watch(open, (isOpen) => {
         sortedItems.value = [...props.items].sort((a, b) => {
             const aSelected = model.value.includes(props.getKeyFromItem(a)) ? 0 : 1;
             const bSelected = model.value.includes(props.getKeyFromItem(b)) ? 0 : 1;
-            return aSelected - bSelected;
+            if (aSelected !== bSelected) return aSelected - bSelected;
+            return props.getNameForItem(a).localeCompare(props.getNameForItem(b));
         });
     }
 });