@stackline/vue-multiselect-dropdown 3.0.0 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +17 -6
  2. package/dist/index.cjs +10 -0
  3. package/dist/index.js +10 -0
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,33 +1,44 @@
1
1
  # @stackline/vue-multiselect-dropdown
2
2
 
3
- > A maintained Vue 3 multiselect dropdown with controlled state, searchable/grouped options, lazy loading hooks, render functions, skins, body-overlay positioning, and ADA-friendly keyboard/ARIA behavior.
3
+ > A maintained Vue multiselect dropdown with separate Vue 2 and Vue 3 release lines, controlled state, searchable/grouped options, lazy loading hooks, render functions, skins, body-overlay positioning, and ADA-compliant keyboard/ARIA behavior.
4
4
 
5
5
  [![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)
6
6
  [![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)
7
+ [![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/)
7
8
  [![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/)
8
9
 
9
- **[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)**
10
+ **[Documentation & Live Demos](https://alexandro.net/docs/vue/multiselect/)** | **[Vue 2 Demo](https://alexandro.net/docs/vue/multiselect/vue-2/)** | **[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)**
10
11
 
11
- **Current validation package release:** `3.0.0` for Vue `3.x`
12
+ **Latest Vue 3 package release:** `3.0.2` for Vue `3.x`
13
+ **Maintained Vue 2 package release:** `2.0.0` for Vue `2.x`
12
14
 
13
15
  ---
14
16
 
15
17
  ## Why this library?
16
18
 
17
- `@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.
19
+ `@stackline/vue-multiselect-dropdown` provides maintained Vue 2 and Vue 3 multiselect release lines for applications that need predictable selection state, search, grouping, skins, keyboard support, and live tested examples.
18
20
 
19
- 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`.
21
+ The package follows a familiar Stackline settings contract while staying idiomatic for each Vue family: bind with `v-model`, pass `:data`, customize behavior through `:settings`, and listen for `@select`, `@de-select`, `@select-all`, `@de-select-all`, `@open`, and `@close`.
20
22
 
21
23
  ## Vue Version Compatibility
22
24
 
23
25
  | Package family | Vue family | Peer range | First tested runtime | Demo link |
24
26
  | :---: | :---: | :---: | :---: | :--- |
25
27
  | **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/) |
28
+ | **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/) |
26
29
 
27
30
  ## Installation
28
31
 
32
+ For Vue 3 applications:
33
+
34
+ ```bash
35
+ npm install @stackline/vue-multiselect-dropdown@3.0.2 --save-exact
36
+ ```
37
+
38
+ For Vue 2 applications:
39
+
29
40
  ```bash
30
- npm install @stackline/vue-multiselect-dropdown@3.0.0 --save-exact
41
+ npm install @stackline/vue-multiselect-dropdown@2.0.0 --save-exact
31
42
  ```
32
43
 
33
44
  ## Setup
package/dist/index.cjs CHANGED
@@ -72,6 +72,7 @@ var styles = `
72
72
  position: relative;
73
73
  display: flex;
74
74
  align-items: center;
75
+ align-content: center;
75
76
  flex-wrap: wrap;
76
77
  width: 100%;
77
78
  min-height: 56px;
@@ -109,15 +110,23 @@ var styles = `
109
110
  flex: 1 1 auto;
110
111
  min-width: 0;
111
112
  align-items: center;
113
+ align-content: center;
112
114
  gap: 8px;
113
115
  flex-wrap: wrap;
114
116
  }
115
117
 
116
118
  .vmsd-placeholder,
117
119
  .vmsd-single-value {
120
+ display: inline-flex;
121
+ align-items: center;
122
+ align-self: center;
123
+ justify-content: flex-start;
118
124
  min-width: 0;
125
+ max-width: 100%;
119
126
  color: var(--vmsd-muted);
120
127
  font-size: 0.95rem;
128
+ line-height: 1.25;
129
+ text-align: left;
121
130
  overflow: hidden;
122
131
  text-overflow: ellipsis;
123
132
  white-space: nowrap;
@@ -709,6 +718,7 @@ var styles = `
709
718
 
710
719
  .theme-classic .vmsd-trigger,
711
720
  .skin-classic .vmsd-trigger {
721
+ align-content: center;
712
722
  flex-wrap: nowrap;
713
723
  gap: 6px;
714
724
  min-height: 42px;
package/dist/index.js CHANGED
@@ -43,6 +43,7 @@ var styles = `
43
43
  position: relative;
44
44
  display: flex;
45
45
  align-items: center;
46
+ align-content: center;
46
47
  flex-wrap: wrap;
47
48
  width: 100%;
48
49
  min-height: 56px;
@@ -80,15 +81,23 @@ var styles = `
80
81
  flex: 1 1 auto;
81
82
  min-width: 0;
82
83
  align-items: center;
84
+ align-content: center;
83
85
  gap: 8px;
84
86
  flex-wrap: wrap;
85
87
  }
86
88
 
87
89
  .vmsd-placeholder,
88
90
  .vmsd-single-value {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ align-self: center;
94
+ justify-content: flex-start;
89
95
  min-width: 0;
96
+ max-width: 100%;
90
97
  color: var(--vmsd-muted);
91
98
  font-size: 0.95rem;
99
+ line-height: 1.25;
100
+ text-align: left;
92
101
  overflow: hidden;
93
102
  text-overflow: ellipsis;
94
103
  white-space: nowrap;
@@ -680,6 +689,7 @@ var styles = `
680
689
 
681
690
  .theme-classic .vmsd-trigger,
682
691
  .skin-classic .vmsd-trigger {
692
+ align-content: center;
683
693
  flex-wrap: nowrap;
684
694
  gap: 6px;
685
695
  min-height: 42px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackline/vue-multiselect-dropdown",
3
- "version": "3.0.0",
4
- "description": "A maintained Vue 3 multiselect dropdown with controlled state, skins, live docs, body overlays, and ADA-friendly keyboard support.",
3
+ "version": "3.0.2",
4
+ "description": "Maintained Vue multiselect dropdown with Vue 2 and Vue 3 release lines, ADA-compliant keyboard/ARIA support, Stackline skins, body overlays, search, grouping, lazy loading, and render functions.",
5
5
  "keywords": [
6
6
  "vue",
7
7
  "vue 3",