@enso-ui/select 3.3.0 → 4.0.0

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 (5) hide show
  1. package/LICENSE +1 -1
  2. package/package.json +5 -17
  3. package/src/bulma/Tag.vue +6 -6
  4. package/src/bulma/VueSelect.vue +18 -179
  5. package/src/bulma/styles/vue-select.scss +285 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2017 laravel-enso
3
+ Copyright (c) 2026 laravel-enso
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enso-ui/select",
3
- "version": "3.3.0",
3
+ "version": "4.0.0",
4
4
  "description": "Select",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -17,7 +17,7 @@
17
17
  "vue"
18
18
  ],
19
19
  "author": "Adrian Ocneanu <aocneanu@gmail.com>",
20
- "license": "ISC",
20
+ "license": "MIT",
21
21
  "bugs": {
22
22
  "url": "https://github.com/enso-ui/select/issues"
23
23
  },
@@ -27,23 +27,11 @@
27
27
  "@enso-ui/dropdown": "^3.0",
28
28
  "@enso-ui/dropdown-indicator": "^2.0",
29
29
  "@enso-ui/search-mode": "^3.0",
30
- "@fortawesome/fontawesome-free": "^5.2.0",
31
- "@fortawesome/fontawesome-svg-core": "^1.2.2",
32
- "@fortawesome/free-solid-svg-icons": "^5.11.2",
33
- "@fortawesome/vue-fontawesome": "3.0.0-5",
30
+ "@fortawesome/fontawesome-svg-core": "^7.2.0",
31
+ "@fortawesome/free-solid-svg-icons": "^7.2.0",
32
+ "@fortawesome/vue-fontawesome": "3.1.3",
34
33
  "bulma": "^0.9.0",
35
34
  "lodash": "^4.17.10",
36
35
  "vue": "^3.0"
37
- },
38
- "devDependencies": {
39
- "@vue/cli-plugin-babel": "5.0.0-beta.6",
40
- "@vue/cli-plugin-eslint": "5.0.0-beta.6",
41
- "@vue/eslint-config-airbnb": "^5.0.0",
42
- "autoprefixer": "^9.6.1",
43
- "babel-eslint": "^10.0.1",
44
- "cross-env": "^6.0.0",
45
- "eslint": "^7.0.0",
46
- "eslint-import-resolver-alias": "^1.1.2",
47
- "eslint-plugin-vue": "^8.0.0"
48
36
  }
49
37
  }
package/src/bulma/Tag.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="vue-select tags has-addons">
3
- <span class="tag is-link">
3
+ <span class="tag">
4
4
  <span class="mr-1 tag-label">
5
5
  {{ label }}
6
6
  </span>
