From 16dfd098cd34c2b1c5b6e1886c1ca44d3ba3bdec Mon Sep 17 00:00:00 2001 From: mm <25961416+mlmoravek@users.noreply.github.com> Date: Wed, 23 Oct 2024 09:43:13 +0200 Subject: [PATCH] feat(1008): unify component options/items definiton (#1065) --- .scripts/utils.mjs | 1 - packages/docs/components/Autocomplete.md | 90 +- packages/docs/components/Dropdown.md | 1 + packages/docs/components/Sidebar.md | 4 +- packages/docs/components/Steps.md | 47 +- packages/docs/components/Tabs.md | 35 +- packages/docs/components/Taginput.md | 76 +- packages/docs/docgen.config.js | 1 - .../components/autocomplete/Autocomplete.vue | 604 +++++-------- .../components/autocomplete/examples/base.vue | 3 +- .../autocomplete/examples/groups.vue | 36 +- .../autocomplete/examples/infinite-scroll.vue | 1 - .../autocomplete/examples/inspector.vue | 9 +- .../autocomplete/examples/objects-array.vue | 321 ++++--- .../src/components/autocomplete/props.ts | 131 +++ .../__snapshots__/autocomplete.test.ts.snap | 1 + .../autocomplete/tests/autocomplete.test.ts | 135 +++ .../src/components/datepicker/Datepicker.vue | 10 +- .../oruga/src/components/datepicker/props.ts | 2 +- .../__snapshots__/datepicker.test.ts.snap | 4 +- .../__snapshots__/datetimepicker.test.ts.snap | 10 +- .../src/components/dropdown/Dropdown.vue | 41 +- .../src/components/dropdown/DropdownItem.vue | 2 + .../components/dropdown/examples/index.vue | 6 + .../components/dropdown/examples/options.vue | 29 + .../oruga/src/components/dropdown/props.ts | 9 +- .../dropdown.integration.test.ts.snap | 8 +- .../tests/__snapshots__/dropdown.test.ts.snap | 1 + .../tests/dropdown.integration.test.ts | 138 ++- .../oruga/src/components/select/Select.vue | 63 +- .../src/components/select/examples/base.vue | 4 +- packages/oruga/src/components/select/index.ts | 2 +- packages/oruga/src/components/select/props.ts | 12 +- .../components/select/tests/select.test.ts | 162 +++- packages/oruga/src/components/select/types.ts | 13 - .../oruga/src/components/steps/StepItem.vue | 3 +- packages/oruga/src/components/steps/Steps.vue | 279 ++---- .../src/components/steps/examples/base.vue | 4 +- packages/oruga/src/components/steps/props.ts | 108 +++ packages/oruga/src/components/steps/types.ts | 4 +- packages/oruga/src/components/table/Table.vue | 2 +- .../oruga/src/components/tabs/TabItem.vue | 2 +- packages/oruga/src/components/tabs/Tabs.vue | 231 ++--- .../src/components/tabs/examples/sizes.vue | 70 +- packages/oruga/src/components/tabs/props.ts | 79 ++ packages/oruga/src/components/tabs/types.ts | 36 +- .../src/components/taginput/Taginput.vue | 402 +++------ .../taginput/examples/autocomplete.vue | 327 ++++--- .../taginput/examples/custom-selected.vue | 15 +- .../components/taginput/examples/disabled.vue | 2 +- .../taginput/examples/inspector.vue | 490 ++++------- .../components/taginput/examples/limits.vue | 6 +- .../components/taginput/examples/variants.vue | 12 +- .../oruga/src/components/taginput/props.ts | 125 +++ .../tests/__snapshots__/taginput.test.ts.snap | 2 + .../taginput/tests/taginput.test.ts | 135 +++ .../src/components/timepicker/Timepicker.vue | 2 +- .../__snapshots__/timepicker.test.ts.snap | 4 +- packages/oruga/src/components/types.ts | 68 +- packages/oruga/src/composables/index.ts | 1 + .../src/composables/tests/useOptions.test.ts | 805 ++++++++++++++++++ packages/oruga/src/composables/useOptions.ts | 329 +++++++ packages/oruga/src/types/config.ts | 11 + 63 files changed, 3563 insertions(+), 2003 deletions(-) create mode 100644 packages/oruga/src/components/autocomplete/props.ts create mode 100644 packages/oruga/src/components/dropdown/examples/options.vue create mode 100644 packages/oruga/src/components/steps/props.ts create mode 100644 packages/oruga/src/components/tabs/props.ts create mode 100644 packages/oruga/src/components/taginput/props.ts create mode 100644 packages/oruga/src/composables/tests/useOptions.test.ts create mode 100644 packages/oruga/src/composables/useOptions.ts diff --git a/.scripts/utils.mjs b/.scripts/utils.mjs index 1bb80c260..5e330540b 100644 --- a/.scripts/utils.mjs +++ b/.scripts/utils.mjs @@ -4,7 +4,6 @@ import path from 'path'; // Components to be ignored const IGNORE = [ - "FieldBody", "SliderThumb", "TableMobileSort", "TablePagination", diff --git a/packages/docs/components/Autocomplete.md b/packages/docs/components/Autocomplete.md index add933255..ed85e1eaa 100644 --- a/packages/docs/components/Autocomplete.md +++ b/packages/docs/components/Autocomplete.md @@ -33,53 +33,49 @@ ### Props -| Prop name | Description | Type | Values | Default | -| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| animation | Transition name to apply on dropdown list | string | - |
From config:
autocomplete: {
  animation: "fade"
} | -| autocomplete | Native options to use in HTML5 validation | string | - |
From config:
autocomplete: {
  autocomplete: "off"
} | -| checkScroll | Makes the component check if list reached scroll start or end and emit scroll events. | boolean | - |
From config:
autocomplete: {
  checkScroll: false
} | -| clearIcon | Icon name to be added on the clear button | string | - |
From config:
autocomplete: {
  clearIcon: "close-circle"
} | -| clearOnSelect | Clear input text on select | boolean | - |
From config:
autocomplete: {
  clearOnSelect: false
} | -| clearable | Add a button/icon to clear the inputed text | boolean | - |
From config:
autocomplete: {
  clearable: false
} | -| confirmKeys | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | string[] | - |
From config:
autocomplete: {
  confirmKeys: ["Tab","Enter"]
} | -| customValidity | Custom HTML 5 validation error to set on the form control | \| string
\| ((
currentValue: T \| null \| undefined,
state: ValidityState,
) => string) | - | "" | -| debounce | Number of milliseconds to delay before to emit input event | number | - |
From config:
autocomplete: {
  debounce: 400
} | -| disabled | Same as native input disabled | boolean | - | false | -| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | -| field | Property of the object (if `options` are an array of objects) to use as display text, and to keep track of selected option | string | - | | -| filter | Function to filter the options based on the input value - default is display text comparison | (options: T[], value: string) => T[] | - | | -| formatter | Function to format an option to a string for display it in the input (as alternative to field prop) | (value: unknown, option: T) => string | - | | -| groupField | Property of the object (if `options` are an array of objects) to use as display text of group | string | - | | -| groupOptions | Property of the object (if `options` are an array of objects) to use as key to get items array of each group | string | - | | -| icon | Icon to be shown | string | - |
From config:
autocomplete: {
  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:
autocomplete: {
  iconPack: undefined
} | -| iconRight | Icon to be added on the right side | string | - |
From config:
autocomplete: {
  iconRight: undefined
} | -| iconRightClickable | Make the icon right clickable | boolean | - | false | -| iconRightVariant | Variant of right icon | string | - | | -| input | The value of the inner input, use v-model:input to make it two-way binding | string | - | "" | -| itemTag | Menu item tag name | DynamicComponent | - |
From config:
autocomplete: {
  itemTag: "div"
} | -| keepFirst | The first option will always be pre-selected (easier to just hit enter or tab) | boolean | - |
From config:
autocomplete: {
  keepFirst: false
} | -| keepOpen | Keep open dropdown list after select | boolean | - |
From config:
autocomplete: {
  keepOpen: false
} | -| maxHeight | Max height of dropdown content | string\|number | - |
From config:
autocomplete: {
  maxHeight: undefined
} | -| maxlength | Same as native maxlength, plus character counter | string\|number | - | | -| menuTag | Menu tag name | DynamicComponent | - |
From config:
autocomplete: {
  menuTag: "div"
} | -| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
autocomplete: {
  mobileModal: false
} | -| v-model | The selected option, use v-model to make it two-way binding | T | - | | -| openOnFocus | Open dropdown list on focus | boolean | - |
From config:
autocomplete: {
  openOnFocus: false
} | -| options | Options / suggestions | string[]\|object[] | - | Default function (see source code) | -| override | Override existing theme classes completely | boolean | - | | -| placeholder | Input placeholder | string | - | | -| position | Position of the dropdown | string | `auto`, `top`, `bottom` |
From config:
autocomplete: {
  position: "auto"
} | -| rounded | Makes the element rounded | boolean | - | false | -| selectOnClickOutside | Trigger the select event for the first pre-selected option when clicking outside and `keep-first` is enabled | boolean | - | false | -| selectableFooter | Allows the footer in the autocomplete to be selectable | boolean | - | false | -| selectableHeader | Allows the header in the autocomplete to be selectable | boolean | - | false | -| size | Size of the control | string | `small`, `medium`, `large` |
From config:
autocomplete: {
  size: undefined
} | -| statusIcon | Show status icon using field and variant prop | boolean | - |
From config:
{
  statusIcon: true
} | -| teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | boolean\|string\|object | - |
From config:
autocomplete: {
  teleport: false
} | -| type | Input type | string | - | "text" | -| useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | +| Prop name | Description | Type | Values | Default | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| animation | Transition name to apply on dropdown list | string | - |
From config:
autocomplete: {
  animation: "fade"
} | +| autocomplete | Native options to use in HTML5 validation | string | - |
From config:
autocomplete: {
  autocomplete: "off"
} | +| checkScroll | Makes the component check if list reached scroll start or end and emit scroll events. | boolean | - |
From config:
autocomplete: {
  checkScroll: false
} | +| clearIcon | Icon name to be added on the clear button | string | - |
From config:
autocomplete: {
  clearIcon: "close-circle"
} | +| clearOnSelect | Clear input text on select | boolean | - |
From config:
autocomplete: {
  clearOnSelect: false
} | +| clearable | Add a button/icon to clear the inputed text | boolean | - |
From config:
autocomplete: {
  clearable: false
} | +| confirmKeys | Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) | string[] | - |
From config:
autocomplete: {
  confirmKeys: ["Tab","Enter"]
} | +| customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: string \| number \| object, state: ValidityState) => string) | - | | +| debounce | Number of milliseconds to delay before to emit input event | number | - |
From config:
autocomplete: {
  debounce: 400
} | +| disabled | Same as native input disabled | boolean | - | false | +| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | +| filter | Function to filter the options based on the input value - default is label string comparison | (options: string \| number \| object, value: string) => boolean | - | | +| icon | Icon to be shown | string | - |
From config:
autocomplete: {
  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:
autocomplete: {
  iconPack: undefined
} | +| iconRight | Icon to be added on the right side | string | - |
From config:
autocomplete: {
  iconRight: undefined
} | +| iconRightClickable | Make the icon right clickable | boolean | - | false | +| iconRightVariant | Variant of right icon | string | - | | +| input | The value of the inner input, use v-model:input to make it two-way binding | string | - | "" | +| itemTag | Menu item tag name | DynamicComponent | - |
From config:
autocomplete: {
  itemTag: "div"
} | +| keepFirst | The first option will always be pre-selected (easier to just hit enter or tab) | boolean | - |
From config:
autocomplete: {
  keepFirst: false
} | +| keepOpen | Keep open dropdown list after select | boolean | - |
From config:
autocomplete: {
  keepOpen: false
} | +| maxHeight | Max height of dropdown content | string \| number | - |
From config:
autocomplete: {
  maxHeight: undefined
} | +| maxlength | Same as native maxlength, plus character counter | string \| number | - | | +| menuTag | Menu tag name | DynamicComponent | - |
From config:
autocomplete: {
  menuTag: "div"
} | +| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
autocomplete: {
  mobileModal: false
} | +| v-model | The selected option value, use v-model to make it two-way binding | string \| number \| object | - | | +| openOnFocus | Open dropdown list on focus | boolean | - |
From config:
autocomplete: {
  openOnFocus: false
} | +| options | Autocomplete options | string[]\|object[] | - | | +| override | Override existing theme classes completely | boolean | - | | +| placeholder | Input placeholder | string | - | | +| position | Position of the dropdown | "auto" \| "top" \| "bottom" | `auto`, `top`, `bottom` |
From config:
autocomplete: {
  position: "auto"
} | +| rounded | Makes the element rounded | boolean | - | false | +| selectOnClickOutside | Trigger the select event for the first pre-selected option when clicking outside and `keep-first` is enabled | boolean | - | false | +| selectableFooter | Allows the footer in the autocomplete to be selectable | boolean | - | false | +| selectableHeader | Allows the header in the autocomplete to be selectable | boolean | - | false | +| size | Size of the control | string | `small`, `medium`, `large` |
From config:
autocomplete: {
  size: undefined
} | +| statusIcon | Show status icon using field and variant prop | boolean | - |
From config:
{
  statusIcon: true
} | +| teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | string \| boolean \| object | - |
From config:
autocomplete: {
  teleport: false
} | +| type | Input type | string | - | "text" | +| useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | ### Events diff --git a/packages/docs/components/Dropdown.md b/packages/docs/components/Dropdown.md index 265feb387..bc23057ff 100644 --- a/packages/docs/components/Dropdown.md +++ b/packages/docs/components/Dropdown.md @@ -57,6 +57,7 @@ sidebarDepth: 2 | mobileBreakpoint | | | - |
From config:
dropdown: {
  mobileBreakpoint: undefined
} | | mobileModal | | | - |
From config:
dropdown: {
  mobileModal: true
} | | v-model | | | - | | +| options | | | - | | | override | | | - | | | position | | | - |
From config:
dropdown: {
  position: "bottom-left"
} | | scrollable | | | - | false | diff --git a/packages/docs/components/Sidebar.md b/packages/docs/components/Sidebar.md index c1e9b9087..e5fa314bd 100644 --- a/packages/docs/components/Sidebar.md +++ b/packages/docs/components/Sidebar.md @@ -45,11 +45,11 @@ | fullheight | Show sidebar in fullheight | boolean | - |
From config:
sidebar: {
  fullheight: false
} | | fullwidth | Show sidebar in fullwidth | boolean | - |
From config:
sidebar: {
  fullwidth: false
} | | inline | Display the Sidebear inline | boolean | - | false | -| mobile | Custom layout on mobile | "fullwidth" \| "reduced" \| "hidden" | `fullwidth`, `reduced`, `hidden` |
From config:
sidebar: {
  mobile: undefined
} | +| mobile | Custom layout on mobile | "hidden" \| "fullwidth" \| "reduced" | `fullwidth`, `reduced`, `hidden` |
From config:
sidebar: {
  mobile: undefined
} | | mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
sidebar: {
  mobileBreakpoint: undefined
} | | overlay | Show an overlay like modal | boolean | - |
From config:
sidebar: {
  overlay: false
} | | override | Override existing theme classes completely | boolean | - | | -| position | Sidebar position | "bottom" \| "top" \| "left" \| "right" | `top`, `right`, `bottom`, `left` |
From config:
sidebar: {
  position: "left"
} | +| position | Sidebar position | "top" \| "bottom" \| "left" \| "right" | `top`, `right`, `bottom`, `left` |
From config:
sidebar: {
  position: "left"
} | | props | Props to be binded to the injected component. | Record<string, any> | - | | | reduce | Show a small sidebar | boolean | - |
From config:
sidebar: {
  reduce: false
} | | scroll | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,
but will set body to position fixed, might break some layouts. | "keep" \| "clip" | `keep`, `clip` |
From config:
sidebar: {
  scroll: "clip"
} | diff --git a/packages/docs/components/Steps.md b/packages/docs/components/Steps.md index 48c2a3cd1..7fecc7d79 100644 --- a/packages/docs/components/Steps.md +++ b/packages/docs/components/Steps.md @@ -37,27 +37,28 @@ sidebarDepth: 2 ### Props -| Prop name | Description | Type | Values | Default | -| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| animateInitially | Apply animation on the initial render | boolean | - |
From config:
steps: {
  animateInitially: false
} | -| animated | Step navigation is animated | boolean | - |
From config:
steps: {
  animated: true
} | -| animation | Transition animation name | string[] | `[next`, `prev]`, `[right`, `left`, `down`, `up]` |
From config:
steps: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
} | -| ariaNextLabel | Accessibility next button aria label | string | - |
From config:
steps: {
  ariaNextLabel: undefined
} | -| ariaPreviousLabel | Accessibility previous button aria label | string | - |
From config:
steps: {
  ariaPreviousLabel: undefined
} | -| destroyOnHide | Destroy stepItem on hide | boolean | - | false | -| hasNavigation | Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. | boolean | - | true | -| iconNext | Icon to use for navigation button | string | - |
From config:
steps: {
  iconNext: "chevron-right"
} | -| iconPack | Icon pack to use for the navigation | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
steps: {
  iconPack: undefined
} | -| iconPrev | Icon to use for navigation button | string | - |
From config:
steps: {
  iconPrev: "chevron-left"
} | -| labelPosition | Position of the marker label | string | `bottom`, `right`, `left` |
From config:
steps: {
  labelPosition: "bottom"
} | -| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
steps: {
  mobileBreakpoint: undefined
} | -| v-model | The selected item value | string\|number\|object | - | | -| override | Override existing theme classes completely | boolean | - | | -| position | Position of the step | string | `left`, `centered`, `right` | | -| rounded | Rounded step markers | boolean | - | true | -| size | Step size | string | `small`, `medium`, `large` |
From config:
steps: {
  size: undefined
} | -| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
steps: {
  variant: undefined
} | -| vertical | Show step in vertical layout | boolean | - | false | +| Prop name | Description | Type | Values | Default | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| animateInitially | Apply animation on the initial render | boolean | - |
From config:
steps: {
  animateInitially: false
} | +| animated | Step navigation is animated | boolean | - |
From config:
steps: {
  animated: true
} | +| animation | Transition animation name | [string, string] \| [string, string, string, string] | `[next`, `prev]`, `[right`, `left`, `down`, `up]` |
From config:
steps: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
} | +| ariaNextLabel | Accessibility next button aria label | string | - |
From config:
steps: {
  ariaNextLabel: undefined
} | +| ariaPreviousLabel | Accessibility previous button aria label | string | - |
From config:
steps: {
  ariaPreviousLabel: undefined
} | +| destroyOnHide | Destroy stepItem on hide | boolean | - | false | +| hasNavigation | Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. | boolean | - | true | +| iconNext | Icon to use for navigation button | string | - |
From config:
steps: {
  iconNext: "chevron-right"
} | +| iconPack | Icon pack to use for the navigation | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
steps: {
  iconPack: undefined
} | +| iconPrev | Icon to use for navigation button | string | - |
From config:
steps: {
  iconPrev: "chevron-left"
} | +| labelPosition | Position of the marker label | "bottom" \| "left" \| "right" | `bottom`, `right`, `left` |
From config:
steps: {
  labelPosition: "bottom"
} | +| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
steps: {
  mobileBreakpoint: undefined
} | +| v-model | The selected item value | string\|number\|object | - | | +| options | Steps options, unnecessary when default slot is used | OptionsProp<string \| number \| object> | - | | +| override | Override existing theme classes completely | boolean | - | | +| position | Position of the step | "left" \| "right" \| "centered" | `left`, `centered`, `right` | | +| rounded | Rounded step markers | boolean | - | true | +| size | Step size | string | `small`, `medium`, `large` |
From config:
steps: {
  size: undefined
} | +| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
steps: {
  variant: undefined
} | +| vertical | Show step in vertical layout | boolean | - | false | ### Events @@ -89,10 +90,14 @@ sidebarDepth: 2 | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | ariaRole | Role attribute to be passed to the div wrapper for better accessibility | string | - |
From config:
steps: {
  ariaRole: "tab"
} | | clickable | Item can be used directly to navigate.
If undefined, previous steps are clickable while the others are not | boolean | - | | +| component | Component to be injected. | Component | - | | +| content | Text content, unnecessary when default slot is used | string | - | | +| events | Events to be binded to the injected component | object | - | {} | | icon | Icon on the left | string | - |
From config:
steps: {
  icon: undefined
} | | iconPack | Icon pack | string | - |
From config:
steps: {
  iconPack: undefined
} | | label | Item label | string | - | | | override | Override existing theme classes completely | boolean | - | | +| props | Props to be binded to the injected component | object | - | {} | | step | Step marker content (when there is no icon) | string\|number | - | | | tag | Step item tag name | DynamicComponent | - |
From config:
steps: {
  itemTag: "button"
} | | value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | Default function (see source code) | diff --git a/packages/docs/components/Tabs.md b/packages/docs/components/Tabs.md index 737fdba1c..5bc9f95dc 100644 --- a/packages/docs/components/Tabs.md +++ b/packages/docs/components/Tabs.md @@ -37,21 +37,22 @@ sidebarDepth: 2 ### Props -| Prop name | Description | Type | Values | Default | -| ---------------- | ----------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| animateInitially | Apply animation on the initial render | boolean | - |
From config:
tabs: {
  animateInitially: false
} | -| animated | Tab will have an animation | boolean | - |
From config:
tabs: {
  animated: true
} | -| animation | Transition animation name | string[] | `[next`, `prev]`, `[right`, `left`, `down`, `up]` |
From config:
tabs: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
} | -| destroyOnHide | Destroy tabItem on hide | boolean | - | false | -| expanded | Tabs will be expanded (full-width) | boolean | - | false | -| v-model | The selected item value | string\|number\|object | - | 0 | -| multiline | Show tab items multiline when there is no space | boolean | - | false | -| override | Override existing theme classes completely | boolean | - | | -| position | Position of the tabs | string | `left`, `centered`, `right` | | -| size | Tab size | string | `small`, `medium`, `large` |
From config:
tabs: {
  size: undefined
} | -| type | Tab type | string | `default`, `boxed`, `toggle`, `pills` |
From config:
tabs: {
  type: "default"
} | -| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
tabs: {
  variant: undefined
} | -| vertical | Show tab in vertical layout | boolean | - |
From config:
tabs: {
  vertical: false
} | +| Prop name | Description | Type | Values | Default | +| ---------------- | --------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| animateInitially | Apply animation on the initial render | boolean | - |
From config:
tabs: {
  animateInitially: false
} | +| animated | Tab will have an animation | boolean | - |
From config:
tabs: {
  animated: true
} | +| animation | Transition animation name | [string, string] \| [string, string, string, string] | `[next`, `prev]`, `[right`, `left`, `down`, `up]` |
From config:
tabs: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]
} | +| destroyOnHide | Destroy tabItem on hide | boolean | - | false | +| expanded | Tabs will be expanded (full-width) | boolean | - | false | +| v-model | The selected item value | string\|number\|object | - | | +| multiline | Show tab items multiline when there is no space | boolean | - | false | +| options | Tabs options, unnecessary when default slot is used | OptionsProp<string \| number \| object> | - | | +| override | Override existing theme classes completely | boolean | - | | +| position | Position of the tabs | "left" \| "right" \| "centered" | `left`, `centered`, `right` | | +| size | Tab size | string | `small`, `medium`, `large` |
From config:
tabs: {
  size: undefined
} | +| type | Tab type | string | `default`, `boxed`, `toggle`, `pills` |
From config:
tabs: {
  type: "default"
} | +| variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
tabs: {
  variant: undefined
} | +| vertical | Show tab in vertical layout | boolean | - |
From config:
tabs: {
  vertical: false
} | ### Events @@ -82,11 +83,15 @@ sidebarDepth: 2 | Prop name | Description | Type | Values | Default | | --------- | --------------------------------------------------------------------------------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| component | Component to be injected. | Component | - | | +| content | Text content, unnecessary when default slot is used | string | - | | | disabled | Item will be disabled | boolean | - | false | +| events | Events to be binded to the injected component | object | - | {} | | icon | Icon on the left | string | - |
From config:
tabs: {
  icon: undefined
} | | iconPack | Icon pack | string | - |
From config:
tabs: {
  iconPack: undefined
} | | label | Item label | string | - | | | override | Override existing theme classes completely | boolean | - | | +| props | Props to be binded to the injected component | object | - | {} | | tag | Tabs item tag name | DynamicComponent | - |
From config:
tabs: {
  itemTag: "button"
} | | value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | Default function (see source code) | | visible | Show/hide item | boolean | - | true | diff --git a/packages/docs/components/Taginput.md b/packages/docs/components/Taginput.md index 323be1405..ac37aae68 100644 --- a/packages/docs/components/Taginput.md +++ b/packages/docs/components/Taginput.md @@ -33,44 +33,41 @@ ### Props -| Prop name | Description | Type | Values | Default | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| allowDuplicates | Allows adding the same item multiple time | boolean | - |
From config:
taginput: {
  allowDuplicates: false
} | -| allowNew | Allows adding new items | boolean | - |
From config:
taginput: {
  allowNew: false
} | -| ariaCloseLabel | Accessibility label for the close button | string | - |
From config:
taginput: {
  ariaCloseLabel: undefined
} | -| autocomplete | Native options to use in HTML5 validation | string | - |
From config:
taginput: {
  autocomplete: "off"
} | -| checkScroll | Makes the component check if list reached scroll start or end and emit scroll events. | boolean | - |
From config:
taginput: {
  checkScroll: false
} | -| closable | Add close/delete button to the item | boolean | - |
From config:
taginput: {
  closable: true
} | -| closeIcon | Icon name of close icon on selected item | string | - |
From config:
taginput: {
  closeIcon: "close"
} | -| confirmKeys | Array of keys
(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
which will add a item when typing | string[] | - |
From config:
taginput: {
  confirmKeys: [",","Tab","Enter"]
} | -| counter | Show counter when maxlength or maxtags props are passed | boolean | - |
From config:
taginput: {
  counter: true
} | -| createItem | Function to create a new item to push into v-model (items) | (value: T \| string) => T | - | Default function (see source code) | -| customValidity | Custom HTML 5 validation error to set on the form control | \| string
\| ((
currentValue: T[] \| null \| undefined,
state: ValidityState,
) => string) | - | "" | -| disabled | Same as native input disabled | boolean | - | false | -| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | -| field | Property of the object (if data is array of objects) to use as display text | string | - | "value" | -| filter | Function to filter the options based on the input value - default is display text comparison | (options: T[], value: string) => T[] | - | | -| formatter | Function to format an option to a string for display it in the input (as alternative to field prop) | (value: unknown, option: T) => string | - | | -| groupField | Property of the object (if `data` is array of objects) to use as display text of group | string | - | | -| groupOptions | Property of the object (if `data` is array of objects) to use as key to get items array of each group | string | - | | -| icon | Icon to be shown | string | - |
From config:
taginput: {
  icon: undefined
} | -| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
taginput: {
  iconPack: undefined
} | -| keepFirst | The first option will always be pre-selected (easier to just hit enter or tab) | boolean | - | false | -| keepOpen | Keep open dropdown list after select | boolean | - |
From config:
taginput: {
  keepOpen: false
} | -| maxitems | Limits the number of items, plus item counter | string\|number | - | | -| maxlength | Same as native maxlength, plus character counter | string\|number | - | | -| v-model | The input value state | string[]\|object[] | - | Default function (see source code) | -| openOnFocus | Opens a dropdown with choices when the input field is focused | boolean | - | false | -| options | Items data | string[]\|object[] | - | Default function (see source code) | -| override | Override existing theme classes completely | boolean | - | | -| placeholder | Input placeholder | string | - | | -| removeOnKeys | Allow removing last item when pressing given keys
(https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values),
if input is empty | string[] | - |
From config:
taginput: {
  removeOnKeys: ["Backspace"]
} | -| separators | Array of chars used to split when pasting a new string | string[] | - |
From config:
taginput: {
  separators: [","]
} | -| size | Vertical size of the input control | string | `small`, `medium`, `large` |
From config:
taginput: {
  size: undefined
} | -| teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | boolean\|string\|object | - |
From config:
taginput: {
  teleport: false
} | -| useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | -| validateItem | Function to validate the value of a new item before it got added | (value: T \| string) => boolean | - | Default function (see source code) | -| variant | Color of the each item | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
taginput: {
  variant: undefined
} | +| Prop name | Description | Type | Values | Default | +| ------------------ | ----------- | ---- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| allowDuplicates | | | - |
From config:
taginput: {
  allowDuplicates: false
} | +| allowNew | | | - |
From config:
taginput: {
  allowNew: false
} | +| ariaCloseLabel | | | - |
From config:
taginput: {
  ariaCloseLabel: undefined
} | +| autocomplete | | | - |
From config:
taginput: {
  autocomplete: "off"
} | +| checkScroll | | | - |
From config:
taginput: {
  checkScroll: false
} | +| closable | | | - |
From config:
taginput: {
  closable: true
} | +| closeIcon | | | - |
From config:
taginput: {
  closeIcon: "close"
} | +| confirmKeys | | | - |
From config:
taginput: {
  confirmKeys: [",","Tab","Enter"]
} | +| counter | | | - |
From config:
taginput: {
  counter: true
} | +| createItem | | | - | Default function (see source code) | +| customValidity | | | - | | +| disabled | | | - | false | +| expanded | | | - | false | +| filter | | | - | | +| icon | | | - |
From config:
taginput: {
  icon: undefined
} | +| iconPack | | | - |
From config:
taginput: {
  iconPack: undefined
} | +| input | | | - | "" | +| keepFirst | | | - | false | +| keepOpen | | | - |
From config:
taginput: {
  keepOpen: false
} | +| maxitems | | | - | | +| maxlength | | | - | | +| v-model | | | - | | +| openOnFocus | | | - | false | +| options | | | - | | +| override | | | - | | +| placeholder | | | - | | +| removeOnKeys | | | - |
From config:
taginput: {
  removeOnKeys: ["Backspace"]
} | +| separators | | | - |
From config:
taginput: {
  separators: [","]
} | +| size | | | - |
From config:
taginput: {
  size: undefined
} | +| teleport | | | - |
From config:
taginput: {
  teleport: false
} | +| useHtml5Validation | | | - |
From config:
{
  useHtml5Validation: true
} | +| validateItem | | | - | Default function (see source code) | +| variant | | | - |
From config:
taginput: {
  variant: undefined
} | ### Events @@ -81,6 +78,7 @@ | icon-click | **event** `Event` - native event | on icon click event | | icon-right-click | **event** `Event` - native event | on icon right click event | | update:modelValue | **value** `string[] \| object[]` - updated modelValue prop | modelValue prop two-way binding | +| update:input | **value** `string` - updated input prop | input prop two-way binding | | input | **value** `string` - input value | on input change event | | add | **value** `string \| object` - added item | new item got added | | remove | **value** `string \| object` - removed item | item got removed | @@ -92,7 +90,7 @@ | Name | Description | Bindings | | -------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| selected | Override selected items | **items** `(string, object)[]` - selected items
| +| selected | Override selected items | **items** `(string, object)[]` - selected items
**options** `object[]` - selected options
| | header | Define an additional header | | | default | Override the select option | **option** `object` - option object
**index** `number` - option index
**value** `unknown` - option value | | empty | Define content for empty state | | diff --git a/packages/docs/docgen.config.js b/packages/docs/docgen.config.js index e91db15ef..7ebc1d434 100644 --- a/packages/docs/docgen.config.js +++ b/packages/docs/docgen.config.js @@ -30,7 +30,6 @@ const META_PROP_IGNORE = ["key", "ref", "ref_for", "ref_key", "class", "style"]; // Components to be ignored for creating docs const IGNORE = [ "DropdownItem", - "FieldBody", "SliderThumb", "SliderTick", "TableMobileSort", diff --git a/packages/oruga/src/components/autocomplete/Autocomplete.vue b/packages/oruga/src/components/autocomplete/Autocomplete.vue index 4dc82fd9f..829dd228b 100644 --- a/packages/oruga/src/components/autocomplete/Autocomplete.vue +++ b/packages/oruga/src/components/autocomplete/Autocomplete.vue @@ -1,15 +1,15 @@ -