Quellcode durchsuchen

Reduce visual noise in PR

Simone Todaro vor 2 Jahren
Ursprung
Commit
dd0dac407c
1 geänderte Dateien mit 13 neuen und 36 gelöschten Zeilen
  1. 13 36
      packages/ui/src/combobox.js

+ 13 - 36
packages/ui/src/combobox.js

@@ -125,6 +125,7 @@ function handleRoot(el, Alpine) {
                     if (! input) return
 
                     let value = this.$data.__getCurrentValue()
+
                     input.value = value
                 },
                 __getCurrentValue() {
@@ -262,9 +263,7 @@ function handleInput(el, Alpine) {
     Alpine.bind(el, {
         // Setup...
         'x-ref': '__input',
-        ':id'() {
-            return this.$id('alpine-combobox-input')
-        },
+        ':id'() { return this.$id('alpine-combobox-input') },
 
         // Accessibility attributes...
         'role': 'combobox',
@@ -273,15 +272,9 @@ function handleInput(el, Alpine) {
 
         // We need to defer this evaluation a bit because $refs that get declared later
         // in the DOM aren't available yet when x-ref is the result of an Alpine.bind object.
-        async ':aria-controls'() {
-            return await microtask(() => this.$refs.__options && this.$refs.__options.id)
-        },
-        ':aria-expanded'() {
-            return this.$data.__isDisabled ? undefined : this.$data.__isOpen
-        },
-        ':aria-multiselectable'() {
-            return this.$data.__isMultiple ? true : undefined
-        },
+        async ':aria-controls'() { return await microtask(() => this.$refs.__options && this.$refs.__options.id) },
+        ':aria-expanded'() { return this.$data.__isDisabled ? undefined : this.$data.__isOpen },
+        ':aria-multiselectable'() { return this.$data.__isMultiple ? true : undefined },
         ':aria-activedescendant'() {
             if (! this.$data.__context.hasActive()) return
 
@@ -289,9 +282,7 @@ function handleInput(el, Alpine) {
 
             return active ? active.el.id : null
         },
-        ':aria-labelledby'() {
-            return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null)
-        },
+        ':aria-labelledby'() { return this.$refs.__label ? this.$refs.__label.id : (this.$refs.__button ? this.$refs.__button.id : null) },
 
         // Initialize...
         'x-init'() {
@@ -306,9 +297,7 @@ function handleInput(el, Alpine) {
                 this.$dispatch('change')
             }
         },
-        '@blur'() {
-            this.$data.__stopTyping()
-        },
+        '@blur'() { this.$data.__stopTyping(false) },
         '@keydown'(e) {
             queueMicrotask(() => this.$data.__context.activateByKeyEvent(e, false, () => this.$data.__isOpen, () => this.$data.__open(), (state) => this.$data.__isTyping = state))
         },
@@ -362,9 +351,7 @@ function handleButton(el, Alpine) {
     Alpine.bind(el, {
         // Setup...
         'x-ref': '__button',
-        ':id'() {
-            return this.$id('alpine-combobox-button')
-        },
+        ':id'() { return this.$id('alpine-combobox-button') },
 
         // Accessibility attributes...
         'aria-haspopup': 'true',
@@ -398,9 +385,7 @@ function handleButton(el, Alpine) {
 function handleLabel(el, Alpine) {
     Alpine.bind(el, {
         'x-ref': '__label',
-        ':id'() {
-            return this.$id('alpine-combobox-label')
-        },
+        ':id'() { return this.$id('alpine-combobox-label') },
         '@click'() { this.$refs.__input.focus({ preventScroll: true }) },
     })
 }
@@ -409,9 +394,7 @@ function handleOptions(el, Alpine) {
     Alpine.bind(el, {
         // Setup...
         'x-ref': '__options',
-        ':id'() {
-            return this.$id('alpine-combobox-options')
-        },
+        ':id'() { return this.$id('alpine-combobox-options') },
 
         // Accessibility attributes...
         'role': 'combobox',
@@ -426,21 +409,15 @@ function handleOptions(el, Alpine) {
             }
         },
 
-        'x-show'() {
-            return this.$data.__isStatic ? true : this.$data.__isOpen
-        },
+        'x-show'() { return this.$data.__isStatic ? true : this.$data.__isOpen },
     })
 }
 
 function handleOption(el, Alpine) {
     Alpine.bind(el, {
         // Setup...
-        'x-id'() {
-            return ['alpine-combobox-option']
-        },
-        ':id'() {
-            return this.$id('alpine-combobox-option')
-        },
+        'x-id'() { return ['alpine-combobox-option'] },
+        ':id'() { return this.$id('alpine-combobox-option') },
 
         // Accessibility attributes...
         'role': 'option',