From 7f7f60a3c0fbcde4cc4ac5918b9e8c986d547a36 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:07:59 +0300 Subject: [PATCH 01/50] Add filled prop autocomplete --- components/lib/autocomplete/AutoComplete.js | 4 +- .../lib/autocomplete/AutoCompleteBase.js | 12 +- components/lib/autocomplete/autocomplete.d.ts | 5 + public/themes/arya-blue/theme.css | 33 +- public/themes/arya-green/theme.css | 33 +- public/themes/arya-orange/theme.css | 33 +- public/themes/bootstrap4-dark-blue/theme.css | 33 +- public/themes/bootstrap4-light-blue/theme.css | 33 +- public/themes/fluent-light/theme.css | 33 +- public/themes/lara-dark-amber/theme.css | 33 +- public/themes/lara-dark-blue/theme.css | 33 +- public/themes/lara-dark-cyan/theme.css | 33 +- public/themes/lara-dark-green/theme.css | 33 +- public/themes/lara-dark-indigo/theme.css | 33 +- public/themes/lara-dark-pink/theme.css | 33 +- public/themes/lara-dark-teal/theme.css | 33 +- public/themes/lara-light-amber/theme.css | 33 +- public/themes/lara-light-blue/theme.css | 33 +- public/themes/lara-light-cyan/theme.css | 33 +- public/themes/lara-light-green/theme.css | 33 +- public/themes/lara-light-indigo/theme.css | 33 +- public/themes/lara-light-pink/theme.css | 33 +- public/themes/lara-light-teal/theme.css | 33 +- public/themes/luna-amber/theme.css | 33 +- public/themes/luna-blue/theme.css | 33 +- public/themes/luna-green/theme.css | 33 +- public/themes/luna-pink/theme.css | 33 +- public/themes/md-dark-indigo/theme.css | 323 +++++++++--------- public/themes/md-light-indigo/theme.css | 33 +- public/themes/mdc-dark-indigo/theme.css | 323 +++++++++--------- public/themes/mdc-light-indigo/theme.css | 33 +- public/themes/mira/theme.css | 33 +- public/themes/nano/theme.css | 33 +- public/themes/nova-accent/theme.css | 33 +- public/themes/nova-alt/theme.css | 33 +- public/themes/nova/theme.css | 33 +- public/themes/rhea/theme.css | 33 +- public/themes/saga-blue/theme.css | 33 +- public/themes/saga-green/theme.css | 33 +- public/themes/saga-orange/theme.css | 33 +- public/themes/soho-dark/theme.css | 83 ++--- public/themes/soho-light/theme.css | 33 +- public/themes/tailwind-light/theme.css | 35 +- public/themes/vela-blue/theme.css | 33 +- public/themes/vela-green/theme.css | 33 +- public/themes/vela-orange/theme.css | 33 +- public/themes/viva-dark/theme.css | 33 +- public/themes/viva-light/theme.css | 33 +- 48 files changed, 825 insertions(+), 1313 deletions(-) diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js index dbb15b9708..6442e8fca3 100644 --- a/components/lib/autocomplete/AutoComplete.js +++ b/components/lib/autocomplete/AutoComplete.js @@ -546,7 +546,7 @@ export const AutoComplete = React.memo( aria-controls={ariaControls} aria-haspopup="listbox" aria-expanded={overlayVisibleState} - className={classNames(props.inputClassName, cx('input'))} + className={classNames(props.inputClassName, cx('input', { context }))} style={props.inputStyle} autoComplete="off" readOnly={props.readOnly} @@ -666,7 +666,7 @@ export const AutoComplete = React.memo( const containerProps = mergeProps( { ref: multiContainerRef, - className: cx('container'), + className: cx('container', { context }), onClick: allowMoreValues ? onMultiContainerClick : undefined, onContextMenu: props.onContextMenu, onMouseDown: props.onMouseDown, diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 4235241dd4..e2aee24cbc 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -11,9 +11,10 @@ const classes = { 'p-invalid': props.invalid, 'p-inputwrapper-focus': focusedState }), - container: ({ props }) => + container: ({ props, context }) => classNames('p-autocomplete-multiple-container p-component p-inputtext', { - 'p-disabled': props.disabled + 'p-disabled': props.disabled, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' }), loadingIcon: 'p-autocomplete-loader', dropdownButton: 'p-autocomplete-dropdown', @@ -21,13 +22,13 @@ const classes = { token: 'p-autocomplete-token p-highlight', tokenLabel: 'p-autocomplete-token-label', inputToken: 'p-autocomplete-input-token', - input: ({ props }) => + input: ({ props, context }) => classNames('p-autocomplete-input', { - 'p-autocomplete-dd-input': props.dropdown + 'p-autocomplete-dd-input': props.dropdown, + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' }), panel: ({ context }) => classNames('p-autocomplete-panel p-component', { - 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), listWrapper: 'p-autocomplete-items-wrapper', @@ -166,6 +167,7 @@ export const AutoCompleteBase = ComponentBase.extend({ inputId: null, inputRef: null, inputStyle: null, + variant: null, invalid: false, itemTemplate: null, loadingIcon: null, diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts index 8322f651e9..fad25a34c5 100755 --- a/components/lib/autocomplete/autocomplete.d.ts +++ b/components/lib/autocomplete/autocomplete.d.ts @@ -266,6 +266,11 @@ export interface AutoCompleteProps extends Omit label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 53038d0c89..c4ddf835e6 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81c784; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index a2d4387a6a..62c4c7afe7 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffd54f; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index eacbd16cfe..09fc9488fe 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #3f4b5b; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f19ea6; } + .p-inputtext.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1343,30 +1353,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.15s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f19ea6; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 5a0604409c..46ff654306 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ced4da; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #dc3545; } + .p-inputtext.p-variant-filled { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1343,30 +1353,9 @@ color: #6c757d; transition-duration: 0.15s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #dc3545; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #495057; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #495057; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 183eb1491d..7ac6f51783 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 2px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #323130; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a4252c; } + .p-inputtext.p-variant-filled { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #605e5c; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a4252c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #605e5c; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #605e5c; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 3a96c27dad..2fecc48da1 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #fbbf24; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 9fc3607064..2378e2942d 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #60a5fa; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index a57900349b..45bcb4cc37 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #22d3ee; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 882d6424b2..9a5368c5dd 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #34d399; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 13cc223f94..8a2bc35e0a 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #818cf8; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 42f435e013..5a38f17821 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f472b6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index c7d71ddfee..90a7e2126b 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2dd4bf; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #fca5a5; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 44d8bebbc3..77e0a944ad 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f59e0b; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 71ab9ef24e..aeccacbaf2 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #3b82f6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index 552e27017b..b7bb2efa49 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #06b6d4; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index e929fbb116..4f34d65394 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #10b981; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index be84648378..c3a5e2920b 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #6366f1; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index ceec59fa62..01b86c9904 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ec4899; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 93f92db6c4..6d79a7222c 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -1331,6 +1331,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #14b8a6; @@ -1344,6 +1345,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1357,30 +1367,9 @@ color: #6b7280; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e24c4c; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #6b7280; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #6b7280; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index 50de091e7c..ca624727a5 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffe082; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 8640928be4..8195bd5de9 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81d4fa; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 80509a8d03..84eee414d6 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #c5e1a5; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 119822249c..f162878a2a 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #f48fb1; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #9b9b9b; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e57373; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #888888; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #888888; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 5aa09c8992..e8c0a4735d 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 1rem 1rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,13 +733,13 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { position: relative; @@ -771,11 +771,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -794,7 +794,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -834,25 +834,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -872,13 +872,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -938,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1058,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1073,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1121,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1163,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1185,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 1rem 1rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1288,7 +1288,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; outline-color: transparent; @@ -1310,7 +1310,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1330,10 +1330,11 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 1rem 1rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(255, 255, 255, 0.6); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: hsla(0deg, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1360,30 +1370,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44435; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 1rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 3rem; - } - .p-input-icon-left.p-float-label > label { - left: 3rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 1rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 3rem; - } .p-icon-field-left > .p-inputtext { padding-left: 3rem; } @@ -1406,13 +1395,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1472,14 +1461,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1532,15 +1521,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1572,7 +1561,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1668,7 +1657,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1683,13 +1672,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 1rem 1rem; @@ -1701,7 +1690,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1730,7 +1719,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1794,7 +1783,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1876,11 +1865,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1919,25 +1908,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { background: #121212; } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2029,7 +2018,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2069,7 +2058,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2095,7 +2084,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2125,7 +2114,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2176,13 +2165,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3575,7 +3564,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3583,12 +3572,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3597,7 +3586,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 1rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3661,12 +3650,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3679,10 +3668,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3846,12 +3835,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3980,11 +3969,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4523,7 +4512,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4533,7 +4522,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4595,10 +4584,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4606,7 +4595,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -5124,7 +5113,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5145,7 +5134,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5287,7 +5276,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5327,7 +5316,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5388,7 +5377,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5438,7 +5427,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5525,7 +5514,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5560,7 +5549,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5640,7 +5629,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5668,7 +5657,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5697,7 +5686,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5763,7 +5752,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5813,7 +5802,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5974,7 +5963,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5998,7 +5987,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6075,7 +6064,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6116,7 +6105,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6166,7 +6155,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6272,7 +6261,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6293,7 +6282,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6684,7 +6673,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6710,7 +6699,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 1rem; @@ -7012,8 +7001,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7023,13 +7012,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7258,7 +7247,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -7308,7 +7297,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7335,8 +7324,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7346,13 +7335,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7413,8 +7402,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7424,13 +7413,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7472,7 +7461,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7491,7 +7480,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -7500,7 +7489,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -7546,8 +7535,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7557,13 +7546,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7633,8 +7622,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7644,13 +7633,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7696,20 +7685,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7729,8 +7718,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7875,8 +7864,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7886,13 +7875,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8043,7 +8032,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -8052,7 +8041,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -8309,8 +8298,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8320,13 +8309,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 22f3ff1824..52a4648d6d 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -1334,6 +1334,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(0, 0, 0, 0.87); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1360,30 +1370,9 @@ color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #b00020; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 1rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 3rem; - } - .p-input-icon-left.p-float-label > label { - left: 3rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 1rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 3rem; - } .p-icon-field-left > .p-inputtext { padding-left: 3rem; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 1151d57f1d..23bbff37c9 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -241,7 +241,7 @@ } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { padding: 0.75rem 0.75rem; @@ -419,7 +419,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #9FA8DA; @@ -445,7 +445,7 @@ padding: 0.5rem; background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; } .p-datepicker:not(.p-datepicker-inline) { @@ -462,7 +462,7 @@ background: #1e1e1e; font-weight: 500; margin: 0; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); border-top-right-radius: 4px; border-top-left-radius: 4px; } @@ -546,13 +546,13 @@ } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-datepicker .p-datepicker-buttonbar .p-button { width: auto; } .p-datepicker .p-timepicker { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); padding: 0.5rem; } .p-datepicker .p-timepicker button { @@ -611,7 +611,7 @@ background: rgba(159, 168, 218, 0.16); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { - border-left: 1px solid hsla(0, 0%, 100%, 0.12); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.12); padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0; @@ -656,7 +656,7 @@ } .p-cascadeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -723,7 +723,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; @@ -733,13 +733,13 @@ height: 0.875rem; } .p-input-filled .p-cascadeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-checkbox { position: relative; @@ -771,11 +771,11 @@ height: 18px; } .p-checkbox .p-checkbox-input { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 4px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -794,7 +794,7 @@ height: 14px; } .p-checkbox .p-checkbox-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 18px; height: 18px; @@ -834,25 +834,25 @@ border-color: #f44435; } .p-checkbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -872,13 +872,13 @@ align-items: center; } .p-tristatecheckbox.p-variant-filled .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { background: #9FA8DA; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #9FA8DA; @@ -938,12 +938,12 @@ .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } .p-chips .p-chips-multiple-container .p-chips-token.p-focus { - background: hsla(0, 0%, 100%, 0.24); + background: hsla(0deg, 0%, 100%, 0.24); color: rgba(255, 255, 255, 0.87); } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { @@ -1058,7 +1058,7 @@ } .p-dropdown { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1073,13 +1073,13 @@ border-color: #9FA8DA; } .p-dropdown.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-dropdown.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { background-color: transparent; @@ -1121,7 +1121,7 @@ } .p-dropdown-panel .p-dropdown-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1163,7 +1163,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { position: relative; @@ -1185,14 +1185,14 @@ .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); - border-top: 1px solid hsla(0, 0%, 100%, 0.3); - border-left: 1px solid hsla(0, 0%, 100%, 0.3); - border-bottom: 1px solid hsla(0, 0%, 100%, 0.3); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-left: 1px solid hsla(0deg, 0%, 100%, 0.3); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.3); padding: 0.75rem 0.75rem; min-width: 2.357rem; } .p-inputgroup-addon:last-child { - border-right: 1px solid hsla(0, 0%, 100%, 0.3); + border-right: 1px solid hsla(0deg, 0%, 100%, 0.3); } .p-inputgroup > .p-component, .p-inputgroup > .p-inputwrapper > .p-inputtext, @@ -1288,7 +1288,7 @@ border-radius: 0.5rem; } .p-inputswitch .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; outline-color: transparent; @@ -1310,7 +1310,7 @@ transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); @@ -1330,10 +1330,11 @@ color: rgba(255, 255, 255, 0.87); background: #1e1e1e; padding: 0.75rem 0.75rem; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(255, 255, 255, 0.6); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: hsla(0deg, 0%, 100%, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: hsla(0deg, 0%, 100%, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: hsla(0deg, 0%, 100%, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1360,30 +1370,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44435; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } @@ -1406,13 +1395,13 @@ color: rgba(255, 255, 255, 0.6); } .p-input-filled .p-inputtext { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-inputtext:enabled:focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-inputtext-sm .p-inputtext { font-size: 0.875rem; @@ -1472,14 +1461,14 @@ .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #1e1e1e; margin: 0; @@ -1532,15 +1521,15 @@ } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-listbox.p-focus { outline: 0 none; @@ -1572,7 +1561,7 @@ } .p-mention-panel .p-mention-items .p-mention-item:hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { color: #9FA8DA; @@ -1668,7 +1657,7 @@ } .p-multiselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; outline-color: transparent; @@ -1683,13 +1672,13 @@ border-color: #9FA8DA; } .p-multiselect.p-variant-filled { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-multiselect.p-variant-filled:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-multiselect .p-multiselect-label { padding: 0.75rem 0.75rem; @@ -1701,7 +1690,7 @@ .p-multiselect.p-multiselect-chip .p-multiselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -1730,7 +1719,7 @@ } .p-multiselect-panel .p-multiselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -1794,7 +1783,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; @@ -1876,11 +1865,11 @@ opacity: 0; z-index: 1; outline: 0 none; - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); border-radius: 50%; } .p-radiobutton .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); background: #1e1e1e; width: 20px; height: 20px; @@ -1919,25 +1908,25 @@ border-color: #f44435; } .p-radiobutton.p-variant-filled .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { background: #121212; } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.06); + background-color: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #121212; } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #121212; @@ -2029,7 +2018,7 @@ border-color: #f44435; } .p-slider { - background: hsla(0, 0%, 100%, 0.3); + background: hsla(0deg, 0%, 100%, 0.3); border: 0 none; border-radius: 4px; } @@ -2069,7 +2058,7 @@ } .p-treeselect { background: #1e1e1e; - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 4px; } @@ -2095,7 +2084,7 @@ .p-treeselect.p-treeselect-chip .p-treeselect-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; } @@ -2125,7 +2114,7 @@ } .p-treeselect-panel .p-treeselect-header { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -2176,13 +2165,13 @@ background: transparent; } .p-input-filled .p-treeselect { - background: hsla(0, 0%, 100%, 0.06); + background: hsla(0deg, 0%, 100%, 0.06); } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); } .p-togglebutton { position: relative; @@ -3575,7 +3564,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { outline: 0 none; @@ -3583,12 +3572,12 @@ box-shadow: none; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-column-filter-overlay-menu .p-column-filter-operator { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); background: #2b2b2b; margin: 0; @@ -3597,7 +3586,7 @@ } .p-column-filter-overlay-menu .p-column-filter-constraint { padding: 0.75rem; - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); } .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown { margin-bottom: 0.5rem; @@ -3661,12 +3650,12 @@ transition: transform 0.2s, none; } .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; @@ -3679,10 +3668,10 @@ background: rgba(255, 255, 255, 0.02); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { @@ -3846,12 +3835,12 @@ transition: transform 0.2s, none; } .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-picklist .p-picklist-list .p-picklist-item.p-focus { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; @@ -3980,11 +3969,11 @@ color: #9FA8DA; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover { - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-filter-container { @@ -4523,7 +4512,7 @@ padding: 0 1.25rem; } .p-divider.p-divider-horizontal:before { - border-top: 1px hsla(0, 0%, 100%, 0.12); + border-top: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-horizontal .p-divider-content { padding: 0 0.5rem; @@ -4533,7 +4522,7 @@ padding: 1.25rem 0; } .p-divider.p-divider-vertical:before { - border-left: 1px hsla(0, 0%, 100%, 0.12); + border-left: 1px hsla(0deg, 0%, 100%, 0.12); } .p-divider.p-divider-vertical .p-divider-content { padding: 0.5rem 0; @@ -4595,10 +4584,10 @@ } .p-splitter .p-splitter-gutter { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; - background: hsla(0, 0%, 100%, 0.04); + background: hsla(0deg, 0%, 100%, 0.04); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { outline: 0 none; @@ -4606,7 +4595,7 @@ box-shadow: none; } .p-splitter .p-splitter-gutter-resizing { - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-stepper .p-stepper-nav { display: flex; @@ -5124,7 +5113,7 @@ } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5145,7 +5134,7 @@ color: rgba(255, 255, 255, 0.6); } .p-contextmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-contextmenu .p-submenu-icon { @@ -5287,7 +5276,7 @@ } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5327,7 +5316,7 @@ width: 12.5rem; } .p-megamenu .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-vertical { @@ -5388,7 +5377,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon { @@ -5438,7 +5427,7 @@ } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5525,7 +5514,7 @@ } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5560,7 +5549,7 @@ border-top-left-radius: 0; } .p-menu .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar { @@ -5640,7 +5629,7 @@ } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5668,7 +5657,7 @@ width: 12.5rem; } .p-menubar .p-submenu-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-submenu-list .p-submenu-icon { @@ -5697,7 +5686,7 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon { @@ -5763,7 +5752,7 @@ width: 100%; } .p-menubar .p-menubar-root-list .p-menu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-menubar .p-menubar-root-list .p-submenu-icon { @@ -5813,7 +5802,7 @@ } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5974,7 +5963,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -5998,7 +5987,7 @@ margin-right: 0.5rem; } .p-panelmenu .p-panelmenu-content .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) { @@ -6075,7 +6064,7 @@ } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6116,7 +6105,7 @@ color: rgba(255, 255, 255, 0.6); } .p-slidemenu .p-slidemenu-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-slidemenu .p-slidemenu-icon { @@ -6166,7 +6155,7 @@ } .p-steps .p-steps-item:before { content: " "; - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); width: 100%; top: 50%; left: 0; @@ -6272,7 +6261,7 @@ } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content { color: rgba(255, 255, 255, 0.87); - background: hsla(0, 0%, 100%, 0.12); + background: hsla(0deg, 0%, 100%, 0.12); } .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: rgba(255, 255, 255, 0.87); @@ -6293,7 +6282,7 @@ color: rgba(255, 255, 255, 0.6); } .p-tieredmenu .p-menuitem-separator { - border-top: 1px solid hsla(0, 0%, 100%, 0.12); + border-top: 1px solid hsla(0deg, 0%, 100%, 0.12); margin: 0.5rem 0; } .p-tieredmenu .p-submenu-icon { @@ -6684,7 +6673,7 @@ height: 1.5rem; } .p-avatar { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); border-radius: 4px; } .p-avatar.p-avatar-lg { @@ -6710,7 +6699,7 @@ border: 2px solid #1e1e1e; } .p-chip { - background-color: hsla(0, 0%, 100%, 0.12); + background-color: hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.87); border-radius: 16px; padding: 0 0.75rem; @@ -7012,8 +7001,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7023,13 +7012,13 @@ background: transparent; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7258,7 +7247,7 @@ background-color: rgba(255, 255, 255, 0.16); } .p-calendar-w-btn { - border: 1px solid hsla(0, 0%, 100%, 0.3); + border: 1px solid hsla(0deg, 0%, 100%, 0.3); background: #1e1e1e; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -7308,7 +7297,7 @@ order: 3; } .p-datepicker table th { - border-bottom: 1px solid hsla(0, 0%, 100%, 0.12); + border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.12); color: rgba(255, 255, 255, 0.38); font-weight: 400; font-size: 0.875rem; @@ -7335,8 +7324,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7346,13 +7335,13 @@ background: transparent; } .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7413,8 +7402,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7424,13 +7413,13 @@ background: transparent; } .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7472,7 +7461,7 @@ border-radius: 2px; } .p-checkbox .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); border-radius: 2px; position: relative; } @@ -7491,7 +7480,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -7500,7 +7489,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - border-color: hsla(0, 0%, 100%, 0.7); + border-color: hsla(0deg, 0%, 100%, 0.7); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -7546,8 +7535,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7557,13 +7546,13 @@ background: transparent; } .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7633,8 +7622,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7644,13 +7633,13 @@ background: transparent; } .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7696,20 +7685,20 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; } .p-input-filled .p-inputtext:enabled:hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -7729,8 +7718,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7875,8 +7864,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7886,13 +7875,13 @@ background: transparent; } .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } @@ -8043,7 +8032,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04); @@ -8052,7 +8041,7 @@ box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - border: 2px solid hsla(0, 0%, 100%, 0.7); + border: 2px solid hsla(0deg, 0%, 100%, 0.7); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); @@ -8309,8 +8298,8 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; - background: hsla(0, 0%, 100%, 0.06) no-repeat; - background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3)); + background: hsla(0deg, 0%, 100%, 0.06) no-repeat; + background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0deg, 0%, 100%, 0.3), hsla(0deg, 0%, 100%, 0.3)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8320,13 +8309,13 @@ background: transparent; } .p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: hsla(0, 0%, 100%, 0.08); + background-color: hsla(0deg, 0%, 100%, 0.08); border-color: transparent; background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; - background-color: hsla(0, 0%, 100%, 0.1); + background-color: hsla(0deg, 0%, 100%, 0.1); border-color: transparent; background-size: 100% 2px, 100% 1px; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 123a2154b9..6b7b81957d 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -1334,6 +1334,7 @@ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: rgba(0, 0, 0, 0.87); @@ -1347,6 +1348,15 @@ .p-inputtext.p-invalid.p-component { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1360,30 +1370,9 @@ color: rgba(0, 0, 0, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #b00020; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(0, 0, 0, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index fccf607f80..2bbfbe65e2 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -1336,6 +1336,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 4px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81a1c1; @@ -1349,6 +1350,15 @@ .p-inputtext.p-invalid.p-component { border-color: #bf616a; } + .p-inputtext.p-variant-filled { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1362,30 +1372,9 @@ color: #4c566a; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #bf616a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #81a1c1; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #81a1c1; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 382547b844..4502cf9e9c 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 1px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #1174c0; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #d8222f; } + .p-inputtext.p-variant-filled { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.21875rem 0.21875rem; @@ -1340,30 +1350,9 @@ color: #697077; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #d8222f; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.25rem; - color: #697077; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.25rem; - color: #697077; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.5rem; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 5a1369b399..f6c6e52d95 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1340,30 +1350,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 30b6a74e7b..c151d91cf5 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index f9f75834c2..80e91fe404 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -1317,6 +1317,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #212121; @@ -1330,6 +1331,15 @@ .p-inputtext.p-invalid.p-component { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1343,30 +1353,9 @@ color: #666666; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #a80000; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #848484; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #848484; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 5bbbc9303e..93d9cf71ba 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 2px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #a6a6a6; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #e7a3a3; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1340,30 +1350,9 @@ color: #a6a6a6; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #e7a3a3; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.429rem; - color: #a6a6a6; - } - .p-input-icon-left > .p-inputtext { - padding-left: 1.858rem; - } - .p-input-icon-left.p-float-label > label { - left: 1.858rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.429rem; - color: #a6a6a6; - } - .p-input-icon-right > .p-inputtext { - padding-right: 1.858rem; - } .p-icon-field-left > .p-inputtext { padding-left: 1.858rem; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 92ed8e13b9..33f1c4091d 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2196f3; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 942ae9fb7a..b75c571a2c 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #4caf50; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 6aa2c42475..713a6a36c7 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffc107; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index b9742543d6..b2410ba81e 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -10,7 +10,7 @@ --text-color: rgba(255, 255, 255, 0.87); --text-color-secondary: rgba(255, 255, 255, 0.6); --primary-color: #b19df7; - --primary-color-text: hsl(234, 15%, 13%); + --primary-color-text: hsl(234deg, 15%, 13%); --surface-0: #1d1e27; --surface-50: #34343d; --surface-100: #4a4b52; @@ -785,7 +785,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -804,7 +804,7 @@ } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 14px; } .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { @@ -821,7 +821,7 @@ .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #9378f4; background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; @@ -1333,6 +1333,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #b19df7; @@ -1346,6 +1347,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ff9a9a; } + .p-inputtext.p-variant-filled { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3e4053; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1359,30 +1369,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ff9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } @@ -1892,7 +1881,7 @@ width: 12px; height: 12px; transition-duration: 0.2s; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #b19df7; @@ -1906,7 +1895,7 @@ background: #9378f4; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; @@ -2009,20 +1998,20 @@ .p-selectbutton .p-button.p-highlight { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight .p-button-icon-left, .p-selectbutton .p-button.p-highlight .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left, .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-selectbutton.p-invalid > .p-button { border-color: #ff9a9a; @@ -2224,11 +2213,11 @@ .p-togglebutton.p-highlight .p-button { background: #b19df7; border-color: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton.p-highlight .p-button .p-button-icon-left, .p-togglebutton.p-highlight .p-button .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { background: rgba(255, 255, 255, 0.03); @@ -2242,11 +2231,11 @@ .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #a28af5; border-color: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { outline: 0 none; @@ -2258,7 +2247,7 @@ border-color: #ff9a9a; } .p-button { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); background: #b19df7; border: 1px solid #b19df7; padding: 0.75rem 1.25rem; @@ -2268,12 +2257,12 @@ } .p-button:not(:disabled):hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #a28af5; } .p-button:not(:disabled):active { background: #9378f4; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); border-color: #9378f4; } .p-button.p-button-outlined { @@ -2355,7 +2344,7 @@ height: 1rem; line-height: 1rem; color: #b19df7; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-button.p-button-raised { box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); @@ -4357,7 +4346,7 @@ border-radius: 50%; width: 1rem; height: 1rem; - background-color: hsl(234, 15%, 13%); + background-color: hsl(234deg, 15%, 13%); } .p-timeline .p-timeline-event-connector { background-color: #3e4053; @@ -4897,7 +4886,7 @@ } .p-overlaypanel .p-overlaypanel-close { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); width: 2rem; height: 2rem; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4908,7 +4897,7 @@ } .p-overlaypanel .p-overlaypanel-close:enabled:hover { background: #a28af5; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); } .p-overlaypanel:after { border: solid transparent; @@ -6722,7 +6711,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; @@ -6836,7 +6825,7 @@ background: #b19df7; } .p-progressbar .p-progressbar-label { - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); line-height: 1.5rem; } .p-terminal { @@ -6852,7 +6841,7 @@ } .p-badge { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; @@ -6893,7 +6882,7 @@ } .p-tag { background: #b19df7; - color: hsl(234, 15%, 13%); + color: hsl(234deg, 15%, 13%); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.4rem; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index e8d4ee3988..b3d7c3cd6c 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -1333,6 +1333,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #7254f3; @@ -1346,6 +1347,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ff6767; } + .p-inputtext.p-variant-filled { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1359,30 +1369,9 @@ color: #708da9; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ff6767; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #708da9; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #708da9; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index f5859be644..08ab564816 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -1342,6 +1342,7 @@ transition: none; appearance: none; border-radius: 0.375rem; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #d4d4d8; @@ -1355,6 +1356,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f0a9a7; } + .p-inputtext.p-variant-filled { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1368,29 +1378,8 @@ color: #71717a; transition-duration: 0.2s; } - .p-float-label > label.p-error { - color: #e24c4c; - } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #71717a; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #71717a; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; + .p-float-label > .p-invalid + label { + color: #f0a9a7; } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index b4102aafee..7afd32d95c 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #64b5f6; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 703e012ca8..6fbf50ada4 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #81c784; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 0c801a0ab0..d362309a85 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -1314,6 +1314,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ffd54f; @@ -1327,6 +1328,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1340,30 +1350,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2rem; - } - .p-input-icon-left.p-float-label > label { - left: 2rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2rem; } diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index 860f9bdf42..aadbe4ea9f 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -1340,6 +1340,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #2d3e44; @@ -1353,6 +1354,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f78c79; } + .p-inputtext.p-variant-filled { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #263238; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1366,30 +1376,9 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.3s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f78c79; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 4931c66a7d..a9b9f46eb7 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -1340,6 +1340,7 @@ transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; appearance: none; border-radius: 6px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #cecece; @@ -1353,6 +1354,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f88c79; } + .p-inputtext.p-variant-filled { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1366,30 +1376,9 @@ color: #898989; transition-duration: 0.3s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f88c79; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.75rem; - color: #898989; - } - .p-input-icon-left > .p-inputtext { - padding-left: 2.5rem; - } - .p-input-icon-left.p-float-label > label { - left: 2.5rem; - } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.75rem; - color: #898989; - } - .p-input-icon-right > .p-inputtext { - padding-right: 2.5rem; - } .p-icon-field-left > .p-inputtext { padding-left: 2.5rem; } From b46b55ffaec6767a196ee54fc0496c8eb8d66dbb Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:12:31 +0300 Subject: [PATCH 02/50] Add filled doc --- components/doc/autocomplete/filleddoc.js | 71 ++++++++++++++++++++++++ pages/autocomplete/index.js | 6 ++ 2 files changed, 77 insertions(+) create mode 100644 components/doc/autocomplete/filleddoc.js diff --git a/components/doc/autocomplete/filleddoc.js b/components/doc/autocomplete/filleddoc.js new file mode 100644 index 0000000000..6de79a0a22 --- /dev/null +++ b/components/doc/autocomplete/filleddoc.js @@ -0,0 +1,71 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete'; +import { useState } from 'react'; + +export function FilledDoc(props) { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event) => { + setItems([...Array(10).keys()].map((item) => event.query + '-' + item)); + }; + + const code = { + basic: ` + setValue(e.value)} variant="filled" /> + `, + javascript: ` +import React, { useState } from "react"; +import { AutoComplete } from "primereact/autocomplete"; + +export default function FilledDemo() { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event) => { + setItems([...Array(10).keys()].map(item => event.query + '-' + item)); + } + + return ( +
+ setValue(e.value)} variant="filled" /> +
+ ) +} + `, + typescript: ` +import React, { useState } from "react"; +import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete"; + +export default function FilledDemo() { + const [value, setValue] = useState(''); + const [items, setItems] = useState([]); + + const search = (event: AutoCompleteCompleteEvent) => { + setItems([...Array(10).keys()].map(item => event.query + '-' + item)); + } + + return ( +
+ setValue(e.value)} variant="filled" /> +
+ ) +} + ` + }; + + return ( + <> + +

+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. +

+ +
+ setValue(e.value)} variant="filled" /> +
+ + + ); +} diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js index 008bdb6404..570aae98f8 100644 --- a/pages/autocomplete/index.js +++ b/pages/autocomplete/index.js @@ -2,6 +2,7 @@ import { AccessibilityDoc } from '@/components/doc/autocomplete/accessibilitydoc import { BasicDoc } from '@/components/doc/autocomplete/basicdoc'; import { DisabledDoc } from '@/components/doc/autocomplete/disableddoc'; import { DropdownDoc } from '@/components/doc/autocomplete/dropdowndoc'; +import { FilledDoc } from '@/components/doc/autocomplete/filleddoc'; import { FloatLabelDoc } from '@/components/doc/autocomplete/floatlabeldoc'; import { ForceSelectionDoc } from '@/components/doc/autocomplete/forceselectiondoc'; import { FormikDoc } from '@/components/doc/autocomplete/form/formikdoc'; @@ -72,6 +73,11 @@ const AutoCompleteDemo = () => { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', From d70a74a0056827569de1cff52364d45a93daf869 Mon Sep 17 00:00:00 2001 From: gucal Date: Mon, 1 Apr 2024 16:13:32 +0300 Subject: [PATCH 03/50] Remove Form doc --- components/doc/autocomplete/form/formikdoc.js | 234 ------------------ .../doc/autocomplete/form/hookformdoc.js | 197 --------------- pages/autocomplete/index.js | 19 -- 3 files changed, 450 deletions(-) delete mode 100644 components/doc/autocomplete/form/formikdoc.js delete mode 100644 components/doc/autocomplete/form/hookformdoc.js diff --git a/components/doc/autocomplete/form/formikdoc.js b/components/doc/autocomplete/form/formikdoc.js deleted file mode 100644 index c06936b3bc..0000000000 --- a/components/doc/autocomplete/form/formikdoc.js +++ /dev/null @@ -1,234 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete'; -import { Button } from '@/components/lib/button/Button'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useFormik } from 'formik'; -import { useRef, useState } from 'react'; - -export function FormikDoc(props) { - const toast = useRef(null); - const [items, setItems] = useState([]); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.item }); - }; - - const search = (event) => { - setItems([...Array(10).keys()].map((item) => event.query + '-' + item)); - }; - - const formik = useFormik({ - initialValues: { - item: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.item) { - errors.item = 'Value is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.item && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - const code = { - basic: ` -
-
Value
- - { - formik.setFieldValue('item', e.value); - }} - /> - {getFormErrorMessage('item')} - - - - - ); - }; - - const header = renderHeader(); - - const formik = useFormik({ - initialValues: { - blog: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.blog || data.blog === \`n\`) { - - errors.blog = 'Content is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.blog && show(); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useFormik } from 'formik'; -import { Editor, EditorTextChangeEvent } from 'primereact/editor'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -export default function FormikDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Blog Submitted', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const formik = useFormik({ - initialValues: { - blog: '' - }, - validate: (data) => { - let errors = {}; - - if (!data.blog || data.blog === \`n\`) { - - errors.blog = 'Content is required.'; - } - - return errors; - }, - onSubmit: (data) => { - data.blog && show(); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - ` - }; - - return ( - <> - -

- Formik is a popular library for handling forms in React. -

- -
-
- - { - formik.setFieldValue('blog', e.textValue); - }} - style={{ height: '320px' }} - /> -
- {getFormErrorMessage('blog')} -
- -
- - - ); -} diff --git a/components/doc/editor/form/hookformdoc.js b/components/doc/editor/form/hookformdoc.js deleted file mode 100644 index 00cc88f458..0000000000 --- a/components/doc/editor/form/hookformdoc.js +++ /dev/null @@ -1,220 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { Editor } from '@/components/lib/editor/Editor'; -import { Toast } from '@/components/lib/toast/Toast'; -import { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -export function HookFormDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const defaultValues = { - blog: '' - }; - - const { - control, - formState: { errors }, - handleSubmit, - reset - } = useForm({ defaultValues }); - - const onSubmit = (data) => { - data.blog && show(); - - reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useForm, Controller } from 'react-hook-form'; -import { Editor, EditorTextChangeEvent } from 'primereact/editor'; -import { Button } from 'primereact/button'; -import { Toast } from 'primereact/toast'; - -export default function HookFormDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Submission Received', detail: 'The blog is uploaded' }); - }; - - const renderHeader = () => { - return ( - - - - - - ); - }; - - const header = renderHeader(); - - const defaultValues = { - blog: '' - }; - - const { - control, - formState: { errors }, - handleSubmit, - reset - } = useForm({ defaultValues }); - - const onSubmit = (data) => { - data.blog && show(); - - reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - return ( -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- ) -} - ` - }; - - return ( - <> - -

- React Hook Form is another popular React library to handle forms. -

- -
-
- - field.onChange(e.textValue)} style={{ height: '320px' }} />} - /> -
- {getFormErrorMessage('blog')} -
- -
- - - ); -} diff --git a/pages/editor/index.js b/pages/editor/index.js index 5f6f93bff0..056ef3c529 100644 --- a/pages/editor/index.js +++ b/pages/editor/index.js @@ -2,8 +2,6 @@ import DocApiTable from '@/components/doc/common/docapitable'; import { DocComponent } from '@/components/doc/common/doccomponent'; import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc'; import { BasicDoc } from '@/components/doc/editor/basicdoc'; -import { FormikDoc } from '@/components/doc/editor/form/formikdoc'; -import { HookFormDoc } from '@/components/doc/editor/form/hookformdoc'; import { ImportDoc } from '@/components/doc/editor/importdoc'; import { PTDoc } from '@/components/doc/editor/pt/ptdoc'; import { Wireframe } from '@/components/doc/editor/pt/wireframe'; @@ -40,24 +38,6 @@ const EditorDemo = () => { label: 'Template', component: TemplateDoc }, - { - id: 'form', - label: 'Form', - description: 'Compatibility with popular React form libraries.', - children: [ - { - id: 'formik', - label: 'Formik', - component: FormikDoc - }, - { - id: 'hookform', - label: 'Hook Form', - component: HookFormDoc - } - ] - }, - { id: 'accessibility', label: 'Accessibility', From c86dd05d7046370a760f9629f351f5801ae21e49 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 3 Apr 2024 09:53:25 +0300 Subject: [PATCH 19/50] Update dropdown.d.ts --- components/lib/dropdown/dropdown.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 9283c03ff3..2381f21566 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -272,6 +272,11 @@ export interface DropdownProps extends Omit Date: Wed, 3 Apr 2024 10:02:57 +0300 Subject: [PATCH 20/50] Update inputnumber --- components/lib/dropdown/DropdownBase.js | 1 + components/lib/inputnumber/InputNumber.js | 2 +- components/lib/inputnumber/InputNumberBase.js | 5 +++++ components/lib/inputnumber/inputnumber.d.ts | 5 +++++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 5e81e0b5df..257e1f976a 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -188,6 +188,7 @@ export const DropdownBase = ComponentBase.extend({ inputId: null, inputRef: null, invalid: false, + variant: null, itemTemplate: null, loading: false, loadingIcon: null, diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js index 60f595358a..53546e2872 100644 --- a/components/lib/inputnumber/InputNumber.js +++ b/components/lib/inputnumber/InputNumber.js @@ -1099,7 +1099,7 @@ export const InputNumber = React.memo( }, [props.disabled]); const createInputElement = () => { - const className = classNames('p-inputnumber-input', props.inputClassName); + const className = classNames(props.inputClassName, cx('input', { context })); const valueToRender = formattedValue(props.value); return ( diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js index b452ee20b5..27a2e4b3f5 100644 --- a/components/lib/inputnumber/InputNumberBase.js +++ b/components/lib/inputnumber/InputNumberBase.js @@ -11,6 +11,10 @@ const classes = { 'p-inputnumber-buttons-vertical': vertical, 'p-invalid': props.invalid }), + input: ({ props, context }) => + classNames('p-inputnumber-input', { + 'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled' + }), buttonGroup: 'p-inputnumber-button-group', incrementButton: ({ props }) => classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', { @@ -153,6 +157,7 @@ export const InputNumberBase = ComponentBase.extend({ inputRef: null, inputStyle: null, invalid: false, + variant: null, locale: undefined, localeMatcher: undefined, max: null, diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts index 4d6bff60a4..0038e81c64 100644 --- a/components/lib/inputnumber/inputnumber.d.ts +++ b/components/lib/inputnumber/inputnumber.d.ts @@ -237,6 +237,11 @@ export interface InputNumberProps extends Omit Date: Wed, 3 Apr 2024 10:03:19 +0300 Subject: [PATCH 21/50] Update inputnumber docs --- components/doc/chips/floatlabeldoc.js | 4 +- components/doc/inputnumber/filleddoc.js | 56 ++++ components/doc/inputnumber/floatlabeldoc.js | 24 +- components/doc/inputnumber/form/formikdoc.js | 256 ------------------ .../doc/inputnumber/form/hookformdoc.js | 186 ------------- components/doc/inputnumber/invaliddoc.js | 10 +- pages/inputnumber/index.js | 26 +- 7 files changed, 85 insertions(+), 477 deletions(-) create mode 100644 components/doc/inputnumber/filleddoc.js delete mode 100644 components/doc/inputnumber/form/formikdoc.js delete mode 100644 components/doc/inputnumber/form/hookformdoc.js diff --git a/components/doc/chips/floatlabeldoc.js b/components/doc/chips/floatlabeldoc.js index 3c1946d977..d0e4d09f99 100644 --- a/components/doc/chips/floatlabeldoc.js +++ b/components/doc/chips/floatlabeldoc.js @@ -56,7 +56,9 @@ export default function FloatLabelDemo() { return ( <> - A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

+ A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

diff --git a/components/doc/inputnumber/filleddoc.js b/components/doc/inputnumber/filleddoc.js new file mode 100644 index 0000000000..26372e29c3 --- /dev/null +++ b/components/doc/inputnumber/filleddoc.js @@ -0,0 +1,56 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; +import { useState } from 'react'; + +export function FilledDoc(props) { + const [value, setValue] = useState(null); + + const code = { + basic: ` + setValue(e.value)} mode="decimal" minFractionDigits={2} /> +`, + javascript: ` +import React, { useState } from "react"; +import { InputNumber } from 'primereact/inputnumber'; + +export default function FilledDemo() { + const [value, setValue] = useState(151351); + + return ( +
+ setValue(e.value)} mode="decimal" minFractionDigits={2} /> +
+ ) +} + `, + typescript: ` +import React, { useState } from "react"; +import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber'; + +export default function FilledDemo() { + const [value, setValue] = useState(151351); + + return ( +
+ setValue(e.value)} mode="decimal" minFractionDigits={2} /> +
+ ) +} + ` + }; + + return ( + <> + +

+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. +

+ +
+ setValue(e.value)} minFractionDigits={2} /> +
+ + + ); +} diff --git a/components/doc/inputnumber/floatlabeldoc.js b/components/doc/inputnumber/floatlabeldoc.js index 254b49cbbc..7157103acd 100644 --- a/components/doc/inputnumber/floatlabeldoc.js +++ b/components/doc/inputnumber/floatlabeldoc.js @@ -1,6 +1,8 @@ import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel'; import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; +import Link from 'next/link'; import { useState } from 'react'; export function FloatLabelDoc(props) { @@ -8,24 +10,25 @@ export function FloatLabelDoc(props) { const code = { basic: ` - + setValue(e.value)} /> - + `, javascript: ` import React, { useState } from "react"; import { InputNumber } from 'primereact/inputnumber'; +import { FloatLabel } from 'primereact/floatlabel'; export default function FloatLabelDemo() { const [value, setValue] = useState(151351); return (
- + setValue(e.value)} /> - +
) } @@ -33,16 +36,17 @@ export default function FloatLabelDemo() { typescript: ` import React, { useState } from "react"; import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber'; +import { FloatLabel } from 'primereact/floatlabel'; export default function FloatLabelDemo() { const [value, setValue] = useState(151351); return (
- + setValue(e.value)} /> - +
) } @@ -52,13 +56,15 @@ export default function FloatLabelDemo() { return ( <> -

A floating label appears on top of the input field when focused.

+

+ A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information. +

- + setValue(e.value)} /> - +
diff --git a/components/doc/inputnumber/form/formikdoc.js b/components/doc/inputnumber/form/formikdoc.js deleted file mode 100644 index d9dd801e39..0000000000 --- a/components/doc/inputnumber/form/formikdoc.js +++ /dev/null @@ -1,256 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useFormik } from 'formik'; -import { useRef } from 'react'; - -export function FormikDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year }); - }; - - const formik = useFormik({ - initialValues: { - year: null - }, - validate: (data) => { - let errors = {}; - - if (!data.year) { - errors.year = 'Year is required.'; - } - - if (data.year < 1960) { - errors.year = 'Enter a valid year.'; - } - - if (data.year > 2050) { - errors.year = 'Enter a valid year.'; - } - - return errors; - }, - onSubmit: (data) => { - data && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - const code = { - basic: ` - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} -/> -{getFormErrorMessage('year')} -
- ) -} - `, - typescript: ` -import React, { useRef } from "react"; -import { useFormik } from 'formik'; -import { InputNumber } from 'primereact/inputnumber'; -import { Button } from 'primereact/button'; -import { classNames } from 'primereact/utils'; -import { Toast } from 'primereact/toast'; - -export default function FormikDoc() { - const toast = useRef(null); - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.year }); - }; - - const formik = useFormik({ - initialValues: { - year: null - }, - validate: (data) => { - let errors = {}; - - if (!data.year) { - errors.year = 'Year is required.'; - } - - if (data.year < 1960) { - errors.year = \`Enter a valid year.\`; - } - - if (data.year > 2050) { - errors.year = \`Enter a valid year.\`; - } - - return errors; - }, - onSubmit: (data) => { - data && show(data); - formik.resetForm(); - } - }); - - const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); - - const getFormErrorMessage = (name) => { - return isFormFieldInvalid(name) ? {formik.errors[name]} :  ; - }; - - return ( -
-
- - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} - /> - {getFormErrorMessage('year')} -
- ) -} - ` - }; - - return ( - <> - -

- Formik is a popular library for handling forms in React. -

- -
-
- - - { - formik.setFieldValue('year', e.value); - }} - useGrouping={false} - inputClassName={classNames({ 'p-invalid': isFormFieldInvalid('year') })} - pt={{ - input: { - root: { autoComplete: 'off' } - } - }} - /> - {getFormErrorMessage('year')} -
- - - ); -} diff --git a/components/doc/inputnumber/form/hookformdoc.js b/components/doc/inputnumber/form/hookformdoc.js deleted file mode 100644 index 9e379e03fd..0000000000 --- a/components/doc/inputnumber/form/hookformdoc.js +++ /dev/null @@ -1,186 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; -import { Toast } from '@/components/lib/toast/Toast'; -import { classNames } from '@/components/lib/utils/Utils'; -import { useRef } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -export function HookFormDoc(props) { - const toast = useRef(null); - const defaultValues = { year: null }; - const form = useForm({ defaultValues }); - const errors = form.formState.errors; - - const show = () => { - toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: form.getValues('year') }); - }; - - const onSubmit = (data) => { - data.year && show(); - form.reset(); - }; - - const getFormErrorMessage = (name) => { - return errors[name] ? {errors[name].message} :  ; - }; - - const code = { - basic: ` - - (value >= 1960 && value <= 2050) || 'Enter a valid year.' - }} - render={({ field, fieldState }) => ( - <> - - field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} /> - {getFormErrorMessage(field.name)} - - )} -/> - - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - - ) -} - `, - typescript: ` -import React, { useState } from 'react'; -import { BlockUI } from 'primereact/blockui'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const [blocked, setBlocked] = useState(false); - - return ( -
-
- - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- ) -} - ` - }; - - return ( - <> - -
-
-
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- - - ); -} diff --git a/components/doc/breadcrumb/pt/ptdoc.js b/components/doc/breadcrumb/pt/ptdoc.js deleted file mode 100644 index 905c6202e4..0000000000 --- a/components/doc/breadcrumb/pt/ptdoc.js +++ /dev/null @@ -1,91 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { BreadCrumb } from '@/components/lib/breadcrumb/BreadCrumb'; - -export function PTDoc(props) { - const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; - const home = { icon: 'pi pi-home', url: 'https://primereact.org' }; - - const code = { - basic: ` - ({ - className: props.index === items.length - 1 ? 'font-italic' : undefined - }) - }} -/> - `, - javascript: ` -import React from 'react'; -import { BreadCrumb } from 'primereact/breadcrumb'; - -export default function PTDemo() { - const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; - const home = { icon: 'pi pi-home', url: 'https://primereact.org' } - - return ( -
- ({ - className: props.index === items.length - 1 ? 'font-italic' : undefined - }) - }} - model={items} - home={home} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { BreadCrumb } from 'primereact/breadcrumb'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; - const home: MenuItem = { icon: 'pi pi-home', url: 'https://primereact.org' } - - return ( -
- ({ - className: props.index === items.length - 1 ? 'font-italic' : undefined - }) - }} - model={items} - home={home} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ - className: props.index === items.length - 1 ? 'font-italic' : undefined - }) - }} - model={items} - home={home} - /> -
- - - ); -} diff --git a/components/doc/button/pt/ptdoc.js b/components/doc/button/pt/ptdoc.js deleted file mode 100644 index 2245eed621..0000000000 --- a/components/doc/button/pt/ptdoc.js +++ /dev/null @@ -1,67 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; - -export function PTDoc(props) { - const code = { - basic: ` - - - - - - - ); - }; - - return ( -
- -
- ) -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { ProductService } from './service/ProductService'; -import { Button } from 'primereact/button'; -import { DataScroller } from 'primereact/datascroller'; -import { Rating } from 'primereact/rating'; -import { Tag } from 'primereact/tag'; - -interface Product { - id: string; - code: string; - name: string; - description: string; - image: string; - price: number; - category: string; - quantity: number; - inventoryStatus: string; - rating: number; -} - -export default function BasicDemo() { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProducts().then((data) => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const getSeverity = (product: Product) => { - switch (product.inventoryStatus) { - case 'INSTOCK': - return 'success'; - - case 'LOWSTOCK': - return 'warning'; - - case 'OUTOFSTOCK': - return 'danger'; - - default: - return null; - } - }; - - const itemTemplate = (data: Product) => { - return ( -
-
- {data.name} -
-
-
-
{data.name}
-
{data.description}
-
-
- - - - {data.category} - -
-
-
- \${data.price} - - -
-
-
-
- ); - }; - - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js deleted file mode 100644 index 120f5a8eb7..0000000000 --- a/components/doc/datatable/pt/ptdoc.js +++ /dev/null @@ -1,270 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Column } from '@/components/lib/column/Column'; -import { DataTable } from '@/components/lib/datatable/DataTable'; -import { useState } from 'react'; -import { ProductService } from '../../../../service/ProductService'; -import DeferredDemo from '@/components/demo/DeferredDemo'; - -export function PTDoc(props) { - const [products, setProducts] = useState([]); - - const loadDemoData = () => { - ProductService.getProductsMini().then((data) => setProducts(data)); - }; - - const code = { - basic: ` - - - - - - - `, - javascript: ` -import React, { useState, useEffect } from 'react'; -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { ProductService } from './service/ProductService'; - -export default function PTDemo() { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProductsMini().then(data => setProducts(data)); - }, []); - - return ( - - - - - - - - ); -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { ProductService } from './service/ProductService'; - -interface Product { - id: string; - code: string; - name: string; - description: string; - image: string; - price: number; - category: string; - quantity: number; - inventoryStatus: string; - rating: number; -} - -export default function PTDemo() { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProductsMini().then(data => setProducts(data)); - }, []); - - return ( - - - - - - - ); -} - `, - data: ` -{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: 'bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5 -}, -... - ` - }; - - return ( - <> - - -
- - - - - - -
- - - - ); -} diff --git a/components/doc/dataview/pt/ptdoc.js b/components/doc/dataview/pt/ptdoc.js deleted file mode 100644 index d78908c210..0000000000 --- a/components/doc/dataview/pt/ptdoc.js +++ /dev/null @@ -1,419 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView'; -import { Rating } from '@/components/lib/rating/Rating'; -import { Tag } from '@/components/lib/tag/Tag'; -import { useEffect, useState } from 'react'; -import { ProductService } from '../../../../service/ProductService'; - -export function PTDoc(props) { - const [products, setProducts] = useState([]); - const [layout, setLayout] = useState('grid'); - - useEffect(() => { - ProductService.getProducts().then((data) => setProducts(data.slice(0, 6))); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const getSeverity = (product) => { - switch (product.inventoryStatus) { - case 'INSTOCK': - return 'success'; - - case 'LOWSTOCK': - return 'warning'; - - case 'OUTOFSTOCK': - return 'danger'; - - default: - return null; - } - }; - - const listItem = (product) => { - return ( -
-
- {product.name} -
-
-
{product.name}
- -
- - - {product.category} - - -
-
-
- ${product.price} -
-
-
-
- ); - }; - - const gridItem = (product) => { - return ( -
-
-
-
- - {product.category} -
- -
-
- {product.name} -
{product.name}
- -
-
- ${product.price} -
-
-
- ); - }; - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') { - return listItem(product); - } else if (layout === 'grid') { - return gridItem(product); - } - }; - - const header = () => { - return ( -
- setLayout(e.value)} - pt={{ - listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), - gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) - }} - /> -
- ); - }; - - const code = { - basic: ` - - `, - javascript: ` -import React, { useState, useEffect } from 'react'; -import { ProductService } from './service/ProductService'; -import { Button } from 'primereact/button'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { Rating } from 'primereact/rating'; -import { Tag } from 'primereact/tag'; - -export default function BasicDemo() { - const [products, setProducts] = useState([]); - const [layout, setLayout] = useState('grid'); - - useEffect(() => { - ProductService.getProducts().then((data) => setProducts(data.slice(0, 12))); - }, []); - - const getSeverity = (product) => { - switch (product.inventoryStatus) { - case 'INSTOCK': - return 'success'; - - case 'LOWSTOCK': - return 'warning'; - - case 'OUTOFSTOCK': - return 'danger'; - - default: - return null; - } - }; - - const listItem = (product) => { - return ( -
-
- {product.name} -
-
-
{product.name}
- -
- - - {product.category} - - -
-
-
- \${product.price} - -
-
-
-
- ); - }; - - const gridItem = (product) => { - return ( -
-
-
-
- - {product.category} -
- -
-
- {product.name} -
{product.name}
- -
-
- \${product.price} - -
-
-
- ); - }; - - const itemTemplate = (product, layout) => { - if (!product) { - return; - } - - if (layout === 'list') return listItem(product); - else if (layout === 'grid') return gridItem(product); - }; - - const header = () => { - return ( -
- setLayout(e.value)} - pt={{ - listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), - gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) - }} - /> -
- ); - }; - - return ( -
- -
- ) -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { ProductService } from './service/ProductService'; -import { Button } from 'primereact/button'; -import { DataView, DataViewLayoutOptions } from 'primereact/dataview'; -import { Rating } from 'primereact/rating'; -import { Tag } from 'primereact/tag'; - -interface Product { - id: string; - code: string; - name: string; - description: string; - image: string; - price: number; - category: string; - quantity: number; - inventoryStatus: string; - rating: number; -} - -export default function BasicDemo() { - const [products, setProducts] = useState([]); - const [layout, setLayout] = useState('grid'); - - useEffect(() => { - ProductService.getProducts().then((data) => setProducts(data.slice(0, 12))); - }, []); - - const getSeverity = (product) => { - switch (product.inventoryStatus) { - case 'INSTOCK': - return 'success'; - - case 'LOWSTOCK': - return 'warning'; - - case 'OUTOFSTOCK': - return 'danger'; - - default: - return null; - } - }; - - const listItem = (product: Product) => { - return ( -
-
- {product.name} -
-
-
{product.name}
- -
- - - {product.category} - - -
-
-
- \${product.price} - -
-
-
-
- ); - }; - - const gridItem = (product: Product) => { - return ( -
-
-
-
- - {product.category} -
- -
-
- {product.name} -
{product.name}
- -
-
- \${product.price} - -
-
-
- ); - }; - - const itemTemplate = (product: Product, layout: string) => { - if (!product) { - return; - } - - if (layout === 'list') return listItem(product); - else if (layout === 'grid') return gridItem(product); - }; - - const header = () => { - return ( -
- setLayout(e.value)} - pt={{ - listButton: ({ props }) => ({ className: props.layout === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }), - gridButton: ({ props }) => ({ className: props.layout === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' }) - }} - /> -
- ); - }; - - return ( -
- -
- ) -} - `, - data: ` -/* ProductService */ -{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: 'bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5 -}, -... - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/dialog/pt/ptdoc.js b/components/doc/dialog/pt/ptdoc.js deleted file mode 100644 index 941f7a701c..0000000000 --- a/components/doc/dialog/pt/ptdoc.js +++ /dev/null @@ -1,109 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { Dialog } from '@/components/lib/dialog/Dialog'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [visible, setVisible] = useState(false); - - const code = { - basic: ` - setVisible(false)} - pt={{ - root: { className: 'w-12 sm:w-9 md:w-6' } - }} -> - - `, - javascript: ` -import React, { useState } from 'react'; -import { Dialog } from 'primereact/dialog'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const [visible, setVisible] = useState(false); - - return ( -
-
- ) -} - `, - typescript: ` -import React, { useState } from 'react'; -import { Dialog } from 'primereact/dialog'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const [visible, setVisible] = useState(false); - - return ( -
-
- ) -} - ` - }; - - return ( - <> - -
-
- - - ); -} diff --git a/components/doc/divider/pt/ptdoc.js b/components/doc/divider/pt/ptdoc.js deleted file mode 100644 index 5199fdcbcc..0000000000 --- a/components/doc/divider/pt/ptdoc.js +++ /dev/null @@ -1,83 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Divider } from '@/components/lib/divider/Divider'; - -export function PTDoc(props) { - const code = { - basic: ` -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est laborum. -