@@ -46,14 +46,15 @@ export default {
46
46
 
47
47
  .tag {
48
48
  max-width: inherit;
49
+ display: inline-flex;
50
+ align-items: center;
49
51
  [dir='ltr'] & {
50
- padding: 0.5em 0 0.5em 0.5em;
52
+ padding: 0.35em 0 0.35em 0.5em;
51
53
  }
52
54
  [dir='rtl'] & {
53
- padding: 0.5em 0.5em 0.5em 0;
55
+ padding: 0.35em 0.5em 0.35em 0;
54
56
  }
55
- height: 1.35em;
56
- font-size: 1em;
57
+ min-height: 1.75em;
57
58
  margin: 0.075em 0 0.075em;
58
59
 
59
60
  .tag-label {
@@ -63,7 +64,6 @@ export default {
63
64
  }
64
65
 
65
66
  .tag.is-delete {
66
- width: 1.4em;
67
67
  flex: none;
68
68
  }
69
69
  }
package/src/bulma/VueSelect.vue CHANGED
@@ -18,10 +18,12 @@
18
18
  :opens-up="opensUp"
19
19
  @hide="reset()"
20
20
  ref="dropdown">
21
- <template #trigger="{ triggerEvents, open }">
21
+ <template #trigger="{ triggerEvents, open, opensUp }">
22
22
  <button class="button input"
23
23
  :class="[
24
24
  { 'has-error': hasError },
25
+ { 'is-open': open },
26
+ { 'is-multiple': multiple },
25
27
  { 'is-successful': isSuccess },
26
28
  { 'has-warning': hasWarning },
27
29
  ]"
@@ -45,9 +47,10 @@
45
47
  :key="value[trackBy]"
46
48
  v-on="selectionEvents(value)"/>
47
49
  </template>
48
- <template v-else>
50
+ <span class="selection-label"
51
+ v-else>
49
52
  {{ displayLabel(selection) }}
50
- </template>
53
+ </span>
51
54
  </div>
52
55
  </div>
53
56
  <template v-else-if="!hasOptions && !query">
@@ -63,7 +66,10 @@
63
66
  v-if="clearControl"/>
64
67
  </slot>
65
68
  </div>
66
- <dropdown-indicator :open="open" v-if="!disabled"/>
69
+ <dropdown-indicator
70
+ :open="open"
71
+ :opens-up="opensUp"
72
+ v-if="!dropdownDisabled"/>
67
73
  </button>
68
74
  </template>
69
75
  <template #controls="{ keydown }"
@@ -104,19 +110,9 @@
104
110
  <!-- eslint-disable-next-line vue/no-v-html -->
105
111
  <span v-html="highlight(displayLabel(option))"/>
106
112
  </slot>
107
- <span class="label tag"
108
- :class="isSelected(option) ? 'is-warning' : 'is-success'"
109
- v-if="current && !disableClear">
110
- <span v-if="isSelected(option)">
111
- {{ i18n(labels.deselect) }}
112
- </span>
113
- <span v-else>
114
- {{ i18n(labels.select) }}
115
- </span>
116
- </span>
117
113
  <span class="icon is-small selected has-text-success"
118
- v-else-if="isSelected(option)">
119
- <fa icon="check"/>
114
+ v-if="isSelected(option)">
115
+ <fa :icon="faCheck"/>
120
116
  </span>
121
117
  </template>
122
118
  </dropdown-item>
@@ -133,9 +129,7 @@
133
129
 
134
130
  <script>
135
131
  import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
136
- import { library } from '@fortawesome/fontawesome-svg-core';
137
- import { faCheck }
138
- from '@fortawesome/free-solid-svg-icons';
132
+ import { faCheck } from '@fortawesome/free-solid-svg-icons';
139
133
  import { focus, clickOutside } from '@enso-ui/directives';
140
134
  import { Dropdown, DropdownItem } from '@enso-ui/dropdown/bulma';
141
135
  import DropdownIndicator from '@enso-ui/dropdown-indicator';
@@ -143,8 +137,6 @@ import SearchMode from '@enso-ui/search-mode/bulma';
143
137
  import CoreSelect from '../renderless/CoreSelect.vue';
144
138
  import Tag from './Tag.vue';
145
139
 
146
- library.add(faCheck);
147
-
148
140
  export default {
149
141
  name: 'VueSelect',
150
142
 
@@ -196,6 +188,10 @@ export default {
196
188
  },
197
189
  },
198
190
 
191
+ data: () => ({
192
+ faCheck,
193
+ }),
194
+
199
195
  computed: {
200
196
  selection() {
201
197
  return this.$refs.select.selection;
@@ -219,161 +215,4 @@ export default {
219
215
  };
220
216
  </script>
221
217
 
222
- <style lang="scss">
223
- @import 'bulma/sass/utilities/derived-variables';
224
-
225
- .vue-select {
226
- .dropdown {
227
- width: 100%;
228
-
229
- .dropdown-trigger {
230
- width: 100%;
231
-
232
- .button.input {
233
- width: 100%;
234
- height: unset;
235
- min-height: 2.2125em;
236
-
237
- &.has-error {
238
- border-color: $danger;
239
- }
240
- &.is-successful {
241
- border-color: $success;
242
- }
243
- &.has-warning {
244
- border-color: $warning;
245
- }
246
-
247
- .control-display {
248
- &.with-clear-button {
249
- max-width: calc(100% - 2.5em);
250
- }
251
-
252
- overflow-x: hidden;
253
- white-space: nowrap;
254
- text-overflow: ellipsis;
255
-
256
- [dir='ltr'] & {
257
- text-align: left;
258
- }
259
-
260
- [dir='rtl'] & {
261
- text-align: right;
262
- }
263
-
264
- .field.is-grouped.is-grouped-multiline:last-child {
265
- margin-bottom: unset;
266
- }
267
-
268
- .field.is-grouped.is-grouped-multiline {
269
- .control:last-child,
270
- .control:not(:last-child) {
271
- margin-bottom: 0;
272
- display: contents;
273
-
274
- .tags:not(:last-child) {
275
- margin-bottom: 0;
276
- }
277
- }
278
- }
279
-
280
- .delete {
281
- position: absolute;
282
- top: 0.55rem;
283
-
284
- [dir='ltr'] & {
285
- right: 1.5rem;
286
- }
287
-
288
- [dir='rtl'] & {
289
- left: 1.5rem;
290
- }
291
- }
292
-
293
- .is-loading {
294
- -webkit-animation: spinAround .5s infinite linear;
295
- animation: spinAround .5s infinite linear;
296
- border: 2px solid #dbdbdb;
297
- border-radius: 290486px;
298
- border-top-color: transparent;
299
- content: "";
300
- display: block;
301
- height: 1em;
302
- width: 1em;
303
- position: absolute !important;
304
- top: .55em;
305
- z-index: 4;
306
-
307
- [dir='ltr'] & {
308
- border-right-color: transparent;
309
- right: 1.7rem;
310
- }
311
-
312
- [dir='rtl'] & {
313
- border-left-color: transparent;
314
- left: 1.7rem;
315
- }
316
- }
317
- }
318
- }
319
- }
320
-
321
- .dropdown-menu {
322
- width: 100%;
323
-
324
- .dropdown-content {
325
- width: 100%;
326
-
327
- .search {
328
- padding: 0 0.375rem 0.6rem;
329
-
330
- .input {
331
- height: 2em;
332
- }
333
-
334
- .search-mode {
335
- right: 0.3em;
336
- pointer-events: all;
337
- }
338
- }
339
-
340
- .dropdown-item {
341
- text-overflow: ellipsis;
342
- overflow-x: hidden;
343
- white-space: nowrap;
344
- padding: 0.375rem 2rem 0.375rem 0.6rem;
345
-
346
- .label.tag {
347
- position: absolute;
348
- padding: 0.3rem;
349
- height: 1.3rem;
350
- top: calc(50% - 0.65rem);
351
- z-index: 1;
352
-
353
- [dir='ltr'] & {
354
- right: 0.6rem;
355
- }
356
-
357
- [dir='rtl'] & {
358
- left: 0.6rem;
359
- }
360
- }
361
-
362
- .icon.selected {
363
- position: absolute;
364
- z-index: 1;
365
-
366
- [dir='ltr'] & {
367
- right: 0.6rem;
368
- }
369
-
370
- [dir='rtl'] & {
371
- left: 0.6rem;
372
- }
373
- }
374
- }
375
- }
376
- }
377
- }
378
- }
379
- </style>
218
+ <style lang="scss" src="./styles/vue-select.scss"></style>
package/src/bulma/styles/vue-select.scss ADDED
@@ -0,0 +1,285 @@
1
+ .vue-select {
2
+ --enso-select-width: 100%;
3
+ --enso-select-trigger-container-width: 100%;
4
+ --enso-select-trigger-width: 100%;
5
+ --enso-select-trigger-min-width: auto;
6
+ --enso-select-trigger-max-width: none;
7
+ --enso-select-trigger-radius: var(--bulma-radius);
8
+ --enso-select-trigger-surface: var(--bulma-input-background-color);
9
+ --enso-select-trigger-border: var(--bulma-input-border-color);
10
+ --enso-select-trigger-color: var(--bulma-text-strong);
11
+ --enso-select-dropdown-width: 100%;
12
+ --enso-select-dropdown-min-width: 100%;
13
+ --enso-select-dropdown-max-width: none;
14
+ --enso-select-dropdown-radius: var(--bulma-radius);
15
+ --enso-select-dropdown-surface: var(--bulma-dropdown-content-background-color);
16
+ --enso-select-dropdown-border: var(--bulma-border);
17
+ --enso-select-search-surface: var(--bulma-input-background-color);
18
+ --enso-select-search-border: var(--bulma-input-border-color);
19
+ --enso-select-search-color: var(--bulma-input-color);
20
+ --enso-select-search-placeholder: var(--bulma-text-light);
21
+ --enso-select-item-color: var(--bulma-text);
22
+ --enso-select-item-hover-surface: var(--bulma-scheme-main-ter);
23
+ --enso-select-item-hover-color: var(--bulma-text-strong);
24
+ --enso-select-tag-surface: var(--bulma-scheme-main);
25
+ --enso-select-tag-border: var(--bulma-border);
26
+ --enso-select-tag-color: var(--bulma-text-light);
27
+
28
+ .dropdown {
29
+ width: var(--enso-select-width);
30
+
31
+ .dropdown-trigger {
32
+ width: var(--enso-select-trigger-container-width);
33
+
34
+ .button.input.is-multiple {
35
+ height: auto;
36
+ }
37
+
38
+ .button.input {
39
+ display: flex;
40
+ align-items: center;
41
+ justify-content: flex-start;
42
+ border-radius: var(--enso-select-trigger-radius);
43
+ background-color: var(--enso-select-trigger-surface);
44
+ border-color: var(--enso-select-trigger-border);
45
+ box-shadow: none;
46
+ color: var(--enso-select-trigger-color);
47
+ width: var(--enso-select-trigger-width);
48
+ min-width: var(--enso-select-trigger-min-width);
49
+ max-width: var(--enso-select-trigger-max-width);
50
+ min-height: var(--bulma-control-height);
51
+ height: var(--bulma-control-height);
52
+ padding-inline-start: 0.75rem;
53
+ padding-inline-end: 0.75rem;
54
+ transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
55
+
56
+ &.is-multiple {
57
+ align-items: flex-start;
58
+ padding-top: 0.375rem;
59
+ padding-bottom: 0.375rem;
60
+ }
61
+
62
+ &.is-multiple > .dropdown-indicator {
63
+ align-self: center;
64
+ }
65
+
66
+ &:hover {
67
+ border-color: var(--bulma-border-hover);
68
+ }
69
+
70
+ &:focus,
71
+ &:focus-visible,
72
+ &.is-open {
73
+ border-color: var(--bulma-border-active);
74
+ box-shadow: none;
75
+ }
76
+
77
+ &.has-error {
78
+ border-color: var(--bulma-danger);
79
+ }
80
+
81
+ &.is-successful {
82
+ border-color: var(--bulma-success);
83
+ }
84
+
85
+ &.has-warning {
86
+ border-color: var(--bulma-warning);
87
+ }
88
+
89
+ .control-display {
90
+ flex: 1 1 auto;
91
+ display: flex;
92
+ align-items: center;
93
+ min-height: 1em;
94
+ overflow-x: hidden;
95
+ white-space: nowrap;
96
+ text-overflow: ellipsis;
97
+
98
+ .button.input.is-multiple & {
99
+ align-items: flex-start;
100
+ }
101
+
102
+ &.with-clear-button {
103
+ max-width: calc(100% - 3.25em);
104
+ }
105
+
106
+ [dir='ltr'] & {
107
+ text-align: left;
108
+ }
109
+
110
+ [dir='rtl'] & {
111
+ text-align: right;
112
+ }
113
+
114
+ .field.is-grouped.is-grouped-multiline:last-child {
115
+ margin-bottom: 0;
116
+ }
117
+
118
+ .field.is-grouped.is-grouped-multiline {
119
+ gap: 0.25rem;
120
+ margin-bottom: 0;
121
+
122
+ .control:last-child,
123
+ .control:not(:last-child) {
124
+ display: contents;
125
+ margin-bottom: 0;
126
+
127
+ .tags:not(:last-child) {
128
+ margin-bottom: 0;
129
+ }
130
+ }
131
+ }
132
+
133
+ .selection-label {
134
+ display: block;
135
+ overflow: hidden;
136
+ text-overflow: ellipsis;
137
+ white-space: nowrap;
138
+ line-height: inherit;
139
+ }
140
+
141
+ .delete {
142
+ position: absolute;
143
+ top: 50%;
144
+ transform: translateY(-50%);
145
+
146
+ [dir='ltr'] & {
147
+ right: 1.5rem;
148
+ }
149
+
150
+ [dir='rtl'] & {
151
+ left: 1.5rem;
152
+ }
153
+ }
154
+
155
+ .is-loading {
156
+ -webkit-animation: spinAround .5s infinite linear;
157
+ animation: spinAround .5s infinite linear;
158
+ border: 2px solid var(--bulma-input-icon-color);
159
+ border-radius: 50%;
160
+ border-top-color: transparent;
161
+ content: "";
162
+ display: block;
163
+ height: 1em;
164
+ width: 1em;
165
+ position: absolute !important;
166
+ top: .55em;
167
+ z-index: 4;
168
+
169
+ [dir='ltr'] & {
170
+ border-right-color: transparent;
171
+ right: 1.7rem;
172
+ }
173
+
174
+ [dir='rtl'] & {
175
+ border-left-color: transparent;
176
+ left: 1.7rem;
177
+ }
178
+ }
179
+ }
180
+ }
181
+ }
182
+
183
+ .dropdown-menu {
184
+ width: var(--enso-select-dropdown-width);
185
+ min-width: var(--enso-select-dropdown-min-width);
186
+ max-width: var(--enso-select-dropdown-max-width);
187
+
188
+ .dropdown-content {
189
+ width: var(--enso-select-dropdown-width);
190
+ min-width: var(--enso-select-dropdown-min-width);
191
+ max-width: var(--enso-select-dropdown-max-width);
192
+ background-color: var(--enso-select-dropdown-surface);
193
+ border: 1px solid var(--enso-select-dropdown-border);
194
+ border-radius: var(--enso-select-dropdown-radius);
195
+ box-shadow: none;
196
+
197
+ .search {
198
+ padding: 0 0.375rem 0.6rem;
199
+
200
+ .input {
201
+ min-height: var(--bulma-control-height);
202
+ height: auto;
203
+ background-color: var(--enso-select-search-surface);
204
+ border-color: var(--enso-select-search-border);
205
+ color: var(--enso-select-search-color);
206
+ box-shadow: none;
207
+ }
208
+
209
+ .input::placeholder {
210
+ color: var(--enso-select-search-placeholder);
211
+ opacity: 1;
212
+ }
213
+
214
+ .search-mode {
215
+ right: 0.3em;
216
+ pointer-events: all;
217
+ }
218
+ }
219
+
220
+ .dropdown-item {
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: space-between;
224
+ background: transparent;
225
+ color: var(--enso-select-item-color);
226
+ gap: 0.75rem;
227
+ text-overflow: ellipsis;
228
+ overflow-x: hidden;
229
+ white-space: nowrap;
230
+ padding: 0.375rem 0.6rem;
231
+
232
+ > span:not(.icon):not(.label) {
233
+ display: block;
234
+ flex: 1 1 auto;
235
+ min-width: 0;
236
+ overflow: hidden;
237
+ text-overflow: ellipsis;
238
+ white-space: nowrap;
239
+ }
240
+
241
+ .label.tag {
242
+ position: absolute;
243
+ padding: 0.25rem 0.5rem;
244
+ min-height: auto;
245
+ top: 50%;
246
+ transform: translateY(-50%);
247
+ z-index: 1;
248
+
249
+ [dir='ltr'] & {
250
+ right: 0.6rem;
251
+ }
252
+
253
+ [dir='rtl'] & {
254
+ left: 0.6rem;
255
+ }
256
+ }
257
+
258
+ .icon.selected {
259
+ position: static;
260
+ z-index: auto;
261
+ flex: 0 0 auto;
262
+ margin: 0;
263
+ }
264
+ }
265
+
266
+ .dropdown-item.is-active,
267
+ .dropdown-item.is-current,
268
+ .dropdown-item:hover {
269
+ background-color: var(--enso-select-item-hover-surface);
270
+ color: var(--enso-select-item-hover-color);
271
+ }
272
+
273
+ .label.tag.is-success,
274
+ .label.tag.is-warning,
275
+ .label.tag.is-info {
276
+ background-color: var(--enso-select-tag-surface);
277
+ border: 1px solid var(--enso-select-tag-border);
278
+ box-shadow: none;
279
+ color: var(--enso-select-tag-color);
280
+ font-weight: 600;
281
+ }
282
+ }
283
+ }
284
+ }
285
+ }