From e98dd22303f758e2217b67e2cd3bde8ec35cc4d3 Mon Sep 17 00:00:00 2001 From: mm <25961416+mlmoravek@users.noreply.github.com> Date: Wed, 15 Nov 2023 16:18:04 +0100 Subject: [PATCH] fix: missing props (#658) --- packages/docs-next/components/Autocomplete.md | 89 +++++++++---------- packages/docs-next/components/Datepicker.md | 1 + packages/docs-next/components/Dropdown.md | 49 +++++----- packages/docs-next/components/Modal.md | 49 +++++----- packages/docs-next/components/Notification.md | 2 +- packages/docs-next/components/Pagination.md | 1 + packages/docs-next/components/Sidebar.md | 1 + packages/docs-next/components/Steps.md | 34 +++---- packages/docs-next/components/Table.md | 1 + packages/docs-next/components/Tabs.md | 23 +++-- packages/docs-next/components/Taginput.md | 1 + packages/docs-next/components/Timepicker.md | 1 + .../components/autocomplete/Autocomplete.vue | 8 -- .../src/components/datepicker/Datepicker.vue | 7 +- .../src/components/dropdown/Dropdown.vue | 7 +- .../oruga-next/src/components/field/Field.vue | 12 +-- .../oruga-next/src/components/modal/Modal.vue | 7 +- .../notification/NotificationNotice.vue | 6 +- .../src/components/pagination/Pagination.vue | 7 +- .../src/components/sidebar/Sidebar.vue | 7 +- .../oruga-next/src/components/steps/Steps.vue | 11 ++- .../oruga-next/src/components/table/Table.vue | 7 +- .../oruga-next/src/components/tabs/Tabs.vue | 2 - .../src/components/taginput/Taginput.vue | 12 +-- .../src/components/timepicker/Timepicker.vue | 7 +- 25 files changed, 194 insertions(+), 158 deletions(-) diff --git a/packages/docs-next/components/Autocomplete.md b/packages/docs-next/components/Autocomplete.md index 71eb659a0..40ce5c4b2 100644 --- a/packages/docs-next/components/Autocomplete.md +++ b/packages/docs-next/components/Autocomplete.md @@ -38,51 +38,50 @@ title: Autocomplete ### 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) | array | - | ["Tab", "Enter"] | -| data | Options / suggestions | array | - | [] | -| 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 data is array of objects) to use as display text, and to keep track of selected option | string | - | "value" | -| formatter | Function to format an option to a string for display in the input (as alternative to field prop) | (value: string \| number) => string \| number | - | | -| 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, optional | string | - | | -| icon | Icon name 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 name 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 | - | | -| itemTag | Menu item tag name | string \| Component | - |
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 | number | - | | -| menuTag | Menu tag name | string \| Component | - |
From config:
autocomplete: {
  menuTag: "div"
} | -| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
autocomplete: {
  mobileModal: false
} | -| openOnFocus | Open dropdown list on focus | boolean | - |
From config:
autocomplete: {
  openOnFocus: false
} | -| 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, optional | 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
} | -| v-model | | string\|number | - | "" | -| validationMessage | The message which is shown when a validation error occurs | string | - | | -| variant | Color of the control, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
autocomplete: {
  variant: undefined
} | +| 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) | array | - | ["Tab", "Enter"] | +| data | Options / suggestions | array | - | [] | +| 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 data is array of objects) to use as display text, and to keep track of selected option | string | - | "value" | +| formatter | Function to format an option to a string for display in the input (as alternative to field prop) | (value: string \| number) => string \| number | - | | +| 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, optional | string | - | | +| icon | Icon name 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 name 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 | - | | +| itemTag | Menu item tag name | string \| Component | - |
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 | number | - | | +| menuTag | Menu tag name | string \| Component | - |
From config:
autocomplete: {
  menuTag: "div"
} | +| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
autocomplete: {
  mobileModal: false
} | +| openOnFocus | Open dropdown list on focus | boolean | - |
From config:
autocomplete: {
  openOnFocus: false
} | +| 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, optional | 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
} | +| v-model | | string\|number | - | "" | +| validationMessage | The message which is shown when a validation error occurs | string | - | | ### Events diff --git a/packages/docs-next/components/Datepicker.md b/packages/docs-next/components/Datepicker.md index be39e8599..c5fd8e866 100644 --- a/packages/docs-next/components/Datepicker.md +++ b/packages/docs-next/components/Datepicker.md @@ -64,6 +64,7 @@ title: Datepicker | locale | Date format locale | string | - |
From config:
{
  locale: undefined
} | | maxDate | Max date to select | date | - | | | minDate | Min date to select | date | - | | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
datepicker: {
  mobileBreakpoint: undefined
} | | mobileModal | Enable dropdown mobile modal | boolean | - |
From config:
datepicker: {
  mobileModal: true
} | | mobileNative | Enable mobile native input if mobile agent | boolean | - |
From config:
datepicker: {
  mobileNative: true
} | | monthNames | Set custom month names, else use names based on locale | string[] | - |
From config:
datepicker: {
  monthNames: undefined
} | diff --git a/packages/docs-next/components/Dropdown.md b/packages/docs-next/components/Dropdown.md index aa945b557..c9c8174ef 100644 --- a/packages/docs-next/components/Dropdown.md +++ b/packages/docs-next/components/Dropdown.md @@ -38,30 +38,31 @@ title: Dropdown ### Props -| Prop name | Description | Type | Values | Default | -| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| active | The active state of the dropdown, use v-model:active to make it two-way binding. | boolean | - | false | -| animation | Custom animation (transition name) | string | - |
From config:
dropdown: {
  animation: "fade"
} | -| ariaRole | Role attribute to be passed to the list container for better accessibility.
Use menu only in situations where your dropdown is related to a navigation menu. | string | `list`, `menu`, `dialog` |
From config:
dropdown: {
  ariaRole: "list"
} | -| checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - |
From config:
dropdown: {
  checkScroll: false
} | -| closeable | Dropdown close options (pressing escape, clicking the content or outside) | string[] \| boolean | `true`, `false`, `escape`, `outside`, `content` |
From config:
dropdown: {
  closeable: ["escape","outside","content"]
} | -| delay | Dropdown delay before it appears (number in ms) | number | - | | -| disabled | Dropdown is disabled | boolean | - | false | -| expanded | Dropdown will be expanded (full-width) | boolean | - | false | -| inline | Dropdown content (items) are shown inline, trigger is removed | boolean | - | false | -| label | Trigger label, unnecessary when trgger slot is used | string | - | | -| maxHeight | Max height of dropdown content | string\|number | - |
From config:
dropdown: {
  maxHeight: 200
} | -| menuTag | Dropdown menu tag name | string \| Component | - |
From config:
dropdown: {
  menuTag: "div"
} | -| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
dropdown: {
  mobileModal: true
} | -| multiple | Allows multiple selections | boolean | - | false | -| position | Position of the dropdown relative to the trigger | string | `auto`, `top`, `bottom`, `left`, `right`, `top-right`, `top-left`, `bottom-left`, `bottom-right` |
From config:
dropdown: {
  position: "bottom-left"
} | -| scrollable | Dropdown content will be scrollable | boolean | - | false | -| tabindex | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) | number | - | 0 | -| 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:
dropdown: {
  teleport: false
} | -| trapFocus | Trap focus inside the dropdown. | boolean | - |
From config:
dropdown: {
  trapFocus: true
} | -| triggerTag | Dropdown trigger tag name | string \| Component | - |
From config:
dropdown: {
  triggerTag: "div"
} | -| triggers | Dropdown will be triggered by any events | string[] | `click`, `hover`, `contextmenu`, `focus` |
From config:
dropdown: {
  triggers: ["click"]
} | -| v-model | | string\|number\|boolean\|object\|array | - | | +| Prop name | Description | Type | Values | Default | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| active | The active state of the dropdown, use v-model:active to make it two-way binding. | boolean | - | false | +| animation | Custom animation (transition name) | string | - |
From config:
dropdown: {
  animation: "fade"
} | +| ariaRole | Role attribute to be passed to the list container for better accessibility.
Use menu only in situations where your dropdown is related to a navigation menu. | string | `list`, `menu`, `dialog` |
From config:
dropdown: {
  ariaRole: "list"
} | +| checkScroll | Makes the component check if menu reached scroll start or end and emit scroll events. | boolean | - |
From config:
dropdown: {
  checkScroll: false
} | +| closeable | Dropdown close options (pressing escape, clicking the content or outside) | string[] \| boolean | `true`, `false`, `escape`, `outside`, `content` |
From config:
dropdown: {
  closeable: ["escape","outside","content"]
} | +| delay | Dropdown delay before it appears (number in ms) | number | - | | +| disabled | Dropdown is disabled | boolean | - | false | +| expanded | Dropdown will be expanded (full-width) | boolean | - | false | +| inline | Dropdown content (items) are shown inline, trigger is removed | boolean | - | false | +| label | Trigger label, unnecessary when trgger slot is used | string | - | | +| maxHeight | Max height of dropdown content | string\|number | - |
From config:
dropdown: {
  maxHeight: 200
} | +| menuTag | Dropdown menu tag name | string \| Component | - |
From config:
dropdown: {
  menuTag: "div"
} | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
dropdown: {
  mobileBreakpoint: undefined
} | +| mobileModal | Dropdown content (items) are shown into a modal on mobile | boolean | - |
From config:
dropdown: {
  mobileModal: true
} | +| multiple | Allows multiple selections | boolean | - | false | +| position | Position of the dropdown relative to the trigger | string | `auto`, `top`, `bottom`, `left`, `right`, `top-right`, `top-left`, `bottom-left`, `bottom-right` |
From config:
dropdown: {
  position: "bottom-left"
} | +| scrollable | Dropdown content will be scrollable | boolean | - | false | +| tabindex | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) | number | - | 0 | +| 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:
dropdown: {
  teleport: false
} | +| trapFocus | Trap focus inside the dropdown. | boolean | - |
From config:
dropdown: {
  trapFocus: true
} | +| triggerTag | Dropdown trigger tag name | string \| Component | - |
From config:
dropdown: {
  triggerTag: "div"
} | +| triggers | Dropdown will be triggered by any events | string[] | `click`, `hover`, `contextmenu`, `focus` |
From config:
dropdown: {
  triggers: ["click"]
} | +| v-model | | string\|number\|boolean\|object\|array | - | | ### Events diff --git a/packages/docs-next/components/Modal.md b/packages/docs-next/components/Modal.md index 0fad909ea..ea4fb413c 100644 --- a/packages/docs-next/components/Modal.md +++ b/packages/docs-next/components/Modal.md @@ -38,30 +38,31 @@ title: Modal ### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| active | Whether modal is active or not, use v-model:active to make it two-way binding | boolean | - | false | -| animation | Custom animation (transition name) | string | - |
From config:
modal: {
  animation: "zoom-out"
} | -| ariaLabel | Accessibility aria-label to be passed to the div wrapper element | string | - |
From config:
modal: {
  ariaLabel: undefined
} | -| ariaModal | Accessibility aria-modal to be passed to the div wrapper element | boolean | - |
From config:
modal: {
  ariaModal: undefined
} | -| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | `dialog`, `alertdialog` |
From config:
modal: {
  ariaRole: undefined
} | -| autoFocus | Automatically focus modal when active | boolean | - |
From config:
modal: {
  autoFocus: true
} | -| cancelable | Is Modal cancleable by clicking 'X', pressing escape or clicking outside | string[] \| boolean | `escape`, `x`, `outside`, `button`, `true`, `false` |
From config:
modal: {
  cancelable: ["escape","x","outside","button"]
} | -| closeIcon | Close icon name | string | - |
From config:
modal: {
  closeIcon: "close"
} | -| closeIconSize | Size of close icon | string | `small`, `medium`, `large` |
From config:
modal: {
  closeIconSize: "medium"
} | -| component | Component to be injected, used to open a component modal programmatically.
Close modal within the component by emitting a 'close' event — emits('close') | Component | - | | -| container | DOM element where the modal component will be created on (for programmatic usage) | string \| HTMLElement | - |
From config:
modal: {
  container: "body"
} | -| content | Text content, unnecessary when default slot is used | string | - | | -| destroyOnHide | Destroy modal on hide | boolean | - |
From config:
modal: {
  destroyOnHide: false
} | -| events | Events to be binded to the injected component | object | - | {} | -| fullScreen | Display modal as full screen | boolean | - | false | -| onCancel | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) | () => void | - | Default function (see source code) | -| onClose | Callback function to call after close (programmatically close or user canceled) | () => void | - | Default function (see source code) | -| props | Props to be binded to the injected component | object | - | | -| 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. | string | `keep`, `clip` |
From config:
modal: {
  scroll: "keep"
} | -| 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:
modal: {
  teleport: false
} | -| trapFocus | Trap focus inside the modal | boolean | - |
From config:
modal: {
  trapFocus: true
} | -| width | Width of the Modal | string\|number | - |
From config:
modal: {
  width: 960
} | +| Prop name | Description | Type | Values | Default | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| active | Whether modal is active or not, use v-model:active to make it two-way binding | boolean | - | false | +| animation | Custom animation (transition name) | string | - |
From config:
modal: {
  animation: "zoom-out"
} | +| ariaLabel | Accessibility aria-label to be passed to the div wrapper element | string | - |
From config:
modal: {
  ariaLabel: undefined
} | +| ariaModal | Accessibility aria-modal to be passed to the div wrapper element | boolean | - |
From config:
modal: {
  ariaModal: undefined
} | +| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | `dialog`, `alertdialog` |
From config:
modal: {
  ariaRole: undefined
} | +| autoFocus | Automatically focus modal when active | boolean | - |
From config:
modal: {
  autoFocus: true
} | +| cancelable | Is Modal cancleable by clicking 'X', pressing escape or clicking outside | string[] \| boolean | `escape`, `x`, `outside`, `button`, `true`, `false` |
From config:
modal: {
  cancelable: ["escape","x","outside","button"]
} | +| closeIcon | Close icon name | string | - |
From config:
modal: {
  closeIcon: "close"
} | +| closeIconSize | Size of close icon | string | `small`, `medium`, `large` |
From config:
modal: {
  closeIconSize: "medium"
} | +| component | Component to be injected, used to open a component modal programmatically.
Close modal within the component by emitting a 'close' event — emits('close') | Component | - | | +| container | DOM element where the modal component will be created on (for programmatic usage) | string \| HTMLElement | - |
From config:
modal: {
  container: "body"
} | +| content | Text content, unnecessary when default slot is used | string | - | | +| destroyOnHide | Destroy modal on hide | boolean | - |
From config:
modal: {
  destroyOnHide: false
} | +| events | Events to be binded to the injected component | object | - | {} | +| fullScreen | Display modal as full screen | boolean | - | false | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
modal: {
  mobileBreakpoint: undefined
} | +| onCancel | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) | () => void | - | Default function (see source code) | +| onClose | Callback function to call after close (programmatically close or user canceled) | () => void | - | Default function (see source code) | +| props | Props to be binded to the injected component | object | - | | +| 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. | string | `keep`, `clip` |
From config:
modal: {
  scroll: "keep"
} | +| 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:
modal: {
  teleport: false
} | +| trapFocus | Trap focus inside the modal | boolean | - |
From config:
modal: {
  trapFocus: true
} | +| width | Width of the Modal | string\|number | - |
From config:
modal: {
  width: 960
} | ### Events diff --git a/packages/docs-next/components/Notification.md b/packages/docs-next/components/Notification.md index d0587c662..8784e7d5e 100644 --- a/packages/docs-next/components/Notification.md +++ b/packages/docs-next/components/Notification.md @@ -89,7 +89,7 @@ title: Notification | container | DOM element the toast will be created on (for programmatic usage).
Note that this also changes the position of the toast from fixed to absolute.
Meaning that the container should be fixed. | string \| HTMLElement | - |
From config:
notification: {
  container: "body"
} | | duration | Hide notification after duration (in miliseconds) | number | - |
From config:
notification: {
  duration: 2000
} | | events | Events to be binded to the injected component. | object | - | {} | -| indefinite | Show the Notification indefinitely until it is dismissed. | boolean | - | false | +| infinite | Show the Notification infinitely until it is dismissed. | boolean | - | false | | notification | Props passed to the internal notification component. | NotifcationProps | - | Default function (see source code) | | onCancel | Callback function to call after user canceled (pressed escape / clicked outside). | () => void | - | Default function (see source code) | | onClose | Callback function to call after close (programmatically close or user canceled). | () => void | - | Default function (see source code) | diff --git a/packages/docs-next/components/Pagination.md b/packages/docs-next/components/Pagination.md index 010b8caec..27a97b0ce 100644 --- a/packages/docs-next/components/Pagination.md +++ b/packages/docs-next/components/Pagination.md @@ -48,6 +48,7 @@ title: Pagination | iconNext | Icon to use for next button | string | - |
From config:
pagination: {
  iconNext: "chevron-right"
} | | iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
pagination: {
  iconPack: undefined
} | | iconPrev | Icon to use for previous button | string | - |
From config:
pagination: {
  iconPrev: "chevron-left"
} | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
pagination: {
  mobileBreakpoint: undefined
} | | order | Buttons order, optional | string | `centered`, `right`, `left` |
From config:
pagination: {
  order: "right"
} | | perPage | Items count for each page | number\|string | - |
From config:
pagination: {
  perPage: 20
} | | rangeAfter | Number of pagination items to show after current page. | number | - | 1 | diff --git a/packages/docs-next/components/Sidebar.md b/packages/docs-next/components/Sidebar.md index 65d2fda92..d30e4dba1 100644 --- a/packages/docs-next/components/Sidebar.md +++ b/packages/docs-next/components/Sidebar.md @@ -53,6 +53,7 @@ title: Sidebar | fullwidth | Show sidebar in fullwidth | boolean | - |
From config:
sidebar: {
  fullwidth: false
} | | inline | Display the Sidebear inline | boolean | - | false | | mobile | Custom layout on mobile | string | `fullwidth`, `reduced`, `hidden` |
From config:
sidebar: {
  mobile: undefined
} | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
sidebar: {
  mobileBreakpoint: undefined
} | | onCancel | Callback function to call after user canceled (pressed escape / clicked outside) | () => void | - | Default function (see source code) | | onClose | Callback function to call after close (programmatically close or user canceled) | () => void | - | Default function (see source code) | | overlay | Show an overlay like modal | boolean | - |
From config:
sidebar: {
  overlay: false
} | diff --git a/packages/docs-next/components/Steps.md b/packages/docs-next/components/Steps.md index 10bde9499..f7fdaec79 100644 --- a/packages/docs-next/components/Steps.md +++ b/packages/docs-next/components/Steps.md @@ -38,23 +38,23 @@ title: Steps ### Props -| Prop name | Description | Type | Values | Default | -| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -| animated | Step navigation is animated | boolean | - |
From config:
steps: {
  animated: true
} | -| ariaNextLabel | | string | - | | -| ariaPreviousLabel | | string | - | | -| destroyOnHide | Destroy tab 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, optional | string | `bottom`, `right`, `left` | "bottom" | -| position | Position of the tab, optional | string | `left`, `centered`, `right` | | -| rounded | Rounded step markers | boolean | - | true | -| size | Tab size, optional | string | `small`, `medium`, `large` |
From config:
steps: {
  size: undefined
} | -| v-model | | string\|number | - | | -| variant | Color of the control, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
steps: {
  variant: undefined
} | -| vertical | Show tab in vertical layout | boolean | - | false | +| Prop name | Description | Type | Values | Default | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| animated | Step navigation is animated | boolean | - |
From config:
steps: {
  animated: true
} | +| ariaNextLabel | | string | - | | +| ariaPreviousLabel | | string | - | | +| 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, optional | string | `bottom`, `right`, `left` |
From config:
steps: {
  labelPosition: "bottom"
} | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
steps: {
  mobileBreakpoint: undefined
} | +| position | Position of the tab, optional | string | `left`, `centered`, `right` | | +| rounded | Rounded step markers | boolean | - | true | +| size | Tab size, optional | string | `small`, `medium`, `large` |
From config:
steps: {
  size: undefined
} | +| v-model | | string\|number | - | | +| variant | Color of the control, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
steps: {
  variant: undefined
} | +| vertical | Show tab in vertical layout | boolean | - | false | ### Events diff --git a/packages/docs-next/components/Table.md b/packages/docs-next/components/Table.md index cdfba777e..cae86275e 100644 --- a/packages/docs-next/components/Table.md +++ b/packages/docs-next/components/Table.md @@ -77,6 +77,7 @@ title: Table | isRowCheckable | Custom method to verify if a row is checkable, works when is checkable | (row: unknown) => boolean | - |
From config:
table: {
  isRowCheckable: (row) => true
} | | isRowSelectable | Custom method to verify if a row is selectable, works when is selected. | func | - | Default function (see source code) | | loading | Enable loading state | boolean | - | false | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
table: {
  mobileBreakpoint: undefined
} | | mobileCards | Rows appears as cards on mobile (collapse rows) | boolean | - |
From config:
table: {
  mobileCards: true
} | | mobileSortPlaceholder | Text when nothing is selected | string | - |
From config:
table: {
  mobileSortPlaceholder: undefined
} | | narrowed | Makes the cells narrower | boolean | - | false | diff --git a/packages/docs-next/components/Tabs.md b/packages/docs-next/components/Tabs.md index 352bdf50d..5a48cd0b7 100644 --- a/packages/docs-next/components/Tabs.md +++ b/packages/docs-next/components/Tabs.md @@ -38,18 +38,17 @@ title: Tabs ### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| animated | Tab will have an animation | boolean | - |
From config:
tabs: {
  animated: true
} | -| destroyOnHide | Destroy tab on hide | boolean | - | false | -| expanded | Tabs will be expanded (full-width) | boolean | - | false | -| multiline | Show tab items multiline when there is no space | boolean | - | false | -| position | Position of the tab, optional | string | `left`, `centered`, `right` | | -| size | Tab size, optional | string | `small`, `medium`, `large` |
From config:
tabs: {
  size: undefined
} | -| type | Tab type | string | `boxed`, `toggle` | "default" | -| v-model | | string\|number | - | 0 | -| variant | Color of the control, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
tabs: {
  variant: undefined
} | -| vertical | Show tab in vertical layout | boolean | - | false | +| Prop name | Description | Type | Values | Default | +| --------- | ----------------------------------------------- | -------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| animated | Tab will have an animation | boolean | - |
From config:
tabs: {
  animated: true
} | +| expanded | Tabs will be expanded (full-width) | boolean | - | false | +| multiline | Show tab items multiline when there is no space | boolean | - | false | +| position | Position of the tab, optional | string | `left`, `centered`, `right` | | +| size | Tab size, optional | string | `small`, `medium`, `large` |
From config:
tabs: {
  size: undefined
} | +| type | Tab type | string | `boxed`, `toggle` | "default" | +| v-model | | string\|number | - | 0 | +| variant | Color of the control, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
tabs: {
  variant: undefined
} | +| vertical | Show tab in vertical layout | boolean | - | false | ### Events diff --git a/packages/docs-next/components/Taginput.md b/packages/docs-next/components/Taginput.md index c21eb9edb..080ad0ca0 100644 --- a/packages/docs-next/components/Taginput.md +++ b/packages/docs-next/components/Taginput.md @@ -72,6 +72,7 @@ title: Taginput | 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
} | | v-model | | array | - | [] | +| validationMessage | The message which is shown when a validation error occurs | string | - | | | variant | Color of the each items, optional | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
taginput: {
  variant: undefined
} | ### Events diff --git a/packages/docs-next/components/Timepicker.md b/packages/docs-next/components/Timepicker.md index 46b7336b1..41e7b0a6a 100644 --- a/packages/docs-next/components/Timepicker.md +++ b/packages/docs-next/components/Timepicker.md @@ -59,6 +59,7 @@ title: Timepicker | locale | Date format locale | string | - |
From config:
{
  locale: undefined
} | | maxTime | Max time to select | Date | - | | | minTime | Min time to select | Date | - | | +| mobileBreakpoint | Mobile breakpoint as max-width value | string | - |
From config:
timepicker: {
  mobileBreakpoint: undefined
} | | mobileModal | Enable dropdown mobile modal | boolean | - |
From config:
timepicker: {
  mobileModal: true
} | | mobileNative | Enable mobile native input if mobile agent | boolean | - |
From config:
timepicker: {
  mobileNative: true
} | | openOnFocus | | boolean | - |
From config:
timepicker: {
  openOnFocus: true
} | diff --git a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue index 02a8c3eec..aff317e37 100644 --- a/packages/oruga-next/src/components/autocomplete/Autocomplete.vue +++ b/packages/oruga-next/src/components/autocomplete/Autocomplete.vue @@ -70,14 +70,6 @@ const props = defineProps({ type: String, default: () => getOption("autocomplete.size"), }, - /** - * Color of the control, optional - * @values primary, info, success, warning, danger, and any other custom color - */ - variant: { - type: String, - default: () => getOption("autocomplete.variant"), - }, /** * Position of the dropdown * @values auto, top, bottom diff --git a/packages/oruga-next/src/components/datepicker/Datepicker.vue b/packages/oruga-next/src/components/datepicker/Datepicker.vue index ea704093d..c8db260bf 100644 --- a/packages/oruga-next/src/components/datepicker/Datepicker.vue +++ b/packages/oruga-next/src/components/datepicker/Datepicker.vue @@ -226,6 +226,11 @@ const props = defineProps({ type: String, default: () => getOption("datepicker.iconNext", "chevron-right"), }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("datepicker.mobileBreakpoint"), + }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. @@ -380,7 +385,7 @@ const emits = defineEmits<{ const { defaultDateFormatter, defaultDateParser } = useDatepickerShare(props); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const vmodel = useVModelBinding(props, emits, { passive: true }); diff --git a/packages/oruga-next/src/components/dropdown/Dropdown.vue b/packages/oruga-next/src/components/dropdown/Dropdown.vue index 320206fd0..4481fe26c 100644 --- a/packages/oruga-next/src/components/dropdown/Dropdown.vue +++ b/packages/oruga-next/src/components/dropdown/Dropdown.vue @@ -154,6 +154,11 @@ const props = defineProps({ validator: (value: string) => ["menu", "list", "dialog"].indexOf(value) > -1, }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("dropdown.mobileBreakpoint"), + }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. @@ -238,7 +243,7 @@ watch( }, ); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); // check if mobile modal should be shown const isMobileModal = computed( diff --git a/packages/oruga-next/src/components/field/Field.vue b/packages/oruga-next/src/components/field/Field.vue index 88a181bc9..d6b795904 100644 --- a/packages/oruga-next/src/components/field/Field.vue +++ b/packages/oruga-next/src/components/field/Field.vue @@ -23,11 +23,6 @@ defineOptions({ const props = defineProps({ // add global shared props (will not be displayed in the docs) ...baseComponentProps, - /** Mobile breakpoint as max-width value */ - mobileBreakpoint: { - type: String, - default: () => getOption("field.mobileBreakpoint"), - }, /** * Color of the field and help message, also adds a matching icon, optional. * Used by Input, Select and Autocomplete. @@ -59,6 +54,11 @@ const props = defineProps({ horizontal: { type: Boolean, default: false }, /** Field automatically attach controls together */ addons: { type: Boolean, default: true }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("field.mobileBreakpoint"), + }, // add class props (will not be displayed in the docs) ...useClassProps([ "rootClass", @@ -80,7 +80,7 @@ const props = defineProps({ ]), }); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); /** Set internal variant when prop change. */ const fieldVariant = ref(props.variant); diff --git a/packages/oruga-next/src/components/modal/Modal.vue b/packages/oruga-next/src/components/modal/Modal.vue index 84812661b..81b097253 100644 --- a/packages/oruga-next/src/components/modal/Modal.vue +++ b/packages/oruga-next/src/components/modal/Modal.vue @@ -119,6 +119,11 @@ const props = defineProps({ type: String, default: () => getOption("modal.closeIconSize", "medium"), }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("modal.mobileBreakpoint"), + }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. @@ -203,7 +208,7 @@ const { isActive, close, cancel } = useProgrammaticComponent( }, ); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const _teleport = computed(() => typeof props.teleport === "boolean" diff --git a/packages/oruga-next/src/components/notification/NotificationNotice.vue b/packages/oruga-next/src/components/notification/NotificationNotice.vue index 607edece3..bcc5287ea 100644 --- a/packages/oruga-next/src/components/notification/NotificationNotice.vue +++ b/packages/oruga-next/src/components/notification/NotificationNotice.vue @@ -62,8 +62,8 @@ const props = defineProps({ type: Number, default: () => getOption("notification.duration", 2000), }, - /** Show the Notification indefinitely until it is dismissed. */ - indefinite: { type: Boolean, default: false }, + /** Show the Notification infinitely until it is dismissed. */ + infinite: { type: Boolean, default: false }, /** If notice should queue with others notices (snackbar/toast/notification). */ queue: { type: Boolean, @@ -243,7 +243,7 @@ function showNotice(): void { /** Set timer to auto close message */ function setAutoClose(): void { - if (!props.indefinite) { + if (!props.infinite) { // clear old timer if (timer.value) clearTimeout(timer.value); // set new timer diff --git a/packages/oruga-next/src/components/pagination/Pagination.vue b/packages/oruga-next/src/components/pagination/Pagination.vue index f8356fb04..16a963df5 100644 --- a/packages/oruga-next/src/components/pagination/Pagination.vue +++ b/packages/oruga-next/src/components/pagination/Pagination.vue @@ -87,6 +87,11 @@ const props = defineProps({ type: String, default: () => getOption("pagination.iconNext", "chevron-right"), }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("pagination.mobileBreakpoint"), + }, /** Accessibility label for the next page button. */ ariaNextLabel: { type: String, @@ -141,7 +146,7 @@ const emits = defineEmits<{ (e: "change", event: number): void; }>(); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const current = usePropBinding("current", props, emits); diff --git a/packages/oruga-next/src/components/sidebar/Sidebar.vue b/packages/oruga-next/src/components/sidebar/Sidebar.vue index 1e8af2695..ba8cadad3 100644 --- a/packages/oruga-next/src/components/sidebar/Sidebar.vue +++ b/packages/oruga-next/src/components/sidebar/Sidebar.vue @@ -121,6 +121,11 @@ const props = defineProps({ type: Boolean, default: () => getOption("sidebar.destroyOnHide", false), }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("sidebar.mobileBreakpoint"), + }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. @@ -209,7 +214,7 @@ const { isActive, close, cancel } = useProgrammaticComponent( }, ); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const savedScrollTop = ref(null); const isAnimating = ref(!props.active); diff --git a/packages/oruga-next/src/components/steps/Steps.vue b/packages/oruga-next/src/components/steps/Steps.vue index 377d17316..38fe5b834 100644 --- a/packages/oruga-next/src/components/steps/Steps.vue +++ b/packages/oruga-next/src/components/steps/Steps.vue @@ -62,8 +62,6 @@ const props = defineProps({ validator: (value: string) => ["left", "centered", "right"].indexOf(value) >= 0, }, - /** Destroy tab on hide */ - destroyOnHide: { type: Boolean, default: false }, /** * Icon pack to use for the navigation * @values mdi, fa, fas and any other custom icon pack @@ -99,12 +97,17 @@ const props = defineProps({ */ labelPosition: { type: String, - default: "bottom", + default: () => getOption("steps.labelPosition", "bottom"), validator: (value: string) => ["bottom", "right", "left"].indexOf(value) > -1, }, /** Rounded step markers */ rounded: { type: Boolean, default: true }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("steps.mobileBreakpoint"), + }, ariaNextLabel: { type: String, default: undefined }, ariaPreviousLabel: { type: String, default: undefined }, // add class props (will not be displayed in the docs) @@ -143,7 +146,7 @@ const emits = defineEmits<{ (e: "change", newValue: string | number, oldValue: string | number): void; }>(); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const rootRef = ref(); diff --git a/packages/oruga-next/src/components/table/Table.vue b/packages/oruga-next/src/components/table/Table.vue index 1c68fd477..e9d756050 100644 --- a/packages/oruga-next/src/components/table/Table.vue +++ b/packages/oruga-next/src/components/table/Table.vue @@ -285,6 +285,11 @@ const props = defineProps({ validator: (value: string) => ["centered", "right", "left"].indexOf(value) >= 0, }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("table.mobileBreakpoint"), + }, /** Accessibility label for the pagination next page button. */ ariaNextLabel: { type: String, @@ -559,7 +564,7 @@ const emits = defineEmits<{ ): void; }>(); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const isMobileActive = computed(() => props.mobileCards && isMobile.value); diff --git a/packages/oruga-next/src/components/tabs/Tabs.vue b/packages/oruga-next/src/components/tabs/Tabs.vue index 8022536db..2efc417ac 100644 --- a/packages/oruga-next/src/components/tabs/Tabs.vue +++ b/packages/oruga-next/src/components/tabs/Tabs.vue @@ -61,8 +61,6 @@ const props = defineProps({ validator: (value: string) => ["left", "centered", "right"].indexOf(value) >= 0, }, - /** Destroy tab on hide */ - destroyOnHide: { type: Boolean, default: false }, /** * Tab type * @values boxed, toggle diff --git a/packages/oruga-next/src/components/taginput/Taginput.vue b/packages/oruga-next/src/components/taginput/Taginput.vue index c1404dae3..34ab5c16e 100644 --- a/packages/oruga-next/src/components/taginput/Taginput.vue +++ b/packages/oruga-next/src/components/taginput/Taginput.vue @@ -147,16 +147,18 @@ const props = defineProps({ type: String, default: () => getOption("taginput.ariaCloseLabel"), }, - /** Enable html 5 native validation */ - useHtml5Validation: { - type: Boolean, - default: () => getOption("useHtml5Validation", true), - }, /** Native options to use in HTML5 validation */ autocomplete: { type: String, default: () => getOption("taginput.autocomplete", "off"), }, + /** Enable html 5 native validation */ + useHtml5Validation: { + type: Boolean, + default: () => getOption("useHtml5Validation", true), + }, + /** The message which is shown when a validation error occurs */ + validationMessage: { type: String, default: undefined }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. diff --git a/packages/oruga-next/src/components/timepicker/Timepicker.vue b/packages/oruga-next/src/components/timepicker/Timepicker.vue index 07549b93a..ba64b4d40 100644 --- a/packages/oruga-next/src/components/timepicker/Timepicker.vue +++ b/packages/oruga-next/src/components/timepicker/Timepicker.vue @@ -143,6 +143,11 @@ const props = defineProps({ }, /** Make the icon right clickable */ iconRightClickable: { type: Boolean, default: false }, + /** Mobile breakpoint as max-width value */ + mobileBreakpoint: { + type: String, + default: () => getOption("timepicker.mobileBreakpoint"), + }, /** * Append the component to another part of the DOM. * Set `true` to append the component to the body. @@ -219,7 +224,7 @@ const emits = defineEmits<{ (e: "icon-right-click", event: Event): void; }>(); -const { isMobile } = useMatchMedia(); +const { isMobile } = useMatchMedia(props.mobileBreakpoint); const { defaultTimeFormatter,