Merge branch 'master' into feat-stepper-header-position

primefaces · Aug 21, 2024 · 30044bd · 30044bd
2 parents e69e01e + e47f620
commit 30044bd
Show file tree

Hide file tree

Showing 20 changed files with 264 additions and 183 deletions.
diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js
@@ -5,7 +5,7 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {         
+const Tailwind = {
     button: {
         root: ({ props, context }) => ({
             className: classNames(
@@ -51,7 +51,7 @@ const Tailwind = {
                 {
                     'bg-transparent border-transparent': props.text && !props.plain,
                     'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
-                    'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                    'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
                     'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
                     'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
                     'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
@@ -114,7 +114,7 @@ const Tailwind = {
 
     const code2 = {
         javascript: `
-import React from 'react'; 
+import React from 'react';
 import { Button } from 'primereact/button';
 
 export default function UnstyledDemo() {

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -1270,6 +1270,13 @@
                             "type": "InputNumberPassThroughOptions",
                             "description": "Custom passthrough(pt) options for InputNumber."
                         },
+                        {
+                            "name": "inputotp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputOtp."
+                        },
                         {
                             "name": "inputswitch",
                             "optional": true,
@@ -23141,6 +23148,14 @@
                             "default": "",
                             "description": "Icon of the dropdown."
                         },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of collapse action."
+                        },
                         {
                             "name": "dataKey",
                             "optional": true,
@@ -31588,7 +31603,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputTextPassThroughOptions",
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLInputElement>>",
                             "description": "Uses to pass attributes to the Tooltip component."
                         },
                         {
@@ -55977,6 +55992,27 @@
                             "type": "TreeTablePassThroughType<HTMLAttributes<HTMLInputElement>>",
                             "description": "Uses to pass attributes to the hidden input's DOM element."
                         },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptions",
+                            "description": "Used to pass attributes to the Row helper components."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptions",
+                            "description": "Used to pass attributes to the Column helper components."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
                         {
                             "name": "hooks",
                             "optional": true,

diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js
@@ -10,12 +10,12 @@ export function BasicDoc(props) {
         basic: `
 <IconField iconPosition="left">
     <InputIcon className="pi pi-search"> </InputIcon>
-    <InputText v-model="value1" placeholder="Search" />
+    <InputText placeholder="Search" />
 </IconField>
 
 <IconField>
     <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
-    <InputText v-model="value2" />
+    <InputText />
 </IconField>
         `,
         javascript: `
@@ -29,12 +29,12 @@ export default function BasicDemo() {
         <div className="flex gap-3">
             <IconField iconPosition="left">
                 <InputIcon className="pi pi-search"> </InputIcon>
-                <InputText v-model="value1" placeholder="Search" />
+                <InputText placeholder="Search" />
             </IconField>
 
             <IconField>
                 <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
-                <InputText v-model="value2" />
+                <InputText />
             </IconField>
         </div>
     )
@@ -51,12 +51,12 @@ export default function BasicDemo() {
         <div className="flex gap-3">
             <IconField iconPosition="left">
                 <InputIcon className="pi pi-search"> </InputIcon>
-                <InputText v-model="value1" placeholder="Search" />
+                <InputText placeholder="Search" />
             </IconField>
 
             <IconField>
                 <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
-                <InputText v-model="value2" />
+                <InputText />
             </IconField>
         </div>
     )
@@ -75,12 +75,12 @@ export default function BasicDemo() {
                 <div className="flex gap-3">
                     <IconField iconPosition="left">
                         <InputIcon className="pi pi-search" />
-                        <InputText v-model="value1" placeholder="Search" />
+                        <InputText placeholder="Search" />
                     </IconField>
 
                     <IconField>
                         <InputIcon className="pi pi-spin pi-spinner" />
-                        <InputText v-model="value2" />
+                        <InputText />
                     </IconField>
                 </div>
             </div>

diff --git a/components/doc/iconfield/templatedoc.js b/components/doc/iconfield/templatedoc.js
@@ -36,7 +36,7 @@ export function TemplateDoc(props) {
             <path d="..." fill="var(--primary-color)" />
         </svg>
     </InputIcon>
-    <InputText v-model="value1" placeholder="Search" />
+    <InputText placeholder="Search" />
 </IconField>
         `,
         javascript: `
@@ -75,7 +75,7 @@ export default function TemplateDemo() {
                     <path d="..." fill="var(--primary-color)" />
                 </svg>
             </InputIcon>
-            <InputText v-model="value1" placeholder="Search" />
+            <InputText placeholder="Search" />
         </IconField>
     )
 }
@@ -116,7 +116,7 @@ export default function TemplateDemo() {
                     <path d="..." fill="var(--primary-color)" />
                 </svg>
             </InputIcon>
-            <InputText v-model="value1" placeholder="Search" />
+            <InputText placeholder="Search" />
         </IconField>
     )
 }
@@ -159,7 +159,7 @@ export default function TemplateDemo() {
                             <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
                         </svg>
                     </InputIcon>
-                    <InputText v-model="value1" placeholder="Search" />
+                    <InputText placeholder="Search" />
                 </IconField>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputotp: {
+        root: { className: 'flex items-center gap-2' },
+        input: {
+            root: {
+                className: classNames(
+                    'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200',
+                    'hover:border-cyan-500',
+                    'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0'
+                )
+            }
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function BasicDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/messages/severitydoc.js b/components/doc/messages/severitydoc.js
@@ -27,8 +27,8 @@ msgs.current.show([
     {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false},
     {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},
     {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},
-    {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false}
-    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false}
+    {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false},
     {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false}
 ]);
         `,
@@ -47,8 +47,8 @@ export default function SeverityDemo() {
                 { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
-                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
-                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false }
+                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false }
             ]);
         }
@@ -73,8 +73,8 @@ export default function SeverityDemo() {
             {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content'},
             {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'},
             {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'},
-            {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'}
-            {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'}
+            {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'},
+            {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'},
             {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'}
         ]);
     });

diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js
@@ -10,7 +10,12 @@ const Tailwind = {
         root: {
             className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props }) => ({
+        input: {
+              className: classNames(
+                    'absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer'
+              ),
+        },
+        box: ({ props }) => ({
             className: classNames(
                 'flex justify-center items-center',
                 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',