@stackline/vue-multiselect-dropdown 2.0.0 → 3.0.1

package/README.md

@@ -1,48 +1,45 @@
 # @stackline/vue-multiselect-dropdown
 
-> A maintained Vue 2 multiselect dropdown with controlled state, searchable/grouped options, lazy loading hooks, render functions, skins, body-overlay positioning, and ADA-friendly keyboard/ARIA behavior.
+> A maintained Vue 3 multiselect dropdown with controlled state, searchable/grouped options, lazy loading hooks, render functions, skins, body-overlay positioning, and ADA-compliant keyboard/ARIA behavior.
 
 [![npm version](https://img.shields.io/npm/v/@stackline/vue-multiselect-dropdown.svg?style=flat-square)](https://www.npmjs.com/package/@stackline/vue-multiselect-dropdown)
 [![license](https://img.shields.io/npm/l/@stackline/vue-multiselect-dropdown.svg?style=flat-square)](https://github.com/alexandroit/vue-multiselect-dropdown/blob/main/LICENSE)
-[![Vue 2](https://img.shields.io/badge/Vue-2.x-42b883?style=flat-square&logo=vue.js)](https://alexandro.net/docs/vue/multiselect/vue-2/)
+[![Vue 3](https://img.shields.io/badge/Vue-3.x-42b883?style=flat-square&logo=vue.js)](https://alexandro.net/docs/vue/multiselect/vue-3/)
 
-**[Documentation & Live Demos](https://alexandro.net/docs/vue/multiselect/)** | **[Vue 2 Demo](https://alexandro.net/docs/vue/multiselect/vue-2/)** | **[npm](https://www.npmjs.com/package/@stackline/vue-multiselect-dropdown)** | **[Repository](https://github.com/alexandroit/vue-multiselect-dropdown)**
+**[Documentation & Live Demos](https://alexandro.net/docs/vue/multiselect/)** | **[Vue 3 Demo](https://alexandro.net/docs/vue/multiselect/vue-3/)** | **[npm](https://www.npmjs.com/package/@stackline/vue-multiselect-dropdown)** | **[Repository](https://github.com/alexandroit/vue-multiselect-dropdown)**
 
-**Current validation package release:** `2.0.0` for Vue `2.x`
+**Current validation package release:** `3.0.1` for Vue `3.x`
 
 ---
 
 ## Why this library?
 
-`@stackline/vue-multiselect-dropdown` provides a maintained Vue 2 multiselect component for applications that need predictable selection state, search, grouping, skins, keyboard support, and live tested examples.
+`@stackline/vue-multiselect-dropdown` provides a maintained Vue 3 multiselect component for applications that need predictable selection state, search, grouping, skins, keyboard support, and live tested examples.
 
-The package follows a familiar Stackline settings contract while staying idiomatic for Vue 2: bind with `v-model`, pass `:data`, customize behavior through `:settings`, and listen for `@select`, `@de-select`, `@select-all`, `@de-select-all`, `@open`, and `@close`.
+The package follows a familiar Stackline settings contract while staying idiomatic for Vue 3: bind with `v-model`, pass `:data`, customize behavior through `:settings`, and listen for `@select`, `@de-select`, `@select-all`, `@de-select-all`, `@open`, and `@close`.
 
 ## Vue Version Compatibility
 
 | Package family | Vue family | Peer range | First tested runtime | Demo link |
 | :---: | :---: | :---: | :---: | :--- |
-| **2.x** | **Vue 2 only** | **`>=2.0.0 <3.0.0`** | **2.0.0** | [Vue 2 family docs](https://alexandro.net/docs/vue/multiselect/vue-2/) |
+| **3.x** | **Vue 3 only** | **`>=3.0.0 <4.0.0`** | **3.0.0** | [Vue 3 family docs](https://alexandro.net/docs/vue/multiselect/vue-3/) |
 
 ## Installation
 
 ```bash
-npm install @stackline/vue-multiselect-dropdown@2.0.0 --save-exact
+npm install @stackline/vue-multiselect-dropdown@3.0.1 --save-exact
 ```
 
 ## Setup
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import {
   VueMultiselect,
   VueMultiselectDropdown
 } from '@stackline/vue-multiselect-dropdown';
 
-Vue.use(VueMultiselect);
-
-new Vue({
-  el: '#app',
+const app = createApp({
   components: { VueMultiselectDropdown },
   data() {
     return {
@@ -63,6 +60,9 @@ new Vue({
     };
   }
 });
+
+app.use(VueMultiselect);
+app.mount('#app');
 ```
 
 ```html
@@ -129,10 +129,10 @@ npm run build
 npm test
 ```
 
-Vue 2 docs:
+Vue 3 docs:
 
 ```bash
-cd docs-src/vue-2
+cd docs-src/vue-3
 npm install
 npm run build
 ```

package/dist/index.cjs

@@ -27,6 +27,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/VueMultiselectDropdown.ts
+var import_vue = require("vue");
+
 // src/styles.ts
 var STYLE_ID = "stackline-vue-multiselect-dropdown-styles";
 var styles = `
@@ -69,6 +72,7 @@ var styles = `
   position: relative;
   display: flex;
   align-items: center;
+  align-content: center;
   flex-wrap: wrap;
   width: 100%;
   min-height: 56px;
@@ -106,15 +110,23 @@ var styles = `
   flex: 1 1 auto;
   min-width: 0;
   align-items: center;
+  align-content: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 
 .vmsd-placeholder,
 .vmsd-single-value {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  justify-content: flex-start;
   min-width: 0;
+  max-width: 100%;
   color: var(--vmsd-muted);
   font-size: 0.95rem;
+  line-height: 1.25;
+  text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -706,6 +718,7 @@ var styles = `
 
 .theme-classic .vmsd-trigger,
 .skin-classic .vmsd-trigger {
+  align-content: center;
   flex-wrap: nowrap;
   gap: 6px;
   min-height: 42px;
@@ -1063,7 +1076,7 @@ var styles = `
   }
 }
 
-/* stackline-vue2-live-20260527 */
+/* stackline-vue3-live-20260527 */
 `;
 function ensureDropdownStyles() {
   if (typeof document === "undefined") {
@@ -1141,12 +1154,45 @@ function iconPath(name) {
   }
   return "M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782c-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296c6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z";
 }
-function renderIcon(h, name, className = "vmsd-icon") {
+function renderIcon(h2, name, className = "vmsd-icon") {
   const viewBox = name === "remove" ? "0 0 47.971 47.971" : name === "clear" ? "0 0 51.976 51.976" : name === "search" ? "0 0 615.52 615.52" : "0 0 612 612";
-  return h("svg", { class: className, attrs: { viewBox, focusable: "false", "aria-hidden": "true" } }, [
-    h("path", { attrs: { d: iconPath(name) } })
+  return h2("svg", { class: className, attrs: { viewBox, focusable: "false", "aria-hidden": "true" } }, [
+    h2("path", { attrs: { d: iconPath(name) } })
   ]);
 }
+function capitalize(value) {
+  return value ? value.charAt(0).toUpperCase() + value.slice(1) : value;
+}
+function normalizeVue2RenderData(data) {
+  if (!data) {
+    return null;
+  }
+  const props = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (key === "attrs" || key === "domProps") {
+      Object.assign(props, value);
+      continue;
+    }
+    if (key === "on" && value && typeof value === "object") {
+      for (const [eventName, handler] of Object.entries(value)) {
+        props[`on${capitalize(eventName)}`] = handler;
+      }
+      continue;
+    }
+    props[key] = value;
+  }
+  return props;
+}
+var h = (...args) => {
+  const [tag, data, children] = args;
+  if (args.length === 1) {
+    return (0, import_vue.h)(tag);
+  }
+  if (args.length === 2 && (Array.isArray(data) || typeof data === "string" || typeof data === "number" || data == null)) {
+    return (0, import_vue.h)(tag, null, data);
+  }
+  return (0, import_vue.h)(tag, normalizeVue2RenderData(data), children);
+};
 function isPrimitiveItem(item) {
   return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
 }
@@ -1235,11 +1281,11 @@ function mergeUniqueItems(base, extra, settings) {
   }
   return Array.from(bucket.values());
 }
-function callRenderFunction(renderFunction, h, item, context) {
+function callRenderFunction(renderFunction, h2, item, context) {
   if (!renderFunction) {
     return null;
   }
-  return renderFunction(item, context, h);
+  return renderFunction(item, context, h2);
 }
 function escapeSelectorValue(value) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
@@ -1259,15 +1305,31 @@ function isTextInputTarget(target) {
 }
 var VueMultiselectDropdown = {
   name: "VueMultiselectDropdown",
-  model: {
-    prop: "value",
-    event: "input"
-  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "update:selectedItems",
+    "change",
+    "select",
+    "de-select",
+    "select-all",
+    "de-select-all",
+    "group-select",
+    "group-de-select",
+    "scroll-to-end",
+    "add-filter-new-item",
+    "open",
+    "close"
+  ],
   props: {
     data: {
       type: Array,
       default: () => []
     },
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
     value: {
       type: Array,
       default: void 0
@@ -1333,6 +1395,9 @@ var VueMultiselectDropdown = {
       if (Array.isArray(this.selectedItems)) {
         return this.selectedItems;
       }
+      if (Array.isArray(this.modelValue)) {
+        return this.modelValue;
+      }
       if (Array.isArray(this.value)) {
         return this.value;
       }
@@ -1397,7 +1462,7 @@ var VueMultiselectDropdown = {
     window.addEventListener("resize", this.updateMenuPosition);
     window.addEventListener("scroll", this.updateMenuPosition, true);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener("click", this.onDocumentClick, true);
     document.removeEventListener("keydown", this.onDocumentKeydown, true);
     window.removeEventListener("resize", this.updateMenuPosition);
@@ -1419,9 +1484,10 @@ var VueMultiselectDropdown = {
       return this.filteredItems.filter((item) => !isDisabledItem(item));
     },
     emitSelection(items) {
-      if (!Array.isArray(this.selectedItems) && !Array.isArray(this.value)) {
+      if (!Array.isArray(this.selectedItems) && !Array.isArray(this.modelValue) && !Array.isArray(this.value)) {
         this.internalSelected = items;
       }
+      this.$emit("update:modelValue", items);
       this.$emit("input", items);
       this.$emit("update:selectedItems", items);
       this.$emit("change", items);
@@ -1786,7 +1852,7 @@ var VueMultiselectDropdown = {
       this.menuStyle = style;
     }
   },
-  render(h) {
+  render() {
     const settings = this.resolvedSettings;
     const skin = String(settings.skin || settings.theme || "classic");
     const skinFallbackClass = ["classic", "material", "dark", "custom"].includes(skin) ? "" : "theme-custom";
@@ -2074,11 +2140,11 @@ var StacklineVueMultiselect = VueMultiselectDropdown;
 
 // src/plugin.ts
 var VueMultiselect = {
-  install(Vue) {
-    Vue.component("StacklineVueMultiselect", VueMultiselectDropdown);
-    Vue.component("VueMultiselectDropdown", VueMultiselectDropdown);
-    Vue.component("vue-multiselect-dropdown", VueMultiselectDropdown);
-    Vue.component("stackline-vue-multiselect", VueMultiselectDropdown);
+  install(app) {
+    app.component("StacklineVueMultiselect", VueMultiselectDropdown);
+    app.component("VueMultiselectDropdown", VueMultiselectDropdown);
+    app.component("vue-multiselect-dropdown", VueMultiselectDropdown);
+    app.component("stackline-vue-multiselect", VueMultiselectDropdown);
   }
 };
 var plugin_default = VueMultiselect;

package/dist/index.d.cts

@@ -70,22 +70,22 @@ interface VueMultiselectPlugin {
     install: (Vue: any) => void;
 }
 
-type CreateElement = (...args: any[]) => any;
 type GroupedItems<T> = Array<{
     name: string;
     items: T[];
 }>;
 declare const VueMultiselectDropdown: {
     name: string;
-    model: {
-        prop: string;
-        event: string;
-    };
+    emits: string[];
     props: {
         data: {
             type: ArrayConstructor;
             default: () => never[];
         };
+        modelValue: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
         value: {
             type: ArrayConstructor;
             default: undefined;
@@ -151,7 +151,7 @@ declare const VueMultiselectDropdown: {
         };
     };
     mounted(this: any): void;
-    beforeDestroy(this: any): void;
+    beforeUnmount(this: any): void;
     methods: {
         getLabel(this: any, item: DropdownItem): string;
         getKey(this: any, item: DropdownItem): string;
@@ -183,19 +183,20 @@ declare const VueMultiselectDropdown: {
         restoreMenuToComponent(this: any): void;
         updateMenuPosition(this: any): void;
     };
-    render(this: any, h: CreateElement): any;
+    render(this: any): any;
 };
 declare const StacklineVueMultiselect: {
     name: string;
-    model: {
-        prop: string;
-        event: string;
-    };
+    emits: string[];
     props: {
         data: {
             type: ArrayConstructor;
             default: () => never[];
         };
+        modelValue: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
         value: {
             type: ArrayConstructor;
             default: undefined;
@@ -261,7 +262,7 @@ declare const StacklineVueMultiselect: {
         };
     };
     mounted(this: any): void;
-    beforeDestroy(this: any): void;
+    beforeUnmount(this: any): void;
     methods: {
         getLabel(this: any, item: DropdownItem): string;
         getKey(this: any, item: DropdownItem): string;
@@ -293,7 +294,7 @@ declare const StacklineVueMultiselect: {
         restoreMenuToComponent(this: any): void;
         updateMenuPosition(this: any): void;
     };
-    render(this: any, h: CreateElement): any;
+    render(this: any): any;
 };
 
 declare const VueMultiselect: VueMultiselectPlugin;

package/dist/index.d.ts

@@ -70,22 +70,22 @@ interface VueMultiselectPlugin {
     install: (Vue: any) => void;
 }
 
-type CreateElement = (...args: any[]) => any;
 type GroupedItems<T> = Array<{
     name: string;
     items: T[];
 }>;
 declare const VueMultiselectDropdown: {
     name: string;
-    model: {
-        prop: string;
-        event: string;
-    };
+    emits: string[];
     props: {
         data: {
             type: ArrayConstructor;
             default: () => never[];
         };
+        modelValue: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
         value: {
             type: ArrayConstructor;
             default: undefined;
@@ -151,7 +151,7 @@ declare const VueMultiselectDropdown: {
         };
     };
     mounted(this: any): void;
-    beforeDestroy(this: any): void;
+    beforeUnmount(this: any): void;
     methods: {
         getLabel(this: any, item: DropdownItem): string;
         getKey(this: any, item: DropdownItem): string;
@@ -183,19 +183,20 @@ declare const VueMultiselectDropdown: {
         restoreMenuToComponent(this: any): void;
         updateMenuPosition(this: any): void;
     };
-    render(this: any, h: CreateElement): any;
+    render(this: any): any;
 };
 declare const StacklineVueMultiselect: {
     name: string;
-    model: {
-        prop: string;
-        event: string;
-    };
+    emits: string[];
     props: {
         data: {
             type: ArrayConstructor;
             default: () => never[];
         };
+        modelValue: {
+            type: ArrayConstructor;
+            default: undefined;
+        };
         value: {
             type: ArrayConstructor;
             default: undefined;
@@ -261,7 +262,7 @@ declare const StacklineVueMultiselect: {
         };
     };
     mounted(this: any): void;
-    beforeDestroy(this: any): void;
+    beforeUnmount(this: any): void;
     methods: {
         getLabel(this: any, item: DropdownItem): string;
         getKey(this: any, item: DropdownItem): string;
@@ -293,7 +294,7 @@ declare const StacklineVueMultiselect: {
         restoreMenuToComponent(this: any): void;
         updateMenuPosition(this: any): void;
     };
-    render(this: any, h: CreateElement): any;
+    render(this: any): any;
 };
 
 declare const VueMultiselect: VueMultiselectPlugin;

package/dist/index.js

@@ -1,3 +1,6 @@
+// src/VueMultiselectDropdown.ts
+import { h as vueH } from "vue";
+
 // src/styles.ts
 var STYLE_ID = "stackline-vue-multiselect-dropdown-styles";
 var styles = `
@@ -40,6 +43,7 @@ var styles = `
   position: relative;
   display: flex;
   align-items: center;
+  align-content: center;
   flex-wrap: wrap;
   width: 100%;
   min-height: 56px;
@@ -77,15 +81,23 @@ var styles = `
   flex: 1 1 auto;
   min-width: 0;
   align-items: center;
+  align-content: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 
 .vmsd-placeholder,
 .vmsd-single-value {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  justify-content: flex-start;
   min-width: 0;
+  max-width: 100%;
   color: var(--vmsd-muted);
   font-size: 0.95rem;
+  line-height: 1.25;
+  text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -677,6 +689,7 @@ var styles = `
 
 .theme-classic .vmsd-trigger,
 .skin-classic .vmsd-trigger {
+  align-content: center;
   flex-wrap: nowrap;
   gap: 6px;
   min-height: 42px;
@@ -1034,7 +1047,7 @@ var styles = `
   }
 }
 
-/* stackline-vue2-live-20260527 */
+/* stackline-vue3-live-20260527 */
 `;
 function ensureDropdownStyles() {
   if (typeof document === "undefined") {
@@ -1112,12 +1125,45 @@ function iconPath(name) {
   }
   return "M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782c-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296c6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z";
 }
-function renderIcon(h, name, className = "vmsd-icon") {
+function renderIcon(h2, name, className = "vmsd-icon") {
   const viewBox = name === "remove" ? "0 0 47.971 47.971" : name === "clear" ? "0 0 51.976 51.976" : name === "search" ? "0 0 615.52 615.52" : "0 0 612 612";
-  return h("svg", { class: className, attrs: { viewBox, focusable: "false", "aria-hidden": "true" } }, [
-    h("path", { attrs: { d: iconPath(name) } })
+  return h2("svg", { class: className, attrs: { viewBox, focusable: "false", "aria-hidden": "true" } }, [
+    h2("path", { attrs: { d: iconPath(name) } })
   ]);
 }
+function capitalize(value) {
+  return value ? value.charAt(0).toUpperCase() + value.slice(1) : value;
+}
+function normalizeVue2RenderData(data) {
+  if (!data) {
+    return null;
+  }
+  const props = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (key === "attrs" || key === "domProps") {
+      Object.assign(props, value);
+      continue;
+    }
+    if (key === "on" && value && typeof value === "object") {
+      for (const [eventName, handler] of Object.entries(value)) {
+        props[`on${capitalize(eventName)}`] = handler;
+      }
+      continue;
+    }
+    props[key] = value;
+  }
+  return props;
+}
+var h = (...args) => {
+  const [tag, data, children] = args;
+  if (args.length === 1) {
+    return vueH(tag);
+  }
+  if (args.length === 2 && (Array.isArray(data) || typeof data === "string" || typeof data === "number" || data == null)) {
+    return vueH(tag, null, data);
+  }
+  return vueH(tag, normalizeVue2RenderData(data), children);
+};
 function isPrimitiveItem(item) {
   return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
 }
@@ -1206,11 +1252,11 @@ function mergeUniqueItems(base, extra, settings) {
   }
   return Array.from(bucket.values());
 }
-function callRenderFunction(renderFunction, h, item, context) {
+function callRenderFunction(renderFunction, h2, item, context) {
   if (!renderFunction) {
     return null;
   }
-  return renderFunction(item, context, h);
+  return renderFunction(item, context, h2);
 }
 function escapeSelectorValue(value) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
@@ -1230,15 +1276,31 @@ function isTextInputTarget(target) {
 }
 var VueMultiselectDropdown = {
   name: "VueMultiselectDropdown",
-  model: {
-    prop: "value",
-    event: "input"
-  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "update:selectedItems",
+    "change",
+    "select",
+    "de-select",
+    "select-all",
+    "de-select-all",
+    "group-select",
+    "group-de-select",
+    "scroll-to-end",
+    "add-filter-new-item",
+    "open",
+    "close"
+  ],
   props: {
     data: {
       type: Array,
       default: () => []
     },
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
     value: {
       type: Array,
       default: void 0
@@ -1304,6 +1366,9 @@ var VueMultiselectDropdown = {
       if (Array.isArray(this.selectedItems)) {
         return this.selectedItems;
       }
+      if (Array.isArray(this.modelValue)) {
+        return this.modelValue;
+      }
       if (Array.isArray(this.value)) {
         return this.value;
       }
@@ -1368,7 +1433,7 @@ var VueMultiselectDropdown = {
     window.addEventListener("resize", this.updateMenuPosition);
     window.addEventListener("scroll", this.updateMenuPosition, true);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener("click", this.onDocumentClick, true);
     document.removeEventListener("keydown", this.onDocumentKeydown, true);
     window.removeEventListener("resize", this.updateMenuPosition);
@@ -1390,9 +1455,10 @@ var VueMultiselectDropdown = {
       return this.filteredItems.filter((item) => !isDisabledItem(item));
     },
     emitSelection(items) {
-      if (!Array.isArray(this.selectedItems) && !Array.isArray(this.value)) {
+      if (!Array.isArray(this.selectedItems) && !Array.isArray(this.modelValue) && !Array.isArray(this.value)) {
         this.internalSelected = items;
       }
+      this.$emit("update:modelValue", items);
       this.$emit("input", items);
       this.$emit("update:selectedItems", items);
       this.$emit("change", items);
@@ -1757,7 +1823,7 @@ var VueMultiselectDropdown = {
       this.menuStyle = style;
     }
   },
-  render(h) {
+  render() {
     const settings = this.resolvedSettings;
     const skin = String(settings.skin || settings.theme || "classic");
     const skinFallbackClass = ["classic", "material", "dark", "custom"].includes(skin) ? "" : "theme-custom";
@@ -2045,11 +2111,11 @@ var StacklineVueMultiselect = VueMultiselectDropdown;
 
 // src/plugin.ts
 var VueMultiselect = {
-  install(Vue) {
-    Vue.component("StacklineVueMultiselect", VueMultiselectDropdown);
-    Vue.component("VueMultiselectDropdown", VueMultiselectDropdown);
-    Vue.component("vue-multiselect-dropdown", VueMultiselectDropdown);
-    Vue.component("stackline-vue-multiselect", VueMultiselectDropdown);
+  install(app) {
+    app.component("StacklineVueMultiselect", VueMultiselectDropdown);
+    app.component("VueMultiselectDropdown", VueMultiselectDropdown);
+    app.component("vue-multiselect-dropdown", VueMultiselectDropdown);
+    app.component("stackline-vue-multiselect", VueMultiselectDropdown);
   }
 };
 var plugin_default = VueMultiselect;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@stackline/vue-multiselect-dropdown",
-  "version": "2.0.0",
-  "description": "A maintained Vue 2 multiselect dropdown with controlled state, skins, live docs, body overlays, and ADA-friendly keyboard support.",
+  "version": "3.0.1",
+  "description": "Maintained Vue 3 multiselect dropdown with ADA-compliant keyboard/ARIA support, v-model state, Stackline skins, body overlays, live docs, search, grouping, lazy loading, and render functions.",
   "keywords": [
     "vue",
-    "vue 2",
+    "vue 3",
     "multiselect",
     "multiselect-dropdown",
     "multi-select",
@@ -15,7 +15,7 @@
     "accessibility",
     "aria"
   ],
-  "homepage": "https://alexandro.net/docs/vue/multiselect/vue-2/",
+  "homepage": "https://alexandro.net/docs/vue/multiselect/vue-3/",
   "bugs": {
     "url": "https://github.com/alexandroit/vue-multiselect-dropdown/issues"
   },
@@ -43,16 +43,19 @@
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf dist docs/vue-2",
+    "clean": "rm -rf dist docs/vue-3",
     "docs:install:vue-2": "cd docs-src/vue-2 && npm install",
+    "docs:install:vue-3": "cd docs-src/vue-3 && npm install",
     "build:docs:vue-2": "cd docs-src/vue-2 && npm run build",
-    "build:docs": "npm run build:docs:vue-2",
+    "build:docs:vue-3": "cd docs-src/vue-3 && npm run build",
+    "build:docs": "npm run build:docs:vue-3",
     "publish:verdaccio:vue-2": "npm run build && npm publish --registry=http://127.0.0.1:4873 --@stackline:registry=http://127.0.0.1:4873 --tag vue-2 --access public",
+    "publish:verdaccio:vue-3": "npm run build && npm publish --registry=http://127.0.0.1:4873 --@stackline:registry=http://127.0.0.1:4873 --tag vue-3 --access public",
     "typecheck": "tsc --noEmit",
     "test": "node --test tests/*.test.cjs"
   },
   "peerDependencies": {
-    "vue": ">=2.0.0 <3.0.0"
+    "vue": ">=3.0.0 <4.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -60,6 +63,6 @@
   "devDependencies": {
     "tsup": "8.5.1",
     "typescript": "5.9.3",
-    "vue": "2.0.0"
+    "vue": "3.0.0"
   }
 }