diff --git a/packages/docs/components/Input.md b/packages/docs/components/Input.md index 01e6fbb8f..759f7712d 100644 --- a/packages/docs/components/Input.md +++ b/packages/docs/components/Input.md @@ -37,36 +37,36 @@ title: Input ### Props -| Prop name | Description | Type | Values | Default | -| ------------------ | -------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| autocomplete | Native options to use in HTML5 validation | string | - |
From config:
input: {
  autocomplete: "off"
} | -| autosize | Automatically adjust height in textarea | boolean | - | false | -| clearIcon | Icon name to be added on the clear button | string | - |
From config:
input: {
  clearIcon: "close-c ircle"
} | -| clearable | Add a button/icon to clear the inputed text | boolean | - |
From config:
input: {
  clearable: false
} | -| counter | Show character counter when maxlength prop is passed | boolean | - |
From config:
input: {
  counter: false
} | -| debounce | Number of milliseconds to delay before to emit input event | number | - |
From config:
autocomplete: {
  debounce: 400
} | -| disabled | Same as native disabled | boolean | - | false | -| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | -| icon | Icon to be shown | string | - |
From config:
input: {
  icon: undefined
} | -| iconClickable | Makes the icon clickable | boolean | - | false | -| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
input: {
  iconPack: undefined
} | -| iconRight | Icon to be added on the right side | string | - |
From config:
input: {
  iconRight: undefined
} | -| iconRightClickable | Make the icon right clickable | boolean | - | false | -| iconRightVariant | Variant of right icon | string | - | | -| id | Same as native id. Also set the for label for o-field wrapper. | string | - | uuid() | -| maxlength | Same as native maxlength, plus character counter | string \| number | - | | -| v-model | The input value state | string \| number | - | | -| number | Convert the modelValue into type `number` | boolean | - | | -| override | Override existing theme classes completely | boolean | - | | -| passwordReveal | Adds the reveal password functionality | boolean | - | false | -| placeholder | Input placeholder | string | - | | -| rounded | Makes the element rounded | boolean | - | false | -| size | Size of the control | string | `small`, `medium`, `large` |
From config:
input: {
  size: undefined
} | -| statusIcon | Show status icon using field and variant prop | boolean | - |
From config:
{
  statusIcon: true
} | -| type | Input type, like native | string | `Any native input type`, `and textarea` | "text" | -| useHtml5Validation | Enable html 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | -| validationMessage | The message which is shown when a validation error occurs | string | - | | -| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
input: {
  variant: undefined
} | +| Prop name | Description | Type | Values | Default | +| ------------------ | -------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autocomplete | Native options to use in HTML5 validation | string | - |
From config:
input: {
  autocomplete: "off"
} | +| autosize | Automatically adjust height in textarea | boolean | - | false | +| clearIcon | Icon name to be added on the clear button | string | - |
From config:
input: {
  clearIcon: "close-circle"
} | +| clearable | Add a button/icon to clear the inputed text | boolean | - |
From config:
input: {
  clearable: false
} | +| counter | Show character counter when maxlength prop is passed | boolean | - |
From config:
input: {
  counter: false
} | +| debounce | Number of milliseconds to delay before to emit input event | number | - |
From config:
autocomplete: {
  debounce: 400
} | +| disabled | Same as native disabled | boolean | - | false | +| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | +| icon | Icon to be shown | string | - |
From config:
input: {
  icon: undefined
} | +| iconClickable | Makes the icon clickable | boolean | - | false | +| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
input: {
  iconPack: undefined
} | +| iconRight | Icon to be added on the right side | string | - |
From config:
input: {
  iconRight: undefined
} | +| iconRightClickable | Make the icon right clickable | boolean | - | false | +| iconRightVariant | Variant of right icon | string | - | | +| id | Same as native id. Also set the for label for o-field wrapper. | string | - | uuid() | +| maxlength | Same as native maxlength, plus character counter | string \| number | - | | +| v-model | The input value state | string \| number | - | | +| number | Convert the ´modelValue`into type`number` | boolean | - | | +| override | Override existing theme classes completely | boolean | - | | +| passwordReveal | Adds the reveal password functionality | boolean | - | false | +| placeholder | Input placeholder | string | - | | +| rounded | Makes the element rounded | boolean | - | false | +| size | Size of the control | string | `small`, `medium`, `large` |
From config:
input: {
  size: undefined
} | +| statusIcon | Show status icon using field and variant prop | boolean | - |
From config:
{
  statusIcon: true
} | +| type | Input type, like native | string | `Any native input type`, `and textarea` | "text" | +| useHtml5Validation | Enable html 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | +| validationMessage | The message which is shown when a validation error occurs | string | - | | +| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
input: {
  variant: undefined
} | ### Events diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue index 9796cbb20..9ade84ccc 100644 --- a/packages/oruga/src/components/input/Input.vue +++ b/packages/oruga/src/components/input/Input.vue @@ -57,7 +57,7 @@ const props = withDefaults(defineProps>(), { iconRightClickable: false, iconRightVariant: undefined, clearable: getOption("input.clearable", false), - clearIcon: getOption("input.clearIcon", "close-c ircle"), + clearIcon: getOption("input.clearIcon", "close-circle"), statusIcon: getOption("statusIcon", true), debounce: getOption("autocomplete.debounce", 400), autocomplete: getOption("input.autocomplete", "off"), diff --git a/packages/oruga/src/components/input/props.ts b/packages/oruga/src/components/input/props.ts index 9668e68fd..276ca24ad 100644 --- a/packages/oruga/src/components/input/props.ts +++ b/packages/oruga/src/components/input/props.ts @@ -9,7 +9,7 @@ export type InputProps = { */ modelValue?: IsNumber extends true ? number : string; /** - * Convert the modelValue into type `number` + * Convert the ´modelValue` into type `number` * @type boolean */ number?: IsNumber;