diff --git a/ui/common.css b/ui/common.css index c973339..98a96c9 100644 --- a/ui/common.css +++ b/ui/common.css @@ -489,6 +489,20 @@ body { color: #e9a; } +.form1 > fieldset .field.highlight > input[type="text"], +.form1 > fieldset .field.highlight > input[type="file"], +.form1 > fieldset .field.highlight > input[type="email"], +.form1 > fieldset .field.highlight > input[type="number"], +.form1 > fieldset .field.highlight > input[type="search"], +.form1 > fieldset .field.highlight > input[type="tel"], +.form1 > fieldset .field.highlight > input[type="url"], +.form1 > fieldset .field.highlight > input[type="password"], +.form1 > fieldset .field.highlight > select, +.form1 > fieldset .field.highlight > textarea { + background: #666; + border-bottom: 2px solid #ccc; +} + .form1 > fieldset .field.error > input[type="text"], .form1 > fieldset .field.error > input[type="file"], .form1 > fieldset .field.error > input[type="email"], @@ -552,6 +566,7 @@ body { border-style: solid; } +.form1 > fieldset .field > button:focus, .form1 > fieldset .field > button:hover { border-color: #a56; background: #c78; @@ -562,10 +577,6 @@ body { border-color: #a56; } -.form1 > fieldset .field > button:focus { - outline: 1px dotted #eee; -} - .form1 > fieldset .field > button.secondary { float: right; background: transparent; @@ -573,6 +584,7 @@ body { border-color: #eee; } +.form1 > fieldset .field > button.secondary:focus, .form1 > fieldset .field > button.secondary:hover { border-color: #ddd; color: #ddd; @@ -582,3 +594,79 @@ body { border-color: #666; color: #666; } + +.form1 > fieldset .field > ul.input-suggestions { + background: #262626; + box-shadow: 0 0 3px #0006; + border: 1px solid #666; + position: relative; + margin: 3px; +} + +.form1 > fieldset .field > ul.input-suggestions::before, +.form1 > fieldset .field > ul.input-suggestions::after { + top: -5px; + left: 5px; + position: absolute; + z-index: 1; + display: block; + content: " "; + width: 10px; + height: 10px; + background: #262626; + transform: rotate(45deg); +} + +.form1 > fieldset .field > ul.input-suggestions::after { + top: -6px; + z-index: 0; + background: #666; +} + +.form1 > fieldset .field > ul.input-suggestions > li { + position: relative; + z-index: 2; + padding: 10px; + cursor: pointer; + border-bottom: 1px solid #222; +} + +.form1 > fieldset .field > ul.input-suggestions > li:hover, +.form1 > fieldset .field > ul.input-suggestions > li.current { + background: #555; + border-bottom: 1px solid #555; +} + +.form1 > fieldset .field > ul.input-suggestions > li:first-child:hover::before, +.form1 + > fieldset + .field + > ul.input-suggestions + > li.current:first-child::before { + top: -6px; + position: absolute; + z-index: 0; + left: 5px; + display: block; + content: " "; + width: 10px; + height: 10px; + background: #555; + transform: rotate(45deg); +} + +.form1 > fieldset .field > ul.input-suggestions > li:last-child { + border-bottom: none; +} + +.form1 > fieldset .field > ul.input-suggestions > li > .sugt-title { + color: #fff; + font-weight: bold; + margin: 0 5px; +} + +.form1 > fieldset .field > ul.input-suggestions > li > .sugt-value { + color: #fdd; + font-size: 0.9em; + margin: 0 5px; +} diff --git a/ui/widgets/connector.vue b/ui/widgets/connector.vue index 6076631..cf2b806 100644 --- a/ui/widgets/connector.vue +++ b/ui/widgets/connector.vue @@ -61,7 +61,7 @@ v-for="(field, key) in current.fields" :key="key" class="field" - :class="{ error: field.error.length > 0 }" + :class="{ error: field.error.length > 0, highlight: field.highlighted }" > {{ field.field.name }} @@ -74,8 +74,13 @@ :name="field.field.name" :placeholder="field.field.example" :autofocus="field.autofocus" - @input="verify(key, field, false)" - @change="verify(key, field, true)" + :tabindex="field.tabIndex" + :disabled="field.field.readonly" + @keydown="keydown($event, key, field)" + @focus="focus(key, field, true)" + @blur="focus(key, field, false)" + @input="changed(key, field, false)" + @change="changed(key, field, true)" /> {{ option }} + +
{{ field.error }}
{{ field.message }} @@ -196,8 +252,11 @@