Skip to content

Commit aab2e48

Browse files
rzzfrzzf
committed
refactor: update
1 parent b14ffcb commit aab2e48

12 files changed

Lines changed: 222 additions & 84 deletions

File tree

‎packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -588,17 +588,20 @@ exports[`form with select 1`] = `
588588
"<form class="var-form">
589589
<div class="var-select">
590590
<div class="var-menu var--box var-select__menu" var-select-cover="">
591-
<div class="var-field-decorator var--box var-field-decorator--standard">
591+
<div class="var-field-decorator var--box var-field-decorator--standard var-field-decorator--disabled">
592592
<div class="var-field-decorator__controller var-field-decorator--disabled" style="cursor: pointer; overflow: visible; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
593593
<div class="var-field-decorator__icon"></div>
594594
<div class="var-field-decorator__middle">
595595
<div class="var-select__select var-select--disabled" style="text-align: left;">
596596
<div class="var-select__label">
597597
<div class="var-select__chips">
598598
<transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
599+
<!--v-if-->
599600
</div>
600601
</div>
601602
<!--v-if-->
603+
<!--v-if-->
604+
<!--v-if-->
602605
</div>
603606
</div>
604607
<!--v-if-->
@@ -630,9 +633,12 @@ exports[`form with select 2`] = `
630633
<div class="var-select__label">
631634
<div class="var-select__chips">
632635
<transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
636+
<!--v-if-->
633637
</div>
634638
</div>
635639
<!--v-if-->
640+
<!--v-if-->
641+
<!--v-if-->
636642
</div>
637643
</div>
638644
<!--v-if-->
@@ -664,9 +670,12 @@ exports[`form with select 3`] = `
664670
<div class="var-select__label">
665671
<div class="var-select__chips">
666672
<transition-stub name="var-fade" appear="false" persisted="false" css="true"><span class="var-chip var--box var-chip--small var--inline-flex var-chip--danger var-chip--round var-select__chip" var-select-cover=""><span class="var-chip__text-small"><span>option1</span></span><span class="var-chip--close"><i class="var-icon var-icon--set var-icon-close-circle" style="transition-duration: 0ms;"></i></span></span></transition-stub>
673+
<!--v-if-->
667674
</div>
668675
</div>
669676
<!--v-if-->
677+
<!--v-if-->
678+
<!--v-if-->
670679
</div>
671680
</div>
672681
<!--v-if-->
@@ -710,6 +719,8 @@ exports[`form with select 4`] = `
710719
<!--v-if-->
711720
</div>
712721
<!--v-if-->
722+
<!--v-if-->
723+
<!--v-if-->
713724
</div>
714725
</div>
715726
<!--v-if-->

‎packages/varlet-ui/src/option/Option.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
v-if="visible"
3+
v-show="visible"
44
ref="root"
55
v-ripple="{ disabled: disabled || !ripple }"
66
v-hover:desktop="handleHovering"

‎packages/varlet-ui/src/select/Select.vue‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<div :class="classes(n('label'), [filterable && showMenu, n('label-focusing')])">
5252
<slot v-if="!isEmptyModelValue" name="selected">
5353
<template v-if="multiple">
54-
<div v-if="chip" ref="inputHost" :class="n('chips')">
54+
<div v-if="chip" :class="n('chips')">
5555
<var-chip
5656
v-for="l in labels"
5757
:key="l"
@@ -65,31 +65,53 @@
6565
>
6666
<maybe-v-node :is="l" />
6767
</var-chip>
68+
<var-select-input
69+
v-if="showInput"
70+
ref="inputRef"
71+
v-model="query"
72+
:style="inputStyle"
73+
multiple
74+
@focus="handleFocus"
75+
@blur="handleRootBlur"
76+
@input="handleInput"
77+
@compositionstart="handleCompositionStart"
78+
@compositionend="handleCompositionEnd"
79+
/>
6880
</div>
69-
<div v-else ref="inputHost" :class="n('values')">
81+
<div v-else :class="n('values')">
7082
<template v-for="(l, labelIndex) in labels" :key="l">
7183
<maybe-v-node :is="l" />{{ labelIndex !== labels.length - 1 ? separator : '' }}
7284
</template>
85+
<var-select-input
86+
v-if="showInput"
87+
ref="inputRef"
88+
v-model="query"
89+
:style="inputStyle"
90+
multiple
91+
@focus="handleFocus"
92+
@blur="handleRootBlur"
93+
@input="handleInput"
94+
@compositionstart="handleCompositionStart"
95+
@compositionend="handleCompositionEnd"
96+
/>
7397
</div>
7498
</template>
7599