- - Center - -

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremquelaudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturmagni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit,sed quia non numquam eius modi. -

- `, - javascript: ` -import React from 'react'; -import { Divider } from 'primereact/divider'; - -export default function PTDemo() { - return ( -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - Center - -

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-
- ) -} - `, - typescript: ` -import React from 'react'; -import { Divider } from 'primereact/divider'; - -export default function PTDemo() { - return ( -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - Center - -

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-
- ) -} - ` - }; - - return ( - <> - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - Center - -

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-
- - - ); -} diff --git a/components/doc/dock/pt/ptdoc.js b/components/doc/dock/pt/ptdoc.js deleted file mode 100644 index b90c3babb8..0000000000 --- a/components/doc/dock/pt/ptdoc.js +++ /dev/null @@ -1,182 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Dock } from '@/components/lib/dock/Dock'; - -export function PTDoc(props) { - const items = [ - { - label: 'Finder', - icon: () => Finder - }, - { - label: 'App Store', - icon: () => App Store - }, - { - label: 'Photos', - icon: () => Photos - }, - { - label: 'Trash', - icon: () => trash - } - ]; - - const positions = [ - { - label: 'Bottom', - value: 'bottom' - }, - { - label: 'Top', - value: 'top' - }, - { - label: 'Left', - value: 'left' - }, - { - label: 'Right', - value: 'right' - } - ]; - - const code = { - basic: ` - -`, - javascript: ` -import React from 'react'; -import { Dock } from 'primereact/dock'; -import './DockDemo.css'; - -export default function PTDemo() { - const items = [ - { - label: 'Finder', - icon: () => Finder, - }, - { - label: 'App Store', - icon: () => App Store, - }, - { - label: 'Photos', - icon: () => Photos, - }, - { - label: 'Trash', - icon: () => trash, - } - ]; - - return ( -
-
- -
-
- ) -} - `, - typescript: ` -import React from 'react'; -import { Dock } from 'primereact/dock'; -import { MenuItem } from 'primereact/menuitem'; -import './DockDemo.css'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Finder', - icon: () => Finder, - }, - { - label: 'App Store', - icon: () => App Store, - }, - { - label: 'Photos', - icon: () => Photos, - }, - { - label: 'Trash', - icon: () => trash, - } - ]; - - return ( -
-
- -
-
- ) -} - `, - extFiles: { - 'DockDemo.css': ` -/* DockDemo.css */ -.dock-demo .dock-window { - width: 100%; - height: 450px; - position: relative; - background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg'); - background-repeat: no-repeat; - background-size: cover; -} -.dock-demo .p-dock { - z-index: 1000; -} - ` - } - }; - - return ( - <> - -

- Menu requires a collection of menuitems as its model. Default location is bottom and other sides are also available when defined with the position property. -

- -
-
- -
-
- - - ); -} diff --git a/components/doc/dropdown/pt/ptdoc.js b/components/doc/dropdown/pt/ptdoc.js deleted file mode 100644 index e5a2d68b02..0000000000 --- a/components/doc/dropdown/pt/ptdoc.js +++ /dev/null @@ -1,126 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Dropdown } from '@/components/lib/dropdown/Dropdown'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [selectedCity, setSelectedCity] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - const code = { - basic: ` - setSelectedCity(e.value)} - options={cities} - optionLabel="name" - placeholder="Select a City" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Dropdown } from 'primereact/dropdown'; - -export default function PTDemo() { - const [selectedCity, setSelectedCity] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - placeholder="Select a City" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown'; - -interface City { - name: string; - code: string; -} - -export default function PTDemo() { - const [selectedCity, setSelectedCity] = useState(null); - const cities: City[] = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - placeholder="Select a City" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - placeholder="Select a City" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- - - ); -} diff --git a/components/doc/editor/pt/ptdoc.js b/components/doc/editor/pt/ptdoc.js deleted file mode 100644 index 4a5536977e..0000000000 --- a/components/doc/editor/pt/ptdoc.js +++ /dev/null @@ -1,80 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Editor } from '@/components/lib/editor/Editor'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [text, setText] = useState(''); - - const code = { - basic: ` - setText(e.htmlValue)} - pt={{ - content: { style: { height: '320px' } }, - toolbar: { className: 'surface-ground' } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Editor } from "primereact/editor"; - -export default function PTDemo() { - const [text, setText] = useState(''); - - return ( -
- setText(e.htmlValue)} - pt={{ - content: { style: { height: '320px' } }, - toolbar: { className: 'surface-ground' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { Editor, EditorTextChangeEvent } from "primereact/editor"; - -export default function PTDemo() { - const [text, setText] = useState(''); - - return ( -
- setText(e.htmlValue)} - pt={{ - content: { style: { height: '320px' } }, - toolbar: { className: 'surface-ground' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setText(e.htmlValue)} - pt={{ - content: { style: { height: '320px' } }, - toolbar: { className: 'surface-ground' } - }} - /> -
- - - ); -} diff --git a/components/doc/fieldset/pt/ptdoc.js b/components/doc/fieldset/pt/ptdoc.js deleted file mode 100644 index f7d64e559e..0000000000 --- a/components/doc/fieldset/pt/ptdoc.js +++ /dev/null @@ -1,96 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Fieldset } from '@/components/lib/fieldset/Fieldset'; - -export function PTDoc(props) { - const code = { - basic: ` -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, suntin culpa qui officia deserunt mollit anim id est laborum. -

-
- `, - javascript: ` -import React from 'react'; -import { Fieldset } from 'primereact/fieldset'; - -export default function PTDemo() { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
- ) -} - `, - typescript: ` -import React from 'react'; -import { Fieldset } from 'primereact/fieldset'; - -export default function PTDemo() { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
- ) -} - ` - }; - - return ( - <> - -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
- - - ); -} diff --git a/components/doc/fileupload/pt/ptdoc.js b/components/doc/fileupload/pt/ptdoc.js deleted file mode 100644 index 5389c59d5e..0000000000 --- a/components/doc/fileupload/pt/ptdoc.js +++ /dev/null @@ -1,108 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { FileUpload } from '@/components/lib/fileupload/FileUpload'; - -export function PTDoc(props) { - const code = { - basic: ` -Drag and drop files to here to upload.

} -/> - `, - javascript: ` -import React from 'react'; -import { FileUpload } from 'primereact/fileupload'; - -export default function PTDemo() { - - return ( -
- Drag and drop files to here to upload.

} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Toast } from 'primereact/toast'; -import { FileUpload } from 'primereact/fileupload'; - -export default function PTDemo() { - - return ( -
- Drag and drop files to here to upload.

} - /> -
- ) -} - ` - }; - - return ( - <> - -
- Drag and drop files to here to upload.

} - /> -
- - - ); -} diff --git a/components/doc/galleria/pt/ptdoc.js b/components/doc/galleria/pt/ptdoc.js deleted file mode 100644 index 4569135141..0000000000 --- a/components/doc/galleria/pt/ptdoc.js +++ /dev/null @@ -1,184 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Galleria } from '@/components/lib/galleria/Galleria'; -import { useEffect, useState } from 'react'; -import { PhotoService } from '../../../../service/PhotoService'; - -export function PTDoc(props) { - const [images, setImages] = useState(null); - - const responsiveOptions = [ - { - breakpoint: '991px', - numVisible: 4 - }, - { - breakpoint: '767px', - numVisible: 3 - }, - { - breakpoint: '575px', - numVisible: 1 - } - ]; - - useEffect(() => { - PhotoService.getImages().then((data) => setImages(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const itemTemplate = (item) => { - return {item.alt}; - }; - - const thumbnailTemplate = (item) => { - return {item.alt}; - }; - - const code = { - basic: ` - - `, - javascript: ` -import React, { useState, useEffect } from 'react'; -import { Galleria } from 'primereact/galleria'; -import { PhotoService } from './service/PhotoService'; - -export default function PTDemo() { - const [images, setImages] = useState(null); - const responsiveOptions = [ - { - breakpoint: '991px', - numVisible: 4 - }, - { - breakpoint: '767px', - numVisible: 3 - }, - { - breakpoint: '575px', - numVisible: 1 - } - ]; - - useEffect(() => { - PhotoService.getImages().then(data => setImages(data)); - }, []) - - const itemTemplate = (item) => { - return {item.alt} - } - - const thumbnailTemplate = (item) => { - return {item.alt} - } - - return ( -
- -
- ) -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria'; -import { PhotoService } from './service/PhotoService'; - -export default function PTDemo() { - const [images, setImages] = useState(null); - const responsiveOptions: GalleriaResponsiveOptions[] = [ - { - breakpoint: '991px', - numVisible: 4 - }, - { - breakpoint: '767px', - numVisible: 3 - }, - { - breakpoint: '575px', - numVisible: 1 - } - ]; - - useEffect(() => { - PhotoService.getImages().then(data => setImages(data)); - }, []); - - const itemTemplate = (item: any) => { - return {item.alt} - } - - const thumbnailTemplate = (item: any) => { - return {item.alt} - } - - return ( -
- -
- ) -} - `, - data: ` -/* PhotoService */ -{ - itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg', - thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg', - alt: 'Description for Image 1', - title: 'Title 1' -}, -... - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/iconfield/pt/ptdoc.js b/components/doc/iconfield/pt/ptdoc.js deleted file mode 100644 index 781271232a..0000000000 --- a/components/doc/iconfield/pt/ptdoc.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputText } from '@/components/lib/inputtext/InputText'; - -export function PTDoc(props) { - return ( - <> - -

- InputText is used as a controlled input with value and onChange properties. -

- -
- setValue(e.target.value)} - pt={{ - root: { className: 'border-primary-400' } - }} - /> -
- - - ); -} diff --git a/components/doc/image/pt/ptdoc.js b/components/doc/image/pt/ptdoc.js deleted file mode 100644 index 958e41c63a..0000000000 --- a/components/doc/image/pt/ptdoc.js +++ /dev/null @@ -1,77 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Image } from '@/components/lib/image/Image'; - -export function PTDoc(props) { - const code = { - basic: ` -Image - `, - javascript: ` -import React from 'react'; -import { Image } from 'primereact/image'; - -export default function PTDemo() { - return ( -
- Image -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Image } from 'primereact/image'; - -export default function PTDemo() { - return ( -
- Image -
- ) -} - ` - }; - - return ( - <> - -
- Image -
- - - ); -} diff --git a/components/doc/inplace/pt/ptdoc.js b/components/doc/inplace/pt/ptdoc.js deleted file mode 100644 index 6f7e45121a..0000000000 --- a/components/doc/inplace/pt/ptdoc.js +++ /dev/null @@ -1,93 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Inplace, InplaceContent, InplaceDisplay } from '@/components/lib/inplace/Inplace'; - -export function PTDoc(props) { - const code = { - basic: ` - - View Content - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - - `, - javascript: ` -import React from 'react'; -import { Inplace } from 'primereact/inplace'; - -export default function PTDemo() { - return ( -
- - View Content - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

- - -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Inplace } from 'primereact/inplace'; - -export default function PTDemo() { - return ( -
- - View Content - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

- - -
- ) -} - ` - }; - - return ( - <> - -
- - View Content - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

- - -
- - - ); -} diff --git a/components/doc/inputmask/pt/ptdoc.js b/components/doc/inputmask/pt/ptdoc.js deleted file mode 100644 index b74edd3049..0000000000 --- a/components/doc/inputmask/pt/ptdoc.js +++ /dev/null @@ -1,98 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputMask } from '@/components/lib/inputmask/InputMask'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(''); - - const code = { - basic: ` - setValue(e.target.value)} - mask="99-999999" - placeholder="99-999999" - pt={{ - input: { - root: { - className: 'border-teal-400' - } - } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { InputMask } from "primereact/inputmask"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - mask="99-999999" - placeholder="99-999999" - pt={{ - input: { - root: { - className: 'border-teal-400' - } - } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { InputMask, InputMaskChangeEvent } from "primereact/inputmask"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - mask="99-999999" - placeholder="99-999999" - pt={{ - input: { - root: { - className: 'border-teal-400' - } - } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.target.value)} - mask="99-999999" - placeholder="99-999999" - pt={{ - root: { - className: 'border-teal-400' - } - }} - /> -
- - - ); -} diff --git a/components/doc/inputnumber/pt/ptdoc.js b/components/doc/inputnumber/pt/ptdoc.js deleted file mode 100644 index a3ea33023b..0000000000 --- a/components/doc/inputnumber/pt/ptdoc.js +++ /dev/null @@ -1,120 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputNumber } from '@/components/lib/inputnumber/InputNumber'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(20); - - const code = { - basic: ` - setValue(e.value)} - showButtons - buttonLayout="horizontal" - step={0.25} - decrementButtonClassName="p-button-danger" - incrementButtonClassName="p-button-success" - incrementButtonIcon="pi pi-plus" - decrementButtonIcon="pi pi-minus" - mode="currency" - currency="EUR" - pt={{ - incrementButton: { className: 'bg-teal-500 border-teal-500' }, - decrementButton: { className: 'bg-orange-500 border-orange-500' } - }} -/> -`, - javascript: ` -import React, { useState } from "react"; -import { InputNumber } from 'primereact/inputnumber'; - -export default function PTDemo() { - const [value, setValue] = useState(20); - - return ( -
- setValue(e.value)} - showButtons - buttonLayout="horizontal" - step={0.25} - decrementButtonClassName="p-button-danger" - incrementButtonClassName="p-button-success" - incrementButtonIcon="pi pi-plus" - decrementButtonIcon="pi pi-minus" - mode="currency" - currency="EUR" - pt={{ - incrementButton: { className: 'bg-teal-500 border-teal-500' }, - decrementButton: { className: 'bg-orange-500 border-orange-500' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber'; - -export default function PTDemo() { - const [value, setValue] = useState(20); - - return ( -
- setValue(e.value)} - showButtons - buttonLayout="horizontal" - step={0.25} - decrementButtonClassName="p-button-danger" - incrementButtonClassName="p-button-success" - incrementButtonIcon="pi pi-plus" - decrementButtonIcon="pi pi-minus" - mode="currency" - currency="EUR" - pt={{ - incrementButton: { className: 'bg-teal-500 border-teal-500' }, - decrementButton: { className: 'bg-orange-500 border-orange-500' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - showButtons - buttonLayout="horizontal" - step={0.25} - decrementButtonClassName="p-button-danger" - incrementButtonClassName="p-button-success" - incrementButtonIcon="pi pi-plus" - decrementButtonIcon="pi pi-minus" - mode="currency" - currency="EUR" - pt={{ - incrementButton: { className: 'bg-teal-500 border-teal-500' }, - decrementButton: { className: 'bg-orange-500 border-orange-500' } - }} - /> -
- - - ); -} diff --git a/components/doc/inputswitch/pt/ptdoc.js b/components/doc/inputswitch/pt/ptdoc.js deleted file mode 100644 index fe808de53e..0000000000 --- a/components/doc/inputswitch/pt/ptdoc.js +++ /dev/null @@ -1,84 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [checked, setChecked] = useState(false); - - const code = { - basic: ` - setChecked(e.value)} - pt={{ - slider: ({ props }) => ({ - className: props.checked ? 'bg-teal-400' : 'bg-red-400' - }) - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { InputSwitch } from "primereact/inputswitch"; - -export default function PTDemo() { - const [checked, setChecked] = useState(false); - - return ( -
- setChecked(e.value)} - pt={{ - slider: ({ props }) => ({ - className: props.checked ? 'bg-teal-400' : 'bg-red-400' - }) - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch"; - -export default function PTDemo() { - const [checked, setChecked] = useState(false); - - return ( -
- setChecked(e.value)} - pt={{ - slider: ({ props }) => ({ - className: props.checked ? 'bg-teal-400' : 'bg-red-400' - }) - }} - /> -
- ); -} - ` - }; - - return ( - <> - -
- setChecked(e.value)} - pt={{ - slider: ({ props }) => ({ - className: props.checked ? 'bg-teal-400' : 'bg-red-400' - }) - }} - /> -
- - - ); -} diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js deleted file mode 100644 index 00b97c9e8e..0000000000 --- a/components/doc/inputtext/pt/ptdoc.js +++ /dev/null @@ -1,80 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputText } from '@/components/lib/inputtext/InputText'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(''); - - const code = { - basic: ` - setValue(e.target.value)} - pt={{ - root: { className: 'border-primary-400' } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { InputText } from "primereact/inputtext"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - pt={{ - root: { className: 'border-primary-400' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { InputText } from "primereact/inputtext"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - pt={{ - root: { className: 'border-primary-400' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -

- InputText is used as a controlled input with value and onChange properties. -

- -
- setValue(e.target.value)} - pt={{ - root: { className: 'border-primary-400' } - }} - /> -
- - - ); -} diff --git a/components/doc/inputtextarea/pt/ptdoc.js b/components/doc/inputtextarea/pt/ptdoc.js deleted file mode 100644 index 492f002661..0000000000 --- a/components/doc/inputtextarea/pt/ptdoc.js +++ /dev/null @@ -1,88 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(''); - - const code = { - basic: ` - setValue(e.target.value)} - pt={{ - root: { - rows: 5, - cols: 30 - } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { InputTextarea } from "primereact/inputtextarea"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - pt={{ - root: { - rows: 5, - cols: 30 - } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { InputTextarea } from "primereact/inputtextarea"; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- ) => setValue(e.target.value)} - pt={{ - root: { - rows: 5, - cols: 30 - } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.target.value)} - pt={{ - root: { - rows: 5, - cols: 30 - } - }} - /> -
- - - ); -} diff --git a/components/doc/knob/pt/ptdoc.js b/components/doc/knob/pt/ptdoc.js deleted file mode 100644 index ffe01af20c..0000000000 --- a/components/doc/knob/pt/ptdoc.js +++ /dev/null @@ -1,76 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Knob } from '@/components/lib/knob/Knob'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(0); - - const code = { - basic: ` - setValue(e.value)} - pt={{ - value: { style: { stroke: 'var(--cyan-500)' } } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Knob } from 'primereact/knob'; - -export default function PTDemo() { - const [value, setValue] = useState(0); - - return ( -
- setValue(e.value)} - pt={{ - value: { style: { stroke: 'var(--cyan-500)' } } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { Knob, KnobChangeEvent } from 'primereact/knob'; - -export default function PTDemo() { - const [value, setValue] = useState(0); - - return ( -
- setValue(e.value)} - pt={{ - value: { style: { stroke: 'var(--cyan-500)' } } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - pt={{ - value: { style: { stroke: 'var(--cyan-500)' } } - }} - /> -
- - - ); -} diff --git a/components/doc/listbox/pt/ptdoc.js b/components/doc/listbox/pt/ptdoc.js deleted file mode 100644 index 3ecfaca9c9..0000000000 --- a/components/doc/listbox/pt/ptdoc.js +++ /dev/null @@ -1,122 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { ListBox } from '@/components/lib/listbox/ListBox'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [selectedCity, setSelectedCity] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - const code = { - basic: ` - setSelectedCity(e.value)} - options={cities} - optionLabel="name" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { ListBox } from 'primereact/listbox'; - -export default function PTDemo() { - const [selectedCity, setSelectedCity] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { ListBox, ListBoxChangeEvent } from 'primereact/listbox'; - -interface City { - name: string; - code: string; -} - -export default function PTDemo() { - const [selectedCity, setSelectedCity] = useState(null); - const cities: City[] = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setSelectedCity(e.value)} - options={cities} - optionLabel="name" - pt={{ - root: { className: 'w-full md:w-14rem' }, - item: ({ context }) => ({ - className: context.selected ? 'bg-primary' : undefined - }) - }} - /> -
- - - ); -} diff --git a/components/doc/megamenu/pt/ptdoc.js b/components/doc/megamenu/pt/ptdoc.js deleted file mode 100644 index 854fcd0260..0000000000 --- a/components/doc/megamenu/pt/ptdoc.js +++ /dev/null @@ -1,408 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { MegaMenu } from '@/components/lib/megamenu/MegaMenu'; - -export function PTDoc(props) { - const items = [ - { - label: 'Videos', - icon: 'pi pi-fw pi-video', - items: [ - [ - { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] - }, - { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] - } - ], - [ - { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, - { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] - } - ] - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-users', - items: [ - [ - { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] - } - ], - [ - { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] - } - ], - [ - { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, - { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] - } - ] - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - [ - { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] - } - ], - [ - { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] - } - ] - ] - }, - { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ - [ - { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] - } - ], - [ - { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] - } - ] - ] - } - ]; - const code = { - basic: ` - ({ className: context.active ? 'bg-primary-200' : undefined }) - }} -/> -`, - javascript: ` -import React from 'react'; -import { MegaMenu } from 'primereact/megamenu'; - -export default function PTDemo() { - const items = [ - { - label: 'Videos', icon: 'pi pi-fw pi-video', - items: [ - [ - { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] - }, - { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] - } - ], - [ - { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, - { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] - } - ] - ] - }, - { - label: 'Users', icon: 'pi pi-fw pi-users', - items: [ - [ - { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] - }, - ], - [ - { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] - } - ], - [ - { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, - { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] - } - ] - ] - }, - { - label: 'Events', icon: 'pi pi-fw pi-calendar', - items: [ - [ - { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] - } - ], - [ - { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] - } - ] - ] - }, - { - label: 'Settings', icon: 'pi pi-fw pi-cog', - items: [ - [ - { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] - } - ], - [ - { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] - } - ] - ] - } - ]; - - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { MegaMenu } from 'primereact/megamenu'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Videos', icon: 'pi pi-fw pi-video', - items: [ - [ - { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] - }, - { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] - } - ], - [ - { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, - { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] - } - ] - ] - }, - { - label: 'Users', icon: 'pi pi-fw pi-users', - items: [ - [ - { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] - }, - ], - [ - { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] - } - ], - [ - { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, - { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] - } - ] - ] - }, - { - label: 'Events', icon: 'pi pi-fw pi-calendar', - items: [ - [ - { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] - } - ], - [ - { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] - } - ] - ] - }, - { - label: 'Settings', icon: 'pi pi-fw pi-cog', - items: [ - [ - { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] - } - ], - [ - { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] - } - ] - ] - } - ]; - - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/mention/pt/ptdoc.js b/components/doc/mention/pt/ptdoc.js deleted file mode 100644 index 592204ddeb..0000000000 --- a/components/doc/mention/pt/ptdoc.js +++ /dev/null @@ -1,263 +0,0 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Mention } from '@/components/lib/mention/Mention'; -import { useEffect, useState } from 'react'; -import { CustomerService } from '../../../../service/CustomerService'; - -export function PTDoc(props) { - const [value, setValue] = useState(''); - const [customers, setCustomers] = useState([]); - const [suggestions, setSuggestions] = useState([]); - - useEffect(() => { - CustomerService.getCustomersSmall().then((data) => { - data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`)); - setCustomers(data); - }); - }, []); - - const onSearch = (event) => { - //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side - setTimeout(() => { - const query = event.query; - let suggestions; - - if (!query.trim().length) { - suggestions = [...customers]; - } else { - suggestions = customers.filter((customer) => { - return customer.nickname.toLowerCase().startsWith(query.toLowerCase()); - }); - } - - setSuggestions(suggestions); - }, 250); - }; - - const itemTemplate = (suggestion) => { - const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image; - - return ( -
- {suggestion.name} - - {suggestion.name} - @{suggestion.nickname} - -
- ); - }; - - const code = { - basic: ` - setValue(e.target.value)} - suggestions={suggestions} - onSearch={onSearch} - field="nickname" - placeholder="Enter @ to mention people" - rows={5} - cols={40} - itemTemplate={itemTemplate} - autoResize - pt={{ - items: { className: 'bg-orange-400' }, - item: { className: 'font-bold' } - }} -/> - `, - javascript: ` -import React, { useState, useEffect } from "react"; -import { Mention } from 'primereact/mention'; -import { CustomerService } from './service/CustomerService'; - -export default function BasicDemo() { - const [value, setValue] = useState(''); - const [customers, setCustomers] = useState([]); - const [suggestions, setSuggestions] = useState([]); - - useEffect(() => { - CustomerService.getCustomersSmall().then(data => { - data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`); - setCustomers(data); - }); - }, []) - - const onSearch = (event) => { - //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side - setTimeout(() => { - const query = event.query; - let suggestions; - - if (!query.trim().length) { - suggestions = [...customers]; - } - else { - suggestions = customers.filter((customer) => { - return customer.nickname.toLowerCase().startsWith(query.toLowerCase()); - }); - } - - setSuggestions(suggestions); - }, 250); - } - - const itemTemplate = (suggestion) => { - const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image; - - return ( -
- {suggestion.name} - - {suggestion.name} - @{suggestion.nickname} - -
- ); - } - - return ( -
- setValue(e.target.value)} - suggestions={suggestions} - onSearch={onSearch} - field="nickname" - placeholder="Enter @ to mention people" - rows={5} - cols={40} - itemTemplate={itemTemplate} - autoResize - pt={{ - items: { className: 'bg-orange-400' }, - item: { className: 'font-bold' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState, useEffect } from "react"; -import { Mention, MentionSearchEvent } from 'primereact/mention'; -import { CustomerService } from './service/CustomerService'; - -export default function BasicDemo() { - const [value, setValue] = useState(''); - const [customers, setCustomers] = useState([]); - const [suggestions, setSuggestions] = useState([]); - - useEffect(() => { - CustomerService.getCustomersSmall().then(data => { - data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`); - setCustomers(data); - }); - }, []) - - const onSearch = (event: MentionSearchEvent) => { - //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side - setTimeout(() => { - const query = event.query; - let suggestions; - - if (!query.trim().length) { - suggestions = [...customers]; - } - else { - suggestions = customers.filter((customer) => { - return customer.nickname.toLowerCase().startsWith(query.toLowerCase()); - }); - } - - setSuggestions(suggestions); - }, 250); - } - - const itemTemplate = (suggestion: any) => { - const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image; - - return ( -
- {suggestion.name} - - {suggestion.name} - @{suggestion.nickname} - -
- ); - } - - return ( -
- ) => setValue(e.target.value)} - suggestions={suggestions} - onSearch={onSearch} - field="nickname" - placeholder="Enter @ to mention people" - rows={5} - cols={40} - itemTemplate={itemTemplate} - autoResize - pt={{ - items: { className: 'bg-orange-400' }, - item: { className: 'font-bold' } - }} - /> -
- ) -} - `, - data: ` -/* CustomerService */ -{ - id: 1000, - name: 'James Butt', - country: { - name: 'Algeria', - code: 'dz' - }, - company: 'Benton, John B Jr', - date: '2015-09-13', - status: 'unqualified', - verified: true, - activity: 17, - representative: { - name: 'Ioni Bowcher', - image: 'ionibowcher.png' - }, - balance: 70663 -}, -... - ` - }; - - return ( - <> - -
- setValue(e.target.value)} - suggestions={suggestions} - onSearch={onSearch} - field="nickname" - placeholder="Enter @ to mention people" - rows={5} - cols={40} - itemTemplate={itemTemplate} - autoResize - pt={{ - items: { className: 'bg-orange-400' }, - item: { className: 'font-bold' } - }} - /> -
- - - ); -} diff --git a/components/doc/menu/pt/ptdoc.js b/components/doc/menu/pt/ptdoc.js deleted file mode 100644 index 623828401a..0000000000 --- a/components/doc/menu/pt/ptdoc.js +++ /dev/null @@ -1,195 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Menu } from '@/components/lib/menu/Menu'; -import { Toast } from '@/components/lib/toast/Toast'; -import { useRouter } from 'next/router'; -import { useRef } from 'react'; - -export function PTDoc(props) { - const toast = useRef(null); - const router = useRouter(); - const items = [ - { - label: 'Options', - items: [ - { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); - } - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'React Website', - icon: 'pi pi-external-link', - url: 'https://reactjs.org/' - }, - { - label: 'Router', - icon: 'pi pi-upload', - command: () => { - router.push('/fileupload'); - } - } - ] - } - ]; - - const code = { - basic: ` - -`, - javascript: ` -import React, { useRef } from 'react'; -import { useRouter } from 'next/router'; -import { Menu } from 'primereact/menu'; -import { Toast } from 'primereact/toast'; - -export default function PTDemo() { - const items = [ - { - label: 'Options', - items: [ - { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); - } - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'React Website', - icon: 'pi pi-external-link', - url: 'https://reactjs.org/' - }, - { - label: 'Router', - icon: 'pi pi-upload', - command: () => { - router.push('/fileupload'); - } - } - ] - } - ]; - - return ( -
- - -
- ) -} - `, - typescript: ` -import React, { useRef } from 'react'; -import { useRouter } from 'next/router'; -import { Menu } from 'primereact/menu'; -import { MenuItem } from 'primereact/menuitem'; -import { Toast } from 'primereact/toast'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Options', - items: [ - { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); - } - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'React Website', - icon: 'pi pi-external-link', - url: 'https://reactjs.org/' - }, - { - label: 'Router', - icon: 'pi pi-upload', - command: () => { - router.push('/fileupload'); - } - } - ] - } - ]; - - return ( -
- - -
- ) -} - ` - }; - - return ( - <> - -
- - -
- - - ); -} diff --git a/components/doc/menubar/pt/ptdoc.js b/components/doc/menubar/pt/ptdoc.js deleted file mode 100644 index 1632dad44f..0000000000 --- a/components/doc/menubar/pt/ptdoc.js +++ /dev/null @@ -1,454 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Menubar } from '@/components/lib/menubar/Menubar'; - -export function PTDoc(props) { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - const code = { - basic: ` - ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} -/> -`, - javascript: ` -import React from 'react'; -import { Menubar } from 'primereact/menubar'; - -export default function PTDemo() { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - }, - - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - }, - - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus', - - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Menubar } from 'primereact/menubar'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - }, - - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - }, - - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus', - - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- - - ); -} diff --git a/components/doc/message/pt/ptdoc.js b/components/doc/message/pt/ptdoc.js deleted file mode 100644 index 9797959510..0000000000 --- a/components/doc/message/pt/ptdoc.js +++ /dev/null @@ -1,69 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Message } from '@/components/lib/message/Message'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { Message } from 'primereact/message'; - -export default function PTDemo() { - return ( -
- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Message } from 'primereact/message'; - -export default function PTDemo() { - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/messages/pt/ptdoc.js b/components/doc/messages/pt/ptdoc.js deleted file mode 100644 index 6c3bc12177..0000000000 --- a/components/doc/messages/pt/ptdoc.js +++ /dev/null @@ -1,91 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { useMountEffect } from '@/components/lib/hooks/Hooks'; -import { Messages } from '@/components/lib/messages/Messages'; -import { useRef } from 'react'; - -export function PTDoc(props) { - const msgs = useRef(null); - - useMountEffect(() => { - msgs.current && msgs.current.show([{ sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }]); - }); - - const code = { - basic: ` - - `, - javascript: ` -import React, { useEffect, useRef } from 'react'; -import { useMountEffect } from 'primereact/hooks'; -import { Messages } from 'primereact/messages'; - -export default function PTDemo() { - const msgs = useRef(null); - - useMountEffect(() => { - msgs.current && msgs.current.show([ - { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false } - ]); - }); - - return ( -
- -
- ) -} - `, - typescript: ` -import React, { useEffect, useRef } from 'react'; -import { useMountEffect } from 'primereact/hooks'; -import { Messages } from 'primereact/messages'; - -export default function PTDemo() { - const msgs = useRef(null); - - useMountEffect(() => { - msgs.current && msgs.current.show([ - { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false } - ]); - }); - - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/metergroup/pt/ptdoc.js b/components/doc/metergroup/pt/ptdoc.js deleted file mode 100644 index 1632dad44f..0000000000 --- a/components/doc/metergroup/pt/ptdoc.js +++ /dev/null @@ -1,454 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Menubar } from '@/components/lib/menubar/Menubar'; - -export function PTDoc(props) { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - const code = { - basic: ` - ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} -/> -`, - javascript: ` -import React from 'react'; -import { Menubar } from 'primereact/menubar'; - -export default function PTDemo() { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - }, - - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - }, - - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus', - - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Menubar } from 'primereact/menubar'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - }, - - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - }, - - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus', - - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus', - - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ - className: context.active ? 'bg-primary-200 border-round-sm' : undefined - }) - }} - /> -
- - - ); -} diff --git a/components/doc/multiselect/pt/ptdoc.js b/components/doc/multiselect/pt/ptdoc.js deleted file mode 100644 index 465d6ba9fe..0000000000 --- a/components/doc/multiselect/pt/ptdoc.js +++ /dev/null @@ -1,171 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { MultiSelect } from '@/components/lib/multiselect/MultiSelect'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [selectedCities, setSelectedCities] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - const code = { - basic: ` - setSelectedCities(e.value)} - showClear={true} - options={cities} - display="chip" - optionLabel="name" - placeholder="Select Cities" - maxSelectedLabels={3} - inputId="multiselect" - pt={{ - root: { className: 'w-full md:w-20rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), - token: ({ context }) => { - switch (context.value.code) { - case 'NY': - return 'bg-red-300'; - case 'RM': - return 'bg-green-300'; - } - return 'bg-gray-100'; - } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { MultiSelect } from 'primereact/multiselect'; - -export default function PTDemo() { - const [selectedCities, setSelectedCities] = useState(null); - const cities = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCities(e.value)} - showClear={true} - options={cities} - display="chip" - optionLabel="name" - placeholder="Select Cities" - maxSelectedLabels={3} - inputId="multiselect" - pt={{ - root: { className: 'w-full md:w-20rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), - token: ({ context }) => { - switch (context.value.code) { - case 'NY': - return 'bg-red-300'; - case 'RM': - return 'bg-green-300'; - } - return 'bg-gray-100'; - } - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect'; - -interface City { - name: string; - code: string; -} - -export default function PTDemo() { - const [selectedCities, setSelectedCities] = useState(null); - const cities: City[] = [ - { name: 'New York', code: 'NY' }, - { name: 'Rome', code: 'RM' }, - { name: 'London', code: 'LDN' }, - { name: 'Istanbul', code: 'IST' }, - { name: 'Paris', code: 'PRS' } - ]; - - return ( -
- setSelectedCities(e.value)} - showClear={true} - options={cities} - display="chip" - optionLabel="name" - placeholder="Select Cities" - maxSelectedLabels={3} - inputId="multiselect" - pt={{ - root: { className: 'w-full md:w-20rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), - token: ({ context }) => { - switch (context.value.code) { - case 'NY': - return 'bg-red-300'; - case 'RM': - return 'bg-green-300'; - } - return 'bg-gray-100'; - } - }} - /> -
- ); -} - ` - }; - - return ( - <> - -
- setSelectedCities(e.value)} - showClear={true} - options={cities} - display="chip" - optionLabel="name" - placeholder="Select Cities" - maxSelectedLabels={3} - inputId="multiselect" - pt={{ - root: { className: 'w-full md:w-20rem' }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }), - token: ({ context }) => { - switch (context.value.code) { - case 'NY': - return 'bg-red-300'; - case 'RM': - return 'bg-green-300'; - } - - return 'bg-gray-100'; - } - }} - /> -
- - - ); -} diff --git a/components/doc/multistatecheckbox/pt/ptdoc.js b/components/doc/multistatecheckbox/pt/ptdoc.js deleted file mode 100644 index b025875313..0000000000 --- a/components/doc/multistatecheckbox/pt/ptdoc.js +++ /dev/null @@ -1,115 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState('public'); - const options = [ - { value: 'public', icon: 'pi pi-globe' }, - { value: 'protected', icon: 'pi pi-lock-open' }, - { value: 'private', icon: 'pi pi-lock' } - ]; - - const code = { - basic: ` - setValue(e.value)} - options={options} - optionValue="value" - pt={{ - checkbox: { - className: value ? 'bg-orange-400 border-orange-400' : undefined - } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { MultiStateCheckbox } from 'primereact/multistatecheckbox'; - -export default function PTDemo() { - const [value, setValue] = useState('public'); - const options = [ - { value: 'public', icon: 'pi pi-globe' }, - { value: 'protected', icon: 'pi pi-lock-open' }, - { value: 'private', icon: 'pi pi-lock' } - ]; - - return ( -
- setValue(e.value)} - options={options} - optionValue="value" - pt={{ - checkbox: { - className: value ? 'bg-orange-400 border-orange-400' : undefined - } - }} - /> - {value || 'no value'} -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { MultiStateCheckbox, MultiStateCheckboxChangeEvent } from 'primereact/multistatecheckbox'; - -interface Item { - value: string; - icon: string; -} - -export default function PTDemo() { - const [value, setValue] = useState('public'); - const options: Item[] = [ - { value: 'public', icon: 'pi pi-globe' }, - { value: 'protected', icon: 'pi pi-lock-open' }, - { value: 'private', icon: 'pi pi-lock' } - ]; - - return ( -
- setValue(e.value)} - options={options} - optionValue="value" - pt={{ - checkbox: { - className: value ? 'bg-orange-400 border-orange-400' : undefined - } - }} - /> - {value || 'no value'} -
- ); -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - options={options} - optionValue="value" - pt={{ - checkbox: { - className: value ? 'bg-orange-400 border-orange-400' : undefined - } - }} - /> - {value || 'no value'} -
- - - ); -} diff --git a/components/doc/orderlist/pt/ptdoc.js b/components/doc/orderlist/pt/ptdoc.js deleted file mode 100644 index 1dd8ae5ea7..0000000000 --- a/components/doc/orderlist/pt/ptdoc.js +++ /dev/null @@ -1,196 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { OrderList } from '@/components/lib/orderlist/OrderList'; -import { useEffect, useState } from 'react'; -import { ProductService } from '../../../../service/ProductService'; - -export function PTDoc(props) { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setProducts(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const itemTemplate = (item) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- ${item.price} -
- ); - }; - - const code = { - basic: ` - setProducts(e.value)} - itemTemplate={itemTemplate} - header="Products" - pt={{ - list: { style: { height: 'auto' } }, - moveUpButton: { - root: { className: 'bg-teal-400 border-teal-400' } - }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} -> - `, - javascript: ` -import React, { useState, useEffect } from 'react'; -import { OrderList } from 'primereact/orderlist'; -import { ProductService } from './service/ProductService'; - -export default function PTDemo() { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setProducts(data)); - }, []); - - const itemTemplate = (item) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- \${item.price} -
- ); - }; - - return ( -
- setProducts(e.value)} - itemTemplate={itemTemplate} - header="Products" - pt={{ - list: { style: { height: 'auto' } }, - moveUpButton: { - root: { className: 'bg-teal-400 border-teal-400' } - }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - > -
- ) -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { OrderList } from 'primereact/orderlist'; -import { ProductService } from './service/ProductService'; - -interface Product { - id: string; - code: string; - name: string; - description: string; - image: string; - price: number; - category: string; - quantity: number; - inventoryStatus: 'string', - rating: number; -} - -export default function PTDemo() { - const [products, setProducts] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setProducts(data)); - }, []); - - const itemTemplate = (item: Product) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- \${item.price} -
- ); - }; - - return ( -
- setProducts(e.value)} - itemTemplate={itemTemplate} - header="Products" - pt={{ - list: { style: { height: 'auto' } }, - moveUpButton: { - root: { className: 'bg-teal-400 border-teal-400' } - }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - > -
- ) -} - `, - data: ` -/* ProductService */ -{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: 'bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5 -}, -... - ` - }; - - return ( - <> - -
- setProducts(e.value)} - itemTemplate={itemTemplate} - header="Products" - pt={{ - list: { style: { height: 'auto' } }, - moveUpButton: { - root: { className: 'bg-teal-400 border-teal-400' } - }, - item: ({ context }) => ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/organizationchart/pt/ptdoc.js b/components/doc/organizationchart/pt/ptdoc.js deleted file mode 100644 index f93fd6b9a6..0000000000 --- a/components/doc/organizationchart/pt/ptdoc.js +++ /dev/null @@ -1,189 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [selection, setSelection] = useState([]); - const [data] = useState([ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina' - }, - { - label: 'Croatia' - } - ] - }, - { - label: 'France', - expanded: true, - children: [ - { - label: 'France' - }, - { - label: 'Morocco' - } - ] - } - ] - } - ]); - - const code = { - basic: ` - setSelection(e.data)} - pt={{ - node: ({ context }) => ({ - className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm' - }) - }} -/> - `, - javascript: ` -import React, { useState } from 'react'; -import { OrganizationChart } from 'primereact/organizationchart'; - -export default function PTDemo() { - const [selection, setSelection] = useState([]); - const [data] = useState([ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina' - }, - { - label: 'Croatia' - } - ] - }, - { - label: 'France', - expanded: true, - children: [ - { - label: 'France' - }, - { - label: 'Morocco' - } - ] - } - ] - } - ]); - - return ( -
- setSelection(e.data)} - pt={{ - node: ({ context }) => ({ - className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm' - }) - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from 'react'; -import { OrganizationChart } from 'primereact/organizationchart'; -import { TreeNode } from 'primereact/treenode'; - -export default function PTDemo() { - const [selection, setSelection] = useState([]); - const [data] = useState([ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina', - expanded: true, - children: [ - { - label: 'Argentina' - }, - { - label: 'Croatia' - } - ] - }, - { - label: 'France', - expanded: true, - children: [ - { - label: 'France' - }, - { - label: 'Morocco' - } - ] - } - ] - } - ]); - - return ( -
- setSelection(e.data)} - pt={{ - node: ({ context }) => ({ - className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm' - }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setSelection(e.data)} - pt={{ - node: ({ context }) => ({ - className: context.selected ? 'border-orange-400 border-round-sm' : 'border-primary-400 border-round-sm' - }) - }} - /> -
- - - ); -} diff --git a/components/doc/overlaypanel/pt/ptdoc.js b/components/doc/overlaypanel/pt/ptdoc.js deleted file mode 100644 index cf8e10bbf7..0000000000 --- a/components/doc/overlaypanel/pt/ptdoc.js +++ /dev/null @@ -1,86 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { OverlayPanel } from '@/components/lib/overlaypanel/OverlayPanel'; -import { useRef } from 'react'; - -export function PTDoc(props) { - const op = useRef(null); - - const code = { - basic: ` - - Bamboo Watch - - `, - javascript: ` -import React, { useRef } from 'react'; -import { OverlayPanel } from 'primereact/overlaypanel'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const op = useRef(null); - - return ( -
-
- ); -} - `, - typescript: ` -import React, { useRef } from 'react'; -import { OverlayPanel } from 'primereact/overlaypanel'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const op = useRef(null); - - return ( -
-
- ); -} - ` - }; - - return ( - <> - -
-
- - - ); -} diff --git a/components/doc/paginator/pt/ptdoc.js b/components/doc/paginator/pt/ptdoc.js deleted file mode 100644 index 9ec891171d..0000000000 --- a/components/doc/paginator/pt/ptdoc.js +++ /dev/null @@ -1,114 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Paginator } from '@/components/lib/paginator/Paginator'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [first, setFirst] = useState(0); - const [rows, setRows] = useState(10); - - const onPageChange = (event) => { - setFirst(event.first); - setRows(event.rows); - }; - - const code = { - basic: ` - ({ - className: context.active ? 'bg-primary' : undefined - }) - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Paginator } from 'primereact/paginator'; - -export default function PTDemo() { - const [first, setFirst] = useState(0); - const [rows, setRows] = useState(10); - - const onPageChange = (event) => { - setFirst(event.first); - setRows(event.rows); - }; - - return ( -
- ({ - className: context.active ? 'bg-primary' : undefined - }) - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { Paginator, PaginatorPageChangeEvent } from 'primereact/paginator'; - -export default function PTDemo() { - const [first, setFirst] = useState(0); - const [rows, setRows] = useState(10); - - const onPageChange = (event: PaginatorPageChangeEvent) => { - setFirst(event.first); - setRows(event.rows); - }; - - return ( -
- ({ - className: context.active ? 'bg-primary' : undefined - }) - }} - /> -
- ); -} - ` - }; - - return ( - <> - -
- ({ - className: context.active ? 'bg-primary' : undefined - }) - }} - /> -
- - - ); -} diff --git a/components/doc/panel/pt/ptdoc.js b/components/doc/panel/pt/ptdoc.js deleted file mode 100644 index 18ae0d2aee..0000000000 --- a/components/doc/panel/pt/ptdoc.js +++ /dev/null @@ -1,94 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Panel } from '@/components/lib/panel/Panel'; - -export function PTDoc(props) { - const code = { - basic: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- - `, - javascript: ` -import React from 'react'; -import { Panel } from 'primereact/panel'; - -export default function PTDemo() { - return ( -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Panel } from 'primereact/panel'; - -export default function PTDemo() { - return ( -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- ) -} - ` - }; - - return ( - <> - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- -
- - - ); -} diff --git a/components/doc/panelmenu/pt/ptdoc.js b/components/doc/panelmenu/pt/ptdoc.js deleted file mode 100644 index 888aa68939..0000000000 --- a/components/doc/panelmenu/pt/ptdoc.js +++ /dev/null @@ -1,423 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu'; - -export function PTDoc(props) { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - } - ]; - const code = { - basic: ` - ({ className: context.active ? 'bg-primary-200' : undefined }), - action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined }) - }} -/> -`, - javascript: ` -import React from 'react'; -import { PanelMenu } from 'primereact/panelmenu'; - -export default function PTDemo() { - const items = [ - { - label:'File', - icon:'pi pi-fw pi-file', - items:[ - { - label:'New', - icon:'pi pi-fw pi-plus', - items:[ - { - label:'Bookmark', - icon:'pi pi-fw pi-bookmark' - }, - { - label:'Video', - icon:'pi pi-fw pi-video' - } - ] - }, - { - label:'Delete', - icon:'pi pi-fw pi-trash' - }, - { - label:'Export', - icon:'pi pi-fw pi-external-link' - } - ] - }, - { - label:'Edit', - icon:'pi pi-fw pi-pencil', - items:[ - { - label:'Left', - icon:'pi pi-fw pi-align-left' - }, - { - label:'Right', - icon:'pi pi-fw pi-align-right' - }, - { - label:'Center', - icon:'pi pi-fw pi-align-center' - }, - { - label:'Justify', - icon:'pi pi-fw pi-align-justify' - } - ] - }, - { - label:'Users', - icon:'pi pi-fw pi-user', - items:[ - { - label:'New', - icon:'pi pi-fw pi-user-plus' - }, - { - label:'Delete', - icon:'pi pi-fw pi-user-minus' - }, - { - label:'Search', - icon:'pi pi-fw pi-users', - items:[ - { - label:'Filter', - icon:'pi pi-fw pi-filter', - items:[ - { - label:'Print', - icon:'pi pi-fw pi-print' - } - ] - }, - { - icon:'pi pi-fw pi-bars', - label:'List' - } - ] - } - ] - }, - { - label:'Events', - icon:'pi pi-fw pi-calendar', - items:[ - { - label:'Edit', - icon:'pi pi-fw pi-pencil', - items:[ - { - label:'Save', - icon:'pi pi-fw pi-calendar-plus' - }, - { - label:'Delete', - icon:'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label:'Archive', - icon:'pi pi-fw pi-calendar-times', - items:[ - { - label:'Remove', - icon:'pi pi-fw pi-calendar-minus' - } - ] - } - ] - } - ]; - - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }), - action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined }) - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { PanelMenu } from 'primereact/panelmenu'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label:'File', - icon:'pi pi-fw pi-file', - items:[ - { - label:'New', - icon:'pi pi-fw pi-plus', - items:[ - { - label:'Bookmark', - icon:'pi pi-fw pi-bookmark' - }, - { - label:'Video', - icon:'pi pi-fw pi-video' - } - ] - }, - { - label:'Delete', - icon:'pi pi-fw pi-trash' - }, - { - label:'Export', - icon:'pi pi-fw pi-external-link' - } - ] - }, - { - label:'Edit', - icon:'pi pi-fw pi-pencil', - items:[ - { - label:'Left', - icon:'pi pi-fw pi-align-left' - }, - { - label:'Right', - icon:'pi pi-fw pi-align-right' - }, - { - label:'Center', - icon:'pi pi-fw pi-align-center' - }, - { - label:'Justify', - icon:'pi pi-fw pi-align-justify' - } - ] - }, - { - label:'Users', - icon:'pi pi-fw pi-user', - items:[ - { - label:'New', - icon:'pi pi-fw pi-user-plus' - }, - { - label:'Delete', - icon:'pi pi-fw pi-user-minus' - }, - { - label:'Search', - icon:'pi pi-fw pi-users', - items:[ - { - label:'Filter', - icon:'pi pi-fw pi-filter', - items:[ - { - label:'Print', - icon:'pi pi-fw pi-print' - } - ] - }, - { - icon:'pi pi-fw pi-bars', - label:'List' - } - ] - } - ] - }, - { - label:'Events', - icon:'pi pi-fw pi-calendar', - items:[ - { - label:'Edit', - icon:'pi pi-fw pi-pencil', - items:[ - { - label:'Save', - icon:'pi pi-fw pi-calendar-plus' - }, - { - label:'Delete', - icon:'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label:'Archive', - icon:'pi pi-fw pi-calendar-times', - items:[ - { - label:'Remove', - icon:'pi pi-fw pi-calendar-minus' - } - ] - } - ] - } - ]; - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }), - action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ className: context.active ? 'bg-primary-200' : undefined }), - action: ({ context }) => ({ className: context.active ? 'bg-primary-100' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/password/pt/ptdoc.js b/components/doc/password/pt/ptdoc.js deleted file mode 100644 index b9c44faed8..0000000000 --- a/components/doc/password/pt/ptdoc.js +++ /dev/null @@ -1,76 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Password } from '@/components/lib/password/Password'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(''); - - const code = { - basic: ` - setValue(e.target.value)} - pt={{ - info: { className: 'font-bold' } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Password } from 'primereact/password'; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- setValue(e.target.value)} - pt={{ - info: { className: 'font-bold' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { Password } from 'primereact/password'; - -export default function PTDemo() { - const [value, setValue] = useState(''); - - return ( -
- ) => setValue(e.target.value)} - pt={{ - info: { className: 'font-bold' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.target.value)} - pt={{ - info: { className: 'font-bold' } - }} - /> -
- - - ); -} diff --git a/components/doc/picklist/pt/ptdoc.js b/components/doc/picklist/pt/ptdoc.js deleted file mode 100644 index 54ff0572cc..0000000000 --- a/components/doc/picklist/pt/ptdoc.js +++ /dev/null @@ -1,246 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { PickList } from '@/components/lib/picklist/PickList'; -import { useEffect, useState } from 'react'; -import { ProductService } from '../../../../service/ProductService'; - -export function PTDoc(props) { - const [source, setSource] = useState([]); - const [target, setTarget] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setSource(data)); - }, []); // eslint-disable-line react-hooks/exhaustive-deps - - const onChange = (event) => { - setSource(event.source); - setTarget(event.target); - }; - - const itemTemplate = (item) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- ${item.price} -
- ); - }; - - const code = { - basic: ` - ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} -/> - `, - javascript: ` -import React, { useState, useEffect } from 'react'; -import { PickList } from 'primereact/picklist'; -import { ProductService } from './service/ProductService'; - -export default function PTDemo() { - const [source, setSource] = useState([]); - const [target, setTarget] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setSource(data)); - }, []); - - const onChange = (event) => { - setSource(event.source); - setTarget(event.target); - }; - - const itemTemplate = (item) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- \${item.price} -
- ); - }; - - return ( -
- ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState, useEffect } from 'react'; -import { PickList } from 'primereact/picklist'; -import { ProductService } from './service/ProductService'; - -interface Product { - id: string; - code: string; - name: string; - description: string; - image: string; - price: number; - category: string; - quantity: number; - inventoryStatus: 'string', - rating: number; -} - -export default function PTDemo() { - const [source, setSource] = useState([]); - const [target, setTarget] = useState([]); - - useEffect(() => { - ProductService.getProductsSmall().then((data) => setSource(data)); - }, []); - - const onChange = (event) => { - setSource(event.source); - setTarget(event.target); - }; - - const itemTemplate = (item: Product) => { - return ( -
- {item.name} -
- {item.name} -
- - {item.category} -
-
- \${item.price} -
- ); - }; - - return ( -
- ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - /> -
- ); -} - `, - data: ` -/* ProductService */ -{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: '/bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5 -}, -... - ` - }; - - return ( - <> - -
- ({ className: context.selected ? 'bg-blue-100' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/progressbar/pt/ptdoc.js b/components/doc/progressbar/pt/ptdoc.js deleted file mode 100644 index cdf47c9ca2..0000000000 --- a/components/doc/progressbar/pt/ptdoc.js +++ /dev/null @@ -1,65 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { ProgressBar } from '@/components/lib/progressbar/ProgressBar'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { ProgressBar } from 'primereact/progressbar'; - -export default function PTDemo() { - return ( -
- -
- ); -} - `, - typescript: ` -import React from 'react'; -import { ProgressBar } from 'primereact/progressbar'; - -export default function PTDemo() { - return ( -
- -
- ); -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/progressspinner/pt/ptdoc.js b/components/doc/progressspinner/pt/ptdoc.js deleted file mode 100644 index 4b1a93a44e..0000000000 --- a/components/doc/progressspinner/pt/ptdoc.js +++ /dev/null @@ -1,65 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { ProgressSpinner } from '@/components/lib/progressspinner/ProgressSpinner'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { ProgressSpinner } from 'primereact/progressspinner'; - -export default function PTDemo() { - return ( -
- -
- ); -} - `, - typescript: ` -import React from 'react'; -import { ProgressSpinner } from 'primereact/progressspinner'; - -export default function PTDemo() { - return ( -
- -
- ); -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/radiobutton/pt/ptdoc.js b/components/doc/radiobutton/pt/ptdoc.js deleted file mode 100644 index 899a0b08f5..0000000000 --- a/components/doc/radiobutton/pt/ptdoc.js +++ /dev/null @@ -1,155 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { RadioButton } from '@/components/lib/radiobutton/RadioButton'; -import { useState } from 'react'; - -export function PTDoc(props) { - const categories = [ - { name: 'Accounting', key: 'A' }, - { name: 'Marketing', key: 'M' }, - { name: 'Production', key: 'P' }, - { name: 'Research', key: 'R' } - ]; - const [selectedCategory, setSelectedCategory] = useState(categories[1]); - - const code = { - basic: ` - setSelectedCategory(e.value)} - checked={selectedCategory.key === category.key} - pt={{ - input: { - className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined - } - }} -/> - `, - javascript: ` -import React from 'react'; -import { RadioButton } from "primereact/radiobutton"; - -export default function PTDemo() { - const categories = [ - { name: 'Accounting', key: 'A' }, - { name: 'Marketing', key: 'M' }, - { name: 'Production', key: 'P' }, - { name: 'Research', key: 'R' } - ]; - const [selectedCategory, setSelectedCategory] = useState(categories[1]); - - - return ( -
-
- {categories.map((category) => { - return ( -
- setSelectedCategory(e.value)} - checked={selectedCategory.key === category.key} - pt={{ - input: { - className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined - } - }} - /> - -
- ); - })} -
-
- ) -} - `, - typescript: ` -import React from 'react'; -import { RadioButton } from "primereact/radiobutton"; -import { RadioButton, RadioButtonChangeEvent } from "primereact/radiobutton"; - -interface Category { - name: string; - key: string; -} - -export default function PTDemo() { - const categories = [ - { name: 'Accounting', key: 'A' }, - { name: 'Marketing', key: 'M' }, - { name: 'Production', key: 'P' }, - { name: 'Research', key: 'R' } - ]; - const [selectedCategory, setSelectedCategory] = useState(categories[1]); - - - return ( -
-
- {categories.map((category) => { - return ( -
- setSelectedCategory(e.value)} - checked={selectedCategory.key === category.key} - pt={{ - input: { - className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined - } - }} - /> - -
- ); - })} -
-
- ) -} - ` - }; - - return ( - <> - -
-
- {categories.map((category) => { - return ( -
- setSelectedCategory(e.value)} - checked={selectedCategory.key === category.key} - pt={{ - input: { - className: selectedCategory.key === category.key ? 'bg-orange-500 border-orange-500' : undefined - } - }} - /> - -
- ); - })} -
-
- - - ); -} diff --git a/components/doc/rating/pt/ptdoc.js b/components/doc/rating/pt/ptdoc.js deleted file mode 100644 index 469453e0b4..0000000000 --- a/components/doc/rating/pt/ptdoc.js +++ /dev/null @@ -1,76 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Rating } from '@/components/lib/rating/Rating'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(null); - - const code = { - basic: ` - setValue(e.value)} - pt={{ - onIcon: { className: 'text-orange-400' } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Rating } from "primereact/rating"; - -export default function PTDemo() { - const [value, setValue] = useState(null); - - return ( -
- setValue(e.value)} - pt={{ - onIcon: { className: 'text-orange-400' } - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { Rating, RatingChangeEvent } from "primereact/rating"; - -export default function PTDemo() { - const [value, setValue] = useState(null); - - return ( -
- setValue(e.value)} - pt={{ - onIcon: { className: 'text-orange-400' } - }} - /> -
- ); -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - pt={{ - onIcon: { className: 'text-orange-400' } - }} - /> -
- - - ); -} diff --git a/components/doc/scrollpanel/pt/ptdoc.js b/components/doc/scrollpanel/pt/ptdoc.js deleted file mode 100644 index b352fa9268..0000000000 --- a/components/doc/scrollpanel/pt/ptdoc.js +++ /dev/null @@ -1,118 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { ScrollPanel } from '@/components/lib/scrollpanel/ScrollPanel'; - -export function PTDoc(props) { - const code = { - basic: ` - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa - qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. -

- - `, - javascript: ` -import React from 'react'; -import { ScrollPanel } from 'primereact/scrollpanel'; - -export default function PTDemo() { - return ( -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa - qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. -

- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { ScrollPanel } from 'primereact/scrollpanel'; - -export default function PTDemo() { - return ( -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa - qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. -

- -
- ) -} - ` - }; - - return ( - <> - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. -

-

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa - qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. -

- -
- - - ); -} diff --git a/components/doc/scrolltop/pt/ptdoc.js b/components/doc/scrolltop/pt/ptdoc.js deleted file mode 100644 index 921483e84d..0000000000 --- a/components/doc/scrolltop/pt/ptdoc.js +++ /dev/null @@ -1,98 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { ScrollTop } from '@/components/lib/scrolltop/ScrollTop'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { ScrollTop } from 'primereact/scrolltop'; - -export default function PTDemo() { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur - adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor - augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet - nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus - viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. -

- -
-
- ); -} - `, - typescript: ` -import React from 'react'; -import { ScrollTop } from 'primereact/scrolltop'; - -export default function PTDemo() { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur - adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor - augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet - nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus - viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. -

- -
-
- ); -} - ` - }; - - return ( - <> - -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur - adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor - augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet - nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus - viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. -

- -
-
- - - ); -} diff --git a/components/doc/selectbutton/pt/ptdoc.js b/components/doc/selectbutton/pt/ptdoc.js deleted file mode 100644 index 454b1a8930..0000000000 --- a/components/doc/selectbutton/pt/ptdoc.js +++ /dev/null @@ -1,83 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { SelectButton } from '@/components/lib/selectbutton/SelectButton'; -import { useState } from 'react'; - -export function PTDoc(props) { - const options = ['Off', 'On']; - const [value, setValue] = useState(options[0]); - - const code = { - basic: ` - setValue(e.value)} - options={options} - pt={{ - button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined }) - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { SelectButton } from 'primereact/selectbutton'; - -export default function PTDemo() { - const options = ['Off', 'On']; - const [value, setValue] = useState(options[0]); - - return ( -
- setValue(e.value)} - options={options} - pt={{ - button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined }) - }} - /> -
- ); -} - `, - typescript: ` -import React, { useState } from "react"; -import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton'; - -export default function PTDemo() { - const options: string[] = ['Off', 'On']; - const [value, setValue] = useState(options[0]); - - return ( -
- setValue(e.value)} - options={options} - pt={{ - button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined }) - }} - /> -
- ); -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - options={options} - pt={{ - button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/sidebar/pt/ptdoc.js b/components/doc/sidebar/pt/ptdoc.js deleted file mode 100644 index f9655970f3..0000000000 --- a/components/doc/sidebar/pt/ptdoc.js +++ /dev/null @@ -1,105 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { Sidebar } from '@/components/lib/sidebar/Sidebar'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [visible, setVisible] = useState(false); - const code = { - basic: ` - setVisible(false)} -> -

Sidebar

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- - `, - javascript: ` -import React, { useState } from 'react'; -import { Sidebar } from 'primereact/sidebar'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const [visible, setVisible] = useState(false); - - return ( -
- setVisible(false)} - > -

Sidebar

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- -
- ); -} - `, - typescript: ` -import React, { useState } from 'react'; -import { Sidebar } from 'primereact/sidebar'; -import { Button } from 'primereact/button'; - -export default function PTDemo() { - const [visible, setVisible] = useState(false); - - return ( -
- setVisible(false)} - > -

Sidebar

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- -
- ); -} - ` - }; - - return ( - <> - -
- setVisible(false)} - > -

Sidebar

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. -

- -
- - - ); -} diff --git a/components/doc/skeleton/pt/ptdoc.js b/components/doc/skeleton/pt/ptdoc.js deleted file mode 100644 index 82328a9e97..0000000000 --- a/components/doc/skeleton/pt/ptdoc.js +++ /dev/null @@ -1,61 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Skeleton } from '@/components/lib/skeleton/Skeleton'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { Skeleton } from 'primereact/skeleton'; - -export default function PTDemo() { - return ( -
- -
- ); -} - `, - typescript: ` -import React from 'react'; -import { Skeleton } from 'primereact/skeleton'; - -export default function PTDemo() { - return ( -
- -
- ); -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/slider/pt/ptdoc.js b/components/doc/slider/pt/ptdoc.js deleted file mode 100644 index 2dcdd49498..0000000000 --- a/components/doc/slider/pt/ptdoc.js +++ /dev/null @@ -1,84 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Slider } from '@/components/lib/slider/Slider'; -import { useState } from 'react'; - -export function PTDoc(props) { - const [value, setValue] = useState(null); - - const code = { - basic: ` - setValue(e.value)} - pt={{ - root: { className: 'w-14rem' }, - handle: { className: 'bg-orange-400 border-900' }, - range: { className: 'bg-orange-400' } - }} -/> - `, - javascript: ` -import React, { useState } from "react"; -import { Slider } from "primereact/slider"; - -export default function PTDemo() { - const [value, setValue] = useState(null); - - return ( -
- setValue(e.value)} - pt={{ - root: { className: 'w-14rem' }, - handle: { className: 'bg-orange-400 border-900' }, - range: { className: 'bg-orange-400' } - }} - /> -
- ) -} - `, - typescript: ` -import React, { useState } from "react"; -import { Slider, SliderChangeEvent } from "primereact/slider"; - -export default function PTDemo() { - const [value, setValue] = useState(null); - - return ( -
- setValue(e.value)} - pt={{ - root: { className: 'w-14rem' }, - handle: { className: 'bg-orange-400 border-900' }, - range: { className: 'bg-orange-400' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- setValue(e.value)} - pt={{ - root: { className: 'w-14rem' }, - handle: { className: 'bg-orange-400 border-900' }, - range: { className: 'bg-orange-400' } - }} - /> -
- - - ); -} diff --git a/components/doc/speeddial/pt/ptdoc.js b/components/doc/speeddial/pt/ptdoc.js deleted file mode 100644 index 480a9203f9..0000000000 --- a/components/doc/speeddial/pt/ptdoc.js +++ /dev/null @@ -1,148 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { SpeedDial } from '@/components/lib/speeddial/SpeedDial'; -import { classNames } from '@/components/lib/utils/Utils'; - -export function PTDoc(props) { - const items = [ - { - label: 'Add', - icon: 'pi pi-pencil' - }, - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - } - ]; - - const code = { - basic: ` - ({ - className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible }) - }) - }} - model={items} - radius={80} - direction='down' -/> - `, - javascript: ` -import React, { useRef } from 'react'; -import { SpeedDial } from 'primereact/speeddial'; - -export default function PTDemo() { - const items = [ - { - label: 'Add', - icon: 'pi pi-pencil' - }, - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - } - ]; - - return ( -
-
- ({ - className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible }) - }) - }} - model={items} - radius={80} - direction='down' - - /> -
-
- ) -} - `, - typescript: ` -import React, { useRef } from 'react'; -import { SpeedDial } from 'primereact/speeddial'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Add', - icon: 'pi pi-pencil' - }, - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-trash' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - } - ]; - - return ( -
-
- ({ - className: classNames("mt-2", { "border-1 border-primary surface-border border-round surface-ground": state.visible }) - }) - }} - model={items} - radius={80} - direction='down' - - /> -
-
- ) -} - ` - }; - - return ( - <> - -
-
- ({ - className: classNames('mt-2', { 'border-1 border-primary surface-border border-round surface-ground': state.visible }) - }) - }} - model={items} - radius={80} - direction="down" - /> -
-
- - - ); -} diff --git a/components/doc/splitbutton/pt/ptdoc.js b/components/doc/splitbutton/pt/ptdoc.js deleted file mode 100644 index c087f0486c..0000000000 --- a/components/doc/splitbutton/pt/ptdoc.js +++ /dev/null @@ -1,139 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { SplitButton } from '@/components/lib/splitbutton/SplitButton'; - -export function PTDoc(props) { - const items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - }, - { - label: 'Upload', - icon: 'pi pi-upload' - } - ]; - - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { SplitButton } from 'primereact/splitbutton'; - -export default function PTDemo() { - const items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - }, - { - label: 'Upload', - icon: 'pi pi-upload' - } - ]; - - return ( -
- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { SplitButton } from 'primereact/splitbutton'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'React Website', - icon: 'pi pi-external-link' - }, - { - label: 'Upload', - icon: 'pi pi-upload' - } - ]; - - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/splitter/pt/ptdoc.js b/components/doc/splitter/pt/ptdoc.js deleted file mode 100644 index 412b5c9f1d..0000000000 --- a/components/doc/splitter/pt/ptdoc.js +++ /dev/null @@ -1,59 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter'; - -export function PTDoc(props) { - const code = { - basic: ` - - Panel 1 - Panel 2 - - `, - javascript: ` -import React from 'react'; -import { Splitter, SplitterPanel } from 'primereact/tabview'; - -export default function PTDemo() { - - return ( -
- - Panel 1 - Panel 2 - -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Splitter, SplitterPanel } from 'primereact/tabview'; - -export default function PTDemo() { - - return ( -
- - Panel 1 - Panel 2 - -
- ) -} - ` - }; - - return ( - <> - -
- - Panel 1 - Panel 2 - -
- - - ); -} diff --git a/components/doc/steps/pt/ptdoc.js b/components/doc/steps/pt/ptdoc.js deleted file mode 100644 index 542ed5ea1c..0000000000 --- a/components/doc/steps/pt/ptdoc.js +++ /dev/null @@ -1,111 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Steps } from '@/components/lib/steps/Steps'; - -export function PTDoc(props) { - const items = [ - { - label: 'Personal' - }, - { - label: 'Seat' - }, - { - label: 'Payment' - }, - { - label: 'Confirmation' - } - ]; - - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { Steps } from 'primereact/steps'; - -export default function PTDemo() { - const items = [ - { - label: 'Personal' - }, - { - label: 'Seat' - }, - { - label: 'Payment' - }, - { - label: 'Confirmation' - } - ]; - - return ( -
- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Steps } from 'primereact/steps'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Personal' - }, - { - label: 'Seat' - }, - { - label: 'Payment' - }, - { - label: 'Confirmation' - } - ]; - - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/tabmenu/pt/ptdoc.js b/components/doc/tabmenu/pt/ptdoc.js deleted file mode 100644 index ba71017513..0000000000 --- a/components/doc/tabmenu/pt/ptdoc.js +++ /dev/null @@ -1,112 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { TabMenu } from '@/components/lib/tabmenu/TabMenu'; - -export function PTDoc(props) { - const items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } - ]; - - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { TabMenu } from 'primereact/tabmenu'; - -export default function PTDemo() { - const items = [ - { - label: 'Personal' - }, - { - label: 'Seat' - }, - { - label: 'Payment' - }, - { - label: 'Confirmation' - } - ]; - - return ( -
- -
- ) -} - `, - typescript: ` -import React from 'react'; -import { TabMenu } from 'primereact/tabmenu'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'Personal' - }, - { - label: 'Seat' - }, - { - label: 'Payment' - }, - { - label: 'Confirmation' - } - ]; - - return ( -
- -
- ) -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/tabview/pt/ptdoc.js b/components/doc/tabview/pt/ptdoc.js deleted file mode 100644 index 6eb0887d50..0000000000 --- a/components/doc/tabview/pt/ptdoc.js +++ /dev/null @@ -1,137 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { TabPanel, TabView } from '@/components/lib/tabview/TabView'; - -export function PTDoc(props) { - const tabs = [ - { title: 'Header 1', content: 'Tab 1 Content' }, - { title: 'Header 2', content: 'Tab 2 Content' }, - { title: 'Header 3', content: 'Tab 3 Content' } - ]; - - const panelClassName = (parent, index) => { - if (parent.state.activeIndex === index) { - return 'bg-primary'; - } - }; - - const code = { - basic: ` - - {tabs.map((tab, i) => { - return ( - ({ - className: panelClassName(parent, i) - }) - }} - key={i} header={tab.title}> -

{tab.content}

- - ) - })} - - `, - javascript: ` -import React from 'react'; -import { TabView, TabPanel } from 'primereact/tabview'; - -export default function PTDemo() { - const tabs = [ - { title: 'Header 1', content: 'Tab 1 Content' }, - { title: 'Header 2', content: 'Tab 2 Content' }, - { title: 'Header 3', content: 'Tab 3 Content' } - ]; - - const panelClassName = (parent, index) => { - if (parent.state.activeIndex === index) - return 'bg-primary' - } - - return ( -
- - {tabs.map((tab, i) => { - return ( - ({ - className: panelClassName(parent, i) - }) - }} - key={i} header={tab.title}> -

{tab.content}

- - ) - })} - -
- ) -} - `, - typescript: ` -import React from 'react'; -import { TabView, TabPanel } from 'primereact/tabview'; - -export default function PTDemo() { - const tabs = [ - { title: 'Header 1', content: 'Tab 1 Content' }, - { title: 'Header 2', content: 'Tab 2 Content' }, - { title: 'Header 3', content: 'Tab 3 Content' } - ]; - - const panelClassName = (parent, index) => { - if (parent.state.activeIndex === index) - return 'bg-primary' - } - - return ( -
- - {tabs.map((tab, i) => { - return ( - ({ - className: panelClassName(parent, i) - }) - }} - key={i} header={tab.title}> -

{tab.content}

- - ) - })} - -
- ) -} - ` - }; - - return ( - <> - -
- - {tabs.map((tab, i) => { - return ( - ({ - className: panelClassName(parent, i) - }) - }} - key={i} - header={tab.title} - > -

{tab.content}

- - ); - })} - -
- - - ); -} diff --git a/components/doc/tag/pt/ptdoc.js b/components/doc/tag/pt/ptdoc.js deleted file mode 100644 index a9209a367c..0000000000 --- a/components/doc/tag/pt/ptdoc.js +++ /dev/null @@ -1,63 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Tag } from '@/components/lib/tag/Tag'; - -export function PTDoc(props) { - const code = { - basic: ` - - `, - javascript: ` -import React from 'react'; -import { Tag } from 'primereact/tag'; - -export default function PTDemo() { - return ( -
- -
- ); -} - `, - typescript: ` -import React from 'react'; -import { Tag } from 'primereact/tag'; - -export default function PTDemo() { - return ( -
- -
- ); -} - ` - }; - - return ( - <> - -
- -
- - - ); -} diff --git a/components/doc/terminal/pt/ptdoc.js b/components/doc/terminal/pt/ptdoc.js deleted file mode 100644 index 0b9c1bfa7a..0000000000 --- a/components/doc/terminal/pt/ptdoc.js +++ /dev/null @@ -1,216 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Terminal } from '@/components/lib/terminal/Terminal'; -import { TerminalService } from '@/components/lib/terminalservice/TerminalService'; -import { useEffect } from 'react'; - -export function PTDoc(props) { - const commandHandler = (text) => { - let response; - let argsIndex = text.indexOf(' '); - let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text; - - switch (command) { - case 'date': - response = 'Today is ' + new Date().toDateString(); - break; - - case 'greet': - response = 'Hola ' + text.substring(argsIndex + 1) + '!'; - break; - - case 'random': - response = Math.floor(Math.random() * 100); - break; - - case 'clear': - response = null; - break; - - default: - response = 'Unknown command: ' + command; - break; - } - - if (response) { - TerminalService.emit('response', response); - } else { - TerminalService.emit('clear'); - } - }; - - useEffect(() => { - TerminalService.on('command', commandHandler); - - return () => { - TerminalService.off('command', commandHandler); - }; - }, []); - - const code = { - basic: ` - - `, - javascript: ` -import React, { useEffect } from 'react'; -import { Terminal } from 'primereact/terminal'; -import { TerminalService } from 'primereact/terminalservice'; - -export default function PTDemo() { - const commandHandler = (text) => { - let response; - let argsIndex = text.indexOf(' '); - let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text; - - switch (command) { - case 'date': - response = 'Today is ' + new Date().toDateString(); - break; - - case 'greet': - response = 'Hola ' + text.substring(argsIndex + 1) + '!'; - break; - - case 'random': - response = Math.floor(Math.random() * 100); - break; - - case 'clear': - response = null; - break; - - default: - response = 'Unknown command: ' + command; - break; - } - - if (response) - TerminalService.emit('response', response); - else - TerminalService.emit('clear'); - }; - - useEffect(() => { - TerminalService.on('command', commandHandler); - - return () => { - TerminalService.off('command', commandHandler); - }; - }, []); - - return ( -
-

- Enter "date" to display the current date, "greet {'{0}'}" for a message, "random" to get a random number and "clear" to clear all commands. -

- -
- ); -} - `, - typescript: ` -import React, { useEffect } from 'react'; -import { Terminal } from 'primereact/terminal'; -import { TerminalService } from 'primereact/terminalservice'; - -export default function PTDemo() { - const commandHandler = (text: string) => { - let response: string; - let argsIndex: number = text.indexOf(' '); - let command: string = argsIndex !== -1 ? text.substring(0, argsIndex) : text; - - switch (command) { - case 'date': - response = 'Today is ' + new Date().toDateString(); - break; - - case 'greet': - response = 'Hola ' + text.substring(argsIndex + 1) + '!'; - break; - - case 'random': - response = Math.floor(Math.random() * 100); - break; - - case 'clear': - response = null; - break; - - default: - response = 'Unknown command: ' + command; - break; - } - - if (response) - TerminalService.emit('response', response); - else - TerminalService.emit('clear'); - }; - - useEffect(() => { - TerminalService.on('command', commandHandler); - - return () => { - TerminalService.off('command', commandHandler); - }; - }, []); - - return ( -
-

- Enter "date" to display the current date, "greet {'{0}'}" for a message, "random" to get a random number and "clear" to clear all commands. -

- -
- ); -} - ` - }; - - return ( - <> - -
-

- Enter "date" to display the current date, "greet {'{0}'}" for a message, "random" to get a random number and "clear" to clear all commands. -

- -
- - - ); -} diff --git a/components/doc/tieredmenu/pt/ptdoc.js b/components/doc/tieredmenu/pt/ptdoc.js deleted file mode 100644 index b5b7efadea..0000000000 --- a/components/doc/tieredmenu/pt/ptdoc.js +++ /dev/null @@ -1,451 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu'; - -export function PTDoc(props) { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - const code = { - basic: ` - ({ className: context.active ? 'bg-primary-200' : undefined }) - }} -/> - `, - javascript: ` -import React from 'react'; -import { TieredMenu } from 'primereact/tieredmenu'; - -export default function PTDemo() { - const items = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { TieredMenu } from 'primereact/tieredmenu'; -import { MenuItem } from 'primereact/menuitem'; - -export default function PTDemo() { - const items: MenuItem[] = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] - }, - { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archive', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - } - ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' - } - ]; - - return ( -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- ({ className: context.active ? 'bg-primary-200' : undefined }) - }} - /> -
- - - ); -} diff --git a/components/doc/timeline/pt/ptdoc.js b/components/doc/timeline/pt/ptdoc.js deleted file mode 100644 index 4e01f6042b..0000000000 --- a/components/doc/timeline/pt/ptdoc.js +++ /dev/null @@ -1,98 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Timeline } from '@/components/lib/timeline/Timeline'; - -export function PTDoc(props) { - const events = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - const code = { - basic: ` - item.status} - pt={{ - marker: { className: 'border-orange-400' } - }} -/> - `, - javascript: ` -import React from 'react'; -import { Timeline } from 'primereact/timeline'; - -export default function PTDemo() { - const events = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - return ( -
- item.status} - pt={{ - marker: { className: 'border-orange-400' } - }} - /> -
- ) -} - `, - typescript: ` -import React from 'react'; -import { Timeline } from 'primereact/timeline'; - -interface TimelineEvent { - status?: string; - date?: string; - icon?: string; - color?: string; - image?: string; -} - -export default function PTDemo() { - const events: TimelineEvent[] = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - return ( -
- item.status} - pt={{ - marker: { className: 'border-orange-400' } - }} - /> -
- ) -} - ` - }; - - return ( - <> - -
- item.status} - pt={{ - marker: { className: 'border-orange-400' } - }} - /> -
- - - ); -} diff --git a/components/doc/toast/pt/ptdoc.js b/components/doc/toast/pt/ptdoc.js deleted file mode 100644 index e88cee172c..0000000000 --- a/components/doc/toast/pt/ptdoc.js +++ /dev/null @@ -1,98 +0,0 @@ -import { DocSectionCode } from '@/components/doc/common/docsectioncode'; -import { DocSectionText } from '@/components/doc/common/docsectiontext'; -import { Button } from '@/components/lib/button/Button'; -import { Toast } from '@/components/lib/toast/Toast'; -import { useRef } from 'react'; - -export function PTDoc(props) { - const toast = useRef(null); - - const show = () => { - toast.current.show({ - severity: 'info', - summary: 'Info', - detail: 'Message Content', - pt: { - root: ({ index }) => ({ className: `bg-yellow-${((index > 5 && 5) || index || 1) * 100}` }) - } - }); - }; - - const code = { - basic: ` - ({ className: \`bg-yellow-\${((index > 5 && 5) || index || 1) * 100}\` }) - }} - /> -