@enso-ui/select 3.2.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 +27 -177
  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.2.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,9 +18,15 @@
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
- :class="[{ 'has-error': hasError }, { 'is-successful': isSuccess }]"
23
+ :class="[
24
+ { 'has-error': hasError },
25
+ { 'is-open': open },
26
+ { 'is-multiple': multiple },
27
+ { 'is-successful': isSuccess },
28
+ { 'has-warning': hasWarning },
29
+ ]"
24
30
  type="button"
25
31
  :disabled="disabled"
26
32
  @click="reload"
@@ -41,9 +47,10 @@
41
47
  :key="value[trackBy]"
42
48
  v-on="selectionEvents(value)"/>
43
49
  </template>
44
- <template v-else>
50
+ <span class="selection-label"
51
+ v-else>
45
52
  {{ displayLabel(selection) }}
46
- </template>
53
+ </span>
47
54
  </div>
48
55
  </div>
49
56
  <template v-else-if="!hasOptions && !query">
@@ -59,7 +66,10 @@
59
66
  v-if="clearControl"/>
60
67
  </slot>
61
68
  </div>
62
- <dropdown-indicator :open="open" v-if="!disabled"/>
69
+ <dropdown-indicator
70
+ :open="open"
71
+ :opens-up="opensUp"
72
+ v-if="!dropdownDisabled"/>
63
73
  </button>
64
74
  </template>
65
75
  <template #controls="{ keydown }"
@@ -100,19 +110,9 @@
100
110
  <!-- eslint-disable-next-line vue/no-v-html -->
101
111
  <span v-html="highlight(displayLabel(option))"/>
102
112
  </slot>
103
- <span class="label tag"
104
- :class="isSelected(option) ? 'is-warning' : 'is-success'"
105
- v-if="current && !disableClear">
106
- <span v-if="isSelected(option)">
107
- {{ i18n(labels.deselect) }}
108
- </span>
109
- <span v-else>
110
- {{ i18n(labels.select) }}
111
- </span>
112
- </span>
113
113
  <span class="icon is-small selected has-text-success"
114
- v-else-if="isSelected(option)">
115
- <fa icon="check"/>
114
+ v-if="isSelected(option)">
115
+ <fa :icon="faCheck"/>
116
116
  </span>
117
117
  </template>
118
118
  </dropdown-item>
@@ -129,9 +129,7 @@
129
129
 
130
130
  <script>
131
131
  import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
132
- import { library } from '@fortawesome/fontawesome-svg-core';
133
- import { faCheck }
134
- from '@fortawesome/free-solid-svg-icons';
132
+ import { faCheck } from '@fortawesome/free-solid-svg-icons';
135
133
  import { focus, clickOutside } from '@enso-ui/directives';
136
134
  import { Dropdown, DropdownItem } from '@enso-ui/dropdown/bulma';
137
135
  import DropdownIndicator from '@enso-ui/dropdown-indicator';
@@ -139,8 +137,6 @@ import SearchMode from '@enso-ui/search-mode/bulma';
139
137
  import CoreSelect from '../renderless/CoreSelect.vue';
140
138
  import Tag from './Tag.vue';
141
139
 
