@jblehm/super-list 1.0.37 → 1.0.39
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.
- package/README.md +119 -110
- package/dist/index.css +1 -1
- package/dist/super-list.js +23 -31
- package/dist/super-list.js.map +1 -1
- package/dist/super-list.umd.cjs +2 -2
- package/dist/super-list.umd.cjs.map +1 -1
- package/dist/super-list.vue.d.ts +0 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,87 @@
|
|
|
1
|
-
# superlist V1.0.
|
|
2
|
-
|
|
1
|
+
# superlist V1.0.39
|
|
2
|
+
A minimally-styled, mobile supported searchable combobox for Vue.
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
Import the following style where the component is used:
|
|
7
|
+
```css
|
|
8
|
+
<style src="@jblehm/super-list/dist/index.css" />
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The list component has the following Vue emits which can be used for v-model binding:
|
|
12
|
+
```js
|
|
13
|
+
const emit = defineEmits({ 'update:selected': null })
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
The list component can be passed a function or an array of options. If a function is passed, it should match the ListRequest type:
|
|
17
|
+
```ts
|
|
18
|
+
ListRequest = (maxNumItems: number, stringFilter?: string) => Promise<{ data: T[]; totalNum: number; modelName?: string }>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
The list component has the following Vue properties:
|
|
22
|
+
```js
|
|
23
|
+
selected: {
|
|
24
|
+
type: [String, Number, Object, null, undefined] as PropType<
|
|
25
|
+
string | number | object | null | undefined
|
|
26
|
+
> // the currently selected item
|
|
27
|
+
},
|
|
28
|
+
options: {
|
|
29
|
+
type: [Function, Array<string | number | object>] as PropType<
|
|
30
|
+
ListRequest | Array<string | number | object> //type ListRequest = (maxNumItems: number, stringFilter?: string) => Promise<{ data: T[]; totalNum: number; modelName?: string }>
|
|
31
|
+
>,
|
|
32
|
+
required: true
|
|
33
|
+
},
|
|
34
|
+
maxListOptions: {
|
|
35
|
+
type: Number as PropType<number>, // maximum number of options to show before enabling the text filter input box
|
|
36
|
+
default: 50
|
|
37
|
+
},
|
|
38
|
+
maxListHeightPX: {
|
|
39
|
+
type: Number as PropType<number>, // maximum height of the options list in pixels before scrolling is enabled
|
|
40
|
+
default: 200
|
|
41
|
+
},
|
|
42
|
+
objectLabelKeyName: {
|
|
43
|
+
type: String as PropType<string | null>, // when options are objects, the key name to use for the displayed label
|
|
44
|
+
default: ''
|
|
45
|
+
},
|
|
46
|
+
enumKeyToLabelObjectArray: {
|
|
47
|
+
type: Object as PropType<EnumType[]>, // type EnumType = { type: string; label: string }
|
|
48
|
+
default: undefined
|
|
49
|
+
},
|
|
50
|
+
listAnimationDurationMs: {
|
|
51
|
+
type: Number as PropType<number>, // how long the open/close animation takes in milliseconds
|
|
52
|
+
default: 300
|
|
53
|
+
},
|
|
54
|
+
customIcon: {
|
|
55
|
+
type: [Object, Function] as PropType<object | Function | null>, // custom vue icon component to use instead of the default arrows SVG
|
|
56
|
+
default: null
|
|
57
|
+
},
|
|
58
|
+
forceTextFilterVisibilityTo: {
|
|
59
|
+
type: Boolean as PropType<boolean>, // Display the text filter always (true) or never (false). Default behavior is to only show when options exceed maxListOptions
|
|
60
|
+
default: undefined
|
|
61
|
+
},
|
|
62
|
+
customPlaceHolderFunction: {
|
|
63
|
+
type: Function as PropType<Function | null>, // Display custom placeholder text in the filter input box regardless of how the selected item text appears elsewhere
|
|
64
|
+
default: null
|
|
65
|
+
},
|
|
66
|
+
scrollTextInputToTopOnMobile: {
|
|
67
|
+
type: Boolean as PropType<boolean>, // Scroll the text input to the top of the viewport on mobile when the input is focused
|
|
68
|
+
default: true
|
|
69
|
+
}
|
|
70
|
+
```
|
|
7
71
|
|
|
8
|
-
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
Example styled component implementation in Vue:
|
|
75
|
+
|
|
76
|
+
|
|
9
77
|
|
|
10
78
|
```js
|
|
11
79
|
<template>
|
|
12
|
-
<
|
|
80
|
+
<SuperList
|
|
81
|
+
ref="dropDownComponent"
|
|
13
82
|
:options="options"
|
|
14
83
|
v-model:selected="updatedSelected"
|
|
15
84
|
:object-label-key-name="objectLabelKeyName"
|
|
16
|
-
class="super-list"
|
|
17
85
|
:max-list-options="5"
|
|
18
86
|
/>
|
|
19
87
|
</template>
|
|
@@ -21,12 +89,13 @@ Example component implementation in Vue:
|
|
|
21
89
|
<script lang="ts">
|
|
22
90
|
import type { PropType } from 'vue'
|
|
23
91
|
import { defineComponent } from 'vue'
|
|
24
|
-
import SuperList from '
|
|
25
|
-
import
|
|
92
|
+
import SuperList from '../super-list.vue'
|
|
93
|
+
import { ListRequest } from '../DropDownLibrary'
|
|
26
94
|
|
|
27
95
|
export default defineComponent({
|
|
28
|
-
name: '
|
|
96
|
+
name: 'DemoStyledList',
|
|
29
97
|
components: { SuperList },
|
|
98
|
+
emits: ['update:selected'],
|
|
30
99
|
props: {
|
|
31
100
|
selected: {
|
|
32
101
|
type: [String, Number, Object, null, undefined] as PropType<
|
|
@@ -43,7 +112,6 @@ export default defineComponent({
|
|
|
43
112
|
default: ''
|
|
44
113
|
}
|
|
45
114
|
},
|
|
46
|
-
refs: ['dropDownComponent'],
|
|
47
115
|
data() {
|
|
48
116
|
return {
|
|
49
117
|
updatedSelected: '' as string | number | object
|
|
@@ -67,52 +135,39 @@ export default defineComponent({
|
|
|
67
135
|
}
|
|
68
136
|
})
|
|
69
137
|
</script>
|
|
70
|
-
<style src="@jblehm/super-list/dist/index.css"
|
|
138
|
+
<style src="@jblehm/super-list/dist/index.css" />
|
|
71
139
|
<style>
|
|
72
|
-
.super-list,
|
|
73
|
-
.super-list > * {
|
|
74
|
-
--tw-ring-color: var(--button-background) !important;
|
|
75
|
-
--superlist-text-colour: rgb(17, 24, 39);
|
|
76
|
-
--superlist-list-border-radius: 0.5rem;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.super-list {
|
|
80
|
-
width: 100%;
|
|
81
|
-
height: 2.25rem;
|
|
82
|
-
--superlist-text-colour: rgb(32, 35, 35);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
140
|
.list-button {
|
|
141
|
+
padding-top: 2px !important;
|
|
142
|
+
padding-bottom: 2px !important;
|
|
86
143
|
display: inline-flex;
|
|
87
144
|
background-color: rgb(248, 249, 250);
|
|
88
145
|
color: rgb(41 51 61 / 1);
|
|
89
|
-
box-shadow: 1px 1px 5px 0 rgb(0, 0, 0, 0.1);
|
|
90
146
|
border: 1px solid rgb(209 213 219 / 1) !important;
|
|
91
147
|
font-size: 0.875rem !important;
|
|
92
148
|
border-radius: 0.375rem;
|
|
93
149
|
justify-content: center;
|
|
94
150
|
text-align: center;
|
|
95
151
|
font-weight: 600 !important;
|
|
96
|
-
opacity:
|
|
152
|
+
opacity: 1;
|
|
97
153
|
translate: none;
|
|
98
|
-
transition-property:
|
|
99
|
-
|
|
154
|
+
transition-property:
|
|
155
|
+
outline-color, background, background-color, outline-width, outline-offset, box-shadow,
|
|
156
|
+
translate, filter, opacity, color, text-shadow;
|
|
100
157
|
transition-timing-function: ease-in-out;
|
|
101
158
|
transition-duration: 175ms;
|
|
102
|
-
outline-offset: 0.
|
|
159
|
+
outline-offset: 0.125rem;
|
|
103
160
|
-webkit-user-select: none;
|
|
104
161
|
-moz-user-select: none;
|
|
105
162
|
user-select: none;
|
|
106
|
-
filter:
|
|
107
|
-
outline: transparent solid 0.
|
|
163
|
+
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.55));
|
|
164
|
+
outline: transparent solid 0.1rem;
|
|
108
165
|
}
|
|
109
|
-
|
|
110
166
|
.list-button,
|
|
111
167
|
.list-filter-text-input,
|
|
112
168
|
.list-filter-text-input::placeholder {
|
|
113
|
-
color:
|
|
169
|
+
color: rgb(17, 24, 39);
|
|
114
170
|
}
|
|
115
|
-
|
|
116
171
|
.list-button,
|
|
117
172
|
.list-filter-text-input {
|
|
118
173
|
background-color: rgb(248, 249, 250);
|
|
@@ -120,21 +175,24 @@ export default defineComponent({
|
|
|
120
175
|
box-shadow: 1px 1px 5px 0 rgb(0, 0, 0, 0.1);
|
|
121
176
|
font-size: 0.875rem !important;
|
|
122
177
|
font-weight: 600 !important;
|
|
123
|
-
opacity:
|
|
124
|
-
transition-property:
|
|
125
|
-
|
|
178
|
+
opacity: 1;
|
|
179
|
+
transition-property:
|
|
180
|
+
outline-color, background, background-color, outline-width, outline-offset, box-shadow,
|
|
181
|
+
translate, filter, opacity, color, text-shadow;
|
|
126
182
|
transition-timing-function: ease-in-out;
|
|
127
183
|
transition-duration: 175ms;
|
|
128
|
-
outline-offset: 0.25rem;
|
|
184
|
+
outline-offset: 0.25rem !important;
|
|
129
185
|
outline: transparent solid 0.2rem;
|
|
130
186
|
}
|
|
131
|
-
|
|
187
|
+
.list-filter-text-input {
|
|
188
|
+
outline-offset: 0.25rem !important;
|
|
189
|
+
}
|
|
132
190
|
.list-filter-text-input {
|
|
133
191
|
border: none;
|
|
134
192
|
border-radius: calc(0.375rem - 1px) !important;
|
|
193
|
+
background: transparent !important;
|
|
135
194
|
}
|
|
136
|
-
|
|
137
|
-
.list-button:hover {
|
|
195
|
+
.list-button:hover:not(:active) {
|
|
138
196
|
transition-duration: 75ms;
|
|
139
197
|
box-shadow:
|
|
140
198
|
1px 2px 3px 2px rgb(0, 0, 0, 0.25),
|
|
@@ -144,88 +202,39 @@ export default defineComponent({
|
|
|
144
202
|
background-color: white;
|
|
145
203
|
color: black;
|
|
146
204
|
}
|
|
147
|
-
|
|
148
|
-
.list-filter-text-input:hover {
|
|
149
|
-
transition-duration: 75ms;
|
|
150
|
-
opacity: 0.9;
|
|
151
|
-
background-color: white;
|
|
152
|
-
color: black;
|
|
153
|
-
box-shadow:
|
|
154
|
-
0 0 0 1px var(--button-background),
|
|
155
|
-
1px 2px 3px 2px rgb(0, 0, 0, 0.25),
|
|
156
|
-
inset 1px 1px 5px 2px rgb(0, 0, 0, 0) !important;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.list-filter-text-input:focus:hover {
|
|
160
|
-
transition-duration: 75ms;
|
|
161
|
-
box-shadow:
|
|
162
|
-
-1px -1px 2px 1px rgb(0, 0, 0, 0.1),
|
|
163
|
-
inset 1px 2px 5px 3px rgb(0, 0, 0, 0.2);
|
|
164
|
-
translate: none;
|
|
165
|
-
opacity: 1;
|
|
166
|
-
}
|
|
167
|
-
|
|
205
|
+
.list-button:focus,
|
|
168
206
|
.list-button:active,
|
|
169
|
-
.list-button:focus:active
|
|
207
|
+
.list-button:focus:active,
|
|
208
|
+
.list-button:focus:hover,
|
|
209
|
+
.list-button:active:hover,
|
|
170
210
|
.list-button:focus:active:hover,
|
|
211
|
+
.list-filter-text-input:focus,
|
|
171
212
|
.list-filter-text-input:active,
|
|
172
213
|
.list-filter-text-input:focus:active,
|
|
173
214
|
.list-filter-text-input:focus:hover,
|
|
174
215
|
.list-filter-text-input:active:hover,
|
|
175
216
|
.list-filter-text-input:focus:active:hover {
|
|
176
|
-
transition-duration: 75ms;
|
|
177
|
-
box-shadow:
|
|
178
|
-
-1px -1px 2px 1px rgb(0, 0, 0, 0.1),
|
|
179
|
-
inset 1px 2px 5px 3px rgb(0, 0, 0, 0.2);
|
|
180
217
|
translate: none;
|
|
218
|
+
transition-duration: 75ms;
|
|
181
219
|
opacity: 1;
|
|
220
|
+
outline: rgb(77 168 11) solid 0.125rem !important;
|
|
221
|
+
border: none !important;
|
|
182
222
|
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
.list-filter-text-input:active {
|
|
187
|
-
border-width: 0;
|
|
188
|
-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
|
|
189
|
-
var(--button-background) !important;
|
|
190
|
-
border-color: var(--button-background) !important;
|
|
191
|
-
border-style: solid;
|
|
223
|
+
.select-list, .list-button, .list-filter-text-input {
|
|
224
|
+
font-family: sans-serif;
|
|
225
|
+
--superlist-list-border-radius: 0.5rem;
|
|
192
226
|
}
|
|
193
|
-
|
|
194
|
-
.select-list-fixed {
|
|
227
|
+
.select-list.list-normal {
|
|
195
228
|
box-shadow:
|
|
196
|
-
0
|
|
197
|
-
0
|
|
198
|
-
|
|
229
|
+
0 2px 3px 0 rgb(0 0 0 / 0.1),
|
|
230
|
+
0 3px 3px -2px rgb(0 0 0 / 0.1),
|
|
231
|
+
2px 4px 5px 2px rgba(0, 0, 0, 0.25);
|
|
199
232
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.list-button:hover {
|
|
208
|
-
transition-duration: 75ms;
|
|
209
|
-
box-shadow:
|
|
210
|
-
1px 2px 3px 2px rgb(0, 0, 0, 0.25),
|
|
211
|
-
inset 1px 1px 5px 2px rgb(0, 0, 0, 0);
|
|
212
|
-
translate: -0.0875rem -0.05rem;
|
|
213
|
-
opacity: 0.9;
|
|
214
|
-
background-color: white;
|
|
215
|
-
color: black;
|
|
216
|
-
}
|
|
217
|
-
.list-filter-text-input:hover {
|
|
218
|
-
transition-duration: 75ms;
|
|
219
|
-
box-shadow:
|
|
220
|
-
1px 2px 3px 2px rgb(0, 0, 0, 0.25),
|
|
221
|
-
inset 1px 1px 5px 2px rgb(0, 0, 0, 0);
|
|
222
|
-
opacity: 0.9;
|
|
223
|
-
background-color: white;
|
|
224
|
-
color: black;
|
|
225
|
-
}
|
|
226
|
-
.super-list {
|
|
227
|
-
height: 2rem;
|
|
228
|
-
}
|
|
233
|
+
.select-list.list-reverse {
|
|
234
|
+
box-shadow:
|
|
235
|
+
0 -2px 3px 0 rgb(0 0 0 / 0.1),
|
|
236
|
+
0 -3px 3px -2px rgb(0 0 0 / 0.1),
|
|
237
|
+
-2px -4px 5px 2px rgba(0, 0, 0, 0.25);
|
|
229
238
|
}
|
|
230
239
|
</style>
|
|
231
240
|
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.list-filter-text-input[data-v-e7eaf23c]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-e7eaf23c]:focus,.list-filter-text-input[data-v-e7eaf23c]:focus-visible,.list-filter-text-input[data-v-e7eaf23c]:active{text-align:left}.click-through[data-v-e7eaf23c]{pointer-events:none}.dark-placeholder-text[data-v-e7eaf23c]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-e7eaf23c]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-e7eaf23c]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-e7eaf23c]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-e58cd48c]{top:var(--parent-y)}.list-reverse[data-v-e58cd48c]{bottom:var(--parent-y)}.select-list[data-v-e58cd48c]{--parent-width: var(--v8d801350);--parent-x: var(--v2724698a);--parent-y: var(--v27246d4b);--duration: var(--ffcaa9a8);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-e58cd48c]:focus-visible,.select-list>ul[data-v-e58cd48c]:focus-visible,.super-list-button-container[data-v-e58cd48c]:focus-visible{outline:none}.super-list-button-container[data-v-e58cd48c]{height:100%;width:100%}.select-list.select-list-open[data-v-e58cd48c]{z-index:999999;--max-height: var(--v414dd276);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-e58cd48c]{overflow:hidden}.select-list-fixed[data-v-e58cd48c]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-e58cd48c]{--duration: var(--ffcaa9a8);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-e58cd48c]{border-radius:var(--border-radius)}.select-list[data-v-e58cd48c]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-e58cd48c]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-e58cd48c]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-
|
|
1
|
+
.list-filter-text-input[data-v-e7eaf23c]{color:var(--superlist-text-colour, rgb(17, 24, 39));text-align:center;padding:.125rem 2rem .125rem .5rem;width:100%;height:100%;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border:0 none;pointer-events:auto;cursor:text}.list-filter-text-input[data-v-e7eaf23c]:focus,.list-filter-text-input[data-v-e7eaf23c]:focus-visible,.list-filter-text-input[data-v-e7eaf23c]:active{text-align:left}.click-through[data-v-e7eaf23c]{pointer-events:none}.dark-placeholder-text[data-v-e7eaf23c]::placeholder{color:var(--superlist-text-colour, rgb(17, 24, 39))}.light-placeholder-text[data-v-e7eaf23c]::placeholder{color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.text-filter-disabled[data-v-e7eaf23c]{background-color:transparent;border:none;outline:none;box-shadow:none;filter:none}@media (min-width: 640px){.list-filter-text-input[data-v-e7eaf23c]{font-size:.875rem;line-height:1.5rem}}.list-option[data-v-e4eeb2f7]{text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-text-colour, rgb(55, 60, 65));transition-property:font-weight,background-color,color,text-shadow;transition-duration:.5s;transition-timing-function:ease;font-weight:400;text-shadow:1px 1px 3px var(--superlist-background-colour, white)}.list-option[data-v-e4eeb2f7]:focus-visible,.list-option>span[data-v-e4eeb2f7]:focus-visible{outline:none}.list-option-selected[data-v-e4eeb2f7]{font-weight:600}.list-option-message[data-v-e4eeb2f7]{text-shadow:1px 1px 3px var(--superlist-background-colour, white);text-transform:capitalize;display:inline-flex;width:100%;position:relative;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;color:var(--superlist-disabled-text-colour, rgb(120, 125, 130))}.list-option-active[data-v-e4eeb2f7]:hover,.list-option-active[data-v-e4eeb2f7],.list-option-selected[data-v-e4eeb2f7]:hover,.list-option[data-v-e4eeb2f7]:hover{font-weight:600;background-color:var(--superlist-theme-colour, rgb(77, 168, 11, .8));color:var(--superlist-background-colour, white);text-shadow:1px 1px 3px var(--superlist-theme-colour, rgb(77, 168, 11, .8));transition-duration:0s!important}.list-item-icon[data-v-e4eeb2f7]{display:flex;height:1rem;width:1rem;position:absolute;right:.7rem;margin-top:-.1rem;align-self:center}.list-item-span[data-v-e4eeb2f7]{padding:.5rem 1.75rem .5rem .75rem;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-normal[data-v-e58cd48c]{top:var(--parent-y)}.list-reverse[data-v-e58cd48c]{bottom:var(--parent-y)}.select-list[data-v-e58cd48c]{--parent-width: var(--v8d801350);--parent-x: var(--v2724698a);--parent-y: var(--v27246d4b);--duration: var(--ffcaa9a8);--border-radius: var(--superlist-list-border-radius, 0);border-radius:var(--border-radius);width:var(--parent-width);min-width:var(--parent-width);left:var(--parent-x);display:block;transition-property:max-height,opacity,visibility,box-shadow;transition-duration:var(--duration, .3s);transition-timing-function:cubic-bezier(.1,.9,.35,.98);position:absolute;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background-color:#ffffffb3;align-items:baseline;opacity:.25;z-index:999;visibility:collapse;overflow:auto;max-height:0;border:none!important}.select-list[data-v-e58cd48c]:focus-visible,.select-list>ul[data-v-e58cd48c]:focus-visible,.super-list-button-container[data-v-e58cd48c]:focus-visible{outline:none}.super-list-button-container[data-v-e58cd48c]{height:100%;width:100%}.select-list.select-list-open[data-v-e58cd48c]{z-index:999999;--max-height: var(--v414dd276);max-height:var(--max-height, 0)}.select-list.no-scroll[data-v-e58cd48c]{overflow:hidden}.select-list-fixed[data-v-e58cd48c]{position:fixed;opacity:1;visibility:visible}.list-content[data-v-e58cd48c]{--duration: var(--ffcaa9a8);overflow:visible;margin:0;padding:0;border-style:none;color:var(--superlist-text-colour, rgb(55, 60, 65));list-style:none;max-width:100%}.select-list.select-list-scrollable[data-v-e58cd48c]{border-radius:var(--border-radius)}.select-list[data-v-e58cd48c]:not(.select-list-fixed){transition:none;box-shadow:none!important}@media (min-width: 640px){.select-list.select-list-scrollable[data-v-e58cd48c]{border-radius:var(--border-radius) 0 0 var(--border-radius)}.list-content[data-v-e58cd48c]{font-size:.875rem;line-height:1.25rem}}.list-button-icon[data-v-01ef8e37]{display:flex;transition-timing-function:ease-in-out;transition-duration:.2s;transition-property:transform;width:.6rem;transform:rotate(0);color:var(--superlist-text-colour, rgb(17, 24, 39));justify-content:center;max-height:18%}.list-button-icon.custom-icon[data-v-01ef8e37]{max-height:100%;width:1.25rem}.list-button-icon.rotate-180[data-v-01ef8e37]{transform:rotate(180deg)}.list-button[data-v-01ef8e37]{position:relative;padding:0;margin:0;width:100%;max-height:100%;height:100%;background-color:var(--superlist-background-colour, white);align-items:center;pointer-events:auto;cursor:pointer}.list-button[data-v-01ef8e37]:focus,.list-button[data-v-01ef8e37]:focus-visible,.list-button[data-v-01ef8e37]:active{text-align:left}.list-button-icon-div[data-v-01ef8e37]{pointer-events:none;position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-right:.75rem;max-height:100%;height:100%;gap:max(.15rem,calc(6.25% + .075rem));transition:gap .2s}.list-button-icon-div.bigger-gap[data-v-01ef8e37]{gap:calc(40% - .25rem)}.click-through[data-v-01ef8e37]{pointer-events:none}[data-v-95216f16]{box-sizing:border-box}
|
package/dist/super-list.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as G, ref as p, computed as O, createElementBlock as M, openBlock as T, withModifiers as Z, createElementVNode as N, normalizeClass as q, withKeys as b, useTemplateRef as ke, watch as F, Fragment as ce, createCommentVNode as K, renderList as Ee, createBlock as fe, toDisplayString as ve, useCssVars as
|
|
1
|
+
import { defineComponent as G, ref as p, computed as O, createElementBlock as M, openBlock as T, withModifiers as Z, createElementVNode as N, normalizeClass as q, withKeys as b, useTemplateRef as ke, watch as F, Fragment as ce, createCommentVNode as K, renderList as Ee, createBlock as fe, toDisplayString as ve, useCssVars as Ae, onMounted as we, onUnmounted as Se, renderSlot as Le, createVNode as Y, nextTick as Fe, resolveDynamicComponent as Ne, withCtx as me } from "vue";
|
|
2
2
|
class Be {
|
|
3
3
|
eventsTypes = ["resize", "load", "scroll", "wheel", "touchmove"];
|
|
4
4
|
config = {
|
|
@@ -368,7 +368,7 @@ const ze = /* @__PURE__ */ V($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
368
368
|
},
|
|
369
369
|
emits: ["reverseDropDownList"],
|
|
370
370
|
setup(e, { expose: i, emit: d }) {
|
|
371
|
-
|
|
371
|
+
Ae((u) => ({
|
|
372
372
|
v8d801350: k.value,
|
|
373
373
|
v2724698a: B.value,
|
|
374
374
|
v27246d4b: se.value,
|
|
@@ -392,16 +392,16 @@ const ze = /* @__PURE__ */ V($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
392
392
|
function P() {
|
|
393
393
|
return w?.value ? (w?.value).clientHeight : 0;
|
|
394
394
|
}
|
|
395
|
-
function
|
|
395
|
+
function A() {
|
|
396
396
|
if (!I.value || P() === 0) return o.maxListHeightPX;
|
|
397
397
|
const u = P() === 0 ? o.maxListHeightPX : +P();
|
|
398
398
|
return o.maxListHeightPX && o.maxListHeightPX > u ? u : o.maxListHeightPX;
|
|
399
399
|
}
|
|
400
400
|
function U() {
|
|
401
|
-
return c.value >
|
|
401
|
+
return c.value > A();
|
|
402
402
|
}
|
|
403
403
|
function le() {
|
|
404
|
-
return r.value <
|
|
404
|
+
return r.value < A();
|
|
405
405
|
}
|
|
406
406
|
const _ = O(() => (o.maxListHeightPX || 0) + "px"), $ = O(() => (o.listAnimationDurationMs || 0) + "ms"), ee = O(() => o.blockListChange ? E.value : o.filteredListItems);
|
|
407
407
|
F(
|
|
@@ -412,13 +412,13 @@ const ze = /* @__PURE__ */ V($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
412
412
|
{ immediate: !1, deep: !0 }
|
|
413
413
|
);
|
|
414
414
|
let C = setTimeout(() => {
|
|
415
|
-
}, 0),
|
|
415
|
+
}, 0), S = null;
|
|
416
416
|
function H() {
|
|
417
|
-
g.value = P(), clearTimeout(C),
|
|
417
|
+
g.value = P(), clearTimeout(C), S && S.observe(), I.value = !0, z(void 0);
|
|
418
418
|
}
|
|
419
419
|
function re() {
|
|
420
420
|
clearTimeout(C), C = setTimeout(() => {
|
|
421
|
-
o.showDropDown || (I.value = !1,
|
|
421
|
+
o.showDropDown || (I.value = !1, S && S.unobserve());
|
|
422
422
|
}, o.listAnimationDurationMs + 50);
|
|
423
423
|
}
|
|
424
424
|
F(
|
|
@@ -460,9 +460,9 @@ const ze = /* @__PURE__ */ V($e, [["render", Ve]]), Xe = ["onMousedown"], Ue = {
|
|
|
460
460
|
return v?.value;
|
|
461
461
|
}
|
|
462
462
|
return we(() => {
|
|
463
|
-
|
|
464
|
-
}),
|
|
465
|
-
|
|
463
|
+
S = new Be(z, ue()), setTimeout(() => z(void 0), 250);
|
|
464
|
+
}), Se(() => {
|
|
465
|
+
S?.unobserve();
|
|
466
466
|
}), (u, L) => (T(), M(ce, null, [
|
|
467
467
|
N("div", {
|
|
468
468
|
ref_key: "dropDownButtonContainer",
|
|
@@ -627,10 +627,6 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
627
627
|
type: Number,
|
|
628
628
|
default: 200
|
|
629
629
|
},
|
|
630
|
-
tooltip: {
|
|
631
|
-
type: String,
|
|
632
|
-
required: !1
|
|
633
|
-
},
|
|
634
630
|
objectLabelKeyName: {
|
|
635
631
|
type: String,
|
|
636
632
|
default: ""
|
|
@@ -655,10 +651,6 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
655
651
|
type: Function,
|
|
656
652
|
default: null
|
|
657
653
|
},
|
|
658
|
-
colour: {
|
|
659
|
-
type: String,
|
|
660
|
-
default: "black"
|
|
661
|
-
},
|
|
662
654
|
scrollTextInputToTopOnMobile: {
|
|
663
655
|
type: Boolean,
|
|
664
656
|
default: !0
|
|
@@ -677,9 +669,9 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
677
669
|
s.value && a?.value?.blurInput();
|
|
678
670
|
}, j = () => {
|
|
679
671
|
clearTimeout(Q), se(), B.value = "", c.value = !1, k.value = !0;
|
|
680
|
-
}, ie = O(() => E?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." :
|
|
672
|
+
}, ie = O(() => E?.value === !0 ? "Error loading data" : I?.value === !0 ? "Loading..." : A(o.selected)), P = (n) => {
|
|
681
673
|
n && m("update:selected", n), j();
|
|
682
|
-
},
|
|
674
|
+
}, A = (n) => He(
|
|
683
675
|
n,
|
|
684
676
|
o.customPlaceHolderFunction,
|
|
685
677
|
o.objectLabelKeyName,
|
|
@@ -697,24 +689,24 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
697
689
|
we(() => {
|
|
698
690
|
typeof o.options != "function" && !Array.isArray(o.options) ? U() : u();
|
|
699
691
|
});
|
|
700
|
-
const $ = p(!1), ee = p(0), C = p(0),
|
|
692
|
+
const $ = p(!1), ee = p(0), C = p(0), S = p(0);
|
|
701
693
|
F(
|
|
702
694
|
() => C.value,
|
|
703
695
|
(n, l) => {
|
|
704
|
-
n != l && !r.value && (
|
|
696
|
+
n != l && !r.value && (S.value = n);
|
|
705
697
|
},
|
|
706
698
|
{ immediate: !0 }
|
|
707
699
|
), F(
|
|
708
700
|
() => r.value,
|
|
709
701
|
(n) => {
|
|
710
|
-
n || (
|
|
702
|
+
n || (S.value = C.value);
|
|
711
703
|
},
|
|
712
704
|
{ immediate: !0 }
|
|
713
705
|
);
|
|
714
706
|
const H = O(() => {
|
|
715
707
|
if (typeof o.options == "function" && !Array.isArray(o.options)) return v.value;
|
|
716
708
|
const n = B.value, l = v.value;
|
|
717
|
-
return n === "" ? l : l.filter((f) =>
|
|
709
|
+
return n === "" ? l : l.filter((f) => A(f).toLowerCase().includes(n.toLowerCase()));
|
|
718
710
|
});
|
|
719
711
|
F(
|
|
720
712
|
() => H.value,
|
|
@@ -731,7 +723,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
731
723
|
};
|
|
732
724
|
function te() {
|
|
733
725
|
if (o.selected == null) return -1;
|
|
734
|
-
const n = H.value.map((f) =>
|
|
726
|
+
const n = H.value.map((f) => A(f)), l = n.filter((f) => f === A(o.selected));
|
|
735
727
|
if (l.length > 1) {
|
|
736
728
|
const f = l.map((D) => n.indexOf(D));
|
|
737
729
|
for (let D = 0; D < f.length; D++) {
|
|
@@ -742,7 +734,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
742
734
|
}
|
|
743
735
|
return -1;
|
|
744
736
|
}
|
|
745
|
-
return n.indexOf(
|
|
737
|
+
return n.indexOf(A(o.selected));
|
|
746
738
|
}
|
|
747
739
|
const ne = () => {
|
|
748
740
|
I.value || (c.value || (r.value = !1, z(), J(), c.value = !0), $.value = !1, k.value = !1);
|
|
@@ -772,7 +764,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
772
764
|
async function u() {
|
|
773
765
|
typeof o.options == "function" ? await x(B.value ? B.value : void 0, !0) : (X(o.options), t.value = v.value.length), L();
|
|
774
766
|
}
|
|
775
|
-
i({ initializeOptions: u, getLabel:
|
|
767
|
+
i({ initializeOptions: u, getLabel: A });
|
|
776
768
|
function L() {
|
|
777
769
|
te() == -1 && v.value && !!v.value[0] && P(v.value[0]);
|
|
778
770
|
}
|
|
@@ -827,7 +819,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
827
819
|
},
|
|
828
820
|
press: Te,
|
|
829
821
|
mouseOverList: re,
|
|
830
|
-
getLabel:
|
|
822
|
+
getLabel: A,
|
|
831
823
|
updatedSelected: P,
|
|
832
824
|
focusInput: oe,
|
|
833
825
|
closeList: j
|
|
@@ -842,7 +834,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
842
834
|
"show-drop-down": c.value,
|
|
843
835
|
filteredListItems: H.value,
|
|
844
836
|
mouseHoveringOnList: $.value,
|
|
845
|
-
focusedIndex:
|
|
837
|
+
focusedIndex: S.value,
|
|
846
838
|
selectedIndex: ee.value,
|
|
847
839
|
"max-list-height-p-x": e.maxListHeightPX,
|
|
848
840
|
"list-animation-duration-ms": e.listAnimationDurationMs,
|
|
@@ -882,7 +874,7 @@ const ge = /* @__PURE__ */ V(Ye, [["render", _e]]), et = ["tabindex"], tt = {
|
|
|
882
874
|
}, 8, ["show-drop-down", "filteredListItems", "mouseHoveringOnList", "focusedIndex", "selectedIndex", "max-list-height-p-x", "list-animation-duration-ms", "blockListChange", "total-options-count", "enableScrollClose"])
|
|
883
875
|
], 2));
|
|
884
876
|
}
|
|
885
|
-
}), lt = /* @__PURE__ */ V(ot, [["__scopeId", "data-v-
|
|
877
|
+
}), lt = /* @__PURE__ */ V(ot, [["__scopeId", "data-v-95216f16"]]);
|
|
886
878
|
export {
|
|
887
879
|
lt as default
|
|
888
880
|
};
|