quasar-ui-sellmate-ui-kit 3.14.5 → 3.14.7
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/dist/index.common.js +2 -2
- package/dist/index.css +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.min.css +1 -1
- package/dist/index.rtl.css +1 -1
- package/dist/index.rtl.min.css +1 -1
- package/dist/index.umd.js +33 -83
- package/dist/index.umd.min.js +2 -2
- package/package.json +1 -1
- package/src/components/SButton.vue +5 -8
- package/src/components/SSelectSearch.vue +15 -68
package/package.json
CHANGED
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
// TODO: hover 색 맞추기
|
|
62
62
|
.s-button {
|
|
63
|
+
font-weight: $font-weight-md;
|
|
63
64
|
&.q-btn {
|
|
64
65
|
min-height: 0;
|
|
65
66
|
height: fit-content;
|
|
@@ -114,16 +115,11 @@
|
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
117
|
}
|
|
117
|
-
&.bg-primary,
|
|
118
|
-
&.bg-Blue_B_Darken-3 {
|
|
119
|
-
font-weight: $font-weight-md !important;
|
|
120
|
-
}
|
|
121
118
|
}
|
|
122
119
|
.s-button-xs {
|
|
123
120
|
&.q-btn {
|
|
124
121
|
height: 24px;
|
|
125
122
|
padding: $button-padding-xs;
|
|
126
|
-
font-weight: $default-font-weight;
|
|
127
123
|
font-size: $default-font;
|
|
128
124
|
line-height: $default-content-height;
|
|
129
125
|
min-width: 60px;
|
|
@@ -153,7 +149,6 @@
|
|
|
153
149
|
&.q-btn {
|
|
154
150
|
height: 28px;
|
|
155
151
|
padding: $button-padding-sm;
|
|
156
|
-
font-weight: $default-font-weight;
|
|
157
152
|
font-size: $default-font;
|
|
158
153
|
line-height: $default-content-height;
|
|
159
154
|
min-width: 70px;
|
|
@@ -181,7 +176,6 @@
|
|
|
181
176
|
}
|
|
182
177
|
.s-button-md {
|
|
183
178
|
padding: $button-padding-md;
|
|
184
|
-
font-weight: $default-font-weight;
|
|
185
179
|
font-size: $font-md;
|
|
186
180
|
line-height: $line-height-md;
|
|
187
181
|
min-width: 100px;
|
|
@@ -206,7 +200,9 @@
|
|
|
206
200
|
max-height: $line-height-md;
|
|
207
201
|
}
|
|
208
202
|
}
|
|
209
|
-
|
|
203
|
+
.s-button.q-btn--outline {
|
|
204
|
+
font-weight: $default-font-weight;
|
|
205
|
+
}
|
|
210
206
|
.s-button.q-btn--outline.disabled,
|
|
211
207
|
.s-button.disabled {
|
|
212
208
|
background: $Grey_Lighten-3 !important;
|
|
@@ -218,6 +214,7 @@
|
|
|
218
214
|
}
|
|
219
215
|
}
|
|
220
216
|
.s-button.text-only {
|
|
217
|
+
font-weight: $default-font-weight;
|
|
221
218
|
background: none !important;
|
|
222
219
|
padding: 0 !important;
|
|
223
220
|
min-width: 0;
|
|
@@ -5,9 +5,7 @@
|
|
|
5
5
|
options-dense
|
|
6
6
|
:dropdown-icon="selectDownArrowIcon"
|
|
7
7
|
v-model="model"
|
|
8
|
-
:options="
|
|
9
|
-
emit-value
|
|
10
|
-
map-options
|
|
8
|
+
:options="options"
|
|
11
9
|
color="positive"
|
|
12
10
|
class="s-select-search"
|
|
13
11
|
:popup-content-class="
|
|
@@ -51,12 +49,8 @@
|
|
|
51
49
|
</q-item-section>
|
|
52
50
|
</q-item>
|
|
53
51
|
</template>
|
|
54
|
-
<template
|
|
55
|
-
|
|
56
|
-
#selected
|
|
57
|
-
>
|
|
58
|
-
<div v-if="noSelected && !options.length">{{ noSelected }}</div>
|
|
59
|
-
<div v-else>
|
|
52
|
+
<template v-if="!model" #selected>
|
|
53
|
+
<div>
|
|
60
54
|
{{ placeholder }}
|
|
61
55
|
</div>
|
|
62
56
|
</template>
|
|
@@ -103,7 +97,7 @@
|
|
|
103
97
|
required: true,
|
|
104
98
|
},
|
|
105
99
|
modelValue: {
|
|
106
|
-
type: [String, Number, null],
|
|
100
|
+
type: [String, Number, null, Object],
|
|
107
101
|
required: true,
|
|
108
102
|
},
|
|
109
103
|
optionLabel: {
|
|
@@ -116,7 +110,7 @@
|
|
|
116
110
|
},
|
|
117
111
|
placeholder: {
|
|
118
112
|
type: String,
|
|
119
|
-
default: '
|
|
113
|
+
default: '선택',
|
|
120
114
|
},
|
|
121
115
|
noData: {
|
|
122
116
|
type: String,
|
|
@@ -125,19 +119,10 @@
|
|
|
125
119
|
popupContentClass: {
|
|
126
120
|
type: String,
|
|
127
121
|
},
|
|
128
|
-
noSelected: {
|
|
129
|
-
type: String,
|
|
130
|
-
default: '선택',
|
|
131
|
-
},
|
|
132
122
|
},
|
|
133
123
|
setup(props, { emit }) {
|
|
134
124
|
const id = useId();
|
|
135
125
|
const model = ref(props.modelValue);
|
|
136
|
-
const filteredOptions = ref(props.options || []);
|
|
137
|
-
const findLabel = () =>
|
|
138
|
-
props.options.find(opt => opt[props.optionValue] === props.modelValue)[props.optionLabel] ||
|
|
139
|
-
'';
|
|
140
|
-
|
|
141
126
|
const search = ref('');
|
|
142
127
|
const sSelectRef = ref(null);
|
|
143
128
|
|
|
@@ -149,13 +134,10 @@
|
|
|
149
134
|
|
|
150
135
|
function handleInput(val) {
|
|
151
136
|
if (!sSelectRef.value) return;
|
|
152
|
-
|
|
153
137
|
search.value = val;
|
|
154
138
|
sSelectRef.value.setOptionIndex(-1);
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
filteredOptions.value = props.options;
|
|
158
|
-
sSelectRef.value.setOptionIndex(-1);
|
|
139
|
+
if (!val) {
|
|
140
|
+
emit('onSearch', val);
|
|
159
141
|
}
|
|
160
142
|
}
|
|
161
143
|
|
|
@@ -166,58 +148,24 @@
|
|
|
166
148
|
emit('onSearch', '');
|
|
167
149
|
}
|
|
168
150
|
|
|
169
|
-
|
|
170
|
-
if (!
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
// 옵션을 선택 했을 때
|
|
176
|
-
if (sSelectRef.value && sSelectRef.value.getOptionIndex() !== -1) {
|
|
177
|
-
model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
|
|
178
|
-
handleDelete();
|
|
179
|
-
sSelectRef.value.setOptionIndex(-1);
|
|
180
|
-
sSelectRef.value.hidePopup();
|
|
181
|
-
return;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
const filtered = props.options.filter(
|
|
185
|
-
v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
|
|
186
|
-
);
|
|
187
|
-
|
|
188
|
-
if (!filtered.length && sSelectRef.value) {
|
|
189
|
-
emit('onSearch', val);
|
|
190
|
-
sSelectRef.value.setOptionIndex(-1);
|
|
191
|
-
return;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
filteredOptions.value = filtered;
|
|
195
|
-
}, 200);
|
|
151
|
+
function onSearch(val) {
|
|
152
|
+
if (!sSelectRef.value) return;
|
|
153
|
+
sSelectRef.value.setOptionIndex(-1);
|
|
154
|
+
emit('onSearch', val);
|
|
155
|
+
}
|
|
196
156
|
|
|
197
157
|
watch(
|
|
198
158
|
() => props.modelValue,
|
|
199
159
|
val => {
|
|
200
160
|
model.value = val;
|
|
201
|
-
if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
|
|
202
161
|
},
|
|
203
162
|
);
|
|
204
163
|
|
|
205
|
-
watch(model, val => {
|
|
206
|
-
emit('update:modelValue', val);
|
|
207
|
-
});
|
|
208
|
-
|
|
209
164
|
watch(
|
|
210
|
-
() =>
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
// const nonDuplicateOptions = val.filter((option) => !existingValues.has(option.value));
|
|
214
|
-
// filteredOptions.value.push(...nonDuplicateOptions);
|
|
215
|
-
if (val) {
|
|
216
|
-
filteredOptions.value = val;
|
|
217
|
-
if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
|
|
218
|
-
}
|
|
165
|
+
() => model.value,
|
|
166
|
+
newValue => {
|
|
167
|
+
emit('update:modelValue', newValue);
|
|
219
168
|
},
|
|
220
|
-
{ deep: true },
|
|
221
169
|
);
|
|
222
170
|
|
|
223
171
|
const isScrolled = ref(false);
|
|
@@ -260,7 +208,6 @@
|
|
|
260
208
|
model,
|
|
261
209
|
selectDownArrowIcon,
|
|
262
210
|
onSearch,
|
|
263
|
-
filteredOptions,
|
|
264
211
|
search,
|
|
265
212
|
sSelectRef,
|
|
266
213
|
isScrolled,
|