76100
<maybe-v-node :is="label" v-else-if="!query && !isComposing" />
77101
</slot>
78102
</div>
79103

80-
<teleport v-if="filterable && !readonly && !disabled" :to="inputHost" :disabled="!inputHost">
81-
<input
82-
ref="inputRef"
83-
v-model="query"
84-
type="text"
85-
:class="classes(n('input'), [multiple, n('input--multiple')])"
86-
@input="handleInput"
87-
@focus="handleFocus"
88-
@blur="handleRootBlur"
89-
@compositionstart="handleCompositionStart"
90-
@compositionend="handleCompositionEnd"
91-
/>
92-
</teleport>
104+
<var-select-input
105+
v-if="showInput && (!multiple || isEmptyModelValue)"
106+
ref="inputRef"
107+
v-model="query"
108+
:style="inputStyle"
109+
@focus="handleFocus"
110+
@blur="handleRootBlur"
111+
@input="handleInput"
112+
@compositionstart="handleCompositionStart"
113+
@compositionend="handleCompositionEnd"
114+
/>
93115
<span
94116
v-if="enableCustomPlaceholder && !query"
95117
:class="classes(n('placeholder'), n('$--ellipsis'))"
@@ -159,6 +181,7 @@ import { createNamespace, MaybeVNode, useValidation } from '../utils/components'
159181
import { focusChildElementByKey, toPxNum } from '../utils/elements'
160182
import { props, type SelectValidateTrigger } from './props'
161183
import { useOptions, type SelectProvider } from './provide'
184+
import VarSelectInput from './SelectInput.vue'
162185
import { useCalcInputWidth } from './useCalcInputWidth'
163186
import { useSelectController } from './useSelectController'
164187
@@ -173,15 +196,15 @@ export default defineComponent({
173196
VarOption,
174197
VarFieldDecorator,
175198
VarFormDetails,
199+
VarSelectInput,
176200
MaybeVNode,
177201
},
178202
props,
179203
setup(props) {
180204
const isFocusing = ref(false)
181205
const showMenu = ref(false)
182206
const root = ref<HTMLElement | null>(null)
183-
const inputRef = ref<HTMLInputElement | null>(null)
184-
const inputHost = ref()
207+
const inputRef = ref<InstanceType<typeof VarSelectInput> | null>(null)
185208
const query = ref('')
186209
const isComposing = ref(false)
187210
const filterable = computed(() => props.filterable)
@@ -237,7 +260,8 @@ export default defineComponent({
237260
}
238261
return props.tabindex ?? '0'
239262
})
240-
const { calculatorRef, inputStyle } = useCalcInputWidth(filterable)
263+
const showInput = computed(() => filterable.value && !readonly.value && !disabled.value)
264+
const { calculatorRef, inputStyle } = useCalcInputWidth(query)
241265
242266
const selectProvider: SelectProvider = {
243267
query: computed(() => query.value),
@@ -359,10 +383,13 @@ export default defineComponent({
359383
}
360384
361385
function handleRootFocus(e: FocusEvent) {
362-
if (inputRef.value?.contains(e.relatedTarget as Element | null)) {
386+
const el = inputRef.value?.$el
387+
388+
if (el?.contains(e.relatedTarget as Element | null)) {
363389
inputRef.value?.focus()
364390
return
365391
}
392+
366393
handleFocus()
367394
}
368395
@@ -491,7 +518,6 @@ export default defineComponent({
491518
return {
492519
root,
493520
inputRef,
494-
inputHost,
495521
calculatorRef,
496522
isComposing,
497523
inputStyle,
@@ -502,6 +528,7 @@ export default defineComponent({
502528
offsetY,
503529
isFocusing,
504530
showMenu,
531+
showInput,
505532
errorMessage,
506533
formDisabled: form?.disabled,
507534
formReadonly: form?.readonly,

‎packages/varlet-ui/src/select/SelectInput.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<input ref="inputRef" v-model="value" type="text" :class="classes(n('input'), [multiple, n('input--multiple')])" />
3+
</template>
4+
5+
<script lang="ts">
6+
import { computed, defineComponent, ref } from 'vue'
7+
import { call } from '@varlet/shared'
8+
import { createNamespace, defineListenerProp } from '../utils/components'
9+
10+
const { n, classes } = createNamespace('select')
11+
12+
export default defineComponent({
13+
name: 'VarSelectInput',
14+
props: {
15+
modelValue: {
16+
type: String,
17+
default: '',
18+
},
19+
multiple: Boolean,
20+
'onUpdate:modelValue': defineListenerProp<(value: string) => void>(),
21+
},
22+
setup(props) {
23+
const inputRef = ref<HTMLInputElement>()
24+
25+
const value = computed({
26+
get: () => props.modelValue,
27+
set: (val) => call(props['onUpdate:modelValue'], val),
28+
})
29+
30+
const focus = () => {
31+
inputRef.value?.focus()
32+
}
33+
34+
const blur = () => {
35+
inputRef.value?.blur()
36+
}
37+
38+
return {
39+
n,
40+
classes,
41+
value,
42+
inputRef,
43+
44+
// expose
45+
focus,
46+
blur,
47+
}
48+
},
49+
})
50+
</script>

‎packages/varlet-ui/src/select/__tests__/__snapshots__/index.spec.js.snap‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ exports[`select focus & blur methods 1`] = `
1212
<!--v-if-->
1313
</div>
1414
<!--v-if-->
15+
<!--v-if-->
16+
<!--v-if-->
1517
</div>
1618
</div>
1719
<!--v-if-->
@@ -44,6 +46,8 @@ exports[`select focus & blur methods 2`] = `
4446
<!--v-if-->
4547
</div>
4648
<!--v-if-->
49+
<!--v-if-->
50+
<!--v-if-->
4751
</div>
4852
</div>
4953
<!--v-if-->
@@ -74,6 +78,8 @@ exports[`select hint to be false 1`] = `
7478
<div class="var-select__select" style="text-align: left;">
7579
<div class="var-select__label"><span></span></div>
7680
<!--v-if-->
81+
<!--v-if-->
82+
<!--v-if-->
7783
</div>
7884
</div>
7985
<!--v-if-->
@@ -106,6 +112,8 @@ exports[`select size 1`] = `
106112
<!--v-if-->
107113
</div>
108114
<!--v-if-->
115+
<!--v-if-->
116+
<!--v-if-->
109117
</div>
110118
</div>
111119
<!--v-if-->
@@ -138,6 +146,8 @@ exports[`select validation 1`] = `
138146
<!--v-if-->
139147
</div>
140148
<!--v-if-->
149+
<!--v-if-->
150+
<!--v-if-->
141151
</div>
142152
</div>
143153
<!--v-if-->
@@ -181,6 +191,8 @@ exports[`select variant 1`] = `
181191
<!--v-if-->
182192
</div>
183193
<!--v-if-->
194+
<!--v-if-->
195+
<!--v-if-->
184196
</div>
185197
</div>
186198
<!--v-if-->
@@ -213,6 +225,8 @@ exports[`select variant 2`] = `
213225
<!--v-if-->
214226
</div>
215227
<!--v-if-->
228+
<!--v-if-->
229+
<!--v-if-->
216230
</div>
217231
</div>
218232
<!--v-if-->
@@ -245,6 +259,8 @@ exports[`test select component slots > select append icon slot 1`] = `
245259
<div class="var-select__select" style="text-align: left;">
246260
<div class="var-select__label"><span></span></div>
247261
<!--v-if-->
262+
<!--v-if-->
263+
<!--v-if-->
248264
</div>
249265
</div>
250266
<!--v-if-->
@@ -273,6 +289,8 @@ exports[`test select component slots > select clear icon slot 1`] = `
273289
<div class="var-select__select" style="text-align: left;">
274290
<div class="var-select__label"><span></span></div>
275291
<!--v-if-->
292+
<!--v-if-->
293+
<!--v-if-->
276294
</div>
277295
</div>
278296
<!--v-if-->
@@ -301,6 +319,8 @@ exports[`test select component slots > select prepend icon slot 1`] = `
301319
<div class="var-select__select" style="text-align: left;">
302320
<div class="var-select__label"><span></span></div>
303321
<!--v-if-->
322+
<!--v-if-->
323+
<!--v-if-->
304324
</div>
305325
</div>
306326
<!--v-if-->
@@ -329,6 +349,8 @@ exports[`test select validation with zod > string 1`] = `
329349
<div class="var-select__select var-select--error" style="text-align: left;">
330350
<div class="var-select__label"><span>varlet-ui</span></div>
331351
<!--v-if-->
352+
<!--v-if-->
353+
<!--v-if-->
332354
</div>
333355
</div>
334356
<!--v-if-->

0 commit comments

Comments
 (0)