@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
66 lines (65 loc) • 1.89 kB
HTML
<div class="input-wrapper -prepended -appended" :class="classes">
<div class="input-prepend">
<slot name="prepend" />
<i-button
type="button"
:color="color"
:size="size"
:disabled="disabled"
class="input-button-decrease"
@click="decrease"
>
-
</i-button>
</div>
<div class="input">
<span class="input-prefix" v-if="$slots.prefix">
<slot name="prefix" />
</span>
<input
v-bind="$attrs"
:value="value"
ref="input"
:name="name"
:id="id"
type="text"
:tabindex="tabIndex"
:disabled="isDisabled"
:aria-disabled="isDisabled ? 'true' : false"
:readonly="isReadonly"
:aria-readonly="isReadonly ? 'true' : false"
@input="onInput"
@blur="onBlur"
>
<span
class="input-suffix"
v-if="$slots.suffix || clearable && isClearable"
>
<slot name="clearable" :clear="onClear">
<i
class="input-clear"
role="button"
:aria-label="clearAriaLabel"
:aria-hidden="isClearable ? 'false' : 'true'"
v-if="clearable"
v-show="isClearable"
@click="onClear"
/>
</slot>
<slot name="suffix" />
</span>
</div>
<div class="input-append">
<i-button
type="button"
:color="color"
:size="size"
:disabled="disabled"
class="input-button-increase"
@click="increase"
>
+
</i-button>
<slot name="append" />
</div>
</div>