142
- library.add(faCheck);
143
-
144
140
  export default {
145
141
  name: 'VueSelect',
146
142
 
@@ -163,6 +159,10 @@ export default {
163
159
  type: Boolean,
164
160
  default: false,
165
161
  },
162
+ hasWarning: {
163
+ type: Boolean,
164
+ default: false,
165
+ },
166
166
  isSuccess: {
167
167
  type: Boolean,
168
168
  default: false,
@@ -188,6 +188,10 @@ export default {
188
188
  },
189
189
  },
190
190
 
191
+ data: () => ({
192
+ faCheck,
193
+ }),
194
+
191
195
  computed: {
192
196
  selection() {
193
197
  return this.$refs.select.selection;
@@ -211,158 +215,4 @@ export default {
211
215
  };
212
216
  </script>
213
217
 
214
- <style lang="scss">
215
- @import 'bulma/sass/utilities/derived-variables';
216
-
217
- .vue-select {
218
- .dropdown {
219
- width: 100%;
220
-
221
- .dropdown-trigger {
222
- width: 100%;
223
-
224
- .button.input {
225
- width: 100%;
226
- height: unset;
227
- min-height: 2.2125em;
228
-
229
- &.has-error {
230
- border-color: $danger;
231
- }
232
- &.is-successful {
233
- border-color: $success;
234
- }
235
-
236
- .control-display {
237
- &.with-clear-button {
238
- max-width: calc(100% - 2.5em);
239
- }
240
-
241
- overflow-x: hidden;
242
- white-space: nowrap;
243
- text-overflow: ellipsis;
244
-
245
- [dir='ltr'] & {
246
- text-align: left;
247
- }
248
-
249
- [dir='rtl'] & {
250
- text-align: right;
251
- }
252
-
253
- .field.is-grouped.is-grouped-multiline:last-child {
254
- margin-bottom: unset;
255
- }
256
-
257
- .field.is-grouped.is-grouped-multiline {
258
- .control:last-child,
259
- .control:not(:last-child) {
260
- margin-bottom: 0;
261
- display: contents;
262
-
263
- .tags:not(:last-child) {
264
- margin-bottom: 0;
265
- }
266
- }
267
- }
268
-
269
- .delete {
270
- position: absolute;
271
- top: 0.55rem;
272
-
273
- [dir='ltr'] & {
274
- right: 1.5rem;
275
- }
276
-
277
- [dir='rtl'] & {
278
- left: 1.5rem;
279
- }
280
- }
281
-
282
- .is-loading {
283
- -webkit-animation: spinAround .5s infinite linear;
284
- animation: spinAround .5s infinite linear;
285
- border: 2px solid #dbdbdb;
286
- border-radius: 290486px;
287
- border-top-color: transparent;
288
- content: "";
289
- display: block;
290
- height: 1em;
291
- width: 1em;
292
- position: absolute !important;
293
- top: .55em;
294
- z-index: 4;
295
-
296
- [dir='ltr'] & {
297
- border-right-color: transparent;
298
- right: 1.7rem;
299
- }
300
-
301
- [dir='rtl'] & {
302
- border-left-color: transparent;
303
- left: 1.7rem;
304
- }
305
- }
306
- }
307
- }
308
- }
309
-
310
- .dropdown-menu {
311
- width: 100%;
312
-
313
- .dropdown-content {
314
- width: 100%;
315
-
316
- .search {
317
- padding: 0 0.375rem 0.6rem;
318
-
319
- .input {
320
- height: 2em;
321
- }
322
-
323
- .search-mode {
324
- right: 0.3em;
325
- pointer-events: all;
326
- }
327
- }
328
-
329
- .dropdown-item {
330
- text-overflow: ellipsis;
331
- overflow-x: hidden;
332
- white-space: nowrap;
333
- padding: 0.375rem 2rem 0.375rem 0.6rem;
334
-
335
- .label.tag {
336
- position: absolute;
337
- padding: 0.3rem;
338
- height: 1.3rem;
339
- top: calc(50% - 0.65rem);
340
- z-index: 1;
341
-
342
- [dir='ltr'] & {
343
- right: 0.6rem;
344
- }
345
-
346
- [dir='rtl'] & {
347
- left: 0.6rem;
348
- }
349
- }
350
-
351
- .icon.selected {
352
- position: absolute;
353
- z-index: 1;
354
-
355
- [dir='ltr'] & {
356
- right: 0.6rem;
357
- }
358
-
359
- [dir='rtl'] & {
360
- left: 0.6rem;
361
- }
362
- }
363
- }
364
- }
365
- }
366
- }
367
- }
368
- </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
+ }