diff --git a/CHANGELOG.md b/CHANGELOG.md index e2040949e..e958a6bb7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,318 @@ -# [0.9.0-pre.5](https://github.com/oruga-ui/oruga/compare/v0.9.0-pre.4...v0.9.0-pre.5) (2024-11-11) +# [0.9.0](https://github.com/oruga-ui/oruga/compare/v0.9.0-pre.5...v0.9.0) (2024-11-11) + +These Changes are accumulated from all pre-releases. + + +### Detailed Changes + + +Legend: +* ⚠️: breaking change +* `~` : changed +* `-` : removed +* `+` : added +* A -> B : renamed + + +#### Autocomplete + +* ⚠️ `~` prop: data -> options (type changed) +* ⚠️ `-` prop: field (replaced by strict options type) +* ⚠️ `-` prop: formatter (replaced by strict options type) +* ⚠️ `-` prop: groupField (replaced by strict options type) +* ⚠️ `-` prop: groupOptions (replaced by strict options type) +* `+` prop: input (v-model:input) +* `+` prop: filter +* `-` prop: validationMessage +* `+` prop: customValidity + +* `+` event: update:input + +* `+` type: remove modelValue type restrictions + +#### Button + +* ⚠️ `~` prop: nativeType -> type (to match same props from other component) +* ⚠️ `~` prop: role -> ariaRole (to match same props from other component) + +#### Carousel + +-- + +#### Checkbox + +* `+` prop: id +* `-` prop: validationMessage +* `+` prop: customValidity + +* `+` type: remove modelValue type restrictions + +#### Collapse + +-- + +#### Datepicker + +* ⚠️ `~` prop: dateCreator -> creator +* ⚠️ `~` prop: dateFormatter -> formatter +* ⚠️ `~` prop: dateParser -> parser +* `-` prop: validationMessage +* `+` prop: customValidity + +#### Datetimepicker + +* ⚠️ `~` prop: datetimeCreator -> creator +* ⚠️ `~` prop: datetimeFormatter -> formatter +* ⚠️ `~` prop: datetimeParser -> parser +* `-` prop: validationMessage +* `+` prop: customValidity + +#### Dropdown + +* `+` prop: options +* `+` prop: desktopModal + +* ⚠️ `~` class: menuMobileOverlayClass -> overlayClass +* `+` class: modalClass +* `+` class: scrollClipClass +* `+` class: noScrollClass + +* `+` type: remove modelValue type restrictions + +#### Field + +* ⚠️ `~` class: bodyHorizontalClass -> horizontalBodyClass +* ⚠️ `~` class: labelHorizontalClass -> horizontalLabelClass +* ⚠️ `~` class: variantLabelClass -> labelVariantClass +* ⚠️ `~` class: variantMessageClass -> messageVariantClass + +#### Icon + +-- + +#### Input + +* `+` prop: debounce +* `+` prop: number +* `-` prop: validationMessage +* `+` prop: customValidity + +* `~` event: input (only emits string values) + +#### Loading + +* `-` prop: container (only available in programmatic usage) +* ⚠️ `-` prop: onCancel +* ⚠️ `-` prop: onClose (only available in programmatic usage) + +* `+` class: noScrollClass +* `+` class: scrollClipClass + +* ⚠️ `~` programmatic: interface changed + +#### Menu + +* ⚠️ `~` class: itemWrapperClass -> itemClass +* ⚠️ `~` class: itemClass -> itemButtonClass +* ⚠️ `~` class: itemActiveClass -> itemButtonActiveClass +* ⚠️ `~` class: itemDisabledClass -> itemButtonDisabledClass +* ⚠️ `~` class: itemIconTextClass -> itemButtonIconClass + +#### Modal + +* `-` prop: container (only available in programmatic usage) +* ⚠️ `-` prop: destroyOnHide (no done by default for programmatic usage) +* ⚠️ `-` prop: onCancel +* ⚠️ `-` prop: onClose (only available in programmatic usage) +* `+` prop: overlay + +* ⚠️ `~` programmatic: interface changed + +#### Notification + +* `~` prop: active (is not longer avaible in programmatic usage) +* `-` prop: container (only available in programmatic usage) +* ⚠️ `-` prop: onCancel +* ⚠️ `-` prop: onClose (only available in programmatic usage) + +* ⚠️ `~` programmatic: interface changed + +#### Pagination + +* ⚠️ `~` class: linkClass -> buttonClass +* ⚠️ `~` class: linkCurrentClass -> buttonCurrentClass +* ⚠️ `~` class: linkDisabledClass -> buttonDisabledClass +* ⚠️ `~` class: prevButtonClass -> buttonPrevClass +* ⚠️ `~` class: nextButtonClass -> buttonNextClass + +#### Radio + +* `+` prop: id +* `+` prop: customValidity + +* `+` type: remove modelValue type restrictions + +#### Select + +* ⚠️ `~` prop: options (type changed) +* `-` prop: validationMessage +* `+` prop: customValidity + +#### Sidebar + +* `~` prop: mobile (variable changed from `fullwitdh` to `expanded`) +* `-` prop: variant +* `-` prop: container (only available in programmatic usage) +* ⚠️ `-` prop: destroyOnHide (no done by default for programmatic usage) +* ⚠️ `-` prop: onCancel +* ⚠️ `-` prop: onClose (only available in programmatic usage) + +* ⚠️ `~` programmatic: interface changed + +#### Skeleton + +-- + +#### Slider + +* `+` prop: range +* ⚠️ `~` prop: customFormatter -> formatter + +#### Steps + +* `+` prop: options + +* ⚠️ `~` class: itemHeaderClass -> navItemClass +* ⚠️ `~` class: itemHeaderVariantClass -> navItemVariantClass +* ⚠️ `~` class: itemHeaderActiveClass -> navItemActiveClass +* ⚠️ `~` class: itemHeaderPreviousClass -> navItemPreviousClass +* `+` class: navItemNextClass +* ⚠️ `~` class: stepLinkClass -> stepClass +* ⚠️ `~` class: stepLinkLabelPositionClass -> stepLabelPositionClass +* ⚠️ `~` class: stepLinkClickableClass -> stepClickableClass +* `+` class: stepActiveClass +* `+` class: stepDisabledClass +* ⚠️ `~` class: stepLinkLabelClass -> stepLabelClass +* `+` class: stepIconClass +* ⚠️ `~` class: itemClass -> stepPanelClass +* ⚠️ `~` class: rootClass (default class changed) +* ⚠️ `~` class: expandedClass (default class changed) +* ⚠️ `~` class: verticalClass (default class changed) +* ⚠️ `~` class: positionClass (default class changed) +* ⚠️ `~` class: animatedClass (default class changed) +* ⚠️ `~` class: stepsClass -> navClass +* ⚠️ `~` class: stepDividerClass -> dividerClass +* ⚠️ `~` class: stepMarkerClass -> markerClass +* ⚠️ `~` class: stepMarkerRoundedClass -> markerRoundedClass +* ⚠️ `~` class: stepContentClass -> contentClass +* ⚠️ `~` class: stepContentTransitioningClass -> transitioningClass +* ⚠️ `~` class: stepNavigationClass -> navigationClass + +* `+` type: remove modelValue type restrictions + +#### StepItem + +* `+` prop: disabled + +#### Switch + +* `+` prop: id +* `+` prop: customValidity + +* `+` type: remove modelValue type restrictions + +#### Table + +* ⚠️ `~` prop: column (type changed) +* `+` prop: customCompare +* ⚠️ `~` prop: customRowKey -> rowKey +* ⚠️ `~` prop: customIsChecked -> isRowChecked (to match other props name pattern) +* ⚠️ `~` props: hasDetailedVisible -> isDetailedVisible (to match other props name pattern) +* `-` prop: detailKey (use rowKey instead) +* `+` props: emptyIcon +* `+` props: emptyIconSize +* `+` props: emptyLabel +* `+` props: filtersIcon +* `+` props: filtersPlaceholder +* `+` props: loadingIcon +* `+` props: loadingLabel +* ⚠️ `~` props: openedDetailed -> detailedRows (to match props name pattern) +* `+` props: selectable +* `+` props: tdAttrs +* `+` props: thAttrs + +* `~` event: update:openedDetailed -> update:detailedRows + +* `+` slots: before +* `+` slots: after + +#### TableColumn + +* `+` props: formatter + +* `~` types: improve slots type + +#### Tabs + +* ⚠️ `~` class: navTabsClass -> navClass +* ⚠️ `~` class: itemWrapperClass -> navItemClass +* ⚠️ `~` class: itemClass -> tabPanelClass +* ⚠️ `~` class: itemHeaderActiveClass -> tabActiveClass +* ⚠️ `~` class: itemHeaderClass -> tabClass +* ⚠️ `~` class: itemHeaderDisabledClass -> tabDisabledClass +* ⚠️ `~` class: itemHeaderIconClass -> tabIconClass +* ⚠️ `~` class: itemHeaderTextClass -> tabLabelClass +* ⚠️ `~` class: itemHeaderTypeClass -> tabTypeClass +* ⚠️ `~` class: tabTextClass -> tabLabelClass +* `+` class: navItemActiveClass +* `+` class: navItemPreviousClass +* `+` class: navItemNextClass + +* `+` props: options + +* `+` type: remove modelValue type restrictions + +#### Taginput + +* `+` prop: input (v-model:input) +* `-` props: allowAutocomplete +* ⚠️ `~` props: data -> options (type changed) +* ⚠️ `-` prop: field (replaced by strict options type) +* ⚠️ `-` prop: groupField (replaced by strict options type) +* ⚠️ `-` prop: groupOptions (replaced by strict options type) +* ⚠️ `~` props: beforeAdding -> validateItem +* `+` prop: filter +* `-` prop: validationMessage +* `+` prop: customValidity + +* `+` event: update:input + +#### Timepicker + +* ⚠️ `~` prop: timeCreator -> creator +* ⚠️ `~` prop: timeFormatter -> formatter +* ⚠️ `~` prop: timeParser -> parser +* `-` prop: validationMessage +* `+` prop: customValidity + +#### Tooltip + +* `-` prop: validationMessage +* `+` prop: customValidity + +#### Upload + +-- + + + +# [0.9.0-pre.5](https://github.com/oruga-ui/oruga/compare/v0.9.0-pre.5...v0.9.0-pre.4) (2024-11-11) ### Bug Fixes * **datepicker:** add missing scope to defineClasses ([#1091](https://github.com/oruga-ui/oruga/issues/1091)) ([277c2e0](https://github.com/oruga-ui/oruga/commit/277c2e052866147963a6c0392fca3c70f5332eaf)) -* solve varius issues ([#1100](https://github.com/oruga-ui/oruga/issues/1100)) ([d6b792f](https://github.com/oruga-ui/oruga/commit/d6b792f0850d59ea85857c8ff7a9e4db570d134a)) +* solve various issues ([#1100](https://github.com/oruga-ui/oruga/issues/1100)) ([d6b792f](https://github.com/oruga-ui/oruga/commit/d6b792f0850d59ea85857c8ff7a9e4db570d134a)) ### Features diff --git a/package-lock.json b/package-lock.json index dc4630e4a..8edd9e7bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "root", - "version": "0.9.0-pre.5", + "version": "0.9.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "root", - "version": "0.9.0-pre.5", + "version": "0.9.0", "license": "MIT", "workspaces": [ "packages/oruga", @@ -10970,7 +10970,7 @@ }, "packages/docs": { "name": "@oruga-ui/docs-next", - "version": "0.9.0-pre.5", + "version": "0.9.0", "license": "MIT", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", @@ -11025,7 +11025,7 @@ }, "packages/examples": { "name": "@oruga-ui/examples", - "version": "0.9.0-pre.5", + "version": "0.9.0", "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "6.6.0", @@ -11047,13 +11047,13 @@ "vitepress": "^1.4.3" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.5", + "@oruga-ui/oruga-next": "0.9.0", "vue": "^3.0.0" } }, "packages/oruga": { "name": "@oruga-ui/oruga-next", - "version": "0.9.0-pre.5", + "version": "0.9.0", "license": "MIT", "dependencies": { "vue-component-type-helpers": "^2.1.10" diff --git a/package.json b/package.json index be847da5e..f8c9e78f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "root", - "version": "0.9.0-pre.5", + "version": "0.9.0", "homepage": "https://oruga-ui.com", "description": "UI components for Vue.js and CSS framework agnostic", "author": "Walter Tommasi ", diff --git a/packages/docs/components/Button.md b/packages/docs/components/Button.md index 2bb46d77d..f3656c165 100644 --- a/packages/docs/components/Button.md +++ b/packages/docs/components/Button.md @@ -33,24 +33,24 @@ ### Props -| Prop name | Description | Type | Values | Default | -| --------- | -------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| ariaRole | Accessibility Role attribute to be passed to the button. | string | - |
From config:
button: {
  ariaRole: "button"
} | -| disabled | Button will be disabled | boolean | - | false | -| expanded | Button will be expanded (full-width) | boolean | - | false | -| iconLeft | Icon name to show on the left | string | - | | -| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
button: {
  iconPack: undefined
} | -| iconRight | Icon name to show on the right | string | - | | -| inverted | Enable inverted style | boolean | - | false | -| label | Button label, unnecessary when default slot is used | string | - | | -| loading | Enable loading style | boolean | - | false | -| outlined | Enable outlined style | boolean | - | false | -| override | Override existing theme classes completely | boolean | - | | -| rounded | Enable rounded style | boolean | - |
From config:
button: {
  rounded: false
} | -| size | Size of the control | string | `small`, `medium`, `large` |
From config:
button: {
  size: undefined
} | -| tag | Button tag name | DynamicComponent | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)` |
From config:
button: {
  tag: "button"
} | -| type | Button type, like native | string | `button`, `submit`, `reset` | "button" | -| variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
button: {
  variant: undefined
} | +| Prop name | Description | Type | Values | Default | +| --------- | -------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| ariaRole | Accessibility Role attribute to be passed to the button. | string | - |
From config:
button: {
  ariaRole: "button"
} | +| disabled | Button will be disabled | boolean | - | false | +| expanded | Button will be expanded (full-width) | boolean | - | false | +| iconLeft | Icon name to show on the left | string | - | | +| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
button: {
  iconPack: undefined
} | +| iconRight | Icon name to show on the right | string | - | | +| inverted | Enable inverted style | boolean | - | false | +| label | Button label, unnecessary when default slot is used | string | - | | +| loading | Enable loading style | boolean | - | false | +| outlined | Enable outlined style | boolean | - | false | +| override | Override existing theme classes completely | boolean | - | | +| rounded | Enable rounded style | boolean | - |
From config:
button: {
  rounded: false
} | +| size | Size of the control | string | `small`, `medium`, `large` |
From config:
button: {
  size: undefined
} | +| tag | Button tag name | DynamicComponent | `button`, `a`, `input`, `router-link`, `nuxt-link (or other nuxt alias)` |
From config:
button: {
  tag: "button"
} | +| type | Button type, like native | "reset" \| "submit" \| "button" | `button`, `submit`, `reset` | "button" | +| variant | Color variant of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
button: {
  variant: undefined
} | ### Slots diff --git a/packages/docs/components/Checkbox.md b/packages/docs/components/Checkbox.md index 662ea79f4..15c370744 100644 --- a/packages/docs/components/Checkbox.md +++ b/packages/docs/components/Checkbox.md @@ -38,17 +38,17 @@ | autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - |
From config:
checkbox: {
  autocomplete: "off"
} | | customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: unknown, state: ValidityState) => string) | - | "" | | disabled | Same as native disabled | boolean | - | false | -| falseValue | Overrides the returned value when it's not checked | string\|number\|boolean\|object | - | false | +| falseValue | Overrides the returned value when it's not checked | unknown | - | | | id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() | | indeterminate | Same as native indeterminate | boolean | - | false | | label | Input label, unnecessary when default slot is used | string | - | | -| v-model | The input value state | string\|number\|boolean\|object\|array | - | | +| v-model | The input value state, use v-model to make it two-way binding | unknown | - | | | name | Same as native name | string | - | | -| nativeValue | Same as native value | string\|number\|boolean\|object | - | | +| nativeValue | Same as native value | unknown | - | | | override | Override existing theme classes completely | boolean | - | | | required | Same as native required | boolean | - | false | | size | Size of the control | string | `small`, `medium`, `large` |
From config:
checkbox: {
  size: undefined
} | -| trueValue | Overrides the returned value when it's checked | string\|number\|boolean\|object | - | true | +| trueValue | Overrides the returned value when it's checked | unknown | - | | | useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | | variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
checkbox: {
  variant: undefined
} | diff --git a/packages/docs/components/Datetimepicker.md b/packages/docs/components/Datetimepicker.md index 2315c29f7..b2c08e190 100644 --- a/packages/docs/components/Datetimepicker.md +++ b/packages/docs/components/Datetimepicker.md @@ -33,36 +33,36 @@ ### 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 | -| creator | Date creator function, default is `new Date()` | (() => Date) | - |
From config:
datetimepicker: {
  datetimeCreator: undefined
} | -| customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: Date \| null, state: ValidityState) => string) \| undefined | - | "" | -| datepicker | Define props for the underlying datepicker component | DatepickerProps | - | | -| disabled | Same as native disabled | boolean | - | false | -| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | -| formatter | Custom function to format a date into a string | ((date: Date) => string) \| undefined | - |
From config:
datetimepicker: {
  dateFormatter: undefined
} | -| icon | Icon to be shown | string | - |
From config:
datetimepicker: {
  icon: undefined
} | -| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
datetimepicker: {
  iconPack: undefined
} | -| iconRight | Icon to be added on the right side | string | - |
From config:
datetimepicker: {
  iconRight: undefined
} | -| iconRightClickable | Make the icon right clickable | boolean | - | false | -| inline | Display datetimepicker inline | boolean | - | false | -| locale | Date format locale | string | - |
From config:
{
  locale: undefined
} | -| maxDatetime | Max date to select | Date | - | | -| minDatetime | Min date to select | Date | - | | -| mobileNative | Enable mobile native input if mobile agent | boolean | - |
From config:
datetimepicker: {
  mobileNative: true
} | -| v-model | The input value state | Date | - | | -| openOnFocus | Open dropdown on focus | boolean | - |
From config:
datetimepicker: {
  openOnFocus: true
} | -| override | Override existing theme classes completely | boolean | - | | -| parser | Custom function to parse a string into a date | ((date: string) => Date) \| undefined | - |
From config:
datetimepicker: {
  dateParser: undefined
} | -| placeholder | Input placeholder | string | - | | -| position | Dropdown position | string | - | | -| readonly | Same as native input readonly | boolean | - | false | -| rounded | Makes the input rounded | boolean | - | false | -| size | Size of the input control | string | `small`, `medium`, `large` |
From config:
datetimepicker: {
  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. | string \| boolean \| object | - |
From config:
datetimepicker: {
  teleport: false
} | -| timepicker | Define props for the underlying timepicker component | TimepickerProps | - | | -| useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | +| 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 | +| creator | Date creator function, default is `new Date()` | (() => Date) | - |
From config:
datetimepicker: {
  datetimeCreator: undefined
} | +| customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: Date \| null, state: ValidityState) => string) \| undefined | - | "" | +| datepicker | Define props for the underlying datepicker component | DatepickerProps | - | | +| disabled | Same as native disabled | boolean | - | false | +| expanded | Makes input full width when inside a grouped or addon field | boolean | - | false | +| formatter | Custom function to format a date into a string | ((date: Date) => string) \| undefined | - |
From config:
datetimepicker: {
  dateFormatter: undefined
} | +| icon | Icon to be shown | string | - |
From config:
datetimepicker: {
  icon: undefined
} | +| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
datetimepicker: {
  iconPack: undefined
} | +| iconRight | Icon to be added on the right side | string | - |
From config:
datetimepicker: {
  iconRight: undefined
} | +| iconRightClickable | Make the icon right clickable | boolean | - | false | +| inline | Display datetimepicker inline | boolean | - | false | +| locale | Date format locale | string | - |
From config:
{
  locale: undefined
} | +| maxDatetime | Max date to select | Date | - | | +| minDatetime | Min date to select | Date | - | | +| mobileNative | Enable mobile native input if mobile agent | boolean | - |
From config:
datetimepicker: {
  mobileNative: true
} | +| v-model | The input value state | Date | - | | +| openOnFocus | Open dropdown on focus | boolean | - |
From config:
datetimepicker: {
  openOnFocus: true
} | +| override | Override existing theme classes completely | boolean | - | | +| parser | Custom function to parse a string into a date | ((date: string) => Date) \| undefined | - |
From config:
datetimepicker: {
  dateParser: undefined
} | +| placeholder | Input placeholder | string | - | | +| position | Position of the dropdown relative to the input | "auto" \| "top" \| "bottom" \| "left" \| "right" \| "top-right" \| "top-left" \| "bottom-left" \| "bottom-right" | `auto`, `top`, `bottom`, `left`, `right`, `top-right`, `top-left`, `bottom-left`, `bottom-right` | | +| readonly | Same as native input readonly | boolean | - | false | +| rounded | Makes the input rounded | boolean | - | false | +| size | Size of the input control | string | `small`, `medium`, `large` |
From config:
datetimepicker: {
  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. | string \| boolean \| object | - |
From config:
datetimepicker: {
  teleport: false
} | +| timepicker | Define props for the underlying timepicker component | TimepickerProps | - | | +| useHtml5Validation | Enable HTML 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | ### Events diff --git a/packages/docs/components/Radio.md b/packages/docs/components/Radio.md index b11969aca..94c44b9d5 100644 --- a/packages/docs/components/Radio.md +++ b/packages/docs/components/Radio.md @@ -40,9 +40,9 @@ | disabled | Same as native disabled | boolean | - | false | | id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() | | label | Input label, unnecessary when default slot is used | string | - | | -| v-model | The input value state | string\|number\|boolean\|object | - | | +| v-model | The input value state, use v-model to make it two-way binding | unknown | - | | | name | Same as native name | string | - | | -| nativeValue | Same as native value | string\|number\|boolean\|object | - | | +| nativeValue | Same as native value | unknown | - | | | override | Override existing theme classes completely | boolean | - | | | required | Same as native required | boolean | - | false | | size | Size of the control | string | `small`, `medium`, `large` |
From config:
radio: {
  size: undefined
} | diff --git a/packages/docs/components/Sidebar.md b/packages/docs/components/Sidebar.md index 2ca9100fb..73979e871 100644 --- a/packages/docs/components/Sidebar.md +++ b/packages/docs/components/Sidebar.md @@ -44,7 +44,7 @@ | 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 | "expanded" \| "reduced" \| "hidden" | `expanded`, `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 | - | | diff --git a/packages/docs/components/Switch.md b/packages/docs/components/Switch.md index a272191f9..b1e0f13c3 100644 --- a/packages/docs/components/Switch.md +++ b/packages/docs/components/Switch.md @@ -38,19 +38,19 @@ | autocomplete | Same as native autocomplete options to use in HTML5 validation | string | - |
From config:
switch: {
  autocomplete: "off"
} | | customValidity | Custom HTML 5 validation error to set on the form control | string \| ((currentValue: unknown, state: ValidityState) => string) | - | | | disabled | Same as native disabled | boolean | - | false | -| falseValue | Overrides the returned value when it's not checked | string\|number\|boolean\|object | - | false | +| falseValue | Overrides the returned value when it's not checked | unknown | - | | | id | Same as native id. Also set the for label for o-field wrapper - default is an uuid. | string | - | useId() | | label | Input label, unnecessary when default slot is used | string | - | | -| v-model | The input value state | string\|number\|boolean\|object | - | | +| v-model | The input value state, use v-model to make it two-way binding | unknown | - | | | name | Name attribute on native checkbox | string | - | | -| nativeValue | Same as native value | string\|number\|boolean\|object | - | | +| nativeValue | Same as native value | unknown | - | | | override | Override existing theme classes completely | boolean | - | | | passiveVariant | Color of the switch when is passive | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
switch: {
  passiveVariant: undefined
} | | position | Label position | string | - | "right" | | required | Same as native required | boolean | - | false | | rounded | Rounded style | boolean | - | true | | size | Size of the control | string | `small`, `medium`, `large` |
From config:
switch: {
  size: undefined
} | -| trueValue | Overrides the returned value when it's checked | string\|number\|boolean\|object | - | true | +| trueValue | Overrides the returned value when it's checked | unknown | - | | | useHtml5Validation | Enable html 5 native validation | boolean | - |
From config:
{
  useHtml5Validation: true
} | | variant | Color of the control | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
switch: {
  variant: undefined
} | diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md index 2d6a60283..5f7ae4c65 100644 --- a/packages/docs/components/Table.md +++ b/packages/docs/components/Table.md @@ -37,77 +37,77 @@ sidebarDepth: 2 ### Props -| Prop name | Description | Type | Values | Default | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ariaCurrentLabel | Accessibility label for the pagination current page button. | string | - |
From config:
table: {
  ariaCurrentLabel: undefined
} | -| ariaNextLabel | Accessibility label for the pagination next page button. | string | - |
From config:
table: {
  ariaNextLabel: undefined
} | -| ariaPageLabel | Accessibility label for the pagination page button. | string | - |
From config:
table: {
  ariaPageLabel: undefined
} | -| ariaPreviousLabel | Accessibility label for the pagination previous page button. | string | - |
From config:
table: {
  ariaPreviousLabel: undefined
} | -| backendFiltering | Columns won't be filtered with Javascript, use with `searchable` prop to the columns to filter in your backend | boolean | - |
From config:
table: {
  backendFiltering: false
} | -| backendPagination | Rows won't be paginated with Javascript, use with `page-change` event to paginate in your backend | boolean | - | false | -| backendSorting | Columns won't be sorted with Javascript, use with `sort` event to sort in your backend | boolean | - |
From config:
table: {
  backendSorting: false
} | -| bordered | Border to all cells | boolean | - |
From config:
table: {
  bordered: false
} | -| checkable | Rows can be checked (multiple) | boolean | - | false | -| checkboxPosition | Position of the checkbox when checkable (if checkable) | "left" \| "right" | `left`, `right` |
From config:
table: {
  checkboxPosition: "left"
} | -| checkboxVariant | Color of the checkbox when checkable (if checkable) | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
table: {
  checkboxVariant: undefined
} | -| checkedRows | Set which rows are checked, use `v-model:checkedRows` to make it two-way binding (if checkable) | unknown[] | - | [] | -| columns | Table columns | TableColumn<unknown>[] | - | | -| currentPage | Current page of table data (if paginated), use `v-model:currentPage` to make it two-way binding | number | - | 1 | -| customCompare | Define a custom comparison function to check whether two row elements are equal.
By default a `rowKey` comparison is performed if given. Otherwise a simple object comparison is done. | ((a: unknown, b: unknown) => boolean) | - | | -| customDetailRow | Enable custom style on details (if detailed) | boolean | - | false | -| data | Table data | unknown[] | - | | -| debounceSearch | Filtering debounce time (in milliseconds) | number | - |
From config:
table: {
  debounceSearch: undefined
} | -| defaultSort | Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc'] | string \| [string, 'asc' \| 'desc'] | - |
From config:
table: {
  defaultSort: undefined
} | -| defaultSortDirection | Sets the default sort column direction on the first click | 'asc'\|'desc' | `asc`, `desc` |
From config:
table: {
  defaultSortDirection: "asc"
} | -| detailIcon | Icon name of detail action (if detailed) | string | - |
From config:
table: {
  detailIcon: "chevron-right"
} | -| detailTransition | | string | - |
From config:
table: {
  detailTransition: "slide"
} | -| detailed | Allow row details | boolean | - | false | -| detailedRows | Set which rows have opened details, use `v-model:detailedRows` to make it two-way binding (if detailed).
Ideal to open details via vue-router. (A unique key is required; check `rowKey` prop) | unknown[] | - | [] | -| draggable | Allows rows to be draggable | boolean | - | false | -| draggableColumn | Allows columns to be draggable | boolean | - | false | -| emptyIcon | Icon to be shown when the table is empty | string | - |
From config:
table: {
  emptyIcon: undefined
} | -| emptyIconSize | Size of empty icon | string | `small`, `medium`, `large` |
From config:
table: {
  emptyIconSize: "large"
} | -| emptyLabel | Label to be shown when the table is empty | string | - |
From config:
table: {
  emptyLabel: undefined
} | -| filtersEvent | Add a native event to filter | string | - | "" | -| filtersIcon | Icon of the column search input | string | - |
From config:
table: {
  filterIcon: undefined
} | -| filtersPlaceholder | Placeholder of the column search input | string | - |
From config:
table: {
  filterPlaceholder: undefined
} | -| headerCheckable | Show check/uncheck all checkbox in table header when checkable (if checkable) | boolean | - | true | -| height | Table fixed height | string \| number | - | | -| hoverable | Rows are highlighted when hovering | boolean | - |
From config:
table: {
  hoverable: false
} | -| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
table: {
  iconPack: undefined
} | -| isDetailedVisible | Controls the visibility of the trigger that toggles the detailed rows (if detailed) | ((row: unknown) => boolean) | - |
From config:
table: {
  isDetailedVisible:
} | -| isRowCheckable | Custom method to verify if a row is checkable (if checkable) | ((row: unknown) => boolean) | - |
From config:
table: {
  isRowCheckable:
} | -| isRowChecked | Custom method to verify if a row is checked (if checkable) | ((row: unknown) => boolean) | - | | -| isRowSelectable | Custom method to verify if a row is selectable, works when is selectable | ((row: unknown) => boolean) | - | true | -| loading | Enable loading state | boolean | - | false | -| loadingIcon | Icon for the loading state | string | - |
From config:
table: {
  loadingIcon: "loading"
} | -| loadingLabel | Label for the loading state | string | - |
From config:
table: {
  loadingLabel: undefined
} | -| 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 | Select placeholder text when nothing is selected (if mobileCards) | string | - |
From config:
table: {
  mobileSortPlaceholder: undefined
} | -| narrowed | Makes the cells narrower | boolean | - |
From config:
table: {
  narrowed: false
} | -| override | Override existing theme classes completely | boolean | - | | -| paginated | Adds pagination to the table | boolean | - |
From config:
table: {
  paginated: false
} | -| paginationOrder | Pagination buttons order (if paginated) | "left" \| "right" \| "centered" | `centered`, `right`, `left` |
From config:
table: {
  paginationOrder: undefined
} | -| paginationPosition | Pagination position (if paginated) | "bottom" \| "top" \| "both" | `bottom`, `top`, `both` |
From config:
table: {
  paginationPosition: "bottom"
} | -| paginationRounded | Enable rounded pagination buttons (if paginated) | boolean | - |
From config:
table: {
  paginationRounded: false
} | -| paginationSimple | Enable simple style pagination (if paginated) | boolean | - |
From config:
table: {
  paginationSimple: false
} | -| paginationSize | Size of pagination (if paginated) | string | `small`, `medium`, `large` |
From config:
table: {
  paginationSize: "small"
} | -| perPage | How many rows per page (if paginated) | string \| number | - |
From config:
table: {
  perPage: 20
} | -| rowKey | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) | string | - |
From config:
table: {
  rowKey: undefined
} | -| scrollable | Add a horizontal scrollbar when table is too wide | boolean | - | | -| selectable | Table can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering. | boolean | - |
From config:
table: {
  selectable: false
} | -| selected | Set which row is selected, use `v-model:selected` to make it two-way binding (if selectable) | unknown | - | | -| showDetailIcon | Allow detail icon and column to be visible (if detailed) | boolean | - |
From config:
table: {
  showDetailIcon: true
} | -| showHeader | Show header | boolean | - |
From config:
table: {
  showHeader: true
} | -| sortIcon | Sets the header sorting icon | string | - |
From config:
table: {
  sortIcon: "arrow-up"
} | -| sortIconSize | Sets the size of the sorting icon | string | `small`, `medium`, `large` |
From config:
table: {
  sortIconSize: "small"
} | -| stickyCheckbox | Make the checkbox column sticky (if checkable) | boolean | - | false | -| stickyHeader | Show a sticky table header | boolean | - | false | -| striped | Whether table is striped | boolean | - |
From config:
table: {
  striped: false
} | -| tdAttrs | Adds native attributes to column td element of a row | ((row: unknown, column: TableColumn<unknown>) => object) | - | | -| thAttrs | Adds native attributes to a column th element | ((column: TableColumn<unknown>) => object) | - | | -| total | Total number of table data if backend-pagination is enabled | number | - | 0 | +| Prop name | Description | Type | Values | Default | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ariaCurrentLabel | Accessibility label for the pagination current page button. | string | - |
From config:
table: {
  ariaCurrentLabel: undefined
} | +| ariaNextLabel | Accessibility label for the pagination next page button. | string | - |
From config:
table: {
  ariaNextLabel: undefined
} | +| ariaPageLabel | Accessibility label for the pagination page button. | string | - |
From config:
table: {
  ariaPageLabel: undefined
} | +| ariaPreviousLabel | Accessibility label for the pagination previous page button. | string | - |
From config:
table: {
  ariaPreviousLabel: undefined
} | +| backendFiltering | Columns won't be filtered with Javascript, use with `searchable` prop to the columns to filter in your backend | boolean | - |
From config:
table: {
  backendFiltering: false
} | +| backendPagination | Rows won't be paginated with Javascript, use with `page-change` event to paginate in your backend | boolean | - | false | +| backendSorting | Columns won't be sorted with Javascript, use with `sort` event to sort in your backend | boolean | - |
From config:
table: {
  backendSorting: false
} | +| bordered | Border to all cells | boolean | - |
From config:
table: {
  bordered: false
} | +| checkable | Rows can be checked (multiple) | boolean | - | false | +| checkboxPosition | Position of the checkbox when checkable (if checkable) | "left" \| "right" | `left`, `right` |
From config:
table: {
  checkboxPosition: "left"
} | +| checkboxVariant | Color of the checkbox when checkable (if checkable) | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
table: {
  checkboxVariant: undefined
} | +| checkedRows | Set which rows are checked, use `v-model:checkedRows` to make it two-way binding (if checkable) | Record<string, any>[] | - | [] | +| columns | Table columns | TableColumn<Record<string, any>>[] | - | | +| currentPage | Current page of table data (if paginated), use `v-model:currentPage` to make it two-way binding | number | - | 1 | +| customCompare | Define a custom comparison function to check whether two row elements are equal.
By default a `rowKey` comparison is performed if given. Otherwise a simple object comparison is done. | ((a: Record<string, any>, b: Record<string, any>) => boolean) | - | | +| customDetailRow | Enable custom style on details (if detailed) | boolean | - | false | +| data | Table data | Record<string, any>[] | - | | +| debounceSearch | Filtering debounce time (in milliseconds) | number | - |
From config:
table: {
  debounceSearch: undefined
} | +| defaultSort | Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc'] | string \| [string, 'asc' \| 'desc'] | - |
From config:
table: {
  defaultSort: undefined
} | +| defaultSortDirection | Sets the default sort column direction on the first click | 'asc'\|'desc' | `asc`, `desc` |
From config:
table: {
  defaultSortDirection: "asc"
} | +| detailIcon | Icon name of detail action (if detailed) | string | - |
From config:
table: {
  detailIcon: "chevron-right"
} | +| detailTransition | | string | - |
From config:
table: {
  detailTransition: "slide"
} | +| detailed | Allow row details | boolean | - | false | +| detailedRows | Set which rows have opened details, use `v-model:detailedRows` to make it two-way binding (if detailed).
Ideal to open details via vue-router. (A unique key is required; check `rowKey` prop) | Record<string, any>[] | - | [] | +| draggable | Allows rows to be draggable | boolean | - | false | +| draggableColumn | Allows columns to be draggable | boolean | - | false | +| emptyIcon | Icon to be shown when the table is empty | string | - |
From config:
table: {
  emptyIcon: undefined
} | +| emptyIconSize | Size of empty icon | string | `small`, `medium`, `large` |
From config:
table: {
  emptyIconSize: "large"
} | +| emptyLabel | Label to be shown when the table is empty | string | - |
From config:
table: {
  emptyLabel: undefined
} | +| filtersEvent | Add a native event to filter | string | - | "" | +| filtersIcon | Icon of the column search input | string | - |
From config:
table: {
  filterIcon: undefined
} | +| filtersPlaceholder | Placeholder of the column search input | string | - |
From config:
table: {
  filterPlaceholder: undefined
} | +| headerCheckable | Show check/uncheck all checkbox in table header when checkable (if checkable) | boolean | - | true | +| height | Table fixed height | string \| number | - | | +| hoverable | Rows are highlighted when hovering | boolean | - |
From config:
table: {
  hoverable: false
} | +| iconPack | Icon pack to use | string | `mdi`, `fa`, `fas and any other custom icon pack` |
From config:
table: {
  iconPack: undefined
} | +| isDetailedVisible | Controls the visibility of the trigger that toggles the detailed rows (if detailed) | ((row: Record<string, any>) => boolean) | - |
From config:
table: {
  isDetailedVisible:
} | +| isRowCheckable | Custom method to verify if a row is checkable (if checkable) | ((row: Record<string, any>) => boolean) | - |
From config:
table: {
  isRowCheckable:
} | +| isRowChecked | Custom method to verify if a row is checked (if checkable) | ((row: Record<string, any>) => boolean) | - | | +| isRowSelectable | Custom method to verify if a row is selectable, works when is selectable | ((row: Record<string, any>) => boolean) | - | true | +| loading | Enable loading state | boolean | - | false | +| loadingIcon | Icon for the loading state | string | - |
From config:
table: {
  loadingIcon: "loading"
} | +| loadingLabel | Label for the loading state | string | - |
From config:
table: {
  loadingLabel: undefined
} | +| 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 | Select placeholder text when nothing is selected (if mobileCards) | string | - |
From config:
table: {
  mobileSortPlaceholder: undefined
} | +| narrowed | Makes the cells narrower | boolean | - |
From config:
table: {
  narrowed: false
} | +| override | Override existing theme classes completely | boolean | - | | +| paginated | Adds pagination to the table | boolean | - |
From config:
table: {
  paginated: false
} | +| paginationOrder | Pagination buttons order (if paginated) | "left" \| "right" \| "centered" | `centered`, `right`, `left` |
From config:
table: {
  paginationOrder: undefined
} | +| paginationPosition | Pagination position (if paginated) | "bottom" \| "top" \| "both" | `bottom`, `top`, `both` |
From config:
table: {
  paginationPosition: "bottom"
} | +| paginationRounded | Enable rounded pagination buttons (if paginated) | boolean | - |
From config:
table: {
  paginationRounded: false
} | +| paginationSimple | Enable simple style pagination (if paginated) | boolean | - |
From config:
table: {
  paginationSimple: false
} | +| paginationSize | Size of pagination (if paginated) | string | `small`, `medium`, `large` |
From config:
table: {
  paginationSize: "small"
} | +| perPage | How many rows per page (if paginated) | string \| number | - |
From config:
table: {
  perPage: 20
} | +| rowKey | Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) | string | - |
From config:
table: {
  rowKey: undefined
} | +| scrollable | Add a horizontal scrollbar when table is too wide | boolean | - | | +| selectable | Table can be focused and user can select rows. Rows can be navigate with keyboard arrows and are highlighted when hovering. | boolean | - |
From config:
table: {
  selectable: false
} | +| selected | Set which row is selected, use `v-model:selected` to make it two-way binding (if selectable) | Record<string, any> | - | | +| showDetailIcon | Allow detail icon and column to be visible (if detailed) | boolean | - |
From config:
table: {
  showDetailIcon: true
} | +| showHeader | Show header | boolean | - |
From config:
table: {
  showHeader: true
} | +| sortIcon | Sets the header sorting icon | string | - |
From config:
table: {
  sortIcon: "arrow-up"
} | +| sortIconSize | Sets the size of the sorting icon | string | `small`, `medium`, `large` |
From config:
table: {
  sortIconSize: "small"
} | +| stickyCheckbox | Make the checkbox column sticky (if checkable) | boolean | - | false | +| stickyHeader | Show a sticky table header | boolean | - | false | +| striped | Whether table is striped | boolean | - |
From config:
table: {
  striped: false
} | +| tdAttrs | Adds native attributes to column td element of a row | ((row: Record<string, any>, column: TableColumn<Record<string, any>>) => object) | - | | +| thAttrs | Adds native attributes to a column th element | ((column: TableColumn<Record<string, any>>) => object) | - | | +| total | Total number of table data if backend-pagination is enabled | number | - | 0 | ### Events @@ -174,25 +174,24 @@ sidebarDepth: 2 ### Props -| Prop name | Description | Type | Values | Default | -| ---------------- | ---------------------------------------------------------------- | -------------- | ------ | ----------------------------------------------------------- | -| customSearch | Define a custom filter funtion for the search | TSFunctionType | - | | -| customSort | Define a custom sort function | TSFunctionType | - | | -| field | Define an object property key if data is an object | string | - | | -| formatter | Provide a formatter function to edit the output | TSFunctionType | - | | -| headerSelectable | Make header selectable | boolean | - | false | -| label | Define the column label | string | - | | -| meta | Add addtional meta information for the column for custom purpose | any | - | | -| numeric | Define column value as number | boolean | - | false | -| position | Position of the column content | union | - | | -| searchable | Enable an additional searchbar below the column header | boolean | - | false | -| sortable | Enable column sortability | boolean | - | false | -| sticky | Whether the column is sticky or not | boolean | - | false | -| subheading | Define a column sub heading | string | - | | -| tdAttrs | Adds native attributes to td | object | - | | -| thAttrs | Adds native attributes to th | object | - | | -| visible | Define whether the column is visible or not | boolean | - | true | -| width | Column fixed width | union | - | | +| Prop name | Description | Type | Values | Default | +| ---------------- | ------------------------------------------------------ | -------------- | ------ | ----------------------------------------------------------- | +| customSearch | Define a custom filter funtion for the search | TSFunctionType | - | | +| customSort | Define a custom sort function | TSFunctionType | - | | +| field | Define an object property key if data is an object | string | - | | +| formatter | Provide a formatter function to edit the output | TSFunctionType | - | | +| headerSelectable | Make header selectable | boolean | - | false | +| label | Define the column label | string | - | | +| numeric | Define column value as number | boolean | - | false | +| position | Position of the column content | union | - | | +| searchable | Enable an additional searchbar below the column header | boolean | - | false | +| sortable | Enable column sortability | boolean | - | false | +| sticky | Whether the column is sticky or not | boolean | - | false | +| subheading | Define a column sub heading | string | - | | +| tdAttrs | Adds native attributes to td | object | - | | +| thAttrs | Adds native attributes to th | object | - | | +| visible | Define whether the column is visible or not | boolean | - | true | +| width | Column fixed width | union | - | | ### Slots diff --git a/packages/docs/package.json b/packages/docs/package.json index 79feea93e..d2f56fc64 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@oruga-ui/docs-next", - "version": "0.9.0-pre.5", + "version": "0.9.0", "homepage": "https://oruga-ui.com", "description": "UI components for Vue.js and CSS framework agnostic", "author": "Walter Tommasi ", diff --git a/packages/examples/package.json b/packages/examples/package.json index 1d8428680..40a167dea 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -1,6 +1,6 @@ { "name": "@oruga-ui/examples", - "version": "0.9.0-pre.5", + "version": "0.9.0", "homepage": "https://oruga-ui.com", "description": "Oruga component examples", "license": "MIT", @@ -50,7 +50,7 @@ "update": "ncu -u" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.5", + "@oruga-ui/oruga-next": "0.9.0", "vue": "^3.0.0" }, "dependencies": { diff --git a/packages/oruga/package.json b/packages/oruga/package.json index 814a0acec..dcc124a6c 100644 --- a/packages/oruga/package.json +++ b/packages/oruga/package.json @@ -1,6 +1,6 @@ { "name": "@oruga-ui/oruga-next", - "version": "0.9.0-pre.5", + "version": "0.9.0", "homepage": "https://oruga-ui.com", "description": "UI components for Vue.js and CSS framework agnostic", "author": "Walter Tommasi ", diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts index 7e30e02fd..ec37d5845 100644 --- a/packages/oruga/src/components/types.ts +++ b/packages/oruga/src/components/types.ts @@ -1044,7 +1044,7 @@ In addition, any CSS selector string or an actual DOM node can be used. */ iconPack: string; /** Step item tag name */ itemTag: DynamicComponent; - /** Role attribute to be passed to the div wrapper for better accessibility */ + /** Role attribute to be passed to the li wrapper for better accessibility */ ariaRole: string; /** Class of the nav item */ navItemClass: ClassDefinition; @@ -1165,7 +1165,7 @@ In addition, any CSS selector string or an actual DOM node can be used. */ /** Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) */ rowKey: string; /** Define individual class for a row */ - rowClass: (row: unknown, index: number) => string; + rowClass: (row: Record, index: number) => string; /** Border to all cells */ bordered: boolean; /** Whether table is striped */ @@ -1185,7 +1185,7 @@ In addition, any CSS selector string or an actual DOM node can be used. */ /** Color of the checkbox when checkable (if checkable) */ checkboxVariant: string; /** Custom method to verify if a row is checkable (if checkable) */ - isRowCheckable: (row: unknown) => boolean; + isRowCheckable: (row: Record) => boolean; /** Columns won't be sorted with Javascript, use with `sort` event to sort in your backend */ backendSorting: boolean; /** Sets the default sort column and order — e.g. 'first_name' or ['first_name', 'desc'] */ @@ -1199,7 +1199,7 @@ In addition, any CSS selector string or an actual DOM node can be used. */ /** Icon pack to use */ iconPack: string; /** Controls the visibility of the trigger that toggles the detailed rows (if detailed) */ - isDetailedVisible: (row: unknown) => boolean; + isDetailedVisible: (row: Record) => boolean; /** Allow detail icon and column to be visible (if detailed) */ showDetailIcon: boolean; /** Icon name of detail action (if detailed) */