diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index e50240362..903d6c62c 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,98 +1,99 @@ name: Bug report description: Create a report to help PrimeVue improve. -title: "Component Name: Issue Title" -labels: "Status: Needs Triage" +title: 'Component Name: Issue Title' +labels: 'Status: Needs Triage' body: - - type: markdown - attributes: - # yamllint disable rule:line-length - value: > - ### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeVue PRO Support* where support is provided within 4 business hours - # yamllint enable rule:line-length - - type: textarea - id: description - attributes: - label: Describe the bug - description: A clear and concise description of what the bug is. - validations: - required: true - - type: input - id: reproducer - attributes: - label: Reproducer - placeholder: https://codesandbox.io/s/primevue-create-vue-issue-template-kw9g6i - description: | - Please fork one of the issue template - [PrimeVue 3 Issue Template](https://codesandbox.io/s/primevue-create-vue-issue-template-kw9g6i) - [PrimeVue TypeScript Issue Template](https://codesandbox.io/s/primevue-create-vue-typescript-issue-template-fb775d) - [PrimeVue 2 Issue Template](https://codesandbox.io/s/primevue-2-issue-template-dw7jd7) - and create a case demonstrating your bug report. Issues **without** a CodeSandbox have much less possibility to be reviewed. - validations: - required: true - - type: input - id: pr-version - attributes: - label: PrimeVue version - placeholder: x.x.x - validations: - required: true - - type: dropdown - id: vue-version - attributes: - label: Vue version - multiple: false - options: - - 3.x - - 2.x - validations: - required: true - - type: dropdown - id: language - attributes: - label: Language - multiple: false - options: - - TypeScript - - ES5 - - ES6 - - ALL - validations: - required: true - - type: dropdown - id: engine - attributes: - label: Build / Runtime - multiple: false - options: - - Vue CLI App - - TypeScript - - Nuxt - - Vite - validations: - required: true - - type: input - id: browsers - attributes: - label: Browser(s) - description: List specific browser(s) the problem occurs on or leave blank if ALL browsers - placeholder: > - e.g. Safari 15, iOS 15.4, Chrome 90 - - type: textarea - id: reproduce-steps - attributes: - label: Steps to reproduce the behavior - description: A clear and concise description of how to make the issue happen. - placeholder: > - 1. Go to '...' - 2. Click on '....' - 3. Scroll down to '....' - 4. See error - validations: - required: false - - type: textarea - id: expected-behavior - attributes: - label: Expected behavior - description: A clear and concise description of what you expected to happen. - validations: - required: false + - type: markdown + attributes: + # yamllint disable rule:line-length + value: > + ### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeVue PRO Support* where support is provided within 4 business hours + # yamllint enable rule:line-length + - type: textarea + id: description + attributes: + label: Describe the bug + description: A clear and concise description of what the bug is. + validations: + required: true + - type: input + id: reproducer + attributes: + label: Reproducer + placeholder: https://stackblitz.com/edit/primevue-create-vue-issue-template + description: | + Please fork one of the issue template + [PrimeVue 3 Issue Template](https://stackblitz.com/edit/primevue-create-vue-issue-template) + [PrimeVue TypeScript Issue Template](https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template) + [PrimeVue Nuxt Issue Template](https://stackblitz.com/edit/primevue-nuxt-issue-template) + [PrimeVue 2 Issue Template](https://codesandbox.io/s/primevue-2-issue-template-dw7jd7) + and create a case demonstrating your bug report. Issues **without** a Stackblitz have much less possibility to be reviewed. + validations: + required: true + - type: input + id: pr-version + attributes: + label: PrimeVue version + placeholder: x.x.x + validations: + required: true + - type: dropdown + id: vue-version + attributes: + label: Vue version + multiple: false + options: + - 3.x + - 2.x + validations: + required: true + - type: dropdown + id: language + attributes: + label: Language + multiple: false + options: + - TypeScript + - ES5 + - ES6 + - ALL + validations: + required: true + - type: dropdown + id: engine + attributes: + label: Build / Runtime + multiple: false + options: + - Vue CLI App + - TypeScript + - Nuxt + - Vite + validations: + required: true + - type: input + id: browsers + attributes: + label: Browser(s) + description: List specific browser(s) the problem occurs on or leave blank if ALL browsers + placeholder: > + e.g. Safari 15, iOS 15.4, Chrome 90 + - type: textarea + id: reproduce-steps + attributes: + label: Steps to reproduce the behavior + description: A clear and concise description of how to make the issue happen. + placeholder: > + 1. Go to '...' + 2. Click on '....' + 3. Scroll down to '....' + 4. See error + validations: + required: false + - type: textarea + id: expected-behavior + attributes: + label: Expected behavior + description: A clear and concise description of what you expected to happen. + validations: + required: false diff --git a/CHANGELOG.md b/CHANGELOG.md index b31d6f9a1..489f713ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,99 @@ # Changelog +## [3.47.2](https://github.com/primefaces/primevue/tree/3.47.1) (2024-01-23) + +[Full Changelog](https://github.com/primefaces/primevue/compare/3.47.1...3.47.2) + +**Fixed bugs:** + +- OverlayPanel: RangeError: Maximum call stack size exceeded inside link [\#5146](https://github.com/primefaces/primevue/issues/5146) +- Align hover colors for MultipleSelect, AutoComplete and CascadeSelect [\#5150](https://github.com/primefaces/primevue/issues/5150) + +## [3.47.1](https://github.com/primefaces/primevue/tree/3.47.1) (2024-01-24) + +[Full Changelog](https://github.com/primefaces/primevue/compare/3.47.0...3.47.1) + +**Fixed bugs:** + +- Keyboard accessibility is not working on OrderList and PickList [\#5144](https://github.com/primefaces/primevue/issues/5144) + +## [3.47.0](https://github.com/primefaces/primevue/tree/3.47.0) (2024-01-24) + +[Full Changelog](https://github.com/primefaces/primevue/compare/3.46.0...3.47.0) + +**Breaking Changes:** + +- Change visual focus behavior for UI/UX enhancement on some components [\#5106](https://github.com/primefaces/primevue/issues/5106) +- Highlight state changes on Checkbox selection mode [\#5105](https://github.com/primefaces/primevue/issues/5105) +- autoOptionFocus property added to Input-like components [\#5099](https://github.com/primefaces/primevue/issues/5099) +- Improve the structure of some components to comply with standards [\#5071](https://github.com/primefaces/primevue/issues/5071) +- autoOptionFocus default type is changed as false [\#5096](https://github.com/primefaces/primevue/issues/5096) + +**Fixed bugs:** + +- Search with null/undefined values breaks rendering [\#5140](https://github.com/primefaces/primevue/issues/5140) +- The hideIcon property is not working on SpeedDial [\#5135](https://github.com/primefaces/primevue/issues/5135) +- Textarea: modelValue should accept Nullable as InputText does [\#5127](https://github.com/primefaces/primevue/issues/5127) +- Chips: Separator by new line doesn't work by pasting value [\#5103](https://github.com/primefaces/primevue/issues/5103) +- DataTable: Cannot read properties of null when editMode="cell" and selectionMode="single" [\#5100](https://github.com/primefaces/primevue/issues/5100) +- Unit tests in the master branch are failing [\#5095](https://github.com/primefaces/primevue/issues/5095) +- InputNumber: Home and End key defects [\#5094](https://github.com/primefaces/primevue/issues/5094) +- Float label demo is broken in mobile mode [\#5089](https://github.com/primefaces/primevue/issues/5089) +- [TabMenu] Router demo has the wrong code [\#5082](https://github.com/primefaces/primevue/issues/5082) +- Calendar: Incorrect interface "CalendarContext" for Calendar component [\#5077](https://github.com/primefaces/primevue/issues/5077) +- Tag: center icon when no label is present (icon-only mode) [\#5067](https://github.com/primefaces/primevue/issues/5067) +- DataTable: Uncaught TypeError: Cannot read properties of null (reading 'sortable') at Proxy.getColumnPT8 [\#5062](https://github.com/primefaces/primevue/issues/5062) +- Calendar: When use with Datatable filter, the calendar would show at the bottom of the page. [\#5055](https://github.com/primefaces/primevue/issues/5055) +- DataTable: persistent expandedRows with dataKey doesn't working properly [\#5057](https://github.com/primefaces/primevue/issues/5057) +- DataTable: Column with no props throws exception [\#5056](https://github.com/primefaces/primevue/issues/5056) +- DataTable: Empty column causes maximum recursive calls to be reached [\#5053](https://github.com/primefaces/primevue/issues/5053) +- ContextMenu: Cache duplication "focusedItemId" [\#5054](https://github.com/primefaces/primevue/issues/5054) +- Calendar: panel does not hide when pressing enter [\#5050](https://github.com/primefaces/primevue/issues/5050) +- Dialog: maximizable broken if dialog moved [\#5048](https://github.com/primefaces/primevue/issues/5048) +- DataTable: Hydration attribute mismatch with sortable columns [\#5046](https://github.com/primefaces/primevue/issues/5046) +- Can't paste a decimal value when there is a total value in the input. [\#5034](https://github.com/primefaces/primevue/issues/5034) +- Tooltip: Malfunction inside Links [\#5030](https://github.com/primefaces/primevue/issues/5030) +- SplitButton inherits CSS properties from DynamicDialog "footer" and disrupts the original design [\#5012](https://github.com/primefaces/primevue/issues/5012) +- Tooltip: missing nonce for inline styles [\#5010](https://github.com/primefaces/primevue/issues/5010) +- InputNumber: insert behavior defects [\#4539](https://github.com/primefaces/primevue/issues/4539) + +**Implemented New Features and Enhancements:** + +- New Aura Theme[\#5143](https://github.com/primefaces/primevue/issues/5143) +- Add itemGroupLabel, itemLabel, tickIcon and blankIcon options to pt in Dropdown [\#5142](https://github.com/primefaces/primevue/issues/5142) +- Add highlightOnSelect and checkmark props to Dropdown [\#5141](https://github.com/primefaces/primevue/issues/5141) +- Icon: BlankIcon [\#5139](https://github.com/primefaces/primevue/issues/5139) +- Add focusOnHover props to some components [\#5130](https://github.com/primefaces/primevue/issues/5130) +- DataTable: body template rowTogglerCallback callback option added [\#5123](https://github.com/primefaces/primevue/issues/5123) +- Dialog: no transition on open/close when dialog is maximized [\#5118](https://github.com/primefaces/primevue/issues/5118) +- Expose alignOverlay method in OverlayPanel [\#5075](https://github.com/primefaces/primevue/issues/5075) +- Message: 'life-end' emit [\#5070](https://github.com/primefaces/primevue/issues/5070) +- New MeterGroup component [\#5066](https://github.com/primefaces/primevue/issues/5066) +- Dropdown: After selecting an option, clearing the value using close icon should clear the filter input [\#5060](https://github.com/primefaces/primevue/issues/5060) + +## [3.46.0](https://github.com/primefaces/primevue/tree/3.46.0) (2024-01-08) + +[Full Changelog](https://github.com/primefaces/primevue/compare/3.45.0...3.46.0) + +**Fixed bugs:** + +- SVG clip path attribute should be clip-path and not clipPath [\#5036](https://github.com/primefaces/primevue/issues/5036) +- Tooltip arrow is broken [\#5033](https://github.com/primefaces/primevue/issues/5033) +- ConfirmDialog & ConfirmPopup: icon option class pt implementation defect [\#5028](https://github.com/primefaces/primevue/issues/5028) +- Sidebar: Escape key doesn't close the Slidebar [\#5016](https://github.com/primefaces/primevue/issues/5016) +- BodyRow: Cannot read propertie of null (reading 'forEach) [\#5005](https://github.com/primefaces/primevue/issues/5005) +- InputNumber: highlight on focus don't work on multiple inputs with the same value [\#5003](https://github.com/primefaces/primevue/issues/5003) +- TreeSelect: tab key control defect [\#4998](https://github.com/primefaces/primevue/issues/4998) +- bodyRow broken pt context options [\#4996](https://github.com/primefaces/primevue/issues/4996) +- VirtualScroller loading is not working on DataTable [\#4993](https://github.com/primefaces/primevue/issues/4993) +- added sortIcon property to type ColumnPassThroughOptionType [\#4992](https://github.com/primefaces/primevue/issues/4992) +- wrong type appendTo props [\#4905](https://github.com/primefaces/primevue/issues/4905) + +**Implemented New Features and Enhancements:** + +- Add caption option to passthrough options on Card [\#5020](https://github.com/primefaces/primevue/issues/5020) +- CascadeSelect: context options improvements for pt [\#4995](https://github.com/primefaces/primevue/issues/4995) + ## [3.45.0](https://github.com/primefaces/primevue/tree/3.45.0) (2023-12-22) [Full Changelog](https://github.com/primefaces/primevue/compare/3.44.0...3.45.0) diff --git a/README.md b/README.md index 24ee434b7..10be5f5d2 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ pnpm add primevue ## Plugin -PrimeVue plugin is required to be installed with the **use** function to set up the default [configuration](https://primevue.org/theming). +PrimeVue plugin is required to be installed with the **use** function to set up the default [configuration](https://primevue.org/configuration). ```javascript import { createApp } from 'vue'; @@ -46,7 +46,7 @@ Styled mode is based on pre-skinned components with opinionated themes like Mate ```javascript // theme -import 'primevue/resources/themes/lara-light-green/theme.css'; +import 'primevue/resources/themes/aura-light-green/theme.css'; ``` **Unstyled Mode** @@ -138,7 +138,7 @@ In styled mode, the theme can be defined at Nuxt configuration with the css prop ```javascript export default defineNuxtConfig({ - css: ['primevue/resources/themes/lara-dark-green/theme.css'] + css: ['primevue/resources/themes/aura-dark-green/theme.css'] }); ``` diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js index 50aca3b11..1e1720043 100644 --- a/api-generator/components/autocomplete.js +++ b/api-generator/components/autocomplete.js @@ -89,6 +89,18 @@ const AutoCompleteProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'dataKey', type: 'string', @@ -200,7 +212,7 @@ const AutoCompleteProps = [ { name: 'autoOptionFocus', type: 'boolean', - default: 'true', + default: 'false', description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' }, { diff --git a/api-generator/components/badge.js b/api-generator/components/badge.js index c9d9c6024..b1450d0d7 100644 --- a/api-generator/components/badge.js +++ b/api-generator/components/badge.js @@ -9,7 +9,7 @@ const BadgeProps = [ name: 'severity', type: 'string', default: 'null', - description: 'Severity type of the badge.' + description: 'Severity type of the badge. Valid severities are "secondary", "success", "info", "warning", "danger" and "contrast".' }, { name: 'size', diff --git a/api-generator/components/button.js b/api-generator/components/button.js index 5e83c6cf4..486dbfcce 100644 --- a/api-generator/components/button.js +++ b/api-generator/components/button.js @@ -57,7 +57,7 @@ const ButtonProps = [ name: 'severity', type: 'string', default: 'null', - description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger".' + description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger", "contrast".' }, { name: 'raised', diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js index 90804b932..2bd496d91 100644 --- a/api-generator/components/calendar.js +++ b/api-generator/components/calendar.js @@ -257,6 +257,18 @@ const CalendarProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'readonly', type: 'boolean', diff --git a/api-generator/components/cascadeselect.js b/api-generator/components/cascadeselect.js index 616661c15..4a870edb4 100644 --- a/api-generator/components/cascadeselect.js +++ b/api-generator/components/cascadeselect.js @@ -53,6 +53,18 @@ const CascadeSelectProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'dataKey', type: 'string', @@ -128,7 +140,7 @@ const CascadeSelectProps = [ { name: 'autoOptionFocus', type: 'boolean', - default: 'true', + default: 'false', description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' }, { diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js index 263a375a5..fc05fa217 100644 --- a/api-generator/components/checkbox.js +++ b/api-generator/components/checkbox.js @@ -23,6 +23,18 @@ const CheckboxProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'readonly', type: 'boolean', diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js index 842680ba6..84235776e 100644 --- a/api-generator/components/chips.js +++ b/api-generator/components/chips.js @@ -35,6 +35,18 @@ const ChipsProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'placeholder', type: 'string', diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js index 5fc330533..5e0ac3cc4 100644 --- a/api-generator/components/datatable.js +++ b/api-generator/components/datatable.js @@ -366,6 +366,12 @@ const DataTableProps = [ default: 'false', description: 'Whether to displays rows with alternating colors.' }, + { + name: 'highlightOnSelect', + type: 'boolean', + default: 'false', + description: 'Highlights automatically the first item.' + }, { name: 'size', type: 'string', diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js index 1a4f63222..a57c8011d 100644 --- a/api-generator/components/dropdown.js +++ b/api-generator/components/dropdown.js @@ -95,6 +95,18 @@ const DropdownProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'dataKey', type: 'string', @@ -185,6 +197,12 @@ const DropdownProps = [ default: 'false', description: 'Clears the filter value when hiding the dropdown.' }, + { + name: 'resetFilterOnClear', + type: 'boolean', + default: 'false', + description: 'Clears the filter value when clicking on the clear icon.' + }, { name: 'virtualScrollerOptions', type: 'object', @@ -194,7 +212,7 @@ const DropdownProps = [ { name: 'autoOptionFocus', type: 'boolean', - default: 'true', + default: 'false', description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' }, { diff --git a/api-generator/components/inlinemessage.js b/api-generator/components/inlinemessage.js index d2e2e5419..34fdd0c4b 100644 --- a/api-generator/components/inlinemessage.js +++ b/api-generator/components/inlinemessage.js @@ -3,7 +3,7 @@ const InlineMessageProps = [ name: 'severity', type: 'string', default: 'error', - description: 'Severity level of the message. Valid severities are "success", "info", "warn" and "error".' + description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".' }, { name: 'icon', diff --git a/api-generator/components/inputmask.js b/api-generator/components/inputmask.js index e054affbd..2c8087e09 100644 --- a/api-generator/components/inputmask.js +++ b/api-generator/components/inputmask.js @@ -29,6 +29,18 @@ const InputMaskProps = [ default: 'false', description: 'Defines if model sets the raw unmasked value to bound value or the formatted mask value.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'pt', type: 'any', diff --git a/api-generator/components/inputnumber.js b/api-generator/components/inputnumber.js index d72871f55..cab3dffe0 100644 --- a/api-generator/components/inputnumber.js +++ b/api-generator/components/inputnumber.js @@ -147,6 +147,18 @@ const InputNumberProps = [ default: 'null', description: 'Placeholder text for the input.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'inputId', type: 'string', diff --git a/api-generator/components/inputtext.js b/api-generator/components/inputtext.js index a69775455..439213ce3 100644 --- a/api-generator/components/inputtext.js +++ b/api-generator/components/inputtext.js @@ -11,6 +11,18 @@ const InputTextProps = [ default: 'null', description: 'Defines the size of the component, valid values are "small" and "large".' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'pt', type: 'any', diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js index ad63267b8..006761e9c 100644 --- a/api-generator/components/listbox.js +++ b/api-generator/components/listbox.js @@ -53,6 +53,12 @@ const ListboxProps = [ default: 'false', description: 'When specified, disables the component.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, { name: 'dataKey', type: 'string', @@ -117,7 +123,7 @@ const ListboxProps = [ { name: 'autoOptionFocus', type: 'boolean', - default: 'true', + default: 'false', description: 'Whether to focus on the first visible or selected element.' }, { diff --git a/api-generator/components/message.js b/api-generator/components/message.js index 68f553418..3adab35fe 100644 --- a/api-generator/components/message.js +++ b/api-generator/components/message.js @@ -3,7 +3,7 @@ const MessageProps = [ name: 'severity', type: 'string', default: 'info', - description: 'Severity level of the message. Valid severities are "success", "info", "warn" and "error".' + description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".' }, { name: 'closable', @@ -75,6 +75,10 @@ const MessageEvents = [ description: 'Browser event' } ] + }, + { + name: 'life-end', + description: "Callback to invoke when the message's timeout is over." } ]; diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js index 703f349a0..35ef21230 100644 --- a/api-generator/components/multiselect.js +++ b/api-generator/components/multiselect.js @@ -59,6 +59,18 @@ const MultiSelectProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'inputId', type: 'string', @@ -236,7 +248,7 @@ const MultiSelectProps = [ { name: 'autoOptionFocus', type: 'boolean', - default: 'true', + default: 'false', description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' }, { @@ -245,6 +257,12 @@ const MultiSelectProps = [ default: 'false', description: 'Whether to focus on the filter element when the overlay panel is shown.' }, + { + name: 'highlightOnSelect', + type: 'boolean', + default: 'false', + description: 'Highlights automatically the first item.' + }, { name: 'filterMessage', type: 'string', diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js index d8f25a844..7c80b113d 100644 --- a/api-generator/components/orderlist.js +++ b/api-generator/components/orderlist.js @@ -18,6 +18,12 @@ const OrderListProps = [ description: 'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.' }, + { + name: 'autoOptionFocus', + type: 'boolean', + default: 'false', + description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' + }, { name: 'dataKey', type: 'string', diff --git a/api-generator/components/password.js b/api-generator/components/password.js index 8fc8b489f..19011e585 100644 --- a/api-generator/components/password.js +++ b/api-generator/components/password.js @@ -83,6 +83,18 @@ const PasswordProps = [ default: 'null', description: 'Placeholder text for the input.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'required', type: 'boolean', diff --git a/api-generator/components/picklist.js b/api-generator/components/picklist.js index 27d1a905e..7b8e99b5e 100644 --- a/api-generator/components/picklist.js +++ b/api-generator/components/picklist.js @@ -18,6 +18,12 @@ const PickListProps = [ description: 'Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.' }, + { + name: 'autoOptionFocus', + type: 'boolean', + default: 'false', + description: 'Whether to focus on the first visible or selected element when the overlay panel is shown.' + }, { name: 'dataKey', type: 'string', diff --git a/api-generator/components/radiobutton.js b/api-generator/components/radiobutton.js index a13f8c25f..b843d753f 100644 --- a/api-generator/components/radiobutton.js +++ b/api-generator/components/radiobutton.js @@ -23,6 +23,18 @@ const RadioButtonProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'inputId', type: 'string', diff --git a/api-generator/components/selectbutton.js b/api-generator/components/selectbutton.js index 6dd55ad81..30659dd50 100644 --- a/api-generator/components/selectbutton.js +++ b/api-generator/components/selectbutton.js @@ -41,6 +41,12 @@ const SelectButtonProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, { name: 'dataKey', type: 'string', diff --git a/api-generator/components/splitbutton.js b/api-generator/components/splitbutton.js index bdb6633e6..f12d64798 100644 --- a/api-generator/components/splitbutton.js +++ b/api-generator/components/splitbutton.js @@ -63,7 +63,7 @@ const SplitButtonProps = [ name: 'severity', type: 'string', default: 'null', - description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger".' + description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger", "contrast".' }, { name: 'raised', diff --git a/api-generator/components/tag.js b/api-generator/components/tag.js index 1713f6b12..e476acea2 100644 --- a/api-generator/components/tag.js +++ b/api-generator/components/tag.js @@ -9,7 +9,7 @@ const TagProps = [ name: 'severity', type: 'string', default: 'null', - description: 'Severity type of the tag. Valid severities are "success", "info", "warning" and "danger".' + description: 'Severity type of the tag. Valid severities are "secondary", "success", "info", "warning", "danger" and "contrast".' }, { name: 'rounded', diff --git a/api-generator/components/textarea.js b/api-generator/components/textarea.js index 7b20070d0..e8f06aad3 100644 --- a/api-generator/components/textarea.js +++ b/api-generator/components/textarea.js @@ -11,6 +11,18 @@ const TextareaProps = [ default: 'false', description: 'When present, height of textarea changes as being typed.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'pt', type: 'any', diff --git a/api-generator/components/togglebutton.js b/api-generator/components/togglebutton.js index 4ec7b3f2c..1f4d6a3ef 100644 --- a/api-generator/components/togglebutton.js +++ b/api-generator/components/togglebutton.js @@ -47,6 +47,12 @@ const ToggleButtonProps = [ default: 'false', description: 'When present, it specifies that the element should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, { name: 'inputId', type: 'string', diff --git a/api-generator/components/tree.js b/api-generator/components/tree.js index f0438c121..f38735277 100644 --- a/api-generator/components/tree.js +++ b/api-generator/components/tree.js @@ -72,6 +72,12 @@ const TreeProps = [ default: 'undefined', description: "Locale to use in filtering. The default locale is the host environment's current locale." }, + { + name: 'highlightOnSelect', + type: 'boolean', + default: 'false', + description: 'Highlights automatically the first item.' + }, { name: 'scrollHeight', type: 'string', diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js index f5747b6a2..5d77a42a7 100644 --- a/api-generator/components/treeselect.js +++ b/api-generator/components/treeselect.js @@ -29,6 +29,18 @@ const TreeSelectProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'tabindex', type: 'string', diff --git a/api-generator/components/tristatecheckbox.js b/api-generator/components/tristatecheckbox.js index 8ecd7762d..916a3630f 100644 --- a/api-generator/components/tristatecheckbox.js +++ b/api-generator/components/tristatecheckbox.js @@ -11,6 +11,18 @@ const TriStateCheckboxProps = [ default: 'false', description: 'When present, it specifies that the component should be disabled.' }, + { + name: 'invalid', + type: 'boolean', + default: 'false', + description: 'When present, it specifies that the component should have invalid state style.' + }, + { + name: 'variant', + type: 'string', + default: 'null', + description: 'Specifies the input variant of the component.' + }, { name: 'tabindex', type: 'string', diff --git a/app.vue b/app.vue index 740244760..821d07a7d 100644 --- a/app.vue +++ b/app.vue @@ -12,7 +12,7 @@ export default { $route: { handler(to) { if (to.name === 'index') { - this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green', dark: this.$appState.darkTheme }); + this.themeChangeListener({ theme: this.$appState.darkTheme ? 'aura-dark-green' : 'aura-light-green', dark: this.$appState.darkTheme }); } } } @@ -28,7 +28,7 @@ export default { { id: 'home-table-link', rel: 'stylesheet', - href: '/styles/landing/themes/lara-light-green/theme.css' + href: '/styles/landing/themes/aura-light-green/theme.css' } ] }); diff --git a/assets/data/news.json b/assets/data/news.json index b35c0968a..f15aeaad0 100644 --- a/assets/data/news.json +++ b/assets/data/news.json @@ -1,8 +1,8 @@ { - "id": 51, - "content": "New Year Sale is Here! 🎉", - "linkText": "Visit Store", - "linkHref": "https://primefaces.org/store", + "id": 52, + "content": "Tailwind Presets for Unstyled PrimeVue", + "linkText": "Learn More", + "linkHref": "http://tailwind.primevue.org", "backgroundStyle": "background-color:var(--primary-color)", "textStyle": "color:var(--primary-color-text);font-weight:500", "linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;" diff --git a/assets/menu/menu.json b/assets/menu/menu.json index 6a9f47bd2..27e84cabb 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -9,16 +9,8 @@ "to": "/introduction" }, { - "name": "Vite Setup", - "to": "/vite" - }, - { - "name": "Nuxt Setup", - "to": "/nuxt" - }, - { - "name": "Configuration", - "to": "/configuration" + "name": "Setup", + "to": "/setup" }, { "name": "Playground", @@ -26,6 +18,42 @@ } ] }, + { + "name": "Installation", + "icon": "pi pi-cloud-download", + "children": [ + { + "name": "Vite", + "to": "/vite" + }, + { + "name": "Nuxt", + "to": "/nuxt" + }, + { + "name": "CDN", + "to": "/cdn" + } + ] + }, + { + "name": "Configuration", + "icon": "pi pi-cog", + "children": [ + { + "name": "Options", + "to": "/configuration" + }, + { + "name": "Auto Import", + "to": "/autoimport" + }, + { + "name": "CSS Layer", + "to": "/csslayer" + } + ] + }, { "name": "Components", "icon": "pi pi-compass", @@ -65,6 +93,16 @@ "name": "Editor", "to": "/editor" }, + { + "name": "FloatLabel", + "to": "/floatlabel", + "badge": "NEW" + }, + { + "name": "IconField", + "to": "/iconfield", + "badge": "NEW" + }, { "name": "InputGroup", "to": "/inputgroup" @@ -399,6 +437,11 @@ "name": "Inplace", "to": "/inplace" }, + { + "name": "MeterGroup", + "to": "/metergroup", + "badge": "NEW" + }, { "name": "ScrollTop", "to": "/scrolltop" @@ -531,10 +574,6 @@ "name": "Accessibility", "to": "/guides/accessibility" }, - { - "name": "CSS Layer", - "to": "/guides/csslayer" - }, { "name": "PrimeTV", "icon": "pi pi-youtube", diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss index 28663ba97..405f930a0 100644 --- a/assets/styles/layout/_code.scss +++ b/assets/styles/layout/_code.scss @@ -140,4 +140,12 @@ pre[class*="language-"] { } } } + + &[data-p-theme^="aura-light-noir"] { + pre[class*="language-"] { + code { + background: var(--surface-950); + } + } + } } \ No newline at end of file diff --git a/assets/styles/layout/_config.scss b/assets/styles/layout/_config.scss index 87ed2e244..ba97708ee 100644 --- a/assets/styles/layout/_config.scss +++ b/assets/styles/layout/_config.scss @@ -5,16 +5,6 @@ .p-selectbutton { .p-button { padding: 0.5rem 1rem; - - &:first-child { - border-top-left-radius: 30px; - border-bottom-left-radius: 30px; - } - - &:last-child { - border-top-right-radius: 30px; - border-bottom-right-radius: 30px; - } } } diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index c6ca698e2..41faef844 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -40,29 +40,29 @@ h1, h2, h3, h4, h5, h6 { } h1 { - font-size: 2rem; + font-size: 1.75rem; } h2 { - font-size: 1.5rem; -} - -h3 { font-size: 1.25rem; } -h4 { +h3 { font-size: 1.125rem; } -h5 { +h4 { font-size: 1rem; } -h6 { +h5 { font-size: .875rem; } +h6 { + font-size: .75rem; +} + p { line-height: 1.75; margin: 0 0 1rem 0; diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index a7c30bcff..7e0d278f7 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -78,7 +78,7 @@ p { font-size: 1.125rem; - color: var(--surface-900); + color: var(--text-color); margin: 0; a { @@ -119,13 +119,13 @@ .doc-section-description { > p { - font-size: 1.125rem; - color: var(--surface-900); + font-size: 1rem; + color: var(--text-color); i { border-radius: 6px; padding: 2px 6px; - font-size: 1rem; + font-size: .875rem; font-weight: 500; font-style: normal; background-color: var(--doc-highlight-text-bg); diff --git a/assets/styles/layout/variables/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss index 6b0579725..906049c9a 100644 --- a/assets/styles/layout/variables/landing/_dark.scss +++ b/assets/styles/layout/variables/landing/_dark.scss @@ -1,53 +1,53 @@ .landing.layout-dark { --home-highlight-color:#34d399; --home-highlight-darker-color:#6ee7b7; - --home-highlight-fore-color:#030712; - --home-bg:#111827; - --home-border-color:#424b57; + --home-highlight-fore-color:#020617; + --home-bg:#09090b; + --home-border-color:#27272a; --home-primary-text-color:#ffffff; - --home-secondary-text-color:rgba(255,255,255,.6); + --home-secondary-text-color:#a1a1aa; --home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25); - --home-box-bg:#1f2937; + --home-box-bg:#18181b; --home-linkbox-bg:rgba(255, 255, 255, .05); --home-linkbox-border:1px solid rgba(255, 255, 255, .1); --home-linkbox-text-color:#ffffff; --home-linkbox-hover-bg:rgba(255, 255, 255, .1); --home-blocks-bg:transparent; - --home-blocks-block-bg:#111827; + --home-blocks-block-bg:#09090b; --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25); - --home-blocks-border-left:5px solid #1f2937; - --home-blocks-border-bottom:7px solid #1f2937; - --home-blocks-border:1px solid #424b57; - --home-blocks-sidebar-bg:#1f2937; - --home-blocks-list-bg:#28323f; - --home-blocks-main-bg:#111827; - --home-blocks-main-border:1px solid #424b57; - --home-blocks-item-bg:#1f2937; - --home-blocks-image-bg:#28323f; - --home-blocks-text-color:#4b5563; + --home-blocks-border-left:5px solid #27272a; + --home-blocks-border-bottom:7px solid #27272a; + --home-blocks-border:1px solid #27272a; + --home-blocks-sidebar-bg:#18181b; + --home-blocks-list-bg:#27272a; + --home-blocks-main-bg:#09090b; + --home-blocks-main-border:1px solid #27272a; + --home-blocks-item-bg:#18181b; + --home-blocks-image-bg:#27272a; + --home-blocks-text-color:#52525b; --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25); - --home-blocks-active-border-top:1px solid #424b57; - --home-blocks-active-border-right:1px solid #424b57; - --home-blocks-active-border-bottom:6px solid #424b57; - --home-blocks-active-border-left:4px solid #424b57; + --home-blocks-active-border-top:1px solid #27272a; + --home-blocks-active-border-right:1px solid #27272a; + --home-blocks-active-border-bottom:6px solid #27272a; + --home-blocks-active-border-left:4px solid #27272a; --home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25); - --home-blocks-tablebar-bg:#4b5563; - --home-blocks-bar-bg:#4b5563; - --home-blocks-bar-button-bg:#ffffff; - --home-blocks-circle-bg:#4b5563; + --home-blocks-tablebar-bg:#3f3f46; + --home-blocks-bar-bg:#3f3f46; + --home-blocks-bar-button-bg:#3f3f46; + --home-blocks-circle-bg:#27272a; --home-templates-bg:transparent; --home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25); - --home-templates-block-border-left:5px solid #424b57; - --home-templates-block-border-bottom:7px solid #424b57; + --home-templates-block-border-left:5px solid #27272a; + --home-templates-block-border-bottom:7px solid #27272a; --home-templates-line:rgba(255,255,255,.1); --home-templates-block-hover-bg:rgba(255,255,255,.1); - --home-templates-btn-bg:#1f2937; + --home-templates-btn-bg:#18181b; --home-templates-btn-text-color:#ffffff; --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25); - --home-templates-btn-border-top:1px solid #424b57; - --home-templates-btn-border-right:1px solid #424b57; - --home-templates-btn-border-bottom:4px solid #424b57; - --home-templates-btn-border-left:3px solid #424b57; + --home-templates-btn-border-top:1px solid #27272a; + --home-templates-btn-border-right:1px solid #27272a; + --home-templates-btn-border-bottom:4px solid #27272a; + --home-templates-btn-border-left:3px solid #27272a; --home-features-card-shadow: none; --home-box-ring-color: rgba(52, 211, 153, .3); } \ No newline at end of file diff --git a/assets/styles/layout/variables/landing/_light.scss b/assets/styles/layout/variables/landing/_light.scss index 8352457a4..7a3fdc886 100644 --- a/assets/styles/layout/variables/landing/_light.scss +++ b/assets/styles/layout/variables/landing/_light.scss @@ -2,39 +2,39 @@ --home-highlight-color:#10b981; --home-highlight-darker-color:#059669; --home-highlight-fore-color:#ffffff; - --home-bg:#F9FAFB; - --home-border-color:rgba(0,0,0,.1); - --home-primary-text-color:#030712; - --home-secondary-text-color:#6b7280; + --home-bg:#f8fafc; + --home-border-color:#e2e8f0; + --home-primary-text-color:#334155; + --home-secondary-text-color:#64748b; --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01); --home-box-bg:#ffffff; --home-linkbox-bg:#ffffff; - --home-linkbox-border:1px solid rgba(0,0,0,.1); - --home-linkbox-text-color:#030712; - --home-linkbox-hover-bg:#e5e7eb; + --home-linkbox-border:1px solid #e2e8f0; + --home-linkbox-text-color:#334155; + --home-linkbox-hover-bg:#f1f5f9; --home-blocks-bg:transparent; --home-blocks-block-bg:#ffffff; --home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1); - --home-blocks-border-left:5px solid rgba(0,0,0,.1); - --home-blocks-border-bottom:7px solid rgba(0,0,0,.1); - --home-blocks-border:1px solid rgba(0,0,0,.1); - --home-blocks-sidebar-bg:#f3f4f6; - --home-blocks-list-bg:#f9fafb; + --home-blocks-border-left:5px solid #e2e8f0; + --home-blocks-border-bottom:7px solid #e2e8f0; + --home-blocks-border:1px solid #e2e8f0; + --home-blocks-sidebar-bg:#f1f5f9; + --home-blocks-list-bg:#f8fafc; --home-blocks-main-bg:#ffffff; - --home-blocks-main-border:1px solid rgba(0,0,0,.1); - --home-blocks-item-bg:#f4f5f7; - --home-blocks-image-bg:#e5e7eb; - --home-blocks-text-color:#d1d5db; + --home-blocks-main-border:1px solid #e2e8f0; + --home-blocks-item-bg:#f1f5f9; + --home-blocks-image-bg:#e2e8f0; + --home-blocks-text-color:#cbd5e1; --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1); --home-blocks-active-border-top:1px solid rgba(0,0,0,.07); --home-blocks-active-border-right:1px solid rgba(0,0,0,.07); --home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07); --home-blocks-active-border-left:4px solid rgba(0,0,0,.07); --home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2); - --home-blocks-tablebar-bg:#d1d5db; - --home-blocks-bar-bg:#d1d5db; + --home-blocks-tablebar-bg:#cbd5e1; + --home-blocks-bar-bg:#cbd5e1; --home-blocks-bar-button-bg:#ffffff; - --home-blocks-circle-bg:#c7cad0; + --home-blocks-circle-bg:#cbd5e1; --home-templates-bg:transparent; --home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1); --home-templates-block-border-left:5px solid #d1d5db; @@ -49,5 +49,5 @@ --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1); --home-templates-btn-border-left:3px solid rgba(0,0,0,.1); --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01); - --home-box-ring-color: var(--primary-100); + --home-box-ring-color: var(--primary-200); } \ No newline at end of file diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index c28faa0bb..a04f7878b 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/assets/styles/layout/variables/main/_dark.scss @@ -13,6 +13,6 @@ --demo-code-button-color: var(--surface-500); --demo-code-button-hover-bg: rgba(255,255,255,.1); --demo-code-button-hover-color: var(--surface-700); - --doc-highlight-text-bg: var(--highlight-bg); - --doc-highlight-text-color: var(--highlight-text-color); + --doc-highlight-text-bg: var(--surface-50); + --doc-highlight-text-color: var(--surface-500); } \ No newline at end of file diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss index 9f39e830e..1db9bd22f 100644 --- a/assets/styles/layout/variables/main/_light.scss +++ b/assets/styles/layout/variables/main/_light.scss @@ -2,17 +2,16 @@ --primary-color-default:var(--primary-600); --primary-color-inverse-default:var(--surface-0); --topbar-sticky-bg:rgba(255,255,255,.7); - --body-bg: var(--p-surface-50); - --card-border: 1px solid var(--p-surface-200); - --card-bg: var(--p-surface-0); - --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%); + --card-border: 1px solid var(--surface-border); + --card-bg: var(--surface-card); + --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png); --glow-blend: hard-light, multiply; --topbar-border: rgba(0,0,0,.05); --mobile-menu-bg: var(--surface-overlay); - --demo-code-bg: var(--surface-700); + --demo-code-bg: var(--surface-800); --demo-code-button-color: var(--surface-300); --demo-code-button-hover-bg: rgba(255,255,255,.1); --demo-code-button-hover-color: var(--surface-100); - --doc-highlight-text-bg: var(--primary-100); - --doc-highlight-text-color: var(--primary-900); + --doc-highlight-text-bg: var(--surface-200); + --doc-highlight-text-color: var(--surface-700); } \ No newline at end of file diff --git a/components/demo/DeferredDemo.vue b/components/demo/DeferredDemo.vue index 508ec6f03..243f4b80b 100644 --- a/components/demo/DeferredDemo.vue +++ b/components/demo/DeferredDemo.vue @@ -1,5 +1,9 @@ @@ -42,14 +46,33 @@ export default { }; diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue index f0411d7f2..b560a5221 100644 --- a/components/doc/DocSectionCode.vue +++ b/components/doc/DocSectionCode.vue @@ -18,16 +18,6 @@ - - diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js index 10e698aaa..bad7a0019 100644 --- a/components/lib/checkbox/style/CheckboxStyle.js +++ b/components/lib/checkbox/style/CheckboxStyle.js @@ -1,26 +1,43 @@ import BaseStyle from 'primevue/base/style'; +const css = ` +@layer primevue { + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + + .p-checkbox-input { + cursor: pointer; + } + + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } +} +`; + const classes = { root: ({ instance, props }) => [ 'p-checkbox p-component', - { - 'p-checkbox-checked': instance.checked, - 'p-checkbox-disabled': props.disabled, - 'p-checkbox-focused': instance.focused - } - ], - input: ({ instance, props }) => [ - 'p-checkbox-box', { 'p-highlight': instance.checked, 'p-disabled': props.disabled, - 'p-focus': instance.focused + 'p-invalid': props.invalid, + 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' } ], + box: 'p-checkbox-box', + input: 'p-checkbox-input', icon: 'p-checkbox-icon' }; export default BaseStyle.extend({ name: 'checkbox', + css, classes }); diff --git a/components/lib/chip/Chip.vue b/components/lib/chip/Chip.vue index 2a6ec0a5d..00ec627cb 100644 --- a/components/lib/chip/Chip.vue +++ b/components/lib/chip/Chip.vue @@ -1,5 +1,5 